From 70aaaab5fcdc81751167982cff0e40272c5f97d6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 27 Oct 2024 09:09:25 -0400
Subject: [PATCH 001/453] update blog posts (#640)

* update blog posts

* Update apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md

Co-authored-by: Conduitry <git@chor.date>

* update YouTube link

---------

Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: Karim Jordan <113807903+karimfromjordan@users.noreply.github.com>
---
 apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md | 2 +-
 apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
index e87439096d..a0d3af931d 100644
--- a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
+++ b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
@@ -87,7 +87,7 @@ For more details, see the [comprehensive Svelte 5 migration guide](/docs/svelte/
 
 ## Our new CLI
 
-Along with a new version of Svelte, we have a new Command Line Interface (CLI), `sv`, to go with it. You can learn all about it in [the `sv` announcement video](https://www.youtube.com/watch?v=fAPFsRP-mbc#t=3h15m40s) and in a forthcoming blog post.
+Along with a new version of Svelte, we have a new Command Line Interface (CLI), `sv`, to go with it. You can learn all about it in [the announcement blog post](sv-the-svelte-cli).
 
 ## What’s next?
 
diff --git a/apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md b/apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md
index 0fd59b0908..f655f255fb 100644
--- a/apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md
+++ b/apps/svelte.dev/content/blog/2024-10-24-sv-the-svelte-cli.md
@@ -12,7 +12,7 @@ One of the most common question we hear is "how do I set up Tailwind on my new p
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="aspect-ratio: 1.777777778; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube.com/embed/fAPFsRP-mbc?si=oD7SoqDd6FGr0uD3&amp;start=11743" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube.com/embed/orYlYg27CiI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>Introducing <code>sv</code> at <a href="https://www.sveltesummit.com/">Svelte Summit Fall 2024</a></figcaption>

From 87f46444e4efccb292ec7345b865b61ee67bf652 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 28 Oct 2024 02:50:33 -0700
Subject: [PATCH 002/453] fix: update tutorial redirects (#671)

---
 apps/learn.svelte.dev/vercel.json | 54 +++++++++++++------------------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/apps/learn.svelte.dev/vercel.json b/apps/learn.svelte.dev/vercel.json
index 0d622fbe27..806baa00c2 100644
--- a/apps/learn.svelte.dev/vercel.json
+++ b/apps/learn.svelte.dev/vercel.json
@@ -95,7 +95,7 @@
 		},
 		{
 			"source": "/tutorial/event-forwarding",
-			"destination": "https://svelte.dev/tutorial/svelte/event-forwarding"
+			"destination": "https://github.com/sveltejs/svelte/blob/ac6d8c0bf4534221818c634286c7c9b1b7fd91d3/documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte"
 		},
 		{
 			"source": "/tutorial/dom-event-forwarding",
@@ -131,47 +131,47 @@
 		},
 		{
 			"source": "/tutorial/marked",
-			"destination": "https://svelte.dev/tutorial/svelte/marked"
+			"destination": "https://svelte.dev/tutorial/svelte/textarea-inputs"
 		},
 		{
 			"source": "/tutorial/onmount",
-			"destination": "https://svelte.dev/tutorial/svelte/onmount"
+			"destination": "https://svelte.dev/docs/svelte/lifecycle-hooks"
 		},
 		{
 			"source": "/tutorial/update",
-			"destination": "https://svelte.dev/tutorial/svelte/update"
+			"destination": "https://svelte.dev/docs/svelte/lifecycle-hooks"
 		},
 		{
 			"source": "/tutorial/elizabot",
-			"destination": "https://svelte.dev/tutorial/svelte/elizabot"
+			"destination": "https://github.com/sveltejs/svelte/blob/ac6d8c0bf4534221818c634286c7c9b1b7fd91d3/documentation/tutorial/07-lifecycle/03-update/text.md"
 		},
 		{
 			"source": "/tutorial/tick",
-			"destination": "https://svelte.dev/tutorial/svelte/tick"
+			"destination": "https://svelte.dev/docs/svelte/lifecycle-hooks#tick"
 		},
 		{
 			"source": "/tutorial/writable-stores",
-			"destination": "https://svelte.dev/tutorial/svelte/writable-stores"
+			"destination": "https://svelte.dev/tutorial/svelte/introducing-stores"
 		},
 		{
 			"source": "/tutorial/auto-subscriptions",
-			"destination": "https://svelte.dev/tutorial/svelte/auto-subscriptions"
+			"destination": "https://svelte.dev/docs/svelte/stores"
 		},
 		{
 			"source": "/tutorial/readable-stores",
-			"destination": "https://svelte.dev/tutorial/svelte/readable-stores"
+			"destination": "https://svelte.dev/docs/svelte/stores"
 		},
 		{
 			"source": "/tutorial/derived-stores",
-			"destination": "https://svelte.dev/tutorial/svelte/derived-stores"
+			"destination": "https://svelte.dev/docs/svelte/stores"
 		},
 		{
 			"source": "/tutorial/custom-stores",
-			"destination": "https://svelte.dev/tutorial/svelte/custom-stores"
+			"destination": "https://svelte.dev/docs/svelte/stores"
 		},
 		{
 			"source": "/tutorial/store-bindings",
-			"destination": "https://svelte.dev/tutorial/svelte/store-bindings"
+			"destination": "https://github.com/sveltejs/svelte/blob/ac6d8c0bf4534221818c634286c7c9b1b7fd91d3/documentation/tutorial/08-stores/06-store-bindings/text.md"
 		},
 		{
 			"source": "/tutorial/tweens",
@@ -219,7 +219,7 @@
 		},
 		{
 			"source": "/tutorial/animate",
-			"destination": "https://svelte.dev/tutorial/svelte/animate"
+			"destination": "https://svelte.dev/tutorial/svelte/animations"
 		},
 		{
 			"source": "/tutorial/actions",
@@ -229,10 +229,6 @@
 			"source": "/tutorial/adding-parameters-to-actions",
 			"destination": "https://svelte.dev/tutorial/svelte/adding-parameters-to-actions"
 		},
-		{
-			"source": "/tutorial/core",
-			"destination": "https://svelte.dev/tutorial/svelte/core"
-		},
 		{
 			"source": "/tutorial/tippy.js",
 			"destination": "https://svelte.dev/tutorial/svelte/tippy.js"
@@ -283,23 +279,23 @@
 		},
 		{
 			"source": "/tutorial/slots",
-			"destination": "https://svelte.dev/tutorial/svelte/slots"
+			"destination": "https://svelte.dev/docs/svelte/legacy-slots"
 		},
 		{
 			"source": "/tutorial/named-slots",
-			"destination": "https://svelte.dev/tutorial/svelte/named-slots"
+			"destination": "https://svelte.dev/docs/svelte/legacy-slots"
 		},
 		{
 			"source": "/tutorial/slot-fallbacks",
-			"destination": "https://svelte.dev/tutorial/svelte/slot-fallbacks"
+			"destination": "https://svelte.dev/docs/svelte/legacy-slots"
 		},
 		{
 			"source": "/tutorial/slot-props",
-			"destination": "https://svelte.dev/tutorial/svelte/slot-props"
+			"destination": "https://svelte.dev/docs/svelte/legacy-slots"
 		},
 		{
 			"source": "/tutorial/optional-slots",
-			"destination": "https://svelte.dev/tutorial/svelte/optional-slots"
+			"destination": "https://svelte.dev/docs/svelte/legacy-$slots"
 		},
 		{
 			"source": "/tutorial/context-api",
@@ -307,11 +303,11 @@
 		},
 		{
 			"source": "/tutorial/svelte-self",
-			"destination": "https://svelte.dev/tutorial/svelte/svelte-self"
+			"destination": "https://svelte.dev/docs/svelte/legacy-svelte-self"
 		},
 		{
 			"source": "/tutorial/svelte-component",
-			"destination": "https://svelte.dev/tutorial/svelte/svelte-component"
+			"destination": "https://svelte.dev/docs/svelte/legacy-svelte-component"
 		},
 		{
 			"source": "/tutorial/svelte-element",
@@ -339,11 +335,11 @@
 		},
 		{
 			"source": "/tutorial/svelte-options",
-			"destination": "https://svelte.dev/tutorial/svelte/svelte-options"
+			"destination": "https://svelte.dev/docs/svelte/svelte-options"
 		},
 		{
 			"source": "/tutorial/svelte-fragment",
-			"destination": "https://svelte.dev/tutorial/svelte/svelte-fragment"
+			"destination": "https://svelte.dev/docs/svelte/legacy-svelte-fragment"
 		},
 		{
 			"source": "/tutorial/sharing-code",
@@ -355,7 +351,7 @@
 		},
 		{
 			"source": "/tutorial/debug",
-			"destination": "https://svelte.dev/tutorial/svelte/debug"
+			"destination": "https://svelte.dev/docs/svelte/@debug"
 		},
 		{
 			"source": "/tutorial/congratulations",
@@ -457,10 +453,6 @@
 			"source": "/tutorial/redirects",
 			"destination": "https://svelte.dev/tutorial/kit/redirects"
 		},
-		{
-			"source": "/tutorial/xx-custom-error-messages",
-			"destination": "https://svelte.dev/tutorial/kit/xx-custom-error-messages"
-		},
 		{
 			"source": "/tutorial/handle",
 			"destination": "https://svelte.dev/tutorial/kit/handle"

From e2ede9c82c53c8def3845a70802a9c2d0e044d22 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 28 Oct 2024 02:52:23 -0700
Subject: [PATCH 003/453] fix: implement redirects for sveltekit types (#648)

another piece of #540
---
 .../src/routes/docs/[...path]/+page.svelte           | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 763e332760..2f1ad1b9d8 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -32,10 +32,18 @@
 			return;
 		}
 
-		const id = hash.toLowerCase().replaceAll(':', '-');
+		// kit/svelte4 replaced `:` character
+		// e.g. we want to redirect progressive-enhancement-use-enhance to Progressive-enhancement-use:enhance
+		// kit docs also had types in URL that we want to replace. e.g.
+		// https://kit.svelte.dev/docs/types#public-types-loadevent
+		// https://kit.svelte.dev/docs/types#private-types-cspdirectives
+		const id = hash
+			.toLowerCase()
+			.replaceAll(':', '-')
+			.replaceAll('public-types-', '')
+			.replaceAll('private-types-', '');
 
 		for (const heading of content.querySelectorAll('[id]')) {
-			// e.g. we want to redirect progressive-enhancement-use-enhance to Progressive-enhancement-use:enhance
 			if (heading.id.toLowerCase().replaceAll(':', '-') === id) {
 				goto(`#${heading.id}`, {
 					replaceState: true

From 05c4dcfdb99635e0c64b434d406702ac7f70a793 Mon Sep 17 00:00:00 2001
From: GwangJin Kim <heygwangjin@gmail.com>
Date: Mon, 28 Oct 2024 19:38:36 +0900
Subject: [PATCH 004/453] fix: change bullet points color and position (#646)

fixes #542

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 packages/site-kit/src/lib/components/Text.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 7a8a77700c..aac3eae31b 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -376,9 +376,9 @@
 			li::before {
 				content: '';
 				position: absolute;
-				top: calc(50% - 0.3rem);
+				top: 1.43rem;
 				left: -1.8rem;
-				background-color: var(--sk-back-5);
+				background-color: var(--sk-text-4);
 				width: 0.6rem;
 				height: 0.6rem;
 				border-radius: 50%;

From 1d2e52dad783b43ee46cd74819085ea48b2e57c8 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:38:49 +0100
Subject: [PATCH 005/453] docs: sync repos (#677)

* docs: sync repos

* fix links
---
 .../docs/kit/20-core-concepts/10-routing.md   | 45 ++++++++++++-------
 .../docs/kit/20-core-concepts/20-load.md      | 35 ++++++++-------
 .../kit/20-core-concepts/30-form-actions.md   | 25 +++++------
 .../20-core-concepts/50-state-management.md   | 18 ++++----
 .../25-build-and-deploy/90-adapter-vercel.md  |  4 +-
 .../kit/30-advanced/10-advanced-routing.md    |  6 +--
 .../content/docs/kit/30-advanced/20-hooks.md  |  6 ++-
 .../docs/kit/30-advanced/65-snapshots.md      |  2 +-
 .../kit/30-advanced/67-shallow-routing.md     |  2 +-
 .../docs/kit/40-best-practices/03-auth.md     | 23 ++++++++++
 .../kit/40-best-practices/05-performance.md   |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md |  6 +--
 .../content/docs/kit/98-reference/26-$lib.md  | 16 ++++++-
 .../content/docs/kit/98-reference/54-types.md |  2 +-
 .../svelte/01-introduction/03-svelte-files.md |  2 +
 .../docs/svelte/02-runes/03-$derived.md       |  2 +
 .../docs/svelte/02-runes/04-$effect.md        |  2 +-
 .../docs/svelte/03-template-syntax/12-use.md  |  2 +-
 .../docs/svelte/06-runtime/02-context.md      |  4 +-
 .../svelte/06-runtime/03-lifecycle-hooks.md   |  9 ++--
 .../svelte/07-misc/07-v5-migration-guide.md   | 18 ++++----
 .../docs/svelte/98-reference/20-svelte.md     |  8 ++--
 .../svelte/98-reference/21-svelte-action.md   |  2 +-
 23 files changed, 152 insertions(+), 89 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 0c48a2b2c2..66d2af54bb 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -37,17 +37,22 @@ A `+page.svelte` component defines a page of your app. By default, pages are ren
 <a href="http://github.com/">Home</a>
 ```
 
+Pages can receive data from `load` functions via the `data` prop.
+
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 </script>
 
 <h1>{data.title}</h1>
 <div>{@html data.content}</div>
 ```
 
+> [!LEGACY] In Svelte 4
+> In Svelte 4, you'd use `export let data` instead
+
 > [!NOTE] Note that SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
 
 ### +page.js
@@ -153,21 +158,29 @@ But in many apps, there are elements that should be visible on _every_ page, suc
 
 To create a layout that applies to every page, make a file called `src/routes/+layout.svelte`. The default layout (the one that SvelteKit uses if you don't bring your own) looks like this...
 
-```html
-<slot></slot>
+```svelte
+<script>
+	let { children } = $props();
+</script>
+
+{@render children()}
 ```
 
-...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `<slot>` for the page content. For example, let's add a nav bar:
+...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:
+
+```svelte
+<!---- file: src/routes/+layout.svelte --->
+<script>
+	let { children } = $props();
+</script>
 
-```html
-/// file: src/routes/+layout.svelte
 <nav>
 	<a href="http://github.com/">Home</a>
 	<a href="http://github.com/about">About</a>
 	<a href="http://github.com/settings">Settings</a>
 </nav>
 
-<slot></slot>
+{@render children()}
 ```
 
 If we create pages for `/`, `/about` and `/settings`...
@@ -196,8 +209,8 @@ We can create a layout that only applies to pages below `/settings` (while inher
 ```svelte
 <!--- file: src/routes/settings/+layout.svelte --->
 <script>
-	/** @type {import('./$types').LayoutData} */
-	export let data;
+	/** @type {{ data: import('./$types').LayoutData, children: import('svelte').Snippet }} */
+	let { data, children } = $props();
 </script>
 
 <h1>Settings</h1>
@@ -208,7 +221,7 @@ We can create a layout that only applies to pages below `/settings` (while inher
 	{/each}
 </div>
 
-<slot></slot>
+{@render children()}
 ```
 
 You can see how `data` is populated by looking at the `+layout.js` example in the next section just below.
@@ -239,8 +252,8 @@ Data returned from a layout's `load` function is also available to all its child
 ```svelte
 <!--- file: src/routes/settings/profile/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 
 	console.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]
 </script>
@@ -370,13 +383,13 @@ export async function fallback({ request }) {
 
 Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
 
-For example, annotating `export let data` with `PageData` (or `LayoutData`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
+For example, annotating `let { data } = $props()` with `PageData` (or `LayoutData`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
 
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index 3e50259a33..9de2b83ead 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -24,14 +24,17 @@ export function load({ params }) {
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 </script>
 
 <h1>{data.post.title}</h1>
 <div>{@html data.post.content}</div>
 ```
 
+> [!LEGACY] In Svelte 4
+> In Svelte 4, you'd use `export let data` instead
+
 Thanks to the generated `$types` module, we get full type safety.
 
 A `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.
@@ -85,13 +88,13 @@ export async function load() {
 ```svelte
 <!--- file: src/routes/blog/[slug]/+layout.svelte --->
 <script>
-	/** @type {import('./$types').LayoutData} */
-	export let data;
+	/** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
+	let { data, children } = $props();
 </script>
 
 <main>
-	<!-- +page.svelte is rendered in this <slot> -->
-	<slot />
+	<!-- +page.svelte is `@render`ed here -->
+	{@render children()}
 </main>
 
 <aside>
@@ -115,13 +118,13 @@ Data returned from layout `load` functions is available to child `+layout.svelte
 <script>
 	+++import { page } from '$app/stores';+++
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 
 +++	// we can access `data.posts` because it's returned from
 	// the parent layout `load` function
 	let index = $derived(data.posts.findIndex(post => post.slug === $page.params.slug));
-	let next = $derived(data.posts[index - 1];)+++
+	let next = $derived(data.posts[index + 1]);+++
 </script>
 
 <h1>{data.post.title}</h1>
@@ -330,7 +333,7 @@ export async function load({ fetch, setHeaders }) {
 }
 ```
 
-Setting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
+Setting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
 
 ## Using parent data
 
@@ -365,8 +368,8 @@ export async function load({ parent }) {
 ```svelte
 <!--- file: src/routes/abc/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 </script>
 
 <!-- renders `1 + 2 = 3` -->
@@ -504,8 +507,8 @@ This is useful for creating skeleton loading states, for example:
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 </script>
 
 <h1>{data.post.title}</h1>
@@ -645,8 +648,8 @@ export async function load({ fetch, depends }) {
 <script>
 	import { invalidate, invalidateAll } from '$app/navigation';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 
 	function rerunLoadFunction() {
 		// any of these will cause the `load` function to rerun
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index deb4ef73ab..5d8c439f86 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -140,11 +140,8 @@ export const actions = {
 ```svelte
 <!--- file: src/routes/login/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
-
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
+	let { data, form } = $props();
 </script>
 
 {#if form?.success}
@@ -154,6 +151,9 @@ export const actions = {
 {/if}
 ```
 
+> [!LEGACY] In Svelte 4
+> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties
+
 ### Validation errors
 
 If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
@@ -339,8 +339,8 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti
 <script>
 	+++import { enhance } from '$app/forms';+++
 
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	/** @type {{ form: import('./$types').ActionData }} */
+	let { form } = $props();
 </script>
 
 <form method="POST" +++use:enhance+++>
@@ -390,8 +390,8 @@ If you return a callback, you may need to reproduce part of the default `use:enh
 <script>
 	import { enhance, +++applyAction+++ } from '$app/forms';
 
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	/** @type {{ form: import('./$types').ActionData }} */
+	let { form } = $props();
 </script>
 
 <form
@@ -427,11 +427,8 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	import { invalidateAll, goto } from '$app/navigation';
 	import { applyAction, deserialize } from '$app/forms';
 
-	/** @type {import('./$types').ActionData} */
-	export let form;
-
-	/** @type {any} */
-	let error;
+	/** @type {{ form: import('./$types').ActionData }} */
+	let { form } = $props();
 
 	/** @param {{ currentTarget: EventTarget & HTMLFormElement}} event */
 	async function handleSubmit(event) {
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index f993f59ca6..be74d59535 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -90,12 +90,14 @@ You might wonder how we're able to use `$page.data` and other [app stores]($app-
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
-	/** @type {import('./$types').LayoutData} */
-	export let data;
+	/** @type {{ data: import('./$types').LayoutData }} */
+	let { data } = $props();
 
 	// Create a store and update it when necessary...
-	const user = writable();
-	$: user.set(data.user);
+	const user = writable(data.user);
+	$effect.pre(() => {
+		user.set(data.user);
+	});
 
 	// ...and add it to the context for child components to access
 	setContext('user', user);
@@ -125,8 +127,8 @@ When you navigate around your application, SvelteKit reuses existing layout and
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 
 	// THIS CODE IS BUGGY!
 	const wordCount = data.content.split(' ').length;
@@ -148,8 +150,8 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	/** @type {{ data: import('./$types').PageData }} */
+	let { data } = $props();
 
 +++	let wordCount = $state(data.content.split(' ').length);
 	let estimatedReadingTime = $derived(wordCount / 250);+++
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index 226d8cb6ca..57867ce7c9 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -140,8 +140,8 @@ export function load() {
 ```svelte
 <!--- file: +layout.svelte --->
 <script>
-	/** @type {import('./$types').LayoutServerData} */
-	export let data;
+	/** @type {{ data: import('./$types').LayoutServerData }} */
+	let { data } = $props();
 </script>
 
 <p>This staging environment was deployed from {data.deploymentGitBranch}.</p>
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
index 26b1be2143..06122648f1 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
@@ -193,7 +193,7 @@ You can also put a `+page` directly inside a `(group)`, for example if `/` shoul
 
 ### Breaking out of layouts
 
-The root layout applies to every page of your app — if omitted, it defaults to `<slot />`. If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups _except_ the routes that should not inherit the common layouts.
+The root layout applies to every page of your app — if omitted, it defaults to `{@render children()}`. If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups _except_ the routes that should not inherit the common layouts.
 
 In the example above, the `/admin` route does not inherit either the `(app)` or `(marketing)` layouts.
 
@@ -260,11 +260,11 @@ Not all use cases are suited for layout grouping, nor should you feel compelled
 <!--- file: src/routes/nested/route/+layout@.svelte --->
 <script>
 	import ReusableLayout from '$lib/ReusableLayout.svelte';
-	export let data;
+	let { data, children } = $props();
 </script>
 
 <ReusableLayout {data}>
-	<slot />
+	{@render children()}
 </ReusableLayout>
 ```
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 74d4c815d8..6decc1cbf4 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -37,7 +37,11 @@ export async function handle({ event, resolve }) {
 
 > [!NOTE] Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.
 
-If unimplemented, defaults to `({ event, resolve }) => resolve(event)`. To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.
+If unimplemented, defaults to `({ event, resolve }) => resolve(event)`.
+
+### locals
+
+To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.
 
 ```js
 /// file: src/hooks.server.js
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md b/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
index 5a55330f0d..cc7477f0fe 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
@@ -11,7 +11,7 @@ To do this, export a `snapshot` object with `capture` and `restore` methods from
 ```svelte
 <!--- file: +page.svelte --->
 <script>
-	let comment = '';
+	let comment = $state('');
 
 	/** @type {import('./$types').Snapshot<string>} */
 	export const snapshot = {
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
index f4f871cf8e..f10edd0ad5 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
@@ -51,7 +51,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 	import Modal from './Modal.svelte';
 	import PhotoPage from './[id]/+page.svelte';
 
-	export let data;
+	let { data } = $props();
 </script>
 
 {#each data.thumbnails as thumbnail}
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
new file mode 100644
index 0000000000..b2b8e07aa8
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
@@ -0,0 +1,23 @@
+---
+title: Auth
+---
+
+Auth refers to authentication and authorization, which are common needs when building a web application. Authentication means verifying that the user is who they say they are based on their provided credentials. Authorization means determining which actions they are allowed to take.
+
+## Sessions vs tokens
+
+After the user has provided their credentials such as a username and password, we want to allow them to use the application without needing to provide their credentials again for future requests. Users are commonly authenticated on subsequent requests with either a session identifier or signed token such as a JSON Web Token (JWT).
+
+Session IDs are most commonly stored in a database. They can be immediately revoked, but require a database query to be made on each request.
+
+In contrast, JWT generally are not checked against a datastore, which means they cannot be immediately revoked. The advantage of this method is improved latency and reduced load on your datastore.
+
+## Integration points
+
+Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks#Server-hooks). If a user is found matching the provided credentials, the user information can be stored in [`locals`](hooks#Server-hooks-handle).
+
+## Guides
+
+[Lucia](https://lucia-next.pages.dev/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
+
+An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-next.pages.dev/) rather than having multiple web frameworks inside their project.
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md b/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
index 390236d9a2..2e358921dc 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
@@ -57,7 +57,7 @@ You can reduce the size of font files by [subsetting](https://web.dev/learn/perf
 
 ### Svelte version
 
-We recommend running the latest version of Svelte. Svelte 4 is smaller and faster than Svelte 3. (The [Svelte 5 preview](https://svelte-5-preview.vercel.app/) is much smaller and faster still, but we don't recommend that you upgrade to this version until it's production ready.)
+We recommend running the latest version of Svelte. Svelte 5 is smaller and faster than Svelte 4, which is smaller and faster than Svelte 3.
 
 ### Packages
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index f690bfa242..863d719093 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -1260,7 +1260,7 @@ export async function load({ depends }) {
 <script>
 	import { invalidate } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	const increase = async () => {
 		await invalidate('increase:count');
@@ -1856,7 +1856,7 @@ locals: App.Locals;
 
 <div class="ts-block-property-details">
 
-Contains custom data that was added to the request within the [`handle hook`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle).
+Contains custom data that was added to the request within the [`server handle hook`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle).
 
 </div>
 </div>
@@ -2451,7 +2451,7 @@ export async function load({ depends }) {
 <script>
 	import { invalidate } from '$app/navigation';
 
-	export let data;
+	let { data } = $props();
 
 	const increase = async () => {
 		await invalidate('increase:count');
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md b/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
index 2feb1a4402..d9262a2954 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
@@ -2,4 +2,18 @@
 title: $lib
 ---
 
-TODO
+SvelteKit automatically makes files under `src/lib` available using the `$lib` import alias. You can change which directory this alias points to in your [config file](configuration#files).
+
+```svelte
+<!--- file: src/lib/Component.svelte --->
+A reusable component
+```
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<script>
+    import Component from '$lib/Component.svelte';
+</script>
+
+<Component />
+```
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index 13b51e7d08..7dc647734d 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -175,7 +175,7 @@ message: string;
 
 ## Locals
 
-The interface that defines `event.locals`, which can be accessed in [hooks](https://svelte.dev/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
+The interface that defines `event.locals`, which can be accessed in server [hooks](https://svelte.dev/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
index d4c223a7ec..a0c0bf5cc9 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
@@ -50,6 +50,8 @@ A `<script>` tag with a `module` attribute runs once when the module first evalu
 
 You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
 
+> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
+
 > [!LEGACY]
 > In Svelte 4, this script tag was created using `<script context="module">`
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index 4f0d70dcc8..96cafeaaea 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -21,6 +21,8 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
 
 As with `$state`, you can mark class fields as `$derived`.
 
+> [!NOTE] Code in Svelte components is only executed once at creation, without the `$derived` rune `double` would maintain it's original value.
+
 ## `$derived.by`
 
 Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index eedca52d9d..07291daa43 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -179,7 +179,7 @@ Apart from the timing, `$effect.pre` works exactly like `$effect`.
 
 ## `$effect.tracking`
 
-The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
+The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):
 
 ```svelte
 <script>
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
index ff50e38cf2..f3db72a772 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
@@ -45,7 +45,7 @@ The action is only called once (but not during server-side rendering) — it wil
 
 ## Typing
 
-The `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action.:
+The `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action:
 
 ```svelte
 <!--- file: App.svelte --->
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 87f254129e..62dd0c6a9e 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -80,9 +80,9 @@ Context is not inherently reactive. If you need reactive values in context then
 ```svelte
 <!--- file: Child.svelte --->
 <script>
-	import { setContext } from 'svelte';
+	import { getContext } from 'svelte';
 
-	const value = setContext('counter');
+	const value = getContext('counter');
 </script>
 
 <p>Count is {value.count}</p>
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index 2585290cfc..23a6629929 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -80,12 +80,13 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 
 ```svelte
 <script>
-	import { beforeUpdate, tick } from 'svelte';
+	import { tick } from 'svelte';
 
-	beforeUpdate(async () => {
+	$effect.pre(() => {
 		console.log('the component is about to update');
-		await tick();
-		console.log('the component just updated');
+		tick().then(
+				console.log('the component just updated');
+		);
 	});
 </script>
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 3a47a9a799..1624755a6b 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -23,7 +23,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
 Nothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.
 
 > [!DETAILS] Why we did this
-> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API in an outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
+> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
 
 ### $: -> $derived/$effect
 
@@ -58,10 +58,10 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 >
 > - `$:` only updated directly before rendering, which meant you could read stale values in-between rerenders
 > - `$:` only ran once per tick, which meant that statements may run less often than you think
-> - `$:` dependencies were determined through static analysis of the dependencies. This worked in most cases, but could break in subtle ways during a refactoring where dependencies would be > for example moved into a function and no longer be visible as a result
-> - `$:` statements were also ordered by using static analysis of the dependencies. In some cases there could be ties and the ordering would be wrong as a result, needing manual > interventions. Ordering could also break while refactoring code and some dependencies no longer being visible as a result.
+> - `$:` dependencies were determined through static analysis of the dependencies. This worked in most cases, but could break in subtle ways during a refactoring where dependencies would be for example moved into a function and no longer be visible as a result
+> - `$:` statements were also ordered by using static analysis of the dependencies. In some cases there could be ties and the ordering would be wrong as a result, needing manual interventions. Ordering could also break while refactoring code and some dependencies no longer being visible as a result.
 >
-> Lastly, it wasn't TypeScript-friendly (our editor tooling had to jump through some hoops to make it valid for TypeScript), which was a blocker for making Svelte's reactivity model truly > universal.
+> Lastly, it wasn't TypeScript-friendly (our editor tooling had to jump through some hoops to make it valid for TypeScript), which was a blocker for making Svelte's reactivity model truly universal.
 >
 > `$derived` and `$effect` fix all of these by
 >
@@ -107,7 +107,7 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
 	export { klass as class};---
 	+++let { class: klass, ...rest } = $props();+++
 </script>
-<button {class} {...---$$restProps---+++rest+++}>click me</button>
+<button class={klass} {...---$$restProps---+++rest+++}>click me</button>
 ```
 
 > [!DETAILS] Why we did this
@@ -319,9 +319,9 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 > - call said dispatch function with a string and possibly a payload
 > - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent`
 >
-> It was always possible to use component callback props, but because you had to listen to dom events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
+> It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
 >
-> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only useable on Dom elements.
+> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only useable on DOM elements.
 >
 > Multiple listeners for the same event are also no longer possible, but it was something of an anti-pattern anyway, since it impedes readability: if there are many attributes, it becomes harder to spot that there are two handlers unless they are right next to each other. It also implies that the two handlers are independent, when in fact something like `event.stopImmediatePropagation()` inside `one` would prevent `two` from being called.
 >
@@ -429,7 +429,7 @@ In Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:
 > - the `let:` syntax was confusing to many people as it _creates_ a variable whereas all other `:` directives _receive_ a variable
 > - the scope of a variable declared with `let:` wasn't clear. In the example above, it may look like you can use the `item` slot prop in the `empty` slot, but that's not true
 > - named slots had to be applied to an element using the `slot` attribute. Sometimes you didn't want to create an element, so we had to add the `<svelte:fragment>` API
-> - named slots could also be applied to a component, which changed the semantics of where `let:` directives are available (even today us maintainers often don't know which way around it > works)
+> - named slots could also be applied to a component, which changed the semantics of where `let:` directives are available (even today us maintainers often don't know which way around it works)
 >
 > Snippets solve all of these problems by being much more readable and clear. At the same time they're more powerful as they allow you to define sections of UI that you can render _anywhere_, not just passing them as props to a component.
 
@@ -441,7 +441,7 @@ We thought the same, which is why we provide a migration script to do most of th
 
 - bump core dependencies in your `package.json`
 - migrate to runes (`let` -> `$state` etc)
-- migrate to event attributes for Dom elements (`on:click` -> `onclick`)
+- migrate to event attributes for DOM elements (`on:click` -> `onclick`)
 - migrate slot creations to render tags (`<slot />` -> `{@render children()}`)
 - migrate slot usages to snippets (`<div slot="x">...</div>` -> `{#snippet x()}<div>...</div>{/snippet}`)
 - migrate obvious component creations (`new Component(...)` -> `mount(Component, ...)`)
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 6e4683ef4f..ca8b72774b 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -683,19 +683,21 @@ type MountOptions<
 	 */
 	target: Document | Element | ShadowRoot;
 	/**
-	 * Optional node inside `target` and when specified, it is used to render the component immediately before it.
+	 * Optional node inside `target`. When specified, it is used to render the component immediately before it.
 	 */
 	anchor?: Node;
 	/**
 	 * Allows the specification of events.
+	 * @deprecated Use callback props instead.
 	 */
 	events?: Record<string, (e: any) => any>;
 	/**
-	 * Used to define context at the component level.
+	 * Can be accessed via `getContext()` at the component level.
 	 */
 	context?: Map<any, any>;
 	/**
-	 * Used to control transition playback on initial render.  The default value is `true` to run transitions.
+	 * Whether or not to play transitions on initial render.
+	 * @default true
 	 */
 	intro?: boolean;
 } & ({} extends Props
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
index 49f8b9f540..5ec1ccf3b4 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
@@ -13,7 +13,7 @@ export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefi
 	// ...
 }
 ```
-`Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` both signal that the action accepts no parameters.
+`Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
 
 You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
 See interface `ActionReturn` for more details.

From ce1ba829f9c7b2357f91dbb0b311c1cc9af76b3b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 08:40:00 -0400
Subject: [PATCH 006/453] pin announcement blog post (#681)

---
 .../content/blog/2024-10-22-svelte-5-is-alive.md   |  1 +
 apps/svelte.dev/src/lib/server/content.ts          | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
index a0d3af931d..7cc8e1e008 100644
--- a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
+++ b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
@@ -3,6 +3,7 @@ title: Svelte 5 is alive
 description: Our biggest release yet
 author: The Svelte team
 authorURL: https://svelte.dev/
+pinnedUntil: 2024-11-15
 ---
 
 After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable.
diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index 718731afe0..faa960ec07 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -24,6 +24,9 @@ function format_date(date: string) {
 	return `${months[+m - 1]} ${+d} ${y}`;
 }
 
+const now = new Date();
+const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
 export const blog_posts = index.blog.children
 	.map((post) => {
 		const authors: Array<{ name: string; url: string }> = [];
@@ -45,10 +48,17 @@ export const blog_posts = index.blog.children
 			...post,
 			date,
 			date_formatted: format_date(date),
-			authors
+			authors,
+			pinned: post.metadata.pinnedUntil ? post.metadata.pinnedUntil > today : false
 		};
 	})
-	.sort((a, b) => (a.date < b.date ? 1 : -1));
+	.sort((a, b) => {
+		if (!!a.pinned !== !!b.pinned) {
+			return a.pinned ? -1 : 1;
+		}
+
+		return a.date < b.date ? 1 : -1;
+	});
 
 /**
  * Create docs index, which is basically the same structure as the original index

From 1fcac45870913c338605941d9c907dfe55c8f59c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 08:43:43 -0400
Subject: [PATCH 007/453] fix menu dead zone (#679)

---
 .../site-kit/src/lib/components/Banner.svelte |  2 +-
 .../site-kit/src/lib/components/Shell.svelte  | 10 +++----
 .../site-kit/src/lib/docs/DocsContents.svelte | 28 -------------------
 packages/site-kit/src/lib/nav/Nav.svelte      |  6 ++--
 .../src/lib/nav/NavContextMenu.svelte         |  3 --
 5 files changed, 9 insertions(+), 40 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index e7e041eba9..436dc05a11 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -99,7 +99,7 @@
 		display: initial;
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.banner {
 			top: initial;
 			bottom: 0;
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index 5ad0a960ea..8478b4484d 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -51,15 +51,15 @@ The main shell of the application. It provides a slot for the top navigation, th
 	main {
 		position: relative;
 		margin: 0 auto;
-		padding-top: var(--sk-nav-height);
-		padding-bottom: var(--sk-banner-height);
+		padding-top: var(--sk-banner-height);
+		padding-bottom: 0;
 		height: 100%;
 	}
 
-	@media (max-width: 799px) {
+	@media (min-width: 832px) {
 		main {
-			padding-top: var(--sk-banner-height);
-			padding-bottom: 0;
+			padding-top: var(--sk-nav-height);
+			padding-bottom: var(--sk-banner-height);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 48e9d1a3d8..0cbd55c80e 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -109,32 +109,6 @@
 		margin: 0;
 	}
 
-	@media (max-width: 831px) {
-		.sidebar {
-			padding: 1rem;
-			padding-top: 1rem;
-		}
-
-		li {
-			margin-bottom: 2.5rem;
-		}
-
-		a {
-			border-radius: var(--sk-border-radius);
-			line-height: 1;
-			vertical-align: center;
-			padding: 0.9rem 0.75rem !important;
-			transition: 0.1s ease;
-			transition-property: background-color, color;
-		}
-
-		a:hover {
-			text-decoration: none;
-
-			background-color: var(--sk-back-4);
-		}
-	}
-
 	@media (min-width: 832px) {
 		.sidebar {
 			columns: 1;
@@ -163,8 +137,6 @@
 			z-index: 2;
 			position: absolute;
 			rotate: 45deg;
-			/** needed to synchronise with transition on `*` in `base.css` */
-			transition: background-color 0.5s var(--quint-out);
 			box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 7537643bb9..170e04f54b 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -217,7 +217,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		font: var(--sk-font-ui-medium);
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			transition: transform 0.2s;
 		}
@@ -305,7 +305,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: block;
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			top: unset;
 			bottom: 0;
@@ -337,7 +337,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.home-link {
 			--padding-right: 2rem;
 			width: 13.2rem;
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 8e94c99b84..8251e2b001 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -108,10 +108,7 @@
 	a {
 		display: flex;
 		align-items: center;
-		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
-		transition: 0.1s ease;
-		transition-property: background-color, color;
 
 		&[aria-current='page'] {
 			color: var(--sk-theme-1) !important;

From 4c72b6cb501aea7ebb71b607a05d812bb88d50db Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 08:43:57 -0400
Subject: [PATCH 008/453] account for banner height in docs sidebar (#678)

---
 packages/site-kit/src/lib/docs/DocsContents.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 0cbd55c80e..271750afc9 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -63,7 +63,7 @@
 	}
 
 	.sidebar {
-		padding: 3.2rem;
+		padding: 3.2rem 3.2rem calc(3.2rem + var(--sk-banner-height)) 3.2rem;
 		font-family: var(--sk-font-family-body);
 		height: 100%;
 		bottom: auto;

From 70dc15985e19e9a054403ea626d1081ef25078bd Mon Sep 17 00:00:00 2001
From: 10x developer <57017344+ddjerqq@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:04:12 +0400
Subject: [PATCH 009/453] docs: use runes instead of old syntax in
 `tutorial/custom-css-transitions` (#682)

update the docs to use RUNES
---
 .../01-svelte/09-transitions/04-custom-css-transitions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
index 979360d582..5c1284a14d 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
@@ -48,7 +48,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 	import { fade } from 'svelte/transition';
 	+++import { elasticOut } from 'svelte/easing';+++
 
-	let visible = true;
+	let visible = $state(true);
 
 	function spin(node, { duration }) {
 		return {

From 670cf48b0c46078ea96aa96cfed0204d6474d01b Mon Sep 17 00:00:00 2001
From: Manuel <30698007+manuel3108@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:24:40 +0100
Subject: [PATCH 010/453] draft: add cli docs (#293)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add cli docs

* tweak sync script

* only ingest types if specified — cli does not use them anywhere

* update content

* fix

* sync

* fix merge issue

* sync

* sync

* reorder

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../docs/cli/10-introduction/10-overview.md   |  19 +++
 .../content/docs/cli/10-introduction/index.md |   3 +
 .../docs/cli/20-commands/10-sv-create.md      |  55 ++++++
 .../content/docs/cli/20-commands/20-sv-add.md |  39 +++++
 .../docs/cli/20-commands/30-sv-check.md       | 161 ++++++++++++++++++
 .../docs/cli/20-commands/40-sv-migrate.md     |  35 ++++
 .../content/docs/cli/20-commands/index.md     |   3 +
 apps/svelte.dev/content/docs/cli/index.md     |   3 +
 apps/svelte.dev/scripts/sync-docs/index.ts    |  29 +++-
 apps/svelte.dev/scripts/sync-docs/types.ts    |   2 +-
 apps/svelte.dev/src/routes/+layout.server.ts  |   8 +-
 11 files changed, 343 insertions(+), 14 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
 create mode 100644 apps/svelte.dev/content/docs/cli/10-introduction/index.md
 create mode 100644 apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
 create mode 100644 apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
 create mode 100644 apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
 create mode 100644 apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
 create mode 100644 apps/svelte.dev/content/docs/cli/20-commands/index.md
 create mode 100644 apps/svelte.dev/content/docs/cli/index.md

diff --git a/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md b/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
new file mode 100644
index 0000000000..9e4b22233e
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
@@ -0,0 +1,19 @@
+---
+title: Overview
+---
+
+The command line interface (CLI), `sv`, is a toolkit for creating and maintaining Svelte applications.
+
+## Usage
+
+The easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):
+
+```bash
+npx sv <command> <args>
+```
+
+If you're inside a project where `sv` is already installed, this will use the local installation, otherwise it will download the latest version and run it without installing it, which is particularly useful for [`sv create`](sv-create).
+
+## Acknowledgements
+
+Thank you to [Christopher Brown](https://github.com/chbrown) who originally owned the `sv` name on npm for graciously allowing it to be used for the Svelte CLI. You can find the original `sv` package at [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv).
diff --git a/apps/svelte.dev/content/docs/cli/10-introduction/index.md b/apps/svelte.dev/content/docs/cli/10-introduction/index.md
new file mode 100644
index 0000000000..8f14f7a7c9
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/10-introduction/index.md
@@ -0,0 +1,3 @@
+---
+title: Introduction
+---
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
new file mode 100644
index 0000000000..36799f94ba
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
@@ -0,0 +1,55 @@
+---
+title: sv create
+---
+
+`sv create` sets up a new SvelteKit project, with options to [setup additional functionality](sv-add#Official-add-ons).
+
+## Usage
+
+```bash
+npx sv create [options] [path]
+```
+
+## Options
+
+<!-- TODO this flag should probably just be '--types', and the options should be 'ts' or 'jsdoc' -->
+
+### `--check-types <option>`
+
+Whether and how to add typechecking to the project:
+
+- `typescript` — default to `.ts` files and use `lang="ts"` for `.svelte` components
+- `checkjs` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types
+- `none` — no typechecking. Not recommended!
+
+### `--template <name>`
+
+Which project template to use:
+
+- `minimal` — barebones scaffolding for your new app
+- `demo` — showcase app with a word guessing game that works without JavaScript
+- `library` — template for a Svelte library, set up with `svelte-package`
+
+### `--no-integrations`
+
+<!-- TODO should be renamed to `--no-addons` -->
+
+Run the command without the interactive add-ons prompt
+
+### `--no-install`
+
+Skip dependency installation
+
+<!-- ## Programmatic interface
+
+```js
+// TODO: this gives type checking errors in the docs site when not commented out. Need to release sv, install it in the site, and uncomment this.
+// import { create } from 'sv';
+
+// // todo: check if this is right
+// create(cwd, {
+// 	// add your options here
+// 	// todo: list available option
+// });
+```
+-->
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
new file mode 100644
index 0000000000..f6bdaeeb09
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -0,0 +1,39 @@
+---
+title: sv add
+---
+
+`sv add` updates an existing project with new functionality.
+
+## Usage
+
+```bash
+npx sv add
+```
+
+```bash
+npx sv add [add-ons]
+```
+
+You can select multiple space-separated add-ons from [the list below](#Official-add-ons), or you can use the interactive prompt.
+
+## Options
+
+- `-C`, `--cwd` — path to the root of your Svelte(Kit) project
+- `--no-preconditions` — skip checking preconditions <!-- TODO what does this mean? -->
+- `--no-install` — skip dependency installation
+
+## Official add-ons
+
+<!-- TODO this should be a separate section, each of these should have their own page -->
+
+- `drizzle`
+- `eslint`
+- `lucia`
+- `mdsvex`
+- `paraglide`
+- `playwright`
+- `prettier`
+- `routify`
+- `storybook`
+- `tailwindcss`
+- `vitest`
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
new file mode 100644
index 0000000000..4ad025e0a1
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
@@ -0,0 +1,161 @@
+---
+title: sv check
+---
+
+`sv check` finds errors and warnings in your project, such as:
+
+- unused CSS
+- accessibility hints
+- JavaScript/TypeScript compiler errors
+
+Requires Node 16 or later.
+
+## Installation
+
+You will need to have the `svelte-check` package installed in your project:
+
+```bash
+npm i -D svelte-check
+```
+
+## Usage
+
+```bash
+npx sv check
+```
+
+## Options
+
+### `--workspace <path>`
+
+Path to your workspace. All subdirectories except `node_modules` and those listed in `--ignore` are checked.
+
+### `--output <format>`
+
+How to display errors and warnings. See [machine-readable output](#Machine-readable-output).
+
+- `human`
+- `human-verbose`
+- `machine`
+- `machine-verbose`
+
+### `--watch`
+
+Keeps the process alive and watches for changes.
+
+### `--preserveWatchOutput`
+
+Prevents the screen from being cleared in watch mode.
+
+### `--tsconfig <path>`
+
+Pass a path to a `tsconfig` or `jsconfig` file. The path can be relative to the workspace path or absolute. Doing this means that only files matched by the `files`/`include`/`exclude` pattern of the config file are diagnosed. It also means that errors from TypeScript and JavaScript files are reported. If not given, will traverse upwards from the project directory looking for the next `jsconfig`/`tsconfig.json` file.
+
+### `--no-tsconfig`
+
+Use this if you only want to check the Svelte files found in the current directory and below and ignore any `.js`/`.ts` files (they will not be type-checked)
+
+### `--ignore <paths>`
+
+Files/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example:
+
+```bash
+npx sv check --ignore "dist,build"
+```
+
+<!-- TODO what the hell does this mean? is it possible to use --tsconfig AND --no-tsconfig? if so what would THAT mean? -->
+
+Only has an effect when used in conjunction with `--no-tsconfig`. When used in conjunction with `--tsconfig`, this will only have effect on the files watched, not on the files that are diagnosed, which is then determined by the `tsconfig.json`.
+
+### `--fail-on-warnings`
+
+If provided, warnings will cause `sv check` to exit with an error code.
+
+### `--compiler-warnings <warnings>`
+
+A quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`:
+
+```bash
+npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
+```
+
+### `--diagnostic-sources <sources>`
+
+A quoted, comma-separated list of sources that should run diagnostics on your code. By default, all are active:
+
+<!-- TODO would be nice to have a clearer definition of what these are -->
+- `js` (includes TypeScript)
+- `svelte`
+- `css`
+
+Example:
+
+```bash
+npx sv check --diagnostic-sources "js,svelte"
+```
+
+### `--threshold <level>`
+
+Filters the diagnostics:
+
+- `warning` (default) — both errors and warnings are shown
+- `error` — only errors are shown
+
+## Troubleshooting
+
+[See the language-tools documentation](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) for more information on preprocessor setup and other troubleshooting.
+
+## Machine-readable output
+
+Setting the `--output` to `machine` or `machine-verbose` will format output in a way that is easier to read
+by machines, e.g. inside CI pipelines, for code quality checks, etc.
+
+Each row corresponds to a new record. Rows are made up of columns that are separated by a
+single space character. The first column of every row contains a timestamp in milliseconds
+which can be used for monitoring purposes. The second column gives us the "row type", based
+on which the number and types of subsequent columns may differ.
+
+The first row is of type `START` and contains the workspace folder (wrapped in quotes). Example:
+
+```
+1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
+```
+
+Any number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argoument.
+
+If the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example:
+
+```
+1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
+1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
+```
+
+If the argument is `machine-verbose` it will tell us the filename, the starting line and column numbers, the ending line and column numbers, the error message, the code of diagnostic, the human-friendly description of the code and the human-friendly source of the diagnostic (eg. svelte/typescript). The filename is relative to the workspace directory. Each diagnostic is represented as an [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) line prefixed by the timestamp of the log. Example:
+
+```
+1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
+1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export
+const prop`","code":"unused-export-let","source":"svelte"}
+```
+
+The output concludes with a `COMPLETED` message that summarizes total numbers of files, errors and warnings that were encountered during the check. Example:
+
+```
+1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
+```
+
+If the application experiences a runtime error, this error will appear as a `FAILURE` record. Example:
+
+```
+1590680328921 FAILURE "Connection closed"
+```
+
+## Credits
+
+- Vue's [VTI](https://github.com/vuejs/vetur/tree/master/vti) which laid the foundation for `svelte-check`
+
+## FAQ
+
+### Why is there no option to only check specific files (for example only staged files)?
+
+`svelte-check` needs to 'see' the whole project for checks to be valid. Suppose you renamed a component prop but didn't update any of the places where the prop is used — the usage sites are all errors now, but you would miss them if checks only ran on changed files.
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
new file mode 100644
index 0000000000..8db5eb3b16
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -0,0 +1,35 @@
+---
+title: sv migrate
+---
+
+`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package.
+
+Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.
+
+## Usage
+
+```bash
+npx sv migrate [migration]
+```
+
+## Migrations
+
+### `svelte-5`
+
+Upgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).
+
+### `svelte-4`
+
+Upgrades a Svelte 3 app to use Svelte 4 ([see migration guide](../svelte/v4-migration-guide)).
+
+### `sveltekit-2`
+
+Upgrades a SvelteKit 1 app to SvelteKit 2 ([see migration guide](../kit/migrating-to-sveltekit-2)).
+
+### `package`
+
+Upgrades a library using `@sveltejs/package` version 1 to version 2. See the [pull request](https://github.com/sveltejs/kit/pull/8922) for more details.
+
+### `routes`
+
+Upgrades a pre-release SvelteKit app to use the filesystem routing conventions in SvelteKit 1. See the [pull request](https://github.com/sveltejs/kit/discussions/5774) for more details.
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/index.md b/apps/svelte.dev/content/docs/cli/20-commands/index.md
new file mode 100644
index 0000000000..877406c009
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/20-commands/index.md
@@ -0,0 +1,3 @@
+---
+title: Commands
+---
diff --git a/apps/svelte.dev/content/docs/cli/index.md b/apps/svelte.dev/content/docs/cli/index.md
new file mode 100644
index 0000000000..5f81cc866a
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/index.md
@@ -0,0 +1,3 @@
+---
+title: CLI
+---
diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 03e6270223..c40e37c674 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -11,12 +11,12 @@ import type { Modules } from '@sveltejs/site-kit/markdown';
 
 interface Package {
 	name: string;
-	local: string;
 	repo: string;
 	branch: string;
 	pkg: string;
 	docs: string;
-	process_modules: (modules: Modules, pkg: Package) => Promise<Modules>;
+	types: string | null;
+	process_modules?: (modules: Modules, pkg: Package) => Promise<Modules>;
 }
 
 const dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -26,11 +26,11 @@ const DOCS = path.join(dirname, '../../content/docs');
 const packages: Package[] = [
 	{
 		name: 'svelte',
-		local: `${REPOS}/svelte`,
 		repo: 'sveltejs/svelte',
 		branch: 'main',
 		pkg: 'packages/svelte',
 		docs: 'documentation/docs',
+		types: 'types',
 		process_modules: async (modules: Modules) => {
 			// Remove $$_attributes from ActionReturn
 			const module_with_ActionReturn = modules.find((m) =>
@@ -50,13 +50,13 @@ const packages: Package[] = [
 	},
 	{
 		name: 'kit',
-		local: `${REPOS}/kit`,
 		repo: 'sveltejs/kit',
 		branch: 'main',
 		pkg: 'packages/kit',
 		docs: 'documentation/docs',
+		types: 'types',
 		process_modules: async (modules, pkg) => {
-			const kit_base = `${pkg.local}/${pkg.pkg}/`;
+			const kit_base = `${REPOS}/${pkg.name}/${pkg.pkg}/`;
 
 			{
 				const code = read_d_ts_file(kit_base + 'src/types/private.d.ts');
@@ -107,6 +107,14 @@ const packages: Package[] = [
 
 			return modules;
 		}
+	},
+	{
+		name: 'cli',
+		repo: 'sveltejs/cli',
+		branch: 'chore/add-docs',
+		pkg: 'packages/cli',
+		docs: 'documentation/docs',
+		types: null
 	}
 ];
 
@@ -132,14 +140,17 @@ async function sync(pkg: Package) {
 	const dest = `${DOCS}/${pkg.name}`;
 
 	fs.rmSync(dest, { force: true, recursive: true });
-	fs.cpSync(`${pkg.local}/${pkg.docs}`, dest, { recursive: true });
+	fs.cpSync(`${REPOS}/${pkg.name}/${pkg.docs}`, dest, { recursive: true });
 	migrate_meta_json(dest);
 
-	const modules = await pkg.process_modules(await read_types(`${pkg.local}/${pkg.pkg}/`, []), pkg);
+	let modules: Modules = [];
 
-	const files = glob(`${dest}/**/*.md`);
+	if (pkg.types !== null) {
+		modules = await read_types(`${REPOS}/${pkg.name}/${pkg.pkg}/${pkg.types}/`, []);
+		await pkg.process_modules?.(modules, pkg);
+	}
 
-	for (const file of files) {
+	for (const file of glob(`${dest}/**/*.md`)) {
 		const content = await preprocess(file, modules);
 
 		fs.writeFileSync(file, content);
diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index f07b24b7ae..2e7f054d75 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -11,7 +11,7 @@ export async function read_types(base: string, modules: Modules) {
 			'svelte/types/compiler/preprocess', // legacy entrypoint
 			'svelte/types/compiler/interfaces' // legacy entrypoint
 		];
-		const code = read_d_ts_file(base + 'types/index.d.ts');
+		const code = read_d_ts_file(base + 'index.d.ts');
 		const node = ts.createSourceFile('index.d.ts', code, ts.ScriptTarget.Latest, true);
 
 		for (const statement of node.statements) {
diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index 14a93383c4..cedf974eec 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -5,8 +5,8 @@ const nav_links: NavigationLink[] = [
 	{
 		title: 'Docs',
 		slug: 'docs',
-		sections: Object.values(docs.topics)
-			.map((topic) => ({
+		sections: [docs.topics['docs/svelte'], docs.topics['docs/kit'], docs.topics['docs/cli']].map(
+			(topic) => ({
 				title: topic.metadata.title,
 				path: '/' + topic.slug, // this will make the UI show a flyout menu for the docs nav entry
 				sections: topic.children.map((section) => ({
@@ -16,8 +16,8 @@ const nav_links: NavigationLink[] = [
 						path: '/' + page.slug
 					}))
 				}))
-			}))
-			.sort((a, b) => a.title.localeCompare(b.title)) // Svelte first
+			})
+		)
 	},
 	{
 		title: 'Tutorial',

From 6298f9389413d2635845f6911a7b99972f9372d3 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 29 Oct 2024 01:44:53 +0700
Subject: [PATCH 011/453] feat: add devtools updates (#673)

* feat: add devtools updates

* add comment to explain the server route

* make it an ISR route, handle errors

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../routes/devtools/updates.json/+server.ts   | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 apps/svelte.dev/src/routes/devtools/updates.json/+server.ts

diff --git a/apps/svelte.dev/src/routes/devtools/updates.json/+server.ts b/apps/svelte.dev/src/routes/devtools/updates.json/+server.ts
new file mode 100644
index 0000000000..a07b62ea7a
--- /dev/null
+++ b/apps/svelte.dev/src/routes/devtools/updates.json/+server.ts
@@ -0,0 +1,42 @@
+import { error, json } from '@sveltejs/kit';
+import type { ServerlessConfig } from '@sveltejs/adapter-vercel';
+
+export const config: ServerlessConfig = {
+	isr: {
+		expiration: 300
+	}
+};
+
+// We manage FF extension by ourselves through GH releases and this acts as `update_url`
+// for our users to automatically update their extension when a new version is released
+// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#update_url
+export async function GET({ fetch }) {
+	const response = await fetch('http://github.com/service/https://api.github.com/repos/sveltejs/svelte-devtools/tags');
+
+	if (!response.ok) {
+		error(response.status);
+	}
+
+	const gh: Array<{ name: string }> = await response.json();
+
+	// v2.2.0 is the first version that has the Firefox extension
+	const tags = gh.reverse().slice(gh.findIndex((t) => t.name === 'v2.2.0'));
+	const base = 'https://github.com/sveltejs/svelte-devtools/releases/download';
+	return json({
+		addons: {
+			'firefox-devtools@svelte.dev': {
+				updates: tags.map(({ name: tag }) => {
+					return {
+						version: tag,
+						update_link: `${base}/${tag}/svelte-devtools.xpi`,
+						applications: requirements[tag] && { gecko: requirements[tag] }
+					};
+				})
+			}
+		}
+	});
+}
+
+const requirements: Record<string, any> = {
+	'v2.2.2': { strict_min_version: '121.0' }
+};

From e72737fb0590baf7b2591c5755abf22a9a968d1e Mon Sep 17 00:00:00 2001
From: Mariusz Gumienny <mkgumienny@gmail.com>
Date: Mon, 28 Oct 2024 21:08:01 +0100
Subject: [PATCH 012/453] docs: replace '(' with '{' in snippet tag (#685)

---
 .../02-snippets/03-implicit-snippet-props/index.md              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md
index 2b68c182e8..4e41f53916 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md
@@ -37,7 +37,7 @@ Any content inside a component that is _not_ part of a declared snippet becomes
 
 ```svelte
 /// file: App.svelte
----(#snippet header()}---
+---{#snippet header()}---
 <header>
 	<span class="color"></span>
 	<span class="name">name</span>

From 49b12d8c6c9229cda18d49c1fe0ac66423367067 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 28 Oct 2024 14:22:18 -0700
Subject: [PATCH 013/453] chore: sveltekit module redirects (#687)

* chore: sveltekit module redirects

* format

* missed this in the initial review - we don't use bold text anywhere any more

* this looks better

* close #684

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/kit.svelte.dev/vercel.json               |   4 -
 .../src/routes/docs/RemovedPage.svelte        |  15 ++-
 .../docs/component-directives/+page.svelte    |   8 +-
 .../docs/element-directives/+page.svelte      |  22 ++--
 .../src/routes/docs/kit/modules/+page.svelte  | 120 ++++++++++++++++++
 .../src/routes/docs/logic-blocks/+page.svelte |   8 +-
 .../routes/docs/special-elements/+page.svelte |  20 +--
 7 files changed, 162 insertions(+), 35 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte

diff --git a/apps/kit.svelte.dev/vercel.json b/apps/kit.svelte.dev/vercel.json
index 4df4ecb39f..6b9ecfbe6e 100644
--- a/apps/kit.svelte.dev/vercel.json
+++ b/apps/kit.svelte.dev/vercel.json
@@ -16,10 +16,6 @@
 			"destination": "https://svelte.dev/docs/kit/load",
 			"permanent": true
 		},
-		{
-			"source": "/docs/modules",
-			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit"
-		},
 		{
 			"source": "/docs/types",
 			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit"
diff --git a/apps/svelte.dev/src/routes/docs/RemovedPage.svelte b/apps/svelte.dev/src/routes/docs/RemovedPage.svelte
index 5d4e6b610a..092e269fa0 100644
--- a/apps/svelte.dev/src/routes/docs/RemovedPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/RemovedPage.svelte
@@ -17,6 +17,10 @@
 			goto(new_docs[1], { replaceState: true });
 		}
 	});
+
+	function render(title: string) {
+		return title.replace(/`(.+?)`/g, (_, text) => `<code>${text.replaceAll('<', '&lt;')}</code>`);
+	}
 </script>
 
 <svelte:head>
@@ -34,8 +38,7 @@
 		<ul>
 			{#each docs.values() as [title, href]}
 				<li>
-					<span style="font-weight:bold">{title}</span> is now
-					<a {href}>here</a>
+					<a {href}>{@html render(title)}</a>
 				</li>
 			{/each}
 		</ul>
@@ -48,5 +51,13 @@
 		max-width: var(--sk-page-content-width);
 		box-sizing: content-box;
 		margin: auto;
+
+		a {
+			text-decoration: none !important;
+
+			&:hover {
+				text-decoration: underline !important;
+			}
+		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/component-directives/+page.svelte b/apps/svelte.dev/src/routes/docs/component-directives/+page.svelte
index 9f7f4e6f07..b62057946c 100644
--- a/apps/svelte.dev/src/routes/docs/component-directives/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/component-directives/+page.svelte
@@ -4,11 +4,11 @@
 	const docs = new Map([
 		[
 			'on-eventname ',
-			['on:eventname', '/docs/svelte/v5-migration-guide#Event-changes-Component-events']
+			['`on:eventname`', '/docs/svelte/v5-migration-guide#Event-changes-Component-events']
 		],
-		['style-props', ['--style-props', '/docs/svelte/custom-properties']],
-		['bind-property ', ['bind:property', '/docs/svelte/bind#bind:property-for-components']],
-		['bind-this ', ['bind:this', '/docs/svelte/bind#bind:this']]
+		['style-props', ['`--style-props`', '/docs/svelte/custom-properties']],
+		['bind-property ', ['`bind:property`', '/docs/svelte/bind#bind:property-for-components']],
+		['bind-this ', ['`bind:this`', '/docs/svelte/bind#bind:this']]
 	]);
 </script>
 
diff --git a/apps/svelte.dev/src/routes/docs/element-directives/+page.svelte b/apps/svelte.dev/src/routes/docs/element-directives/+page.svelte
index b99e5abc28..459b5e8797 100644
--- a/apps/svelte.dev/src/routes/docs/element-directives/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/element-directives/+page.svelte
@@ -2,21 +2,21 @@
 	import RemovedPage from '../RemovedPage.svelte';
 
 	const docs = new Map([
-		['on-eventname ', ['on:eventname', '/docs/svelte/basic-markup#Events']],
-		['bind-property', ['bind:property', '/docs/svelte/bind']],
-		['binding-select-value ', ['Binding <select> value', '/docs/svelte/bind#select-bind:value']],
+		['on-eventname ', ['`on:eventname`', '/docs/svelte/basic-markup#Events']],
+		['bind-property', ['`bind:property`', '/docs/svelte/bind']],
+		['binding-select-value ', ['Binding `<select>` value', '/docs/svelte/bind#select-bind:value']],
 		['media-element-bindings ', ['Media element bindings', '/docs/svelte/bind#audio']],
 		['image-element-bindings ', ['Image element bindings', '/docs/svelte/bind#img']],
 		[
 			'block-level-element-bindings ',
 			['Block-level element bindings', '/docs/svelte/bind#Dimensions']
 		],
-		['bind-group ', ['bind:group', '/docs/svelte/bind#input-bind:group']],
-		['bind-this ', ['bind:this', '/docs/svelte/bind#bind:this']],
-		['class-name ', ['class:name', '/docs/svelte/class']],
-		['style-property ', ['style:property', '/docs/svelte/style']],
-		['use-action', ['use:action', '/docs/svelte/use']],
-		['transition-fn ', ['transition:fn', '/docs/svelte/transition']],
+		['bind-group ', ['`bind:group`', '/docs/svelte/bind#input-bind:group']],
+		['bind-this ', ['`bind:this`', '/docs/svelte/bind#bind:this']],
+		['class-name ', ['`class:name`', '/docs/svelte/class']],
+		['style-property ', ['`style:property`', '/docs/svelte/style']],
+		['use-action', ['`use:action`', '/docs/svelte/use']],
+		['transition-fn ', ['`transition:fn`', '/docs/svelte/transition']],
 		[
 			'transition-parameters ',
 			['Transition parameters', '/docs/svelte/transition#Transition-parameters']
@@ -26,8 +26,8 @@
 			['Custom transition functions', '/docs/svelte/transition#Custom-transition-functions']
 		],
 		['transition-events ', ['Transition events', '/docs/svelte/transition#Transition-events']],
-		['in-fn-out-fn ', ['in:fn/out:fn', '/docs/svelte/in-and-out']],
-		['animate-fn ', ['animate:fn', '/docs/svelte/animate']],
+		['in-fn-out-fn ', ['`in:fn`/`out:fn`', '/docs/svelte/in-and-out']],
+		['animate-fn ', ['`animate:fn`', '/docs/svelte/animate']],
 		[
 			'animation-parameters ',
 			['Animation Parameters', '/docs/svelte/animate#Animation-Parameters']
diff --git a/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte b/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte
new file mode 100644
index 0000000000..81eb6358b7
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte
@@ -0,0 +1,120 @@
+<script>
+	import RemovedPage from '../../RemovedPage.svelte';
+
+	const docs = new Map([
+		[
+			'$app-environment-browser',
+			['`$app/environment#browser`', '/docs/kit/$app-environment#browser']
+		],
+		[
+			'$app-environment-building',
+			['`$app/environment#building`', '/docs/kit/$app-environment#building']
+		],
+		['$app-environment-dev', ['`$app/environment#dev`', '/docs/kit/$app-environment#dev']],
+		[
+			'$app-environment-version',
+			['`$app/environment#version`', '/docs/kit/$app-environment#version']
+		],
+		['$app-forms-applyaction', ['`$app/forms#applyAction`', '/docs/kit/$app-forms#applyAction']],
+		['$app-forms-deserialize', ['`$app/forms#deserialize`', '/docs/kit/$app-forms#deserialize']],
+		['$app-forms-enhance', ['`$app/forms#enhance`', '/docs/kit/$app-forms#enhance']],
+		[
+			'$app-navigation-afternavigate',
+			['`$app/navigation#afternavigate`', '/docs/kit/$app-navigation#afterNavigate']
+		],
+		[
+			'$app-navigation-beforenavigate',
+			['`$app/navigation#beforeNavigate`', '/docs/kit/$app-navigation#beforeNavigate']
+		],
+		[
+			'$app-navigation-disablescrollhandling',
+			['`$app/navigation#disableScrollHandling`', '/docs/kit/$app-navigation#disableScrollHandling']
+		],
+		['$app-navigation-goto', ['`$app/navigation#goto`', '/docs/kit/$app-navigation#goto']],
+		[
+			'$app-navigation-invalidate',
+			['`$app/navigation#invalidate`', '/docs/kit/$app-navigation#invalidate']
+		],
+		[
+			'$app-navigation-invalidateall',
+			['`$app/navigation#invalidateAll`', '/docs/kit/$app-navigation#invalidateAll']
+		],
+		[
+			'$app-navigation-onnavigate',
+			['`$app/navigation#onNavigate`', '/docs/kit/$app-navigation#onNavigate']
+		],
+		[
+			'$app-navigation-preloadcode',
+			['`$app/navigation#preloadCode`', '/docs/kit/$app-navigation#preloadCode']
+		],
+		[
+			'$app-navigation-preloaddata',
+			['`$app/navigation#preloadData`', '/docs/kit/$app-navigation#preloadData']
+		],
+		[
+			'$app-navigation-pushstate',
+			['`$app/navigation#pushState`', '/docs/kit/$app-navigation#pushState']
+		],
+		[
+			'$app-navigation-replacestate',
+			['`$app/navigation#replaceState`', '/docs/kit/$app-navigation#replaceState']
+		],
+		['$app-paths-assets', ['`$app/paths#assets`', '/docs/kit/$app-paths#assets']],
+		['$app-paths-base', ['`$app/paths#base`', '/docs/kit/$app-paths#base']],
+		['$app-paths-resolveroute', ['`$app-paths#resolveRoute`', '/docs/kit/$app-paths#resolveRoute']],
+		['$app-server-read', ['`$app/paths#read`', '/docs/kit/$app-paths#read']],
+		['$app-stores-getstores', ['`$app/stores#getStores`', '/docs/kit/$app-stores#getStores']],
+		['$app-stores-navigating', ['`$app/stores#assets`', '/docs/kit/$app-stores#assets']],
+		['$app-stores-page', ['`$app/stores#page`', '/docs/kit/$app-stores#page']],
+		['$app-stores-updated', ['`$app/stores#updated`', '/docs/kit/$app-stores#updated']],
+		['$lib-$lib-server', ['`$lib`', '/docs/kit/$lib']],
+		['$service-worker-base', ['`$service-worker#base`', '/docs/kit/$service-worker#base']],
+		['$service-worker-build', ['`$service-worker#build`', '/docs/kit/$service-worker#build']],
+		['$service-worker-files', ['`$service-worker#files`', '/docs/kit/$service-worker#files']],
+		[
+			'$service-worker-prerendered',
+			['`$service-worker#prerendered`', '/docs/kit/$service-worker#prerendered']
+		],
+		['$service-worker-version', ['`$service-worker#version`', '/docs/kit/$service-worker#version']],
+		['sveltejs-kit-version', ['`@sveltejs/kit#VERSION`', '/@sveltejs-kit#VERSION']],
+		['sveltejs-kit-error', ['`@sveltejs/kit#error`', '/@sveltejs-kit#error']],
+		['sveltejs-kit-fail', ['`@sveltejs/kit#fail`', '/@sveltejs-kit#fail']],
+		['sveltejs-kit-ishttperror', ['`@sveltejs/kit#isHttpError`', '/@sveltejs-kit#isHttpError']],
+		['sveltejs-kit-isredirect', ['`@sveltejs/kit#isRedirect`', '/@sveltejs-kit#isRedirect']],
+		['sveltejs-kit-json', ['`@sveltejs/kit#json`', '/@sveltejs-kit#json']],
+		['sveltejs-kit-redirect', ['`@sveltejs/kit#redirect`', '/@sveltejs-kit#redirect']],
+		['sveltejs-kit-text', ['`@sveltejs/kit#text`', '/@sveltejs-kit#text']],
+		[
+			'sveltejs-kit-hooks-sequence',
+			['`@sveltejs/kit/hooks#sequence`', '/docs/kit/@sveltejs-kit-hooks#sequence']
+		],
+		[
+			'sveltejs-kit-node-createreadablestream',
+			[
+				'`@sveltejs/kit/node#createReadableStream`',
+				'/docs/kit/@sveltejs-kit-node#createReadableStream'
+			]
+		],
+		[
+			'sveltejs-kit-node-getrequest',
+			['`@sveltejs/kit/node#getRequest`', '/docs/kit/@sveltejs-kit-node#getRequest']
+		],
+		[
+			'sveltejs-kit-node-setresponse',
+			['`@sveltejs/kit/node#setResponse`', '/docs/kit/@sveltejs-kit-node#setResponse']
+		],
+		[
+			'sveltejs-kit-node-polyfills-installpolyfills',
+			[
+				'`@sveltejs/kit/node/polyfills#installPolyfills`',
+				'/docs/kit/@sveltejs-kit-node-polyfills#installPolyfills'
+			]
+		],
+		[
+			'sveltejs-kit-vite-sveltekit',
+			['`@sveltejs/kit/vite#sveltekit`', '/docs/kit/@sveltejs-kit-vite#sveltekit']
+		]
+	]);
+</script>
+
+<RemovedPage {docs} />
diff --git a/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte b/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte
index afbd312ecb..04f076dc5b 100644
--- a/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte
@@ -2,10 +2,10 @@
 	import RemovedPage from '../RemovedPage.svelte';
 
 	const docs = new Map([
-		['if', ['{#if ...}', '/docs/svelte/if']],
-		['each', ['{#each ...}', '/docs/svelte/each']],
-		['await', ['{#key ...}', '/docs/svelte/await']],
-		['key', ['{#await ...}', '/docs/svelte/key']]
+		['if', ['`{#if ...}`', '/docs/svelte/if']],
+		['each', ['`{#each ...}`', '/docs/svelte/each']],
+		['await', ['`{#await ...}`', '/docs/svelte/await']],
+		['key', ['`{#key ...}`', '/docs/svelte/key']]
 	]);
 </script>
 
diff --git a/apps/svelte.dev/src/routes/docs/special-elements/+page.svelte b/apps/svelte.dev/src/routes/docs/special-elements/+page.svelte
index 289e81740c..5bcdc43593 100644
--- a/apps/svelte.dev/src/routes/docs/special-elements/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/special-elements/+page.svelte
@@ -2,16 +2,16 @@
 	import RemovedPage from '../RemovedPage.svelte';
 
 	const docs = new Map([
-		['slot ', ['<slot>', '/docs/svelte/legacy-slots']],
-		['svelte-self', ['<svelte:self>', '/docs/svelte/legacy-svelte-self']],
-		['svelte-component ', ['<svelte:component>', '/docs/svelte/legacy-svelte-component']],
-		['svelte-element ', ['<svelte:element>', '/docs/svelte/svelte-element']],
-		['svelte-window ', ['<svelte:window>', '/docs/svelte/svelte-window']],
-		['svelte-document ', ['<svelte:document>', '/docs/svelte/svelte-document']],
-		['svelte-body ', ['<svelte:body>', '/docs/svelte/svelte-body']],
-		['svelte-head ', ['<svelte:head>', '/docs/svelte/svelte-head']],
-		['svelte-options ', ['<svelte:options>', '/docs/svelte/svelte-options']],
-		['svelte-fragment ', ['<svelte:fragment>', '/docs/svelte/legacy-svelte-fragment']]
+		['slot ', ['`<slot>`', '/docs/svelte/legacy-slots']],
+		['svelte-self', ['`<svelte:self>`', '/docs/svelte/legacy-svelte-self']],
+		['svelte-component ', ['`<svelte:component>`', '/docs/svelte/legacy-svelte-component']],
+		['svelte-element ', ['`<svelte:element>`', '/docs/svelte/svelte-element']],
+		['svelte-window ', ['`<svelte:window>`', '/docs/svelte/svelte-window']],
+		['svelte-document ', ['`<svelte:document>`', '/docs/svelte/svelte-document']],
+		['svelte-body ', ['`<svelte:body>`', '/docs/svelte/svelte-body']],
+		['svelte-head ', ['`<svelte:head>`', '/docs/svelte/svelte-head']],
+		['svelte-options ', ['`<svelte:options>`', '/docs/svelte/svelte-options']],
+		['svelte-fragment ', ['`<svelte:fragment>`', '/docs/svelte/legacy-svelte-fragment']]
 	]);
 </script>
 

From 47bd88b2f89ff2cdd1322a7fd9e03bc88d8082f1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 18:25:16 -0400
Subject: [PATCH 014/453] move diagnostics logic into workspace, expose
 workspace.current_compiled (#689)

---
 packages/editor/src/lib/Editor.svelte       | 45 +----------------
 packages/editor/src/lib/Workspace.svelte.ts | 54 +++++++++++++++++++++
 packages/repl/src/lib/Output/Output.svelte  |  2 +-
 packages/repl/src/lib/Repl.svelte           |  4 +-
 4 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 1635daadbb..ed6c11d71b 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -2,7 +2,6 @@
 	import { BROWSER } from 'esm-env';
 	import { setDiagnostics } from '@codemirror/lint';
 	import { EditorView } from '@codemirror/view';
-	import type { Diagnostic } from '@codemirror/lint';
 	import { Workspace, type File } from './Workspace.svelte.js';
 	import './codemirror.css';
 
@@ -34,50 +33,8 @@
 		};
 	});
 
-	// TODO move into workspace
 	$effect(() => {
-		const diagnostics: Diagnostic[] = [];
-
-		const error = workspace.compiled[workspace.current.name]?.error;
-		const current_warnings = workspace.compiled[workspace.current.name]?.result?.warnings ?? [];
-
-		if (error) {
-			diagnostics.push({
-				severity: 'error',
-				from: error.position![0],
-				to: error.position![1],
-				message: error.message,
-				renderMessage: () => {
-					const span = document.createElement('span');
-					span.innerHTML = `${error.message
-						.replace(/&/g, '&amp;')
-						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
-
-					return span;
-				}
-			});
-		}
-
-		for (const warning of current_warnings) {
-			diagnostics.push({
-				severity: 'warning',
-				from: warning.start!.character,
-				to: warning.end!.character,
-				message: warning.message,
-				renderMessage: () => {
-					const span = document.createElement('span');
-					span.innerHTML = `${warning.message
-						.replace(/&/g, '&amp;')
-						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
-
-					return span;
-				}
-			});
-		}
-
-		const transaction = setDiagnostics(editor_view.state, diagnostics);
+		const transaction = setDiagnostics(editor_view.state, workspace.diagnostics);
 		editor_view.dispatch(transaction);
 	});
 </script>
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index b687c921af..8a730c23d3 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -13,6 +13,7 @@ import { indentWithTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
 import { theme } from './theme';
 import { untrack } from 'svelte';
+import type { Diagnostic } from '@codemirror/lint';
 
 export interface File {
 	type: 'file';
@@ -102,6 +103,51 @@ export class Workspace {
 	states = new Map<string, EditorState>();
 	#view: EditorView | null = null;
 
+	diagnostics = $derived.by(() => {
+		const diagnostics: Diagnostic[] = [];
+
+		const error = this.current_compiled?.error;
+		const warnings = this.current_compiled?.result?.warnings ?? [];
+
+		if (error) {
+			diagnostics.push({
+				severity: 'error',
+				from: error.position![0],
+				to: error.position![1],
+				message: error.message,
+				renderMessage: () => {
+					const span = document.createElement('span');
+					span.innerHTML = `${error.message
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
+
+					return span;
+				}
+			});
+		}
+
+		for (const warning of warnings) {
+			diagnostics.push({
+				severity: 'warning',
+				from: warning.start!.character,
+				to: warning.end!.character,
+				message: warning.message,
+				renderMessage: () => {
+					const span = document.createElement('span');
+					span.innerHTML = `${warning.message
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
+
+					return span;
+				}
+			});
+		}
+
+		return diagnostics;
+	});
+
 	constructor(
 		files: Item[],
 		{
@@ -141,6 +187,14 @@ export class Workspace {
 		return this.#current;
 	}
 
+	get current_compiled() {
+		if (this.#current.name in this.compiled) {
+			return this.compiled[this.#current.name];
+		}
+
+		return null;
+	}
+
 	add(item: Item) {
 		this.#create_directories(item);
 		this.#files = this.#files.concat(item);
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index f85ef40a32..809498ecd2 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -61,7 +61,7 @@
 
 	let markdown = $derived(is_markdown ? (marked.parse(workspace.current!.contents) as string) : '');
 
-	let current = $derived(workspace.compiled[workspace.current.name!]);
+	let current = $derived(workspace.current_compiled);
 
 	// TODO this effect is a bit of a code smell
 	$effect(() => {
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 419d76e4e7..2137d76454 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -154,10 +154,10 @@
 
 	let runes = $derived(
 		workspace.current.name.endsWith('.svelte.js') ||
-			(workspace.compiled[workspace.current.name!]?.result?.metadata.runes ?? false)
+			(workspace.current_compiled?.result?.metadata.runes ?? false)
 	);
 
-	let migration = $derived(workspace.compiled[workspace.current.name!]?.migration);
+	let migration = $derived(workspace.current_compiled?.migration);
 	let can_migrate = $derived(migration ? migration.code !== workspace.current?.contents : false);
 </script>
 

From 0c6b6198a8b73df543bf18be2917ecd7368f8142 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 19:48:19 -0400
Subject: [PATCH 015/453] add modern AST toggle (#692)

* add AST toggle UI

* wire it up

* migrate AstNode.svelte

* lint
---
 packages/editor/src/lib/Workspace.svelte.ts   |  4 +-
 packages/repl/src/lib/Output/AstNode.svelte   | 93 +++++++++++--------
 packages/repl/src/lib/Output/AstView.svelte   | 35 ++++++-
 packages/repl/src/lib/Output/Output.svelte    |  6 +-
 .../src/lib/components/Checkbox.svelte        |  3 +-
 5 files changed, 93 insertions(+), 48 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 8a730c23d3..8d6be150f5 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -78,6 +78,7 @@ const default_extensions = [
 interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
+	modernAst: boolean;
 }
 
 export class Workspace {
@@ -87,7 +88,8 @@ export class Workspace {
 
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
-		dev: false
+		dev: false,
+		modernAst: true
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 302721b04f..a1c02e1c80 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -1,55 +1,72 @@
 <script lang="ts">
+	import AstNode from './AstNode.svelte';
 	import { get_repl_context } from '../context';
 	import { tick } from 'svelte';
 	import type { CompileResult } from 'svelte/compiler';
 
 	type Ast = CompileResult['ast'];
 
-	export let key = '';
-	export let value: Ast;
-	export let collapsed = true;
-	export let path_nodes: Ast[] = [];
-	export let autoscroll = true;
+	interface Props {
+		key?: string;
+		value: Ast;
+		collapsed?: boolean;
+		path_nodes?: Ast[];
+		autoscroll?: boolean;
+	}
+
+	let {
+		key = '',
+		value,
+		collapsed = $bindable(true),
+		path_nodes = [],
+		autoscroll = true
+	}: Props = $props();
 
 	const { toggleable } = get_repl_context();
 
-	let list_item_el: HTMLLIElement;
+	let list_item_el = $state() as HTMLLIElement;
 
-	$: is_root = path_nodes[0] === value;
-	$: is_leaf = path_nodes[path_nodes.length - 1] === value;
-	$: is_ast_array = Array.isArray(value);
-	$: is_collapsable = value && typeof value === 'object';
-	$: is_markable =
+	let is_root = $derived(path_nodes[0] === value);
+	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
+	let is_ast_array = $derived(Array.isArray(value));
+	let is_collapsable = $derived(value && typeof value === 'object');
+	let is_markable = $derived(
 		is_collapsable &&
-		'start' in value &&
-		'end' in value &&
-		typeof value.start === 'number' &&
-		typeof value.end === 'number';
-	$: key_text = key ? `${key}:` : '';
+			'start' in value &&
+			'end' in value &&
+			typeof value.start === 'number' &&
+			typeof value.end === 'number'
+	);
+	let key_text = $derived(key ? `${key}:` : '');
+
+	let preview_text = $state('');
 
-	let preview_text = '';
-	$: {
-		if (!is_collapsable || !collapsed) break $;
+	$effect(() => {
+		if (!is_collapsable || !collapsed) return;
 
 		if (is_ast_array) {
-			if (!('length' in value)) break $;
+			if (!('length' in value)) return;
 
 			preview_text = `[ ${value.length} element${value.length === 1 ? '' : 's'} ]`;
 		} else {
 			preview_text = `{ ${Object.keys(value).join(', ')} }`;
 		}
-	}
-
-	$: collapsed = !path_nodes.includes(value);
-
-	$: if (autoscroll && is_leaf && !$toggleable) {
-		// wait for all nodes to render before scroll
-		tick().then(() => {
-			if (list_item_el) {
-				list_item_el.scrollIntoView();
-			}
-		});
-	}
+	});
+
+	$effect(() => {
+		collapsed = !path_nodes.includes(value);
+	});
+
+	$effect(() => {
+		if (autoscroll && is_leaf && !$toggleable) {
+			// wait for all nodes to render before scroll
+			tick().then(() => {
+				if (list_item_el) {
+					list_item_el.scrollIntoView();
+				}
+			});
+		}
+	});
 
 	function handle_mark_text(e: MouseEvent | FocusEvent) {
 		if (is_markable) {
@@ -79,12 +96,12 @@
 <li
 	bind:this={list_item_el}
 	class:marked={!is_root && is_leaf}
-	on:mouseover={handle_mark_text}
-	on:focus={handle_mark_text}
-	on:mouseleave={handle_unmark_text}
+	onmouseover={handle_mark_text}
+	onfocus={handle_mark_text}
+	onmouseleave={handle_unmark_text}
 >
 	{#if !is_root && is_collapsable}
-		<button class="ast-toggle" class:open={!collapsed} on:click={() => (collapsed = !collapsed)}>
+		<button class="ast-toggle" class:open={!collapsed} onclick={() => (collapsed = !collapsed)}>
 			{key_text}
 		</button>
 	{:else if key_text}
@@ -92,14 +109,14 @@
 	{/if}
 	{#if is_collapsable}
 		{#if collapsed && !is_root}
-			<button class="preview" on:click={() => (collapsed = !collapsed)}>
+			<button class="preview" onclick={() => (collapsed = !collapsed)}>
 				{preview_text}
 			</button>
 		{:else}
 			<span>{is_ast_array ? '[' : '{'}</span>
 			<ul>
 				{#each Object.entries(value) as [k, v]}
-					<svelte:self key={is_ast_array ? '' : k} value={v} {path_nodes} {autoscroll} />
+					<AstNode key={is_ast_array ? '' : k} value={v} {path_nodes} {autoscroll} />
 				{/each}
 			</ul>
 			<span>{is_ast_array ? ']' : '}'}</span>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index ae469f1cea..b1cacf4af3 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
+	import { Checkbox } from '@sveltejs/site-kit/components';
 	import Message from '../Message.svelte';
 	import AstNode from './AstNode.svelte';
 	import type { CompileResult } from 'svelte/compiler';
+	import type { Workspace } from 'editor';
 
 	type Ast = CompileResult['ast'];
 
-	export let ast: Ast;
-	export let autoscroll = true;
+	interface Props {
+		workspace: Workspace;
+		ast: Ast;
+		autoscroll?: boolean;
+	}
+
+	let { workspace, ast, autoscroll = true }: Props = $props();
 
 	// $cursor_index may go over the max since ast computation is usually slower.
 	// clamping this helps prevent the collapse view flashing
@@ -14,7 +21,7 @@
 	let max_cursor_index = 0;
 	// $: max_cursor_index = !ast ? $cursorIndex : Math.min($cursorIndex, get_ast_max_end(ast));
 
-	$: path_nodes = find_deepest_path(max_cursor_index, [ast]) || [];
+	let path_nodes = $derived(find_deepest_path(max_cursor_index, [ast]) || []);
 
 	function find_deepest_path(cursor: number, paths: Ast[]): Ast[] | undefined {
 		const value = paths[paths.length - 1];
@@ -65,7 +72,19 @@
 			{/if}
 		</code>
 	</pre>
+
 	<Message kind="info">The AST is not public API and may change at any point in time</Message>
+
+	<label>
+		modern
+
+		<Checkbox
+			checked={workspace.compiler_options.modernAst}
+			onchange={(modernAst) => {
+				workspace.update_compiler_options({ modernAst });
+			}}
+		/>
+	</label>
 </div>
 
 <style>
@@ -99,4 +118,14 @@
 		margin: 0;
 		list-style-type: none;
 	}
+
+	label {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		display: inline-flex;
+		gap: 1rem;
+		align-items: center;
+		font: var(--sk-font-ui-small);
+	}
 </style>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 809498ecd2..4b353c6f13 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -81,8 +81,6 @@
 			css_workspace.update_file(css);
 		});
 	});
-
-	let ast = $derived(current?.result?.ast);
 </script>
 
 <div class="view-toggle">
@@ -132,9 +130,9 @@
 </div>
 
 <!-- ast output -->
-{#if ast}
+{#if current?.result}
 	<div class="tab-content" class:visible={!is_markdown && view === 'ast'}>
-		<AstView {ast} autoscroll={!is_markdown && view === 'ast'} />
+		<AstView {workspace} ast={current.result.ast} autoscroll={!is_markdown && view === 'ast'} />
 	</div>
 {/if}
 
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index 34033cbf24..6e54349421 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -12,8 +12,7 @@
 		/* display: block; */
 		position: relative;
 		height: 1em;
-		width: calc(100% - 0.6em);
-		max-width: 2em;
+		width: 2em;
 		top: -2px;
 		border-radius: 0.5em;
 		-webkit-appearance: none;

From 0dffbfcc85265c7eb4f2013e27696fa21b5b6ce7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 21:45:26 -0400
Subject: [PATCH 016/453] Nicer ast view (#693)

* simplify

* shuffle code around

* nicer AST view

* simplify

* check
---
 packages/repl/src/lib/Output/AstNode.svelte | 133 ++++++++++----------
 packages/repl/src/lib/Output/AstView.svelte |   2 +-
 2 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index a1c02e1c80..559915d3ff 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -9,29 +9,25 @@
 	interface Props {
 		key?: string;
 		value: Ast;
-		collapsed?: boolean;
 		path_nodes?: Ast[];
 		autoscroll?: boolean;
+		depth?: number;
 	}
 
-	let {
-		key = '',
-		value,
-		collapsed = $bindable(true),
-		path_nodes = [],
-		autoscroll = true
-	}: Props = $props();
+	let { key = '', value, path_nodes = [], autoscroll = true, depth = 0 }: Props = $props();
 
 	const { toggleable } = get_repl_context();
 
+	let root = depth === 0;
+	let open = $state(root);
+
 	let list_item_el = $state() as HTMLLIElement;
 
-	let is_root = $derived(path_nodes[0] === value);
 	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
-	let is_ast_array = $derived(Array.isArray(value));
-	let is_collapsable = $derived(value && typeof value === 'object');
+	let is_array = $derived(Array.isArray(value));
+	let is_primitive = $derived(value === null || typeof value !== 'object');
 	let is_markable = $derived(
-		is_collapsable &&
+		!is_primitive &&
 			'start' in value &&
 			'end' in value &&
 			typeof value.start === 'number' &&
@@ -39,22 +35,8 @@
 	);
 	let key_text = $derived(key ? `${key}:` : '');
 
-	let preview_text = $state('');
-
-	$effect(() => {
-		if (!is_collapsable || !collapsed) return;
-
-		if (is_ast_array) {
-			if (!('length' in value)) return;
-
-			preview_text = `[ ${value.length} element${value.length === 1 ? '' : 's'} ]`;
-		} else {
-			preview_text = `{ ${Object.keys(value).join(', ')} }`;
-		}
-	});
-
 	$effect(() => {
-		collapsed = !path_nodes.includes(value);
+		open = path_nodes.includes(value);
 	});
 
 	$effect(() => {
@@ -95,36 +77,59 @@
 
 <li
 	bind:this={list_item_el}
-	class:marked={!is_root && is_leaf}
+	class:marked={!root && is_leaf}
 	onmouseover={handle_mark_text}
 	onfocus={handle_mark_text}
 	onmouseleave={handle_unmark_text}
 >
-	{#if !is_root && is_collapsable}
-		<button class="ast-toggle" class:open={!collapsed} onclick={() => (collapsed = !collapsed)}>
-			{key_text}
-		</button>
-	{:else if key_text}
-		<span>{key_text}</span>
-	{/if}
-	{#if is_collapsable}
-		{#if collapsed && !is_root}
-			<button class="preview" onclick={() => (collapsed = !collapsed)}>
-				{preview_text}
-			</button>
-		{:else}
-			<span>{is_ast_array ? '[' : '{'}</span>
+	{#if is_primitive || (is_array && value.length === 0)}
+		<span class="value">
+			{#if key_text}
+				<span>{key_text}</span>
+			{/if}
+
+			{#if value == undefined}
+				<span class="token comment">{String(value)}</span>
+			{:else}
+				<span class="token {typeof value}">
+					{JSON.stringify(value)}
+				</span>
+			{/if}
+		</span>
+	{:else}
+		<details bind:open>
+			<summary>
+				{#if key}
+					<span class="key">{key}</span>:
+				{/if}
+
+				{#if is_array}
+					[{#if !open}
+						<span class="token comment">...</span>]
+						<span class="token comment">({value.length})</span>
+					{/if}
+				{:else}
+					{#if value.type}
+						<span class="token comment">{value.type}</span>
+					{/if}
+					{'{'}{#if !open}<span class="token comment">...</span>}{/if}
+				{/if}
+			</summary>
+
 			<ul>
 				{#each Object.entries(value) as [k, v]}
-					<AstNode key={is_ast_array ? '' : k} value={v} {path_nodes} {autoscroll} />
+					<AstNode
+						key={is_array ? undefined : k}
+						value={v}
+						{path_nodes}
+						{autoscroll}
+						depth={depth + 1}
+					/>
 				{/each}
 			</ul>
-			<span>{is_ast_array ? ']' : '}'}</span>
-		{/if}
-	{:else}
-		<span class="token {typeof value}">
-			{JSON.stringify(value)}
-		</span>
+
+			<span>{is_array ? ']' : '}'}</span>
+		</details>
 	{/if}
 </li>
 
@@ -143,26 +148,18 @@
 		background-color: var(--sk-highlight-color);
 	}
 
-	button {
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	.ast-toggle {
+	summary {
 		position: relative;
-	}
+		display: block;
+		cursor: pointer;
 
-	.ast-toggle::before {
-		content: '\25B6';
-		position: absolute;
-		bottom: 0;
-		left: -1.3rem;
-		opacity: 0.7;
-	}
+		.key {
+			text-decoration: underline;
+		}
 
-	.ast-toggle.open::before {
-		content: '\25BC';
+		&:hover .key {
+			text-decoration: underline;
+		}
 	}
 
 	.token {
@@ -176,4 +173,8 @@
 	.token.number {
 		color: var(--sk-code-number);
 	}
+
+	.token.comment {
+		color: var(--sk-code-comment);
+	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index b1cacf4af3..2ebf9e0afe 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -65,7 +65,7 @@
 		<code>
 			{#if typeof ast === 'object'}
 				<ul>
-					<AstNode value={ast} {path_nodes} {autoscroll} collapsed={false} />
+					<AstNode value={ast} {path_nodes} {autoscroll} />
 				</ul>
 			{:else}
 				<p>No AST available</p>

From 952edbfaac952d268f242977fc899f08b7a3882c Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:48:48 -0700
Subject: [PATCH 017/453] chore: sync docs (#691)

---
 .../docs/kit/20-core-concepts/10-routing.md   |  2 +-
 .../01-introduction/02-getting-started.md     |  2 +-
 .../03-template-syntax/01-basic-markup.md     |  2 +-
 .../98-reference/.generated/client-errors.md  |  4 +--
 .../.generated/client-warnings.md             |  2 +-
 .../docs/svelte/98-reference/20-svelte.md     | 32 +++++++++----------
 .../svelte/98-reference/30-runtime-errors.md  |  4 +--
 .../98-reference/30-runtime-warnings.md       |  4 +--
 8 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 66d2af54bb..78c2b0ac71 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -50,7 +50,7 @@ Pages can receive data from `load` functions via the `data` prop.
 <div>{@html data.content}</div>
 ```
 
-> [!LEGACY] In Svelte 4
+> [!LEGACY]
 > In Svelte 4, you'd use `export let data` instead
 
 > [!NOTE] Note that SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
index 1abc05fc5e..37757d961f 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
@@ -13,7 +13,7 @@ npm run dev
 
 Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
 
-### Alternatives to SvelteKit
+## Alternatives to SvelteKit
 
 You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
index 774ac6ca3e..b41dc187c3 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -109,7 +109,7 @@ Timing-wise, event attributes always fire after events from bindings (e.g. `onin
 
 When using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
 
-In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action).
 
 ### Event delegation
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index d6bd276de7..9879b67b33 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -19,13 +19,13 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### derived_references_self
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 2eabff6958..743a47b67a 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -16,7 +16,7 @@ Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
+The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
 
 ### event_handler_invalid
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index ca8b72774b..18db845d67 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -30,7 +30,7 @@ import {
 
 <blockquote class="tag deprecated">
 
-Use `$effect` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate
+Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect
 
 </blockquote>
 
@@ -54,7 +54,7 @@ function afterUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated">
 
-Use `$effect.pre` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate
+Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre
 
 </blockquote>
 
@@ -78,11 +78,11 @@ function beforeUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated">
 
-Use callback props and/or the `$host()` rune instead — see https://svelte-5-preview.vercel.app/docs/deprecations#createeventdispatcher
+Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events
 
 </blockquote>
 
-Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs#template-syntax-component-directives-on-eventname).
+Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).
 Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
 Component events created with `createEventDispatcher` create a
@@ -279,7 +279,7 @@ it can be called from an external module).
 
 If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
 
-`onMount` does not run inside a [server-side component](https://svelte.dev/docs#run-time-server-side-component-api).
+`onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
 
 <div class="ts-block">
 
@@ -346,8 +346,6 @@ function unmount(component: Record<string, any>): void;
 
 Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
 
-https://svelte-5-preview.vercel.app/docs/functions#untrack
-
 <div class="ts-block">
 
 ```dts
@@ -401,13 +399,13 @@ interface Component<
 ): {
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+	 * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
 	 * for more info.
 	 */
 	$on?(type: string, callback: (e: any) => void): () => void;
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+	 * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
 	 * for more info.
 	 */
 	$set?(props: Partial<Props>): void;
@@ -445,7 +443,7 @@ The custom element version of the component. Only present if compiled with the `
 
 In Svelte 4, components are classes. In Svelte 5, they are functions.
 Use `mount` instead to instantiate components.
-See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes)
+See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </blockquote>
@@ -725,7 +723,7 @@ let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
 ```
 You can only call a snippet through the `{@render ...}` tag.
 
-https://svelte-5-preview.vercel.app/docs/snippets
+https://svelte.dev/docs/svelte/snippet
 
 <div class="ts-block">
 
@@ -755,7 +753,7 @@ interface Snippet<Parameters extends unknown[] = []> {/*…*/}
 This was the base class for Svelte components in Svelte 4. Svelte 5+ components
 are completely different under the hood. For typing, use `Component` instead.
 To instantiate components, use `mount` instead`.
-See [breaking changes documentation](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes) for more info.
+See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 <div class="ts-block">
 
@@ -801,7 +799,7 @@ constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
 
 - <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
 is a stop-gap solution. Migrate towards using `mount` instead. See
-https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info.
+https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more info.
 
 </div>
 
@@ -819,7 +817,7 @@ $destroy(): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
 for more info.
 
 </div>
@@ -841,7 +839,7 @@ $on<K extends Extract<keyof Events, string>>(
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
 for more info.
 
 </div>
@@ -860,7 +858,7 @@ $set(props: Partial<Props>): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
 for more info.
 
 </div>
@@ -872,7 +870,7 @@ for more info.
 
 <blockquote class="tag deprecated">
 
-Use `Component` instead. See [breaking changes documentation](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes) for more information.
+Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
 </blockquote>
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index 3a8bb639e2..d2d6476e5b 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -25,13 +25,13 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### derived_references_self
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 2909035bbb..f366cb96f0 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -25,13 +25,13 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
 ```
 
 ### derived_references_self

From 082ad3ce15ea3b18291270fcedba0870be40e26f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 05:47:03 -0400
Subject: [PATCH 018/453] fix: shrink font size when georgia is used (#680)

* shrink font size when georgia is used

* use line-height: 1.5 across the board

* shave a pixel off sans font size
---
 packages/site-kit/src/lib/styles/tokens.css | 27 ++++++++++-----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 206de0470b..4cb3c8cbf2 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -32,14 +32,14 @@
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
-	--sk-font-size-body: 2rem;
-	--sk-font-size-body-small: 1.8rem;
+	--sk-font-size-body: 1.8rem;
+	--sk-font-size-body-small: 1.6rem;
 	--sk-font-size-ui-small: 1.3rem;
 	--sk-font-size-ui-medium: 1.6rem;
 	--sk-font-size-ui-large: 3rem;
 	--sk-font-size-mono: 1.4rem;
 
-	--sk-line-height-body: 1.7;
+	--sk-line-height-body: 1.5;
 
 	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
 	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
@@ -125,7 +125,16 @@
 		--sk-font-family-body: 'EB Garamond', Georgia, serif;
 		--sk-font-size-body: 2.2rem;
 		--sk-font-size-body-small: 2rem;
-		--sk-line-height-body: 1.5;
+	}
+
+	&.font-boring {
+		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
+		--sk-font-size-body: 1.9rem;
+		--sk-font-size-body-small: 1.7rem;
+
+		p code {
+			font-size: 0.75em;
+		}
 	}
 
 	&.dark {
@@ -176,16 +185,6 @@
 		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
 		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
 	}
-
-	&.font-boring {
-		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
-		--sk-font-size-body: 2rem;
-		--sk-font-size-body-small: 1.8rem;
-
-		p code {
-			font-size: 0.75em;
-		}
-	}
 }
 
 @media screen and (min-width: 480px) {

From ceb315a2744b54fe2ed9056dc94f3247639834c0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 05:47:40 -0400
Subject: [PATCH 019/453] fix: blur active element instead of focusing document
 (#683)

Instead of actively focusing the <body> when the search box is closed, just blur whatever the active element is. Has the same effect in terms of SFNSP, but doesn't cause an unwanted focus ring to appear - closes #664
---
 packages/site-kit/src/lib/search/SearchBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 09b21e06c3..4b83a75f27 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -74,7 +74,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			last_scroll_position = null;
 			document.body.style.position = '';
 			document.body.tabIndex = -1;
-			document.body.focus();
+			(document.activeElement as HTMLElement)?.blur();
 			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
 

From b00f797f43fd6fddc6675979b07a30db205cc7dd Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 29 Oct 2024 22:20:11 +0100
Subject: [PATCH 020/453] chore: spacing tweaks (#698)

* chore: spacing tweaks

- make paragraph breaks less spacey
- move `ul` closer to the preceeding paragraph which gives more visual clarity of where it belongs to
- give code blocks a bit more space at the top/bottom on larger screens
- give blockquotes more space at the top/bottom on larger screens

Combined, these changes give more visual clarity of which things belong together, which stand on its own, etc

* Update packages/site-kit/src/lib/styles/base.css

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* line height-dependent top/bubble calculation

* i get best results with this

* rhythm

* we no longer need these, because of the changes to p/ol/ul

* simplify

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/site-kit/src/lib/components/Text.svelte | 12 ++++++++----
 packages/site-kit/src/lib/styles/base.css        |  5 ++---
 packages/site-kit/src/lib/styles/tokens.css      |  4 +++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index aac3eae31b..3b90df1275 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -116,9 +116,13 @@
 			border: 1px solid var(--sk-back-5);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
-			margin: 2rem 0;
+			margin: calc(0.5 * var(--sk-line-height-body)) 0;
 			/* background: var(--sk-back-3); */
 
+			@media (min-width: 767px) {
+				margin: var(--sk-line-height-body) 0;
+			}
+
 			.controls {
 				--height: 3.6rem;
 				display: flex;
@@ -376,11 +380,11 @@
 			li::before {
 				content: '';
 				position: absolute;
-				top: 1.43rem;
+				top: 0.65em;
 				left: -1.8rem;
 				background-color: var(--sk-text-4);
-				width: 0.6rem;
-				height: 0.6rem;
+				width: 0.3em;
+				height: 0.3em;
 				border-radius: 50%;
 				opacity: 0.7;
 			}
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 602a81e90d..506fd6fc37 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -45,7 +45,7 @@ p,
 ul,
 ol {
 	font: var(--sk-font-body);
-	margin: 1lh 0;
+	margin: 0.5lh 0;
 
 	&:first-child {
 		margin-top: 0;
@@ -136,8 +136,7 @@ header {
 /*	opinionated styles --------------------- */
 blockquote {
 	position: relative;
-	margin: 2.4rem 0;
-	padding: 2rem 2.4rem 1.8rem 2.4rem;
+	margin: var(--sk-line-height-body) 0;
 	max-width: var(--sk-page-content-width);
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 4cb3c8cbf2..f0e403cbdd 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -39,7 +39,9 @@
 	--sk-font-size-ui-large: 3rem;
 	--sk-font-size-mono: 1.4rem;
 
-	--sk-line-height-body: 1.5;
+	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
+	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
+	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
 
 	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
 	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);

From 27125869b12640813481799243afd2723749981b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 17:39:30 -0400
Subject: [PATCH 021/453] Tweak search box (#686)

* make esc button more prominent/separate

* tweaks

* fix hovers
---
 .../site-kit/src/lib/search/SearchBox.svelte  | 170 +++++++++++-------
 .../src/lib/search/SearchResultList.svelte    |   2 +-
 2 files changed, 108 insertions(+), 64 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 4b83a75f27..7934af4c0f 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -159,31 +159,37 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		use:trap
 	>
 		<div class="search-box">
-			<div style="background: var(--background); padding: 0.5rem">
-				<input
-					use:forcefocus
-					onkeydown={(e) => {
+			<div class="controls">
+				<div class="input-group">
+					<input
+						use:forcefocus
+						onkeydown={(e) => {
 					if (e.key === 'Enter' && !e.isComposing) {
 						const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
 						element?.click();
 					}
 				}}
-					oninput={(e) => {
-						$search_query = e.currentTarget.value;
-					}}
-					value={$search_query}
-					{placeholder}
-					aria-describedby="search-description"
-					aria-label={placeholder}
-					spellcheck="false"
-				/>
+						oninput={(e) => {
+							$search_query = e.currentTarget.value;
+						}}
+						value={$search_query}
+						{placeholder}
+						aria-describedby="search-description"
+						aria-label={placeholder}
+						spellcheck="false"
+					/>
+
+					<button aria-label="Clear" onclick={() => ($search_query = '')}>
+						<Icon name="close" />
+					</button>
+				</div>
+
+				<button class="raised" aria-label="Close" onclick={close}>
+					<!-- <Icon name="close" /> -->
+					<kbd>Esc</kbd>
+				</button>
 			</div>
 
-			<button aria-label="Close" onclick={close}>
-				<!-- <Icon name="close" /> -->
-				<kbd>Esc</kbd>
-			</button>
-
 			<span id="search-description" class="visually-hidden">
 				{#if search_description}
 					{@render search_description()}
@@ -222,6 +228,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 										</a>
 
 										<button
+											class="raised icon"
 											aria-label="Delete"
 											onclick={(e) => {
 												$search_recent = $search_recent.filter((href) => href !== search.href);
@@ -229,7 +236,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 												e.preventDefault();
 											}}
 										>
-											<Icon name="delete" />
+											<Icon name="delete" size={16} />
 										</button>
 									</li>
 								{/each}
@@ -302,50 +309,85 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 	}
 
-	input {
-		font: var(--sk-font-ui-large);
-		width: 100%;
-		padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
-		height: 6rem;
-		border: none;
-		border-bottom: 1px solid var(--sk-back-3);
-		flex-shrink: 0;
-		background: var(--sk-back-3);
-		color: var(--sk-text-1);
-
-		&::selection {
-			background-color: var(--sk-back-translucent);
-		}
+	.controls {
+		background: var(--background);
+		padding: 0.5rem;
+		display: flex;
+		gap: 1rem;
+	}
 
-		&::placeholder {
-			color: var(--sk-text-2);
-			opacity: 0.3;
+	.input-group {
+		position: relative;
+		flex: 1;
+
+		input {
+			font: var(--sk-font-ui-large);
+			width: 100%;
+			padding: var(--padding) 6rem var(--padding) calc(var(--padding) - 0.5rem);
+			height: 6rem;
+			border: none;
+			flex-shrink: 0;
+			color: var(--sk-text-1);
+			border-bottom: 1px solid var(--sk-back-6);
+			background: inherit;
+
+			&::selection {
+				background-color: var(--sk-back-translucent);
+			}
+
+			&::placeholder {
+				color: var(--sk-text-2);
+				opacity: 0.3;
+			}
+
+			&:focus-visible {
+				outline-offset: -2px;
+			}
 		}
 
-		&:focus-visible {
-			outline-offset: -3px;
+		button {
+			position: absolute;
+			right: 0;
+			top: 0;
+			height: 100%;
+			aspect-ratio: 1;
+			color: var(--sk-text-4);
+
+			&:hover,
+			&:focus {
+				color: var(--sk-text-3);
+			}
+
+			&:focus-visible {
+				outline-offset: -2px;
+			}
 		}
 	}
 
 	button[aria-label='Close'] {
-		--size: 2rem;
-		position: absolute;
-		top: 0.5rem;
-		right: 0;
-		width: 5rem;
-		height: 6rem;
+		height: 100%;
+		aspect-ratio: 1;
 		background: none;
-		color: var(--sk-text-2);
-		opacity: 0.3;
+
+		&:hover,
+		&:focus {
+			color: var(--sk-text-3);
+		}
 
 		&:focus-visible {
-			opacity: 1;
-			outline-offset: -3px;
+			outline-offset: -2px;
 		}
 
 		kbd {
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			text-transform: uppercase;
-			font: var(--sk-font-ui-small);
+			background: none;
+			font: var(--sk-font-ui-medium);
+			color: var(--sk-text-4);
+			width: 100%;
+			height: 100%;
 		}
 	}
 
@@ -365,16 +407,21 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		li {
 			position: relative;
+			display: flex;
+			padding: 0.2rem var(--padding);
+			gap: 1rem;
+
+			&:hover {
+				background: var(--sk-back-3);
+			}
 
 			a {
 				color: var(--sk-text-2);
 				display: block;
 				text-decoration: none;
-				padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
-
-				&:hover {
-					background: rgba(0, 0, 0, 0.05);
-				}
+				margin: 0 -0.5rem;
+				padding: 0.5rem;
+				flex: 1;
 
 				&:focus {
 					outline-offset: -3px;
@@ -382,21 +429,18 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			button[aria-label='Delete'] {
-				position: absolute;
-				top: 0;
-				right: 0;
-				width: 5rem;
-				height: 100%;
-				color: var(--sk-text-2);
-				opacity: 0.1;
+				width: 3.2rem;
+				height: 3.2rem;
+				color: var(--sk-text-4);
+				background-color: var(--sk-back-2);
 
 				&:hover {
-					opacity: 1;
 					outline: none;
+					color: var(--sk-text-3);
 				}
 
 				&:focus-visible {
-					opacity: 1;
+					color: var(--sk-text-3);
 					outline-offset: -3px;
 				}
 			}
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 65c5eb34bb..6b83731fd9 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -149,7 +149,7 @@
 		}
 
 		&:hover {
-			--background: var(--sk-back-4);
+			--background: var(--sk-back-3);
 			text-decoration: none;
 		}
 

From da432db2744a94e08e1c4cbc11cf21a33b100bca Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 18:27:57 -0400
Subject: [PATCH 022/453] Better search (#695)

* prioritise current section when searching

* use weighting system

* lint

* sort blocks within groups
---
 .../src/routes/search/+page.server.js         |  2 +-
 .../site-kit/src/lib/search/SearchBox.svelte  | 10 ++-
 .../site-kit/src/lib/search/search-worker.ts  |  4 +-
 packages/site-kit/src/lib/search/search.ts    | 87 +++++++++++++------
 4 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/apps/svelte.dev/src/routes/search/+page.server.js b/apps/svelte.dev/src/routes/search/+page.server.js
index a558f43c40..467f6d1751 100644
--- a/apps/svelte.dev/src/routes/search/+page.server.js
+++ b/apps/svelte.dev/src/routes/search/+page.server.js
@@ -11,7 +11,7 @@ export async function load({ url, fetch }) {
 
 	const query = url.searchParams.get('q') ?? '';
 
-	const results = query ? search(query) : [];
+	const results = query ? search(query, '') : [];
 
 	return {
 		query,
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 7934af4c0f..706a2e2d73 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -10,6 +10,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	import Icon from '../components/Icon.svelte';
 	import SearchResults from './SearchResults.svelte';
 	import SearchWorker from './search-worker.js?worker';
+	import { page } from '$app/stores';
 
 	interface Props {
 		placeholder?: string;
@@ -94,7 +95,14 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			const id = uid++;
 			pending.add(id);
 
-			worker.postMessage({ type: 'query', id, payload: $search_query });
+			worker.postMessage({
+				type: 'query',
+				id,
+				payload: {
+					query: $search_query,
+					path: $page.url.pathname
+				}
+			});
 		}
 	});
 
diff --git a/packages/site-kit/src/lib/search/search-worker.ts b/packages/site-kit/src/lib/search/search-worker.ts
index 6534d038bb..95d163a9da 100644
--- a/packages/site-kit/src/lib/search/search-worker.ts
+++ b/packages/site-kit/src/lib/search/search-worker.ts
@@ -12,8 +12,8 @@ addEventListener('message', async (event) => {
 	}
 
 	if (type === 'query') {
-		const query = payload;
-		const results = search(query);
+		const { query, path } = payload;
+		const results = search(query, path);
 
 		postMessage({ type: 'results', payload: { results, query } });
 	}
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 235fececeb..56e022118f 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/packages/site-kit/src/lib/search/search.ts
@@ -44,56 +44,91 @@ export function init(blocks: Block[]) {
 	inited = true;
 }
 
+const CURRENT_SECTION_BOOST = 2;
+const EXACT_MATCH_BOOST = 10;
+const WORD_MATCH_BOOST = 4;
+const NEAR_MATCH_BOOST = 2;
+const BREADCRUMB_LENGTH_BOOST = 0.2;
+
+interface Entry {
+	block: Block;
+	score: number;
+	rank: number;
+}
+
 /**
  * Search for a given query in the existing index
  */
-export function search(query: string): BlockGroup[] {
+export function search(query: string, path: string): BlockGroup[] {
 	const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-	const regex = new RegExp(`(^|\\b)${escaped}`, 'i');
+	const exact_match = new RegExp(`^${escaped}$`, 'i');
+	const word_match = new RegExp(`(^|\\b)${escaped}($|\\b)`, 'i');
+	const near_match = new RegExp(`(^|\\b)${escaped}`, 'i');
+
+	const parts = path.split('/');
 
 	const blocks = indexes
 		.flatMap((index) => index.search(query))
 		// @ts-expect-error flexsearch types are wrong i think?
 		.map(lookup)
-		.map((block, rank) => ({ block: block as Block, rank }))
-		.sort((a, b) => {
-			// If rank is way lower, give that priority
-			if (Math.abs(a.rank - b.rank) > 3) {
-				return a.rank - b.rank;
+		.map((block, rank) => {
+			const block_parts = block.href.split('/');
+
+			// prioritise current section
+			let score = block_parts.findIndex((part, i) => part !== parts[i]);
+			if (score === -1) score = block_parts.length;
+			score *= CURRENT_SECTION_BOOST;
+
+			if (block.breadcrumbs.some((text) => exact_match.test(text))) {
+				console.log('EXACT MATCH', block.breadcrumbs);
+				score += EXACT_MATCH_BOOST;
+			} else if (block.breadcrumbs.some((text) => word_match.test(text))) {
+				score += WORD_MATCH_BOOST;
+			} else if (block.breadcrumbs.some((text) => near_match.test(text))) {
+				score += NEAR_MATCH_BOOST;
 			}
 
-			const a_title_matches = regex.test(a.block.breadcrumbs.at(-1)!);
-			const b_title_matches = regex.test(b.block.breadcrumbs.at(-1)!);
+			// prioritise branches over leaves
+			score -= block.breadcrumbs.length * BREADCRUMB_LENGTH_BOOST;
 
-			// massage the order a bit, so that title matches
-			// are given higher priority
-			if (a_title_matches !== b_title_matches) {
-				return a_title_matches ? -1 : 1;
-			}
+			const entry: Entry = { block, score, rank };
 
-			return a.block.breadcrumbs.length - b.block.breadcrumbs.length || a.rank - b.rank;
-		})
-		.map(({ block }) => block);
+			return entry;
+		});
 
-	const groups: Record<string, BlockGroup> = {};
+	const grouped: Record<string, { breadcrumbs: string[]; entries: Entry[] }> = {};
 
-	for (const block of blocks) {
-		const breadcrumbs = block.breadcrumbs.slice(0, 2);
-
-		const group = (groups[breadcrumbs.join('::')] ??= {
+	for (const entry of blocks) {
+		const breadcrumbs = entry.block.breadcrumbs.slice(0, 2);
+		const group = (grouped[breadcrumbs.join('::')] ??= {
 			breadcrumbs,
-			blocks: []
+			entries: []
 		});
 
-		group.blocks.push(block);
+		group.entries.push(entry);
 	}
 
-	return Object.values(groups);
+	const sorted = Object.values(grouped);
+
+	// sort blocks within groups...
+	for (const group of sorted) {
+		group.entries.sort((a, b) => b.score - a.score || a.rank - b.rank);
+	}
+
+	// ...then sort groups
+	sorted.sort((a, b) => b.entries[0].score - a.entries[0].score);
+
+	return sorted.map((group) => {
+		return {
+			breadcrumbs: group.breadcrumbs,
+			blocks: group.entries.map((entry) => entry.block)
+		};
+	});
 }
 
 /**
  * Get a block with details by its href
  */
 export function lookup(href: string) {
-	return map.get(href);
+	return map.get(href)!;
 }

From 3e184b57c86896c34d00a3583fce5ca00115d04a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 20:11:36 -0400
Subject: [PATCH 023/453] sync docs (#711)

---
 .../svelte.dev/content/docs/kit/20-core-concepts/20-load.md | 6 +++---
 .../content/docs/kit/20-core-concepts/30-form-actions.md    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index 9de2b83ead..ee64825aea 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -32,7 +32,7 @@ export function load({ params }) {
 <div>{@html data.post.content}</div>
 ```
 
-> [!LEGACY] In Svelte 4
+> [!LEGACY]
 > In Svelte 4, you'd use `export let data` instead
 
 Thanks to the generated `$types` module, we get full type safety.
@@ -322,8 +322,8 @@ export async function load({ fetch, setHeaders }) {
 	const url = `https://cms.example.com/products.json`;
 	const response = await fetch(url);
 
-	// cache the page for the same length of time
-	// as the underlying data
+	// Headers are only set during SSR, caching the page's HTML
+	// for the same length of time as the underlying data.
 	setHeaders({
 		age: response.headers.get('age'),
 		'cache-control': response.headers.get('cache-control')
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index 5d8c439f86..a86e56b784 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -151,7 +151,7 @@ export const actions = {
 {/if}
 ```
 
-> [!LEGACY] In Svelte 4
+> [!LEGACY]
 > In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties
 
 ### Validation errors

From 2c925c49a3b5beff75c30de2975dbe09c3916e64 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 21:33:26 -0400
Subject: [PATCH 024/453] add analytics (#714)

add analytics - closes #706
---
 apps/svelte.dev/package.json              |  1 +
 apps/svelte.dev/src/routes/+layout.svelte |  4 +++-
 pnpm-lock.yaml                            | 23 +++++++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 303095ea62..4d081b6970 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -28,6 +28,7 @@
 		"@testing-library/svelte": "^5.2.3",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/d3-geo": "^3.1.0",
+		"@vercel/analytics": "^1.3.2",
 		"@vercel/speed-insights": "^1.0.0",
 		"@webcontainer/api": "^1.1.5",
 		"adm-zip": "^0.5.10",
diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 943c97961d..1ebf609a8e 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
 	import '@sveltejs/site-kit/styles/index.css';
-	import { browser } from '$app/environment';
+	import { browser, dev } from '$app/environment';
 	import { page } from '$app/stores';
 	import { Shell, Banner } from '@sveltejs/site-kit/components';
 	import { Nav } from '@sveltejs/site-kit/nav';
 	import { SearchBox } from '@sveltejs/site-kit/search';
 	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+	import { inject } from '@vercel/analytics';
 	import { beforeNavigate } from '$app/navigation';
 
 	injectSpeedInsights();
+	inject({ mode: dev ? 'development' : 'production' });
 
 	// Make all navigations between SvelteKit-tutorial and non-SvelteKit-tutorial pages (and vice versa)
 	// a full page navigation to ensure webcontainers get the correct origin restriction headers while
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62907fda7f..4c128a2528 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       '@types/d3-geo':
         specifier: ^3.1.0
         version: 3.1.0
+      '@vercel/analytics':
+        specifier: ^1.3.2
+        version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
         version: 1.0.11(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)
@@ -1573,6 +1576,17 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@vercel/analytics@1.3.2':
+    resolution: {integrity: sha512-n/Ws7skBbW+fUBMeg+jrT30+GP00jTHvCcL4fuVrShuML0uveEV/4vVUdvqEVnDgXIGfLm0GXW5EID2mCcRXhg==}
+    peerDependencies:
+      next: '>= 13'
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+
   '@vercel/nft@0.27.2':
     resolution: {integrity: sha512-7LeioS1yE5hwPpQfD3DdH04tuugKjo5KrJk3yK5kAI3Lh76iSsK/ezoFQfzuT08X3ZASQOd1y9ePjLNI9+TxTQ==}
     engines: {node: '>=16'}
@@ -2770,6 +2784,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -4488,6 +4505,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@vercel/analytics@1.3.2':
+    dependencies:
+      server-only: 0.0.1
+
   '@vercel/nft@0.27.2':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11
@@ -5673,6 +5694,8 @@ snapshots:
 
   semver@7.6.2: {}
 
+  server-only@0.0.1: {}
+
   set-blocking@2.0.0: {}
 
   set-cookie-parser@2.7.0: {}

From d1ce56deea72b921a672af5d6269b2afae9a1fe0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 02:55:43 -0400
Subject: [PATCH 025/453] chore: allow site to be built without credentials
 (#712)

fix #533
---
 apps/svelte.dev/src/lib/db/client.js  | 16 +++++++++-----
 apps/svelte.dev/src/lib/db/session.js | 31 +++++++++++++++++----------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/src/lib/db/client.js b/apps/svelte.dev/src/lib/db/client.js
index 86143c79cf..634e1342d1 100644
--- a/apps/svelte.dev/src/lib/db/client.js
+++ b/apps/svelte.dev/src/lib/db/client.js
@@ -1,16 +1,22 @@
-import { dev } from '$app/environment';
-import { SUPABASE_URL, SUPABASE_KEY } from '$env/static/private';
+import { building } from '$app/environment';
+import { env } from '$env/dynamic/private';
 import { createClient } from '@supabase/supabase-js';
 
-const client_enabled = !!(!dev || (SUPABASE_URL && SUPABASE_KEY));
+const enabled = !building && env.SUPABASE_URL && env.SUPABASE_KEY;
+
+if (!enabled) {
+	console.warn(
+		`Missing SUPABASE_URL and SUPABASE_KEY environment variables. Loading and saving in the playground is disabled`
+	);
+}
 
 /**
  * @type {import('@supabase/supabase-js').SupabaseClient<any, "public", any>}
  */
 // @ts-ignore-line
 export const client =
-	client_enabled &&
-	createClient(SUPABASE_URL, SUPABASE_KEY, {
+	enabled &&
+	createClient(env.SUPABASE_URL, env.SUPABASE_KEY, {
 		global: { fetch },
 		auth: { persistSession: false }
 	});
diff --git a/apps/svelte.dev/src/lib/db/session.js b/apps/svelte.dev/src/lib/db/session.js
index a54068bf53..9b3ff6401c 100644
--- a/apps/svelte.dev/src/lib/db/session.js
+++ b/apps/svelte.dev/src/lib/db/session.js
@@ -1,6 +1,7 @@
 import * as cookie from 'cookie';
 import flru from 'flru';
 import { client } from './client.js';
+import { error } from '@sveltejs/kit';
 
 /** @typedef {import('./types').User} User */
 
@@ -13,27 +14,31 @@ const session_cache = flru(1000);
  * @param {import('./types').GitHubUser} user
  */
 export async function create(user) {
-	const { data, error } = await client.rpc('login', {
+	if (!client) {
+		error(500, 'Database client is not configured');
+	}
+
+	const result = await client.rpc('login', {
 		user_github_id: user.github_id,
 		user_github_name: user.github_name,
 		user_github_login: user.github_login,
 		user_github_avatar_url: user.github_avatar_url
 	});
 
-	if (error) {
-		throw new Error(error.message);
+	if (result.error) {
+		throw new Error(result.error.message);
 	}
 
-	session_cache.set(data.sessionid, {
-		id: data.userid,
+	session_cache.set(result.data.sessionid, {
+		id: result.data.userid,
 		github_name: user.github_name,
 		github_login: user.github_login,
 		github_avatar_url: user.github_avatar_url
 	});
 
 	return {
-		sessionid: data.sessionid,
-		expires: new Date(data.expires)
+		sessionid: result.data.sessionid,
+		expires: new Date(result.data.expires)
 	};
 }
 
@@ -42,7 +47,7 @@ export async function create(user) {
  * @returns {Promise<User | null>}
  */
 export async function read(sessionid) {
-	if (!sessionid) return null;
+	if (!sessionid || !client) return null;
 
 	if (!session_cache.get(sessionid)) {
 		session_cache.set(
@@ -63,10 +68,14 @@ export async function read(sessionid) {
 
 /** @param {string} sessionid */
 export async function destroy(sessionid) {
-	const { error } = await client.rpc('logout', { sessionid });
+	if (!client) {
+		error(500, 'Database client is not configured');
+	}
+
+	const result = await client.rpc('logout', { sessionid });
 
-	if (error) {
-		throw new Error(error.message);
+	if (result.error) {
+		throw new Error(result.error.message);
 	}
 
 	session_cache.set(sessionid, null);

From 223ed4ffdd74cd29ae3875be7889c42344ab87c3 Mon Sep 17 00:00:00 2001
From: Christoph Sanz <22081130+christophsanz@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:36:48 +0100
Subject: [PATCH 026/453] docs: Add note for dimension bindings. (#634)

* Update index.md

* Update apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md

* explain implementation

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .../04-advanced-bindings/04-dimensions/index.md               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md
index 99b443fc02..a5583f9eaa 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md
@@ -2,7 +2,7 @@
 title: Dimensions
 ---
 
-You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element:
+You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element, and Svelte will update the bound values using a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver):
 
 ```svelte
 /// file: App.svelte
@@ -13,3 +13,5 @@ You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bind
 ```
 
 These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
+
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.

From 8d2e9e529c897d86ce07389ae87434311a0219a2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 09:38:30 -0400
Subject: [PATCH 027/453] ISR OG cards (#713)

---
 apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
index a3abd98f1c..de03a5e3cd 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -8,8 +8,13 @@ import Card from './Card.svelte';
 import DMSerifDisplay from './DMSerifDisplay-Regular.ttf?url';
 import FiraSans from './FiraSans-Regular.ttf?url';
 import { blog_posts } from '$lib/server/content';
+import type { ServerlessConfig } from '@sveltejs/adapter-vercel';
 
-export const prerender = true;
+export const config: ServerlessConfig = {
+	isr: {
+		expiration: false
+	}
+};
 
 export function entries() {
 	return blog_posts.map((post) => ({

From 8086742acfdaf0a27555056ce30f0d3505433d97 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:32:31 -0400
Subject: [PATCH 028/453] fix: tweak markdown style stripping logic (#709)

* fix #694

* fix slugs

* sync docs

* fix link

* fix links
---
 .../2024-04-01-whats-new-in-svelte-april-2024.md     |  2 +-
 .../blog/2024-07-01-whats-new-in-svelte-july-2024.md |  2 +-
 .../docs/kit/25-build-and-deploy/40-adapter-node.md  |  6 +++---
 packages/site-kit/src/lib/markdown/utils.ts          | 12 ++++++------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-04-01-whats-new-in-svelte-april-2024.md b/apps/svelte.dev/content/blog/2024-04-01-whats-new-in-svelte-april-2024.md
index 1271d3ecea..28f11caae0 100644
--- a/apps/svelte.dev/content/blog/2024-04-01-whats-new-in-svelte-april-2024.md
+++ b/apps/svelte.dev/content/blog/2024-04-01-whats-new-in-svelte-april-2024.md
@@ -28,7 +28,7 @@ Also, this month, a ton of new features have been merged into Svelte 5 to make i
 - `adapter-vercel` now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (**@sveltejs/adapter-vercel@5.2.0**, [Docs](https://vercel.com/docs/deployments/skew-protection), [#11987](https://github.com/sveltejs/kit/pull/11987))
 - `adapter-vercel`'s build output files now include framework metadata - improving observability on the platform (**@sveltejs/adapter-vercel@5.2.0**, [#11800](https://github.com/sveltejs/kit/pull/11800))
 - `adapter-cloudflare` and `adapter-cloudflare-workers` now implement `adapter.emulate` which allows the adapter to emulate the Cloudflare platform during dev and preview ([#11732](https://github.com/sveltejs/kit/pull/11732))
-- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](/docs/kit/adapter-node#Environment-variables-SHUTDOWN-TIMEOUT), [#11653](https://github.com/sveltejs/kit/pull/11653))
+- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](/docs/kit/adapter-node#Environment-variables-SHUTDOWN_TIMEOUT), [#11653](https://github.com/sveltejs/kit/pull/11653))
 - **Breaking:** The default value of `precompress` in `adapter-node` is now `true` - making sites faster by default (**@sveltejs/adapter-node@5.0.0**, [Docs](/docs/kit/adapter-node#Options-precompress), [#11945](https://github.com/sveltejs/kit/pull/11945))
 - Google Cloud is now supported in `adapter-auto` without any additional configuration (**@sveltejs/adapter-auto@3.2.0**, [Docs](/docs/kit/adapter-auto), [#12015](https://github.com/sveltejs/kit/pull/12015))
 
diff --git a/apps/svelte.dev/content/blog/2024-07-01-whats-new-in-svelte-july-2024.md b/apps/svelte.dev/content/blog/2024-07-01-whats-new-in-svelte-july-2024.md
index 7173f04674..34aab718a0 100644
--- a/apps/svelte.dev/content/blog/2024-07-01-whats-new-in-svelte-july-2024.md
+++ b/apps/svelte.dev/content/blog/2024-07-01-whats-new-in-svelte-july-2024.md
@@ -24,7 +24,7 @@ Below, you'll find the highlights from the Svelte 5 release notes (now in [Relea
 
 The node and Cloudflare adapters got a few upgrades this month:
 
-- The `BODY_SIZE_LIMIT` environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (**adapter-node@5.2.0**, [Docs](/docs/kit/adapter-node#Environment-variables-BODYSIZELIMIT), [#11680](https://github.com/sveltejs/kit/pull/11680))
+- The `BODY_SIZE_LIMIT` environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (**adapter-node@5.2.0**, [Docs](/docs/kit/adapter-node#Environment-variables-BODY_SIZE_LIMIT), [#11680](https://github.com/sveltejs/kit/pull/11680))
 - Node servers can now listen to the `sveltekit:shutdown` event (replacing the more abrupt `exit`) that is emitted after the HTTP server has closed all connections (**adapter-node@5.1.0**, [Docs](/docs/kit/adapter-node#Graceful-shutdown), [#12153](https://github.com/sveltejs/kit/pull/12153))
 - The Cloudflare adapter will now only throw a `_routes.json` error when the file exists but there are no configured routes in svelte.config (**adapter-cloudflare@4.5.0**, [#12360](https://github.com/sveltejs/kit/pull/12360))
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
index 71dc8efd66..0a7c553c4a 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
@@ -187,7 +187,7 @@ By default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM`
 
 1. reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback))
 2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections))
-3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN-TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))
+3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))
 
 > [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server).
 
@@ -205,7 +205,7 @@ The parameter `reason` has one of the following values:
 
 - `SIGINT` - shutdown was triggered by a `SIGINT` signal
 - `SIGTERM` - shutdown was triggered by a `SIGTERM` signal
-- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE-TIMEOUT)
+- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT)
 
 ## Socket activation
 
@@ -215,7 +215,7 @@ Most Linux operating systems today use a modern process manager called systemd t
 
 To take advantage of socket activation follow these steps.
 
-1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE-TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.
+1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.
 
 ```ini
 /// file: /etc/systemd/system/myapp.service
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 0fa108c141..e4a06084be 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -19,11 +19,11 @@ export const SHIKI_LANGUAGE_MAP = {
  */
 export function clean(markdown: string) {
 	return markdown
-		.replace(/\*\*(.+?)\*\*/g, '$1') // bold
-		.replace(/_(.+?)_/g, '$1') // Italics
-		.replace(/\*(.+?)\*/g, '$1') // Italics
-		.replace(/`(.+?)`/g, '$1') // Inline code
-		.replace(/~~(.+?)~~/g, '$1') // Strikethrough
+		.replace(/(?:^|b)\*\*(.+?)\*\*(?:\b|$)/g, '$1') // bold
+		.replace(/(?:^|b)_(.+?)_(?:\b|$)/g, '$1') // Italics
+		.replace(/(?:^|b)\*(.+?)\*(?:\b|$)/g, '$1') // Italics
+		.replace(/(?:^|b)`(.+?)`(?:\b|$)/g, '$1') // Inline code
+		.replace(/(?:^|b)~~(.+?)~~(?:\b|$)/g, '$1') // Strikethrough
 		.replace(/\[(.+?)\]\(.+?\)/g, '$1') // Link
 		.replace(/\n/g, ' ') // New line
 		.replace(/ {2,}/g, ' ')
@@ -36,7 +36,7 @@ export const slugify = (str: string) => {
 		.replace(/&.+?;/g, '')
 		.replace(/<\/?.+?>/g, '')
 		.replace(/\.\.\./g, '')
-		.replace(/[^a-zA-Z0-9-$(.):']/g, '-')
+		.replace(/[^a-zA-Z0-9-$(.):'_]/g, '-')
 		.replace(/-{2,}/g, '-')
 		.replace(/^-/, '')
 		.replace(/-$/, '');

From dd6b49d03e4339aa2efdd2293b60036a65027b40 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:34:22 -0400
Subject: [PATCH 029/453] high priority hero image (#722)

---
 apps/svelte.dev/src/routes/_home/Hero.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index afd37c1ab5..8e0bac9728 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -37,7 +37,11 @@
 		<source srcset={MachineMobile.sources.avif} width="2208" height="936" type="image/avif" />
 		<source srcset={MachineMobile.sources.webp} width="2208" height="936" type="image/webp" />
 		<source srcset={MachineMobile.sources.png} width="2208" height="936" type="image/png" />
-		<img alt="The Svelte compiler packaging up your component code" src={MachineMobile.img.src} />
+		<img
+			alt="The Svelte compiler packaging up your component code"
+			src={MachineMobile.img.src}
+			fetchpriority="high"
+		/>
 	</picture>
 </div>
 

From 88ece00ea77c5c77ccbd2b887f808e6e9e04f9e1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:34:36 -0400
Subject: [PATCH 030/453] better tooltips (#721)

---
 .../playground/[id]/AppControls.svelte        | 24 ++-----------
 packages/repl/src/lib/Input/Migrate.svelte    |  4 +--
 .../site-kit/src/lib/styles/utils/buttons.css | 34 +++++++++++++++++++
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 536f4e1a90..6686f69198 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -206,7 +206,7 @@
 
 	<div class="buttons">
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={() => fork(false)}
 			aria-label={user ? 'fork' : 'log in to fork'}
@@ -219,7 +219,7 @@
 		</button>
 
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={save}
 			aria-label={user
@@ -267,26 +267,6 @@
 		background-size: 1.8rem;
 		z-index: 999;
 
-		&[aria-label]:hover::before {
-			content: '';
-			width: 1rem;
-			height: 1rem;
-			position: absolute;
-			background: var(--sk-text-3);
-			top: calc(100% + 0.5rem);
-			rotate: 45deg;
-		}
-
-		&[aria-label]:hover::after {
-			content: attr(aria-label);
-			position: absolute;
-			top: calc(100% + 1rem);
-			background: var(--sk-text-3);
-			color: var(--sk-back-4);
-			padding: 0.5em 0.5em;
-			border-radius: var(--sk-border-radius);
-		}
-
 		&.login {
 			width: auto;
 			background-image: url(http://github.com/$lib/icons/user-light.svg);
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 1ae2ec698d..676ebb5611 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <button
-	class="raised"
+	class="raised tooltip-left"
 	disabled={!can_migrate}
 	onclick={migrate}
-	title="Migrate this component towards the new syntax"
+	aria-label="Convert syntax from Svelte 4 to 5 if possible"
 >
 	migrate
 </button>
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 84f73e5173..440a4fb550 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -44,3 +44,37 @@
 	background-position: 50% 50%;
 	background-size: 2.3rem 2.3rem;
 }
+
+button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
+	--arrow-size: 1rem;
+
+	&::before {
+		content: '';
+		width: var(--arrow-size);
+		height: var(--arrow-size);
+		position: absolute;
+		background: var(--sk-text-3);
+		top: calc(100% + var(--arrow-size) * 0.5);
+		left: calc(50% - var(--arrow-size) * 0.5);
+		rotate: 45deg;
+	}
+
+	&::after {
+		content: attr(aria-label);
+		position: absolute;
+		top: calc(100% + var(--arrow-size));
+		left: 50%;
+		translate: -50% 0;
+		background: var(--sk-text-3);
+		color: var(--sk-back-4);
+		padding: 0.5em 0.8em;
+		border-radius: var(--sk-border-radius);
+		font: var(--sk-font-ui-small);
+		text-transform: none;
+		white-space: pre;
+	}
+
+	&.tooltip-left::after {
+		translate: calc(-100% + 2rem) 0;
+	}
+}

From a0e3813a586805aef4c62fdd086ccc8e7fdb4a55 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:34:51 -0400
Subject: [PATCH 031/453] reverse toggles (#718)

* reverse toggles

* take it down a notch
---
 apps/svelte.dev/src/lib/icons/theme-dark.svg            | 2 +-
 apps/svelte.dev/src/lib/icons/theme-light.svg           | 2 +-
 packages/site-kit/src/lib/components/FontToggle.svelte  | 8 ++++----
 packages/site-kit/src/lib/components/ThemeToggle.svelte | 5 +++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/apps/svelte.dev/src/lib/icons/theme-dark.svg
index 919499d388..53db51d3e3 100644
--- a/apps/svelte.dev/src/lib/icons/theme-dark.svg
+++ b/apps/svelte.dev/src/lib/icons/theme-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#d4d4d4" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/apps/svelte.dev/src/lib/icons/theme-light.svg
index 0f2b9b9621..8da55a82d7 100644
--- a/apps/svelte.dev/src/lib/icons/theme-light.svg
+++ b/apps/svelte.dev/src/lib/icons/theme-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#d4d4d4" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></svg>
diff --git a/packages/site-kit/src/lib/components/FontToggle.svelte b/packages/site-kit/src/lib/components/FontToggle.svelte
index 076372bbbf..bec698d3c3 100644
--- a/packages/site-kit/src/lib/components/FontToggle.svelte
+++ b/packages/site-kit/src/lib/components/FontToggle.svelte
@@ -30,18 +30,18 @@
 	}
 
 	button[aria-pressed='true'] {
-		background-image: url(http://github.com/icons/font-boring-light.svg);
+		background-image: url(http://github.com/icons/font-elegant-light.svg);
 
 		:global(.dark) & {
-			background-image: url(http://github.com/icons/font-boring-dark.svg);
+			background-image: url(http://github.com/icons/font-elegant-dark.svg);
 		}
 	}
 
 	button[aria-pressed='false'] {
-		background-image: url(http://github.com/icons/font-elegant-light.svg);
+		background-image: url(http://github.com/icons/font-boring-light.svg);
 
 		:global(.dark) & {
-			background-image: url(http://github.com/icons/font-elegant-dark.svg);
+			background-image: url(http://github.com/icons/font-boring-dark.svg);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 7882cd31c4..5e93614caf 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -31,10 +31,11 @@
 
 <style>
 	button {
-		background-image: url(http://github.com/$lib/icons/theme-light.svg);
+		background-image: url(http://github.com/$lib/icons/theme-dark.svg);
+		background-size: 2rem;
 
 		:global(.dark) & {
-			background-image: url(http://github.com/$lib/icons/theme-dark.svg);
+			background-image: url(http://github.com/$lib/icons/theme-light.svg);
 		}
 	}
 </style>

From 8a2f3482158b3048e5695282576cab8a5c9d19d2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:35:17 -0400
Subject: [PATCH 032/453] fix #320 (#710)

---
 packages/editor/src/lib/Editor.svelte       | 13 ++++++++++++-
 packages/editor/src/lib/Workspace.svelte.ts | 20 ++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index ed6c11d71b..9b7ab09c8d 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -52,14 +52,25 @@
 	}}
 />
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="container"
 	bind:this={container}
-	onfocusin={() => {
+	onpointerdown={() => {
+		workspace.enable_tab_indent();
+	}}
+	onkeydown={(e) => {
+		if (e.key !== 'Tab') {
+			workspace.enable_tab_indent();
+		}
+	}}
+	onfocusin={(e) => {
 		clearTimeout(remove_focus_timeout);
 		preserve_editor_focus = true;
 	}}
 	onfocusout={() => {
+		workspace.disable_tab_indent();
+
 		// Heuristic: user did refocus themmselves if iframe_took_focus
 		// doesn't happen in the next few miliseconds. Needed
 		// because else navigations inside the iframe refocus the editor.
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 8d6be150f5..3c8cbe1a8a 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -1,5 +1,5 @@
 import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
 import { basicSetup, EditorView } from 'codemirror';
@@ -51,10 +51,12 @@ function file_type(file: Item) {
 	return file.name.split('.').pop();
 }
 
+const tab_behaviour = new Compartment();
+
 const default_extensions = [
 	basicSetup,
 	EditorState.tabSize.of(2),
-	keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab]),
+	tab_behaviour.of(keymap.of([{ key: 'Tab', run: acceptCompletion }])),
 	indentUnit.of('\t'),
 	theme
 ];
@@ -209,6 +211,20 @@ export class Workspace {
 		return item;
 	}
 
+	disable_tab_indent() {
+		this.#view?.dispatch({
+			effects: tab_behaviour.reconfigure(keymap.of([{ key: 'Tab', run: acceptCompletion }]))
+		});
+	}
+
+	enable_tab_indent() {
+		this.#view?.dispatch({
+			effects: tab_behaviour.reconfigure(
+				keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab])
+			)
+		});
+	}
+
 	focus() {
 		setTimeout(() => {
 			this.#view?.focus();

From f1b24944c246a288cab5ec57ca0dcbbc7f81a4f9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 12:44:40 -0400
Subject: [PATCH 033/453] adjust margin/padding on `/docs` (#719)

fix #717
---
 apps/svelte.dev/src/routes/docs/+page.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 467ac71b77..864415d7c7 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -112,8 +112,8 @@
 	.options a {
 		display: block;
 		color: var(--sk-text-2);
-		margin: 1em -2em;
-		padding: 2em;
+		margin: 1em -1.6rem;
+		padding: 1.6rem;
 		background-color: var(--sk-back-1);
 		border-radius: var(--sk-border-radius);
 
@@ -141,5 +141,10 @@
 		p:last-child {
 			margin-bottom: 0;
 		}
+
+		@media (min-width: 480px) {
+			margin: 1em -2.4rem;
+			padding: 2.4rem;
+		}
 	}
 </style>

From 0eb56597d9cff514c91263bd78ac90ef91a53b6c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 14:24:56 -0400
Subject: [PATCH 034/453] order contributors (#723)

---
 .../src/routes/_home/Supporters/index.svelte  | 666 +++++++++++++++++-
 1 file changed, 661 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
index e65266f242..5fcf90bb22 100644
--- a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
+++ b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
@@ -61,9 +61,10 @@
 	}
 
 	.supporters {
+		--columns: 12;
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(12, minmax(0, 1fr));
+		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
 		grid-gap: 1rem;
 		mask-size: 100%;
 		mask-image: radial-gradient(ellipse min(50vw, 100rem) 500%, white, white 70%, transparent);
@@ -72,19 +73,19 @@
 		margin: 0 auto;
 
 		@media (min-width: 480px) {
-			grid-template-columns: repeat(16, minmax(0, 1fr));
+			--columns: 16;
 		}
 
 		@media (min-width: 720px) {
-			grid-template-columns: repeat(24, minmax(0, 1fr));
+			--columns: 24;
 		}
 
 		@media (min-width: 1000px) {
-			grid-template-columns: repeat(32, minmax(0, 1fr));
+			--columns: 32;
 		}
 
 		@media (min-width: 1600px) {
-			grid-template-columns: repeat(48, minmax(0, 1fr));
+			--columns: 48;
 		}
 	}
 
@@ -98,6 +99,661 @@
 		background-size: auto 102%;
 		filter: grayscale(1) opacity(0.7);
 		-webkit-transform: var(--safari-fix);
+		order: calc((var(--columns) * (var(--row) - 1)) + var(--column));
+
+		/** assign 8 rows... */
+		&:nth-child(n + 1):nth-child(-n + 12) {
+			--row: 1;
+		}
+
+		&:nth-child(n + 13):nth-child(-n + 24) {
+			--row: 2;
+		}
+
+		&:nth-child(n + 25):nth-child(-n + 36) {
+			--row: 3;
+		}
+
+		&:nth-child(n + 37):nth-child(-n + 48) {
+			--row: 4;
+		}
+
+		&:nth-child(n + 49):nth-child(-n + 60) {
+			--row: 5;
+		}
+
+		&:nth-child(n + 61):nth-child(-n + 72) {
+			--row: 6;
+		}
+
+		&:nth-child(n + 73):nth-child(-n + 84) {
+			--row: 7;
+		}
+
+		&:nth-child(n + 85):nth-child(-n + 96) {
+			--row: 8;
+		}
+
+		/** ...of 12 columns */
+		&:nth-child(12n + 1) {
+			--column: 6;
+		}
+
+		&:nth-child(12n + 2) {
+			--column: 7;
+		}
+
+		&:nth-child(12n + 3) {
+			--column: 5;
+		}
+
+		&:nth-child(12n + 4) {
+			--column: 8;
+		}
+
+		&:nth-child(12n + 5) {
+			--column: 4;
+		}
+
+		&:nth-child(12n + 6) {
+			--column: 9;
+		}
+
+		&:nth-child(12n + 7) {
+			--column: 3;
+		}
+
+		&:nth-child(12n + 8) {
+			--column: 10;
+		}
+
+		&:nth-child(12n + 9) {
+			--column: 2;
+		}
+
+		&:nth-child(12n + 10) {
+			--column: 11;
+		}
+
+		&:nth-child(12n + 11) {
+			--column: 1;
+		}
+
+		&:nth-child(12n + 12) {
+			--column: 12;
+		}
+
+		@media (min-width: 480px) {
+			/** assign 6 rows... */
+			&:nth-child(n + 1):nth-child(-n + 16) {
+				--row: 1;
+			}
+
+			&:nth-child(n + 17):nth-child(-n + 32) {
+				--row: 2;
+			}
+
+			&:nth-child(n + 33):nth-child(-n + 48) {
+				--row: 3;
+			}
+
+			&:nth-child(n + 49):nth-child(-n + 64) {
+				--row: 4;
+			}
+
+			&:nth-child(n + 65):nth-child(-n + 80) {
+				--row: 5;
+			}
+
+			&:nth-child(n + 81):nth-child(-n + 96) {
+				--row: 6;
+			}
+
+			/** ...of 16 columns */
+			&:nth-child(16n + 1) {
+				--column: 8;
+			}
+
+			&:nth-child(16n + 2) {
+				--column: 9;
+			}
+
+			&:nth-child(16n + 3) {
+				--column: 7;
+			}
+
+			&:nth-child(16n + 4) {
+				--column: 10;
+			}
+
+			&:nth-child(16n + 5) {
+				--column: 6;
+			}
+
+			&:nth-child(16n + 6) {
+				--column: 11;
+			}
+
+			&:nth-child(16n + 7) {
+				--column: 5;
+			}
+
+			&:nth-child(16n + 8) {
+				--column: 12;
+			}
+
+			&:nth-child(16n + 9) {
+				--column: 4;
+			}
+
+			&:nth-child(16n + 10) {
+				--column: 13;
+			}
+
+			&:nth-child(16n + 11) {
+				--column: 3;
+			}
+
+			&:nth-child(16n + 12) {
+				--column: 14;
+			}
+
+			&:nth-child(16n + 13) {
+				--column: 2;
+			}
+
+			&:nth-child(16n + 14) {
+				--column: 15;
+			}
+
+			&:nth-child(16n + 15) {
+				--column: 1;
+			}
+
+			&:nth-child(16n + 16) {
+				--column: 16;
+			}
+		}
+
+		@media (min-width: 720px) {
+			/** assign 4 rows... */
+			&:nth-child(n + 1):nth-child(-n + 24) {
+				--row: 1;
+			}
+
+			&:nth-child(n + 25):nth-child(-n + 48) {
+				--row: 2;
+			}
+
+			&:nth-child(n + 49):nth-child(-n + 72) {
+				--row: 3;
+			}
+
+			&:nth-child(n + 73):nth-child(-n + 96) {
+				--row: 4;
+			}
+
+			/** ...of 24 columns */
+			&:nth-child(24n + 1) {
+				--column: 12;
+			}
+
+			&:nth-child(24n + 2) {
+				--column: 13;
+			}
+
+			&:nth-child(24n + 3) {
+				--column: 11;
+			}
+
+			&:nth-child(24n + 4) {
+				--column: 14;
+			}
+
+			&:nth-child(24n + 5) {
+				--column: 10;
+			}
+
+			&:nth-child(24n + 6) {
+				--column: 15;
+			}
+
+			&:nth-child(24n + 7) {
+				--column: 9;
+			}
+
+			&:nth-child(24n + 8) {
+				--column: 16;
+			}
+
+			&:nth-child(24n + 9) {
+				--column: 8;
+			}
+
+			&:nth-child(24n + 10) {
+				--column: 17;
+			}
+
+			&:nth-child(24n + 11) {
+				--column: 7;
+			}
+
+			&:nth-child(24n + 12) {
+				--column: 18;
+			}
+
+			&:nth-child(24n + 13) {
+				--column: 6;
+			}
+
+			&:nth-child(24n + 14) {
+				--column: 19;
+			}
+
+			&:nth-child(24n + 15) {
+				--column: 5;
+			}
+
+			&:nth-child(24n + 16) {
+				--column: 20;
+			}
+
+			&:nth-child(24n + 17) {
+				--column: 4;
+			}
+
+			&:nth-child(24n + 18) {
+				--column: 21;
+			}
+
+			&:nth-child(24n + 19) {
+				--column: 3;
+			}
+
+			&:nth-child(24n + 20) {
+				--column: 22;
+			}
+
+			&:nth-child(24n + 21) {
+				--column: 2;
+			}
+
+			&:nth-child(24n + 22) {
+				--column: 23;
+			}
+
+			&:nth-child(24n + 23) {
+				--column: 1;
+			}
+
+			&:nth-child(24n + 24) {
+				--column: 24;
+			}
+		}
+
+		@media (min-width: 1000px) {
+			/** assign 3 rows... */
+			&:nth-child(n + 1):nth-child(-n + 32) {
+				--row: 1;
+			}
+
+			&:nth-child(n + 33):nth-child(-n + 64) {
+				--row: 2;
+			}
+
+			&:nth-child(n + 65):nth-child(-n + 96) {
+				--row: 3;
+			}
+
+			/** ...of 36 columns */
+			&:nth-child(36n + 1) {
+				--column: 18;
+			}
+
+			&:nth-child(36n + 2) {
+				--column: 19;
+			}
+
+			&:nth-child(36n + 3) {
+				--column: 17;
+			}
+
+			&:nth-child(36n + 4) {
+				--column: 20;
+			}
+
+			&:nth-child(36n + 5) {
+				--column: 16;
+			}
+
+			&:nth-child(36n + 6) {
+				--column: 21;
+			}
+
+			&:nth-child(36n + 7) {
+				--column: 15;
+			}
+
+			&:nth-child(36n + 8) {
+				--column: 22;
+			}
+
+			&:nth-child(36n + 9) {
+				--column: 14;
+			}
+
+			&:nth-child(36n + 10) {
+				--column: 23;
+			}
+
+			&:nth-child(36n + 11) {
+				--column: 13;
+			}
+
+			&:nth-child(36n + 12) {
+				--column: 24;
+			}
+
+			&:nth-child(36n + 13) {
+				--column: 12;
+			}
+
+			&:nth-child(36n + 14) {
+				--column: 25;
+			}
+
+			&:nth-child(36n + 15) {
+				--column: 11;
+			}
+
+			&:nth-child(36n + 16) {
+				--column: 26;
+			}
+
+			&:nth-child(36n + 17) {
+				--column: 10;
+			}
+
+			&:nth-child(36n + 18) {
+				--column: 27;
+			}
+
+			&:nth-child(36n + 19) {
+				--column: 9;
+			}
+
+			&:nth-child(36n + 20) {
+				--column: 28;
+			}
+
+			&:nth-child(36n + 21) {
+				--column: 8;
+			}
+
+			&:nth-child(36n + 22) {
+				--column: 29;
+			}
+
+			&:nth-child(36n + 23) {
+				--column: 7;
+			}
+
+			&:nth-child(36n + 24) {
+				--column: 30;
+			}
+
+			&:nth-child(36n + 25) {
+				--column: 6;
+			}
+
+			&:nth-child(36n + 26) {
+				--column: 31;
+			}
+
+			&:nth-child(36n + 27) {
+				--column: 5;
+			}
+
+			&:nth-child(36n + 28) {
+				--column: 32;
+			}
+
+			&:nth-child(36n + 29) {
+				--column: 4;
+			}
+
+			&:nth-child(36n + 30) {
+				--column: 33;
+			}
+
+			&:nth-child(36n + 31) {
+				--column: 3;
+			}
+
+			&:nth-child(36n + 32) {
+				--column: 34;
+			}
+
+			&:nth-child(36n + 33) {
+				--column: 2;
+			}
+
+			&:nth-child(36n + 34) {
+				--column: 35;
+			}
+
+			&:nth-child(36n + 35) {
+				--column: 1;
+			}
+
+			&:nth-child(36n + 36) {
+				--column: 36;
+			}
+		}
+
+		@media (min-width: 1600px) {
+			/** assign 2 rows... */
+			&:nth-child(n + 1):nth-child(-n + 48) {
+				--row: 1;
+			}
+
+			&:nth-child(n + 49):nth-child(-n + 96) {
+				--row: 2;
+			}
+
+			/** ...of 48 columns */
+			&:nth-child(48n + 1) {
+				--column: 24;
+			}
+
+			&:nth-child(48n + 2) {
+				--column: 25;
+			}
+
+			&:nth-child(48n + 3) {
+				--column: 23;
+			}
+
+			&:nth-child(48n + 4) {
+				--column: 26;
+			}
+
+			&:nth-child(48n + 5) {
+				--column: 22;
+			}
+
+			&:nth-child(48n + 6) {
+				--column: 27;
+			}
+
+			&:nth-child(48n + 7) {
+				--column: 21;
+			}
+
+			&:nth-child(48n + 8) {
+				--column: 28;
+			}
+
+			&:nth-child(48n + 9) {
+				--column: 20;
+			}
+
+			&:nth-child(48n + 10) {
+				--column: 29;
+			}
+
+			&:nth-child(48n + 11) {
+				--column: 19;
+			}
+
+			&:nth-child(48n + 12) {
+				--column: 30;
+			}
+
+			&:nth-child(48n + 13) {
+				--column: 18;
+			}
+
+			&:nth-child(48n + 14) {
+				--column: 31;
+			}
+
+			&:nth-child(48n + 15) {
+				--column: 17;
+			}
+
+			&:nth-child(48n + 16) {
+				--column: 32;
+			}
+
+			&:nth-child(48n + 17) {
+				--column: 16;
+			}
+
+			&:nth-child(48n + 18) {
+				--column: 33;
+			}
+
+			&:nth-child(48n + 19) {
+				--column: 15;
+			}
+
+			&:nth-child(48n + 20) {
+				--column: 34;
+			}
+
+			&:nth-child(48n + 21) {
+				--column: 14;
+			}
+
+			&:nth-child(48n + 22) {
+				--column: 35;
+			}
+
+			&:nth-child(48n + 23) {
+				--column: 13;
+			}
+
+			&:nth-child(48n + 24) {
+				--column: 36;
+			}
+
+			&:nth-child(48n + 25) {
+				--column: 12;
+			}
+
+			&:nth-child(48n + 26) {
+				--column: 37;
+			}
+
+			&:nth-child(48n + 27) {
+				--column: 11;
+			}
+
+			&:nth-child(48n + 28) {
+				--column: 38;
+			}
+
+			&:nth-child(48n + 29) {
+				--column: 10;
+			}
+
+			&:nth-child(48n + 30) {
+				--column: 39;
+			}
+
+			&:nth-child(48n + 31) {
+				--column: 9;
+			}
+
+			&:nth-child(48n + 32) {
+				--column: 40;
+			}
+
+			&:nth-child(48n + 33) {
+				--column: 8;
+			}
+
+			&:nth-child(48n + 34) {
+				--column: 41;
+			}
+
+			&:nth-child(48n + 35) {
+				--column: 7;
+			}
+
+			&:nth-child(48n + 36) {
+				--column: 42;
+			}
+
+			&:nth-child(48n + 37) {
+				--column: 6;
+			}
+
+			&:nth-child(48n + 38) {
+				--column: 43;
+			}
+
+			&:nth-child(48n + 39) {
+				--column: 5;
+			}
+
+			&:nth-child(48n + 40) {
+				--column: 44;
+			}
+
+			&:nth-child(48n + 41) {
+				--column: 4;
+			}
+
+			&:nth-child(48n + 42) {
+				--column: 45;
+			}
+
+			&:nth-child(48n + 43) {
+				--column: 3;
+			}
+
+			&:nth-child(48n + 44) {
+				--column: 46;
+			}
+
+			&:nth-child(48n + 45) {
+				--column: 2;
+			}
+
+			&:nth-child(48n + 46) {
+				--column: 47;
+			}
+
+			&:nth-child(48n + 47) {
+				--column: 1;
+			}
+
+			&:nth-child(48n + 48) {
+				--column: 48;
+			}
+		}
 	}
 
 	.supporter:hover {

From 16551c8c82d11efa8e6315f2ec78459a20d91eca Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 14:43:17 -0400
Subject: [PATCH 035/453] sync docs (#725)

* sync docs

* Update apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
---
 .../content/docs/cli/20-commands/20-sv-add.md     |  1 -
 .../svelte/01-introduction/02-getting-started.md  |  2 +-
 .../svelte/01-introduction/03-svelte-files.md     |  2 +-
 .../content/docs/svelte/02-runes/03-$derived.md   |  2 +-
 .../content/docs/svelte/02-runes/04-$effect.md    |  3 +--
 .../docs/svelte/03-template-syntax/05-await.md    |  2 +-
 .../docs/svelte/03-template-syntax/06-snippet.md  |  2 +-
 .../docs/svelte/03-template-syntax/15-animate.md  |  6 +-----
 .../svelte/04-styling/04-nested-style-elements.md |  2 +-
 .../05-special-elements/06-svelte-options.md      | 15 ++++++++++-----
 .../content/docs/svelte/06-runtime/01-stores.md   |  2 +-
 .../docs/svelte/06-runtime/03-lifecycle-hooks.md  |  2 +-
 .../98-reference/.generated/compile-errors.md     |  2 +-
 .../svelte/98-reference/21-svelte-compiler.md     |  4 +++-
 .../svelte/98-reference/30-compiler-errors.md     |  2 +-
 .../docs/svelte/99-legacy/00-legacy-overview.md   |  2 ++
 16 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
index f6bdaeeb09..0df56f7ac0 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -33,7 +33,6 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 - `paraglide`
 - `playwright`
 - `prettier`
-- `routify`
 - `storybook`
 - `tailwindcss`
 - `vitest`
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
index 37757d961f..e035e6d6df 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
@@ -21,7 +21,7 @@ There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-sv
 
 ## Editor tooling
 
-The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
 
 You can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
index a0c0bf5cc9..cd98652370 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
@@ -50,7 +50,7 @@ A `<script>` tag with a `module` attribute runs once when the module first evalu
 
 You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
 
-> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
+> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
 
 > [!LEGACY]
 > In Svelte 4, this script tag was created using `<script context="module">`
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index 96cafeaaea..77ab07a0a9 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -21,7 +21,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
 
 As with `$state`, you can mark class fields as `$derived`.
 
-> [!NOTE] Code in Svelte components is only executed once at creation, without the `$derived` rune `double` would maintain it's original value.
+> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.
 
 ## `$derived.by`
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 07291daa43..354869f35e 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -243,8 +243,7 @@ export default function readable<T>(
 
 ## `$effect.root`
 
-The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
-nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.
+The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
 
 ```svelte
 <script>
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
index 7fe7a963c5..6f365179e4 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
@@ -39,7 +39,7 @@ Await blocks allow you to branch on the three possible states of a [`Promise`](h
 
 > [!NOTE] During server-side rendering, only the pending branch will be rendered.
 >
-> If the provided expression is not a `Promise` only the `:then` branch will be rendered, including during server-side rendering.
+> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.
 
 The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index 43bafdd67d..d4ec5a0cef 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -53,7 +53,7 @@ Snippets, and [render tags](@render), are a way to create reusable chunks of mar
 {/each}
 ```
 
-Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters however.
+Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.
 
 ## Snippet scope
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
index 583936be3b..a54e37f0b1 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
@@ -2,15 +2,12 @@
 title: animate:
 ---
 
-
-
-
 An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
 
 Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).
 
 ```svelte
-<!-- When `list` is reordered the animation will run-->
+<!-- When `list` is reordered the animation will run -->
 {#each list as item, index (item)}
 	<li animate:flip>{item}</li>
 {/each}
@@ -115,4 +112,3 @@ A custom animation function can also return a `tick` function, which is called _
 	<div animate:whizz>{item}</div>
 {/each}
 ```
-
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md b/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
index 6198c636d5..4fc5cfa521 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
@@ -2,7 +2,7 @@
 title: Nested <style> elements
 ---
 
-There should only be 1 top-level `<style>` tag per component.
+There can only be one top-level `<style>` tag per component.
 
 However, it is possible to have a `<style>` tag nested inside other elements or logic blocks.
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md
index 595b1c54e8..d29042e278 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md
@@ -8,14 +8,19 @@ title: <svelte:options>
 
 The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:
 
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
 - `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section)
 - `runes={false}` — forces a component into _legacy mode_
-- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
+- `namespace="..."` — the namespace where this component will be used, can be "html" (the default), "svg" or "mathml"
 - `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
+- `css="injected"` — the component will inject its styles inline: During server side rendering, it's injected as a `<style>` tag in the `head`, during client side rendering, it's loaded via JavaScript
+
+> [!LEGACY] Deprecated options
+> Svelte 4 also included the following options. They are deprecated in Svelte 5 and non-functional in runes mode.
+>
+> - `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
+> - `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
+> - `accessors={true}` — adds getters and setters for the component's props
+> - `accessors={false}` — the default
 
 ```svelte
 <svelte:options customElement="my-custom-element" />
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
index 43bd38580a..8ea01e5314 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
@@ -36,7 +36,7 @@ Local variables (that do not represent store values) must _not_ have a `$` prefi
 Prior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished.
 
 - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
-- when creating shared state, you can create a `$state` object containing the values you need and manipulating said state
+- when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
 
 Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index 23a6629929..428ddf47fc 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -7,7 +7,7 @@ title: Lifecycle hooks
 - beforeUpdate/afterUpdate with deprecation notice?
 - or skip this entirely and only have it in the reference docs? -->
 
-In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
+In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between — when certain state is updated — is not related to the component as a whole; only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
 
 ## `onMount`
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 1b8511a6f6..3981822d84 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -119,7 +119,7 @@ Can only bind to state or props
 ### block_invalid_continuation_placement
 
 ```
-{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+{:...} block is invalid at this position (did you forget to close the preceding element or block?)
 ```
 
 ### block_invalid_elseif
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 1ab80cc87a..cf84d267d5 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -78,10 +78,12 @@ May throw an error if the code is too complex to migrate automatically.
 function migrate(
 	source: string,
 	{
-		filename
+		filename,
+		use_ts
 	}?:
 		| {
 				filename?: string;
+				use_ts?: boolean;
 		  }
 		| undefined
 ): {
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index a92a7b1bfd..7e84a223a9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -123,7 +123,7 @@ Can only bind to state or props
 ### block_invalid_continuation_placement
 
 ```
-{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+{:...} block is invalid at this position (did you forget to close the preceding element or block?)
 ```
 
 ### block_invalid_elseif
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md b/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
index 0840b2256e..638a77ec1a 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
@@ -10,3 +10,5 @@ The following pages document these features for
 - people using Svelte 5, but with components that haven't yet been migrated
 
 Since Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.
+
+If you're exclusively interested in the Svelte 3/4 syntax, you can browse its documentation at [v4.svelte.dev](https://v4.svelte.dev).

From b917545d7413d171e9e715ffa65114b883590641 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 15:19:04 -0400
Subject: [PATCH 036/453] set inlineStyleThreshold (#724)

---
 apps/svelte.dev/svelte.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/svelte.dev/svelte.config.js b/apps/svelte.dev/svelte.config.js
index 4f67fbd286..63068c76be 100644
--- a/apps/svelte.dev/svelte.config.js
+++ b/apps/svelte.dev/svelte.config.js
@@ -7,6 +7,9 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
+
+		inlineStyleThreshold: 1000,
+
 		prerender: {
 			handleMissingId(warning) {
 				if (warning.id.startsWith('H4sIA')) {

From cd53d5ab81a940e781c97d1f7e722e4b2df91e04 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 15:19:14 -0400
Subject: [PATCH 037/453] add --pull flag to sync-docs, pull existing repo if
 nec (#726)

* add --pull flag to sync-docs, pull existing repo if nec

* fix branch
---
 apps/svelte.dev/scripts/sync-docs/index.ts | 48 ++++++++++++++++++----
 apps/svelte.dev/scripts/sync-docs/utils.ts | 33 ++++++++-------
 2 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index c40e37c674..4866a41787 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -1,6 +1,7 @@
 import { preprocess } from '@sveltejs/site-kit/markdown/preprocess';
 import path from 'node:path';
 import fs from 'node:fs';
+import { parseArgs } from 'node:util';
 import ts from 'typescript';
 import glob from 'tiny-glob/sync';
 import chokidar from 'chokidar';
@@ -19,6 +20,22 @@ interface Package {
 	process_modules?: (modules: Modules, pkg: Package) => Promise<Modules>;
 }
 
+const parsed = parseArgs({
+	args: process.argv.slice(2),
+	options: {
+		watch: {
+			type: 'boolean',
+			short: 'w'
+		},
+		pull: {
+			type: 'boolean',
+			short: 'p'
+		}
+	},
+	strict: true,
+	allowPositionals: true
+});
+
 const dirname = fileURLToPath(new URL('.', import.meta.url));
 const REPOS = path.join(dirname, '../../repos');
 const DOCS = path.join(dirname, '../../content/docs');
@@ -111,29 +128,42 @@ const packages: Package[] = [
 	{
 		name: 'cli',
 		repo: 'sveltejs/cli',
-		branch: 'chore/add-docs',
+		branch: 'main',
 		pkg: 'packages/cli',
 		docs: 'documentation/docs',
 		types: null
 	}
 ];
 
+const unknown = parsed.positionals.filter((name) => !packages.some((pkg) => pkg.name === name));
+
+if (unknown.length > 0) {
+	throw new Error(
+		`Valid repos are ${packages.map((pkg) => pkg.name).join(', ')} (saw ${unknown.join(', ')})`
+	);
+}
+
+const filtered =
+	parsed.positionals.length === 0
+		? packages
+		: packages.filter((pkg) => parsed.positionals.includes(pkg.name));
+
 /**
  * Depending on your setup, this will either clone the Svelte and SvelteKit repositories
  * or use the local paths you provided above to read the documentation files.
  * It will then copy them into the `content/docs` directory and process them to replace
  * placeholders for types with content from the generated types.
  */
-if (process.env.USE_GIT === 'true') {
+if (parsed.values.pull) {
 	try {
 		fs.mkdirSync(REPOS);
 	} catch {
 		// ignore if it already exists
 	}
 
-	await Promise.all(
-		packages.map((pkg) => clone_repo(`https://github.com/${pkg.repo}.git`, pkg.branch, REPOS))
-	);
+	for (const pkg of filtered) {
+		await clone_repo(`https://github.com/${pkg.repo}.git`, pkg.name, pkg.branch, REPOS);
+	}
 }
 
 async function sync(pkg: Package) {
@@ -157,16 +187,18 @@ async function sync(pkg: Package) {
 	}
 }
 
-for (const pkg of packages) {
+for (const pkg of filtered) {
 	await sync(pkg);
 }
 
-if (process.argv.includes('-w') || process.argv.includes('--watch')) {
-	for (const pkg of packages) {
+if (parsed.values.watch) {
+	for (const pkg of filtered) {
 		chokidar
 			.watch(`${REPOS}/${pkg.name}/${pkg.docs}`, { ignoreInitial: true })
 			.on('all', (event) => {
 				sync(pkg);
 			});
 	}
+
+	console.log(`\nwatching for changes in ${parsed.positionals.join(', ')}`);
 }
diff --git a/apps/svelte.dev/scripts/sync-docs/utils.ts b/apps/svelte.dev/scripts/sync-docs/utils.ts
index 2a925d131f..774bb2fe75 100644
--- a/apps/svelte.dev/scripts/sync-docs/utils.ts
+++ b/apps/svelte.dev/scripts/sync-docs/utils.ts
@@ -1,17 +1,21 @@
-import { spawn, type SpawnOptions } from 'node:child_process';
+import { execSync, spawn, type SpawnOptions } from 'node:child_process';
 import fs from 'node:fs';
 import glob from 'tiny-glob/sync';
 
-export async function clone_repo(repo: string, branch: string, cwd: string) {
-	const regex_result = /https:\/\/github.com\/\w+\/(\w+).git/.exec(repo);
-	if (!regex_result || regex_result.length < 2) {
-		throw new Error(`Expected https://github.com/xxx/xxx.git, but got ${repo}`);
-	}
+export async function clone_repo(repo: string, name: string, branch: string, cwd: string) {
+	const dir = `${cwd}/${name}`;
+
+	if (fs.existsSync(dir)) {
+		const opts = { cwd: dir };
+
+		if (execSync('git status -s', opts).toString() !== '') {
+			throw new Error(`${name} repo is dirty — aborting`);
+		}
+
+		await invoke('git', ['checkout', branch], opts);
+		await invoke('git', ['pull'], opts);
 
-	const dirname = `${cwd}/${regex_result[1]}`;
-	if (fs.existsSync(dirname)) {
-		// TODO skip if we detect that same branch is already cloned
-		fs.rmSync(dirname, { recursive: true });
+		return;
 	}
 
 	await invoke('git', ['clone', '--depth', '1', '--branch', branch, repo], {
@@ -22,14 +26,15 @@ export async function clone_repo(repo: string, branch: string, cwd: string) {
 export function invoke(cmd: string, args: string[], opts: SpawnOptions) {
 	const child = spawn(cmd, args, { ...opts, stdio: 'inherit' });
 
-	return new Promise<void>((resolve) => {
+	return new Promise<void>((fulfil, reject) => {
 		child.on('close', (code) => {
-			if (!code) {
-				console.log(`${[cmd, ...args].join(' ')} successfully completed`);
+			if (code) {
+				reject(new Error(`Exited with code ${code}`));
+				return;
 			}
 
 			// Give it some extra time to finish writing files to disk
-			setTimeout(() => resolve(), 500);
+			setTimeout(fulfil, 500);
 		});
 	});
 }

From 0c55923982698491ff5c54cce2779dfbe94de31f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 17:40:14 -0400
Subject: [PATCH 038/453] add sync-docs workflow (#728)

* add sync-docs workflow

* remove outdated comment
---
 .github/workflows/sync-docs.yml | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 .github/workflows/sync-docs.yml

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
new file mode 100644
index 0000000000..c2a3c7f547
--- /dev/null
+++ b/.github/workflows/sync-docs.yml
@@ -0,0 +1,29 @@
+name: Sync docs
+
+on:
+  repository_dispatch:
+    types: [sync-request]
+
+jobs:
+  log:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+
+      - name: Sync
+        run: cd apps/svelte.dev && pnpm sync-docs -p ${{ github.event.client_payload.package }}
+
+      - name: Create or update pull request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: sync ${{ github.event.client_payload.package }} docs
+          title: Sync ${{ github.event.client_payload.package }}
+          body: This is an automated pull request
+          branch: sync:${{ github.event.client_payload.package }}
+          base: main

From 9c0b5536271664a161ee63714f6a9a191870bcb5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 17:51:19 -0400
Subject: [PATCH 039/453] try now

---
 .github/workflows/sync-docs.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index c2a3c7f547..d41e3665f2 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -5,7 +5,7 @@ on:
     types: [sync-request]
 
 jobs:
-  log:
+  Sync:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -25,5 +25,5 @@ jobs:
           commit-message: sync ${{ github.event.client_payload.package }} docs
           title: Sync ${{ github.event.client_payload.package }}
           body: This is an automated pull request
-          branch: sync:${{ github.event.client_payload.package }}
+          branch: sync/${{ github.event.client_payload.package }}
           base: main

From 090db441f2c71144ff6b487cbfa732542582acfe Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 17:56:50 -0400
Subject: [PATCH 040/453] tweak

---
 .github/workflows/sync-docs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index d41e3665f2..9af58288c7 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -23,7 +23,7 @@ jobs:
         uses: peter-evans/create-pull-request@v7
         with:
           commit-message: sync ${{ github.event.client_payload.package }} docs
-          title: Sync ${{ github.event.client_payload.package }}
+          title: Sync `${{ github.event.client_payload.package }}` docs
           body: This is an automated pull request
           branch: sync/${{ github.event.client_payload.package }}
           base: main

From c3046f75e11492a2feb8efa2c7dc8f155e5c15cd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:11:55 -0400
Subject: [PATCH 041/453] Sync `svelte` docs (#731)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/14-in-and-out.md   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
index feb5aa84c5..865398b46e 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
@@ -5,6 +5,17 @@ title: in: and out:
 The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
 
 ```svelte
+<script>
+  import { fade, fly } from 'svelte/transition';
+  
+  let visible = $state(false);
+</script>
+
+<label>
+  <input type="checkbox" bind:checked={visible}>
+  visible
+</label>
+
 {#if visible}
 	<div in:fly out:fade>flies in, fades out</div>
 {/if}

From a059e1380a277776622c43d19cb813cd1f488968 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:34:10 -0400
Subject: [PATCH 042/453] Sync `svelte` docs (#732)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
index 07429a2818..1afe25deca 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
@@ -2,6 +2,8 @@
 title: $inspect
 ---
 
+> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
+
 The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
 
 ```svelte
@@ -40,5 +42,3 @@ A convenient way to find the origin of some change is to pass `console.trace` to
 // @errors: 2304
 $inspect(stuff).with(console.trace);
 ```
-
-> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.

From 859e591c883d39cc9947c1890f3c2baacf5851f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:57:09 -0400
Subject: [PATCH 043/453] Sync `svelte` docs (#733)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/03-template-syntax/14-in-and-out.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
index 865398b46e..f4e37c845e 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
@@ -17,6 +17,6 @@ The `in:` and `out:` directives are identical to [`transition:`](transition), ex
 </label>
 
 {#if visible}
-	<div in:fly out:fade>flies in, fades out</div>
+	<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
 {/if}
 ```

From 8156c4bbca0ad692fe6caa0c4887b7fe781c2b1a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 30 Oct 2024 20:04:33 -0400
Subject: [PATCH 044/453] rename Menu.svelte to MobileMenu.svelte (#734)

---
 .../site-kit/src/lib/nav/{Menu.svelte => MobileMenu.svelte} | 6 +++---
 .../lib/nav/{NavContextMenu.svelte => MobileSubMenu.svelte} | 0
 packages/site-kit/src/lib/nav/Nav.svelte                    | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/site-kit/src/lib/nav/{Menu.svelte => MobileMenu.svelte} (97%)
 rename packages/site-kit/src/lib/nav/{NavContextMenu.svelte => MobileSubMenu.svelte} (100%)

diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
similarity index 97%
rename from packages/site-kit/src/lib/nav/Menu.svelte
rename to packages/site-kit/src/lib/nav/MobileMenu.svelte
index f3b39a3353..149ebeae27 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -6,7 +6,7 @@
 	import { expoOut, quintOut } from 'svelte/easing';
 	import type { TransitionConfig } from 'svelte/transition';
 	import Icon from '../components/Icon.svelte';
-	import NavContextMenu from './NavContextMenu.svelte';
+	import MobileSubMenu from './MobileSubMenu.svelte';
 	import type { NavigationLink } from '../types';
 	import ModalOverlay from '../components/ModalOverlay.svelte';
 
@@ -20,7 +20,7 @@
 
 	let show_context_menu = $state(!!current?.sections);
 
-	let nav_context_instance: NavContextMenu | undefined = $state();
+	let nav_context_instance: ReturnType<typeof MobileSubMenu> | undefined = $state();
 
 	let menu_height = $state(0);
 	let universal_menu_inner_height = $state(0);
@@ -153,7 +153,7 @@
 
 				<div class="context" inert={!show_context_menu}>
 					{#if current}
-						<NavContextMenu
+						<MobileSubMenu
 							bind:this={nav_context_instance}
 							title={current.title}
 							contents={current.sections}
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
similarity index 100%
rename from packages/site-kit/src/lib/nav/NavContextMenu.svelte
rename to packages/site-kit/src/lib/nav/MobileSubMenu.svelte
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 170e04f54b..5806d35b6f 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -7,7 +7,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Icon from '../components/Icon.svelte';
 	import { page } from '$app/stores';
 	import ThemeToggle from '../components/ThemeToggle.svelte';
-	import Menu from './Menu.svelte';
+	import MobileMenu from './MobileMenu.svelte';
 	import type { NavigationLink } from '../types';
 	import Dropdown from '../components/Dropdown.svelte';
 	import { HoverMenu } from '../components';
@@ -174,7 +174,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 {#if open}
 	<div class="mobile">
-		<Menu {links} {current} onclose={() => (open = false)} />
+		<MobileMenu {links} {current} onclose={() => (open = false)} />
 	</div>
 {/if}
 

From 2c148025828b8c6a98cdbfe712e912e47e9ebcd7 Mon Sep 17 00:00:00 2001
From: Theo Ratkin <theo@theoratkin.com>
Date: Thu, 31 Oct 2024 05:00:41 -0400
Subject: [PATCH 045/453] docs(tutorial): update app creation command to Svelte
 CLI (#736)

Replace deprecated `create-svelte` package with new `sv` command in the tutorial conclusion
---
 .../07-conclusion/01-next-steps/index.md                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
index 19a69fc1c0..20ce08f918 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
@@ -4,10 +4,10 @@ title: Next steps
 
 Congratulations! If you've made it the entire way through this tutorial, you can now consider yourself a Svelte and SvelteKit expert.
 
-You can start building apps on your own machine with the [`create-svelte`](https://www.npmjs.com/package/create-svelte) package:
+You can start building apps on your own machine with [Svelte CLI](https://www.npmjs.com/package/sv):
 
 ```bash
-npm create svelte@latest
+npx sv create
 ```
 
 Svelte and SvelteKit will continue to evolve, and so will this tutorial. Check back periodically for updates.

From e78cb031ec4ace0c75eb76c8840b920c4b23fbee Mon Sep 17 00:00:00 2001
From: uglyreptile <174735403+uglyreptile@users.noreply.github.com>
Date: Thu, 31 Oct 2024 20:14:34 +0400
Subject: [PATCH 046/453] Change Search Box escape key from e.code to e.key
 (#741)

Update SearchBox.svelte
---
 packages/site-kit/src/lib/search/SearchBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 706a2e2d73..113fe1e4ba 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -136,7 +136,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 		}
 
-		if (e.code === 'Escape') {
+		if (e.key === 'Escape') {
 			close();
 		}
 	}}

From 429af4e9c400499766509e4df333db8fc691ba47 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 31 Oct 2024 14:02:33 -0400
Subject: [PATCH 047/453] fix runtime-warnings page (#742)

* fix runtime-warnings page

* fix
---
 .../98-reference/30-runtime-warnings.md       | 123 +++++++-----------
 1 file changed, 46 insertions(+), 77 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index f366cb96f0..1f6c7598df 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -2,162 +2,131 @@
 title: 'Runtime warnings'
 ---
 
-## Client errors
+## Client warnings
 
-### bind_invalid_checkbox_value
+### binding_property_non_reactive
 
 ```
-Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
+`%binding%` is binding to a non-reactive property
 ```
 
-### bind_invalid_export
-
-```
-Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
-```
-
-### bind_not_bindable
-
 ```
-A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
+`%binding%` (%location%) is binding to a non-reactive property
 ```
 
-### component_api_changed
+### console_log_state
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
 ```
 
-### component_api_invalid_new
+When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
-```
+The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
 
-### derived_references_self
+### event_handler_invalid
 
 ```
-A derived value cannot reference itself recursively
+%handler% should be a function. Did you mean to %suggestion%?
 ```
 
-### each_key_duplicate
-
-```
-Keyed each block has duplicate key at indexes %a% and %b%
-```
+### hydration_attribute_changed
 
 ```
-Keyed each block has duplicate key `%value%` at indexes %a% and %b%
+The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
 ```
 
-### effect_in_teardown
+### hydration_html_changed
 
 ```
-`%rune%` cannot be used inside an effect cleanup function
+The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
 ```
 
-### effect_in_unowned_derived
-
 ```
-Effect cannot be created inside a `$derived` value that was not itself created inside an effect
+The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
 ```
 
-### effect_orphan
+### hydration_mismatch
 
 ```
-`%rune%` can only be used inside an effect (e.g. during component initialisation)
+Hydration failed because the initial UI does not match what was rendered on the server
 ```
 
-### effect_update_depth_exceeded
-
 ```
-Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 ```
 
-### hydration_failed
+### invalid_raw_snippet_render
 
 ```
-Failed to hydrate the application
+The `render` function passed to `createRawSnippet` should return HTML for a single element
 ```
 
-### invalid_snippet
+### legacy_recursive_reactive_block
 
 ```
-Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
+Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
 ```
 
-### lifecycle_legacy_only
+### lifecycle_double_unmount
 
 ```
-`%name%(...)` cannot be used in runes mode
+Tried to unmount a component that was not mounted
 ```
 
-### props_invalid_value
+### ownership_invalid_binding
 
 ```
-Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
 ```
 
-### props_rest_readonly
+### ownership_invalid_mutation
 
 ```
-Rest element properties of `$props()` such as `%property%` are readonly
+Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
-### rune_outside_svelte
-
 ```
-The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
+%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
-### state_descriptors_fixed
+### state_proxy_equality_mismatch
 
 ```
-Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
 ```
 
-### state_prototype_fixed
-
-```
-Cannot set prototype of `$state` object
-```
+`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
 
-### state_unsafe_local_read
+```svelte
+<script>
+	let value = { foo: 'bar' };
+	let proxy = $state(value);
 
+	value === proxy; // always false
+</script>
 ```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
-```
-
-### state_unsafe_mutation
 
-```
-Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
-```
+To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
 
-## Shared errors
+## Shared warnings
 
-### invalid_default_snippet
+### dynamic_void_element_content
 
 ```
-Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+`<svelte:element this="%tag%">` is a void element — it cannot have content
 ```
 
-### lifecycle_outside_component
+### state_snapshot_uncloneable
 
 ```
-`%name%(...)` can only be used during component initialisation
+Value cannot be cloned with `$state.snapshot` — the original value was returned
 ```
 
-### store_invalid_shape
-
 ```
-`%name%` is not a store with a `subscribe` method
-```
-
-### svelte_element_invalid_this_value
+The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
 
-```
-The `this` prop on `<svelte:element>` must be a string, if defined
+%properties%
 ```
 

From e425c6a7d4d8ffa14cb6a3335ebf2c48270bebec Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 31 Oct 2024 14:35:34 -0400
Subject: [PATCH 048/453] fix screenshots on safari (#739)

* fix screenshots on safari

* fix another
---
 apps/svelte.dev/src/routes/_home/Testimonials.svelte | 1 +
 packages/site-kit/src/lib/components/Dropdown.svelte | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index f76bf717e1..4d275faf97 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -95,6 +95,7 @@
 			transition-property: filter, scale;
 			transition-duration: 0.2s;
 			user-select: none;
+			will-change: filter, transform;
 
 			&:nth-child(1) {
 				top: 0%;
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 841811ee08..6518cf9c62 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -36,6 +36,7 @@
 		border-radius: var(--sk-border-radius);
 		z-index: 999;
 		-webkit-transform: var(--safari-fix);
+		will-change: opacity;
 
 		&.align-right {
 			left: auto;

From 531f21ed35a825babfed455e376a461e72d86b5e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 31 Oct 2024 14:36:32 -0400
Subject: [PATCH 049/453] add sync-docs README (#730)

* add sync-docs README

* tweak

* link to README
---
 .github/workflows/sync-docs.yml             |  2 +-
 apps/svelte.dev/scripts/sync-docs/README.md | 85 +++++++++++++++++++++
 2 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 apps/svelte.dev/scripts/sync-docs/README.md

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 9af58288c7..01bd5df484 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -24,6 +24,6 @@ jobs:
         with:
           commit-message: sync ${{ github.event.client_payload.package }} docs
           title: Sync `${{ github.event.client_payload.package }}` docs
-          body: This is an automated pull request
+          body: This is an automated pull request. See the [README](../tree/main/apps/svelte.dev/scripts/sync-docs/README.md) for more information
           branch: sync/${{ github.event.client_payload.package }}
           base: main
diff --git a/apps/svelte.dev/scripts/sync-docs/README.md b/apps/svelte.dev/scripts/sync-docs/README.md
new file mode 100644
index 0000000000..3ee19e2469
--- /dev/null
+++ b/apps/svelte.dev/scripts/sync-docs/README.md
@@ -0,0 +1,85 @@
+# sync-docs
+
+Documentation lives in external repos (at the time of writing, [`sveltejs/svelte`](https://github.com/sveltejs/svelte), [`sveltejs/kit`](https://github.com/sveltejs/kit) and [`sveltejs/cli`](https://github.com/sveltejs/cli), though the plan is to add others) and synced into this repo.
+
+The repos must be cloned (or linked — see [next section](#setup)) into the `apps/svelte.dev/repos` directory.
+
+## Setup
+
+For local development, it's recommended that you symlink the repos, so that you can see changes immediately then open a PR once you're happy with them:
+
+```bash
+cd apps/svelte.dev
+ln -s /path/to/wherever/you/cloned/sveltejs/svelte repos/svelte
+ln -s /path/to/wherever/you/cloned/sveltejs/kit repos/kit
+ln -s /path/to/wherever/you/cloned/sveltejs/cli repos/cli
+```
+
+I have no idea what the equivalent Windows command would be.
+
+## Syncing
+
+To run the `sync-docs` script locally:
+
+```bash
+pnpm sync-docs
+```
+
+If you've symlinked the repos and want to watch for changes, you can use the `-w` command:
+
+```bash
+pnpm sync-docs -w # or --watch, if you're fancy
+```
+
+To pull from the remote first (or clone it, if you don't have it symlinked/cloned locally already):
+
+```bash
+pnpm sync-docs -p # or --pull
+```
+
+You can combine flags, and specify individual packages:
+
+```bash
+pnpm sync-docs -pw kit cli
+```
+
+## Automation
+
+Changes to documentation in the source repos will trigger the [`sync-docs.yml`](../../../../.github/workflows/sync-docs.yml) workflow. This is possible because the repos in question have their own `sync-request.yml` workflow that dispatches a request to this repo.
+
+To set up a new repo, create a file in that repo called `.github/workflows/sync-request.yml` with the following contents:
+
+```yml
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Dispatch sync request
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: sync-request
+          client-payload: |-
+            {
+              "package": "<YOUR_PACKAGE_NAME>"
+            }
+```
+
+`YOUR_PACKAGE_NAME` corresponds to the entry in [index.ts](./index.ts).
+
+You will need to add a `SYNC_REQUEST_TOKEN` to the repo. First, create a personal access token by going to https://github.com/settings/personal-access-tokens/new:
+
+- change the 'Resource owner' to `sveltejs`
+- provide access to the `sveltejs/svelte.dev` repository
+- under 'Repository permissions', change 'Contents' to 'Read and write'
+
+Then, go to `https://github.com/<ORG>/<REPO>/settings/secrets/actions`, click 'New repository secret' and paste in your newly generated personal access token.

From aaff89be78d445859a35a3667bb3409f669f014b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:08:23 -0400
Subject: [PATCH 050/453] Sync `svelte` docs (#737)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/05-$props.md | 89 +++++++++++++++++--
 .../svelte/03-template-syntax/05-await.md     |  9 ++
 .../svelte/07-misc/07-v5-migration-guide.md   |  2 +-
 3 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
index 8e3dcfb341..58e9b36f8e 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
@@ -5,29 +5,29 @@ title: $props
 The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import MyComponent from './MyComponent.svelte';
 </script>
 
-/// file: App.svelte
 <MyComponent adjective="cool" />
 ```
 
 On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...
 
 ```svelte
+<!--- file: MyComponent.svelte --->
 <script>
 	let props = $props();
 </script>
 
-/// file: MyComponent.svelte
 <p>this component is {props.adjective}</p>
 ```
 
 ...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
 
 ```svelte
-/// file: MyComponent.svelte
+<!--- file: MyComponent.svelte --->
 <script>
 	let +++{ adjective }+++ = $props();
 </script>
@@ -40,11 +40,10 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
 Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
 
 ```js
-/// file: MyComponent.svelte
 let { adjective = 'happy' } = $props();
 ```
 
-> [!NOTE] Fallback values are not turned into reactive state proxies.
+> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
 
 ## Renaming props
 
@@ -66,9 +65,8 @@ let { a, b, c, ...others } = $props();
 
 References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
 
-<!-- prettier-ignore -->
 ```svelte
-/// file: App.svelte
+<!--- file: App.svelte --->
 <script>
 	import Child from './Child.svelte';
 
@@ -82,9 +80,8 @@ References to a prop inside a component update when the prop itself updates —
 <Child {count} />
 ```
 
-<!-- prettier-ignore -->
 ```svelte
-/// file: Child.svelte
+<!--- file: Child.svelte --->
 <script>
 	let { count } = $props();
 </script>
@@ -94,6 +91,80 @@ References to a prop inside a component update when the prop itself updates —
 </button>
 ```
 
+While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
+
+If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child object={{ count: 0 }} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object } = $props();
+</script>
+
+<button onclick={() => {
+	// has no effect
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state({count: 0});
+</script>
+
+<Child {object} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object } = $props();
+</script>
+
+<button onclick={() => {
+	// will cause the count below to update,
+	// but with a warning. Don't mutate
+	// objects you don't own!
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { object = { count: 0 } } = $props();
+</script>
+
+<button onclick={() => {
+	// has no effect if the fallback value is used
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
+
 ## Type safety
 
 You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
index 6f365179e4..842b3c7e32 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
@@ -68,3 +68,12 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
 	<p>The error is {error}</p>
 {/await}
 ```
+
+> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:
+>
+> ```svelte
+> {#await import('./Component.svelte') then { default: Component }}
+> 	<Component />
+> {/await}
+> ```
+
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 1624755a6b..093ec5b86b 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -376,7 +376,7 @@ If you wanted multiple UI placeholders, you had to use named slots. In Svelte 5,
 </main>
 
 <footer>
-	---<slot name="header" />---
+	---<slot name="footer" />---
 	+++{@render footer()}+++
 </footer>
 ```

From 0591780598395239ac08ee66405730036e005b59 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 31 Oct 2024 17:37:48 -0400
Subject: [PATCH 051/453] Overhaul tokens (#735)

* get rid of some unused junk

* modularise tokens

* unused

* tidy up

* tidy up

* group colours by purpose

* organise tokens

* consolidate

* revert

* separate background colors from borders

* more border stuff

* move --sk-raised tokens into buttons.css
---
 .../src/lib/components/Modal.svelte           |   4 +-
 .../src/lib/components/PageControls.svelte    |   4 +-
 .../lib/components/PreloadingIndicator.svelte |   2 +-
 .../src/lib/components/SecondaryNav.svelte    |   4 +-
 .../src/lib/components/SelectIcon.svelte      |   4 +-
 .../adapters/webcontainer/index.svelte.ts     |   2 +-
 .../src/routes/(authed)/apps/+page.svelte     |  16 +-
 .../(authed)/playground/[id]/+page.svelte     |   2 +-
 .../playground/[id]/AppControls.svelte        |   6 +-
 .../playground/[id]/embed/+page.svelte        |   2 +-
 .../src/routes/_home/Community.svelte         |   2 +-
 .../src/routes/_home/Companies.svelte         |   2 +-
 apps/svelte.dev/src/routes/_home/Hero.svelte  |   6 +-
 .../src/routes/_home/Testimonials.svelte      |   4 +-
 apps/svelte.dev/src/routes/_home/Video.svelte |   6 +-
 apps/svelte.dev/src/routes/blog/+page.svelte  |  12 +-
 .../src/routes/blog/[slug]/+page.svelte       |  14 +-
 apps/svelte.dev/src/routes/docs/+page.svelte  |   6 +-
 .../src/routes/docs/[...path]/+layout.svelte  |   2 +-
 .../routes/docs/[...path]/Breadcrumbs.svelte  |   2 +-
 .../routes/docs/[...path]/OnThisPage.svelte   |  10 +-
 .../svelte.dev/src/routes/search/+page.svelte |   2 +-
 .../routes/tutorial/[...slug]/+page.svelte    |   8 +-
 .../routes/tutorial/[...slug]/Chrome.svelte   |   5 +-
 .../routes/tutorial/[...slug]/Controls.svelte |   4 +-
 .../routes/tutorial/[...slug]/Loading.svelte  |  10 +-
 .../routes/tutorial/[...slug]/Output.svelte   |   6 +-
 .../tutorial/[...slug]/OutputRollup.svelte    |   6 +-
 .../routes/tutorial/[...slug]/Sidebar.svelte  |   2 +-
 .../[...slug]/filetree/ContextMenu.svelte     |   8 +-
 .../[...slug]/filetree/Filetree.svelte        |   2 +-
 .../tutorial/[...slug]/filetree/Item.svelte   |  14 +-
 packages/editor/src/lib/codemirror.css        |  36 ++--
 packages/editor/src/lib/theme.ts              |  22 +-
 .../src/lib/Input/ComponentSelector.svelte    |  14 +-
 packages/repl/src/lib/Input/RunesInfo.svelte  |   2 +-
 packages/repl/src/lib/Message.svelte          |   2 +-
 packages/repl/src/lib/Output/AstNode.svelte   |   8 +-
 packages/repl/src/lib/Output/AstView.svelte   |   4 +-
 .../src/lib/Output/CompilerOptions.svelte     |  16 +-
 .../repl/src/lib/Output/ErrorOverlay.svelte   |   8 +-
 packages/repl/src/lib/Output/Output.svelte    |   8 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte  |   2 +-
 packages/repl/src/lib/Output/Viewer.svelte    |   6 +-
 .../src/lib/Output/console/Console.svelte     |   2 +-
 .../src/lib/Output/console/ConsoleLine.svelte |  10 +-
 .../lib/Output/console/ConsoleTable.svelte    |  10 +-
 packages/repl/src/lib/Repl.svelte             |   6 +-
 .../site-kit/src/lib/components/Banner.svelte |   2 +-
 .../src/lib/components/Checkbox.svelte        |   4 +-
 .../src/lib/components/Dropdown.svelte        |   2 +-
 .../src/lib/components/HoverMenu.svelte       |  19 +-
 .../src/lib/components/ModalOverlay.svelte    |   2 +-
 .../src/lib/components/ScreenToggle.svelte    |   6 +-
 .../site-kit/src/lib/components/Text.svelte   |  38 ++--
 .../site-kit/src/lib/docs/DocsContents.svelte |   8 +-
 packages/site-kit/src/lib/docs/Tooltip.svelte |   2 +-
 .../site-kit/src/lib/home/TrySection.svelte   |   2 +-
 .../site-kit/src/lib/markdown/renderer.ts     |   5 +-
 .../site-kit/src/lib/nav/MobileMenu.svelte    |  10 +-
 .../site-kit/src/lib/nav/MobileSubMenu.svelte |   8 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  14 +-
 .../src/lib/nav/PreloadingIndicator.svelte    |   2 +-
 packages/site-kit/src/lib/nav/SkipLink.svelte |   6 +-
 .../site-kit/src/lib/search/Search.svelte     |  10 +-
 .../site-kit/src/lib/search/SearchBox.svelte  |  34 ++-
 .../src/lib/search/SearchResultList.svelte    |  14 +-
 .../src/lib/search/SearchResults.svelte       |   4 +-
 packages/site-kit/src/lib/styles/base.css     |  19 +-
 packages/site-kit/src/lib/styles/text.css     |   4 +-
 packages/site-kit/src/lib/styles/tokens.css   | 202 +-----------------
 .../src/lib/styles/tokens/colours.css         |  88 ++++++++
 .../src/lib/styles/tokens/dimensions.css      |  23 ++
 .../src/lib/styles/tokens/typography.css      |  59 +++++
 .../site-kit/src/lib/styles/utils/buttons.css |  32 ++-
 .../src/lib/styles/utils/dividers.css         |   2 +-
 76 files changed, 464 insertions(+), 492 deletions(-)
 create mode 100644 packages/site-kit/src/lib/styles/tokens/colours.css
 create mode 100644 packages/site-kit/src/lib/styles/tokens/dimensions.css
 create mode 100644 packages/site-kit/src/lib/styles/tokens/typography.css

diff --git a/apps/svelte.dev/src/lib/components/Modal.svelte b/apps/svelte.dev/src/lib/components/Modal.svelte
index 26e814a0e5..454db1b961 100644
--- a/apps/svelte.dev/src/lib/components/Modal.svelte
+++ b/apps/svelte.dev/src/lib/components/Modal.svelte
@@ -66,8 +66,8 @@
 		transform: translate(-50%, -50%);
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
-		background: var(--sk-back-2);
-		color: var(--sk-text-2);
+		background: var(--sk-bg-2);
+		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;
diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte
index 0641cd8f51..41b946926f 100644
--- a/apps/svelte.dev/src/lib/components/PageControls.svelte
+++ b/apps/svelte.dev/src/lib/components/PageControls.svelte
@@ -61,7 +61,7 @@
 
 	.controls {
 		max-width: calc(var(--sk-page-content-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
+		border-top: 1px solid var(--sk-border-medium);
 		padding: 1rem 0 0 0;
 		margin: 1rem 0 0 0;
 		text-wrap: balance;
@@ -83,7 +83,7 @@
 		span {
 			font: var(--sk-font-ui-medium);
 			text-transform: uppercase;
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 
 			&.faded {
 				opacity: 0.4;
diff --git a/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte b/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
index 0d684d4064..b1aa533118 100644
--- a/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
+++ b/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
@@ -42,7 +42,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		transition: width 0.4s;
 	}
 
diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 91c6e97da7..d02448382c 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -16,8 +16,8 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-back-2);
-		color: var(--sk-text-1);
+		background-color: var(--sk-bg-2);
+		color: var(--sk-fg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index 31a43144c1..991221459b 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -20,7 +20,7 @@
 		position: relative;
 
 		&:has(select:focus-visible) .raised.icon {
-			outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
+			outline: 2px solid var(--sk-fg-accent);
 			border-radius: var(--sk-border-radius);
 		}
 
@@ -47,7 +47,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
index c1cec0fece..6580c581f0 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
@@ -10,7 +10,7 @@ import type { Adapter } from '$lib/tutorial';
 import type { Item, File } from 'editor';
 
 const converter = new AnsiToHtml({
-	fg: 'var(--sk-text-3)'
+	fg: 'var(--sk-fg-3)'
 });
 
 /** Web container singleton */
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index a27237f04e..0def54f1d5 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -156,7 +156,7 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
@@ -181,7 +181,7 @@
 		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
-		outline: 1rem solid var(--sk-back-1);
+		outline: 1rem solid var(--sk-bg-1);
 	}
 
 	.controls::after {
@@ -190,7 +190,7 @@
 		width: 100%;
 		bottom: -2rem;
 		height: 2rem;
-		background: linear-gradient(to bottom, var(--sk-back-1) 0%, var(--sk-back-1) 50%, transparent);
+		background: linear-gradient(to bottom, var(--sk-bg-1) 0%, var(--sk-bg-1) 50%, transparent);
 	}
 
 	.controls form {
@@ -209,7 +209,7 @@
 		padding: 0.5rem 1rem;
 		line-height: 1;
 		display: flex;
-		border: 1px solid var(--sk-back-5);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
 		font: var(--sk-font-ui-large);
@@ -241,7 +241,7 @@
 	}
 
 	h2 {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -249,7 +249,7 @@
 
 	li a {
 		display: block;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 1rem 3rem 1rem 1rem;
 		height: 100%;
 		line-height: 1;
@@ -259,7 +259,7 @@
 
 	li span {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	li label {
@@ -275,7 +275,7 @@
 	}
 
 	ul:not(.selecting) li:hover a {
-		background-color: var(--sk-back-4);
+		background-color: var(--sk-bg-4);
 	}
 
 	ul:not(.selecting) li:hover input {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 41f3121b8f..a16ef352ab 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -215,7 +215,7 @@
 		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
 		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
 		overflow: hidden;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 6686f69198..49d392c6e5 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -262,7 +262,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;
@@ -303,7 +303,7 @@
 
 	input {
 		background: transparent;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
 		width: 0;
@@ -315,7 +315,7 @@
 
 	.badge {
 		position: absolute;
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 		border-radius: 50%;
 		width: 1rem;
 		height: 1rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index f74f5acebf..9ed41e3564 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -65,7 +65,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		overflow: hidden;
 		box-sizing: border-box;
 		display: flex;
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index eb03d6070d..9173ffee45 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -30,7 +30,7 @@
 		font: var(--sk-font-body-small);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-align: center;
 
 		a {
diff --git a/apps/svelte.dev/src/routes/_home/Companies.svelte b/apps/svelte.dev/src/routes/_home/Companies.svelte
index 7278d5c2e7..03b9c2261a 100644
--- a/apps/svelte.dev/src/routes/_home/Companies.svelte
+++ b/apps/svelte.dev/src/routes/_home/Companies.svelte
@@ -37,7 +37,7 @@
 		text-align: center;
 		justify-self: center;
 		z-index: 2;
-		filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
+		filter: drop-shadow(0 0 1rem var(--sk-bg-1)) drop-shadow(0 0 1rem var(--sk-bg-1));
 	}
 
 	.wing {
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 8e0bac9728..9d7b71d1fe 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -59,12 +59,12 @@
 			height: 200%;
 			left: 0;
 			top: -8rem; /* prevent cutoff on overscroll */
-			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+			background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
 				radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
 		}
 
 		:root.dark &::before {
-			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+			background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
 				radial-gradient(
 					64.14% 72.25% at 47.58% 31.75%,
 					hsl(209deg 6% 47% / 52%) 0%,
@@ -104,7 +104,7 @@
 	.cta {
 		font: var(--sk-font-ui-medium);
 		font-size: 2rem;
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		text-transform: uppercase;
 		display: flex;
 		align-items: center;
diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 4d275faf97..79855f0038 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -167,10 +167,10 @@
 			padding: 0.25em 0.5em;
 			line-height: 1;
 			text-transform: uppercase;
-			background: var(--sk-text-2);
+			background: var(--sk-fg-2);
 			border-radius: var(--sk-border-radius);
 			font: var(--sk-font-ui-small);
-			color: var(--sk-back-2);
+			color: var(--sk-bg-2);
 
 			&::after {
 				content: 'adj.';
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 51674d6fc6..e10b9a8e2a 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -172,7 +172,7 @@
 	}
 
 	video:focus {
-		outline: 1px solid var(--sk-theme-1);
+		outline: 1px solid var(--sk-fg-accent);
 	}
 
 	video::cue {
@@ -190,7 +190,7 @@
 		left: 0;
 		bottom: 0;
 		height: 0.5rem;
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 		transition: height 0.2s;
 	}
 
@@ -242,7 +242,7 @@
 	}
 
 	.video-player input:focus-visible ~ img {
-		outline: 2px solid var(--sk-theme-1);
+		outline: 2px solid var(--sk-fg-accent);
 		outline-offset: 2px;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 80b7cb2100..9259f891f2 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -74,7 +74,7 @@
 
 	h2 {
 		display: inline-block;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-h3);
 	}
 
@@ -88,14 +88,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -104,7 +104,7 @@
 
 		p {
 			font: var(--sk-font-body-small);
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 			margin: 0 0 0.5em 0;
 		}
 	}
@@ -130,7 +130,7 @@
 				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 			}
 		}
 
@@ -164,7 +164,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index e8fbce5f9a..e4813de625 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -47,7 +47,7 @@
 				}
 
 				figcaption {
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: var(--sk-font-body-small);
 				}
 			}
@@ -61,11 +61,11 @@
 				margin: 0 0 1em 1em;
 				width: 16rem;
 				z-index: 2;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 				font: var(--sk-font-body-small);
 
 				p {
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: inherit;
 				}
 			}
@@ -87,7 +87,7 @@
 				position: relative;
 				border: none;
 				height: 1px;
-				background: radial-gradient(circle at center, var(--sk-text-4), transparent);
+				background: radial-gradient(circle at center, var(--sk-fg-4), transparent);
 				margin: 7rem 0;
 				overflow: visible;
 
@@ -99,8 +99,8 @@
 					left: 50%;
 					top: 2px;
 					transform: rotate(45deg) translate(-50%, -50%);
-					background: var(--sk-back-1);
-					border: 1px solid var(--sk-text-4);
+					background: var(--sk-bg-1);
+					border: 1px solid var(--sk-fg-4);
 				}
 			}
 		}
@@ -112,7 +112,7 @@
 
 	.standfirst {
 		font: var(--sk-font-body-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		margin: 0 0 1em 0;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 864415d7c7..6af1962320 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -111,14 +111,14 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		border-radius: var(--sk-border-radius);
 
 		&:hover {
-			background-color: var(--sk-back-2);
+			background-color: var(--sk-bg-2);
 			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
 			text-decoration: none;
 			-webkit-transform: var(--safari-fix);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index fbf33ff853..4c3eed50f3 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -40,7 +40,7 @@
 	}
 
 	.toc-container {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		display: none;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index 6c2ef53b9e..1dafc4f940 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -11,7 +11,7 @@
 <style>
 	.breadcrumbs {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
 
 		span:not(:last-child)::after {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 8368fc1698..12f07fd486 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -74,7 +74,7 @@
 			}
 
 			a {
-				color: var(--sk-text-3);
+				color: var(--sk-fg-3);
 			}
 		}
 
@@ -96,10 +96,10 @@
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
 				text-transform: uppercase;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 
 				&:hover {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				&::before,
@@ -145,7 +145,7 @@
 
 				h3 {
 					font: var(--sk-font-ui-small);
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					margin: 0;
 					display: block;
 				}
@@ -216,7 +216,7 @@
 				}
 
 				a.active {
-					color: var(--sk-text-1);
+					color: var(--sk-fg-1);
 					text-decoration: underline;
 				}
 			}
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 86581b4461..806c79fdf6 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -47,6 +47,6 @@
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
 		background: no-repeat 1rem 50% / 3rem 3rem url(http://github.com/icons/search.svg);
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 52ea0de260..870ee987ec 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -369,7 +369,7 @@
 		/* we transform the default state, rather than the editor state, because otherwise
 		   the positioning of tooltips is wrong (doesn't take into account transforms) */
 		transform: translate(50%, 0);
-		border-top: 1px solid var(--sk-back-5);
+		border-top: 1px solid var(--sk-border-medium);
 	}
 
 	.top.offset {
@@ -386,13 +386,13 @@
 		position: relative;
 		min-height: 100%;
 		height: 100%;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		--menu-width: 5rem;
 	}
 
 	.navigator {
 		position: relative;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		display: flex;
 		flex-direction: column;
 		font: var(--sk-font-ui-small);
@@ -405,7 +405,7 @@
 
 	.editor-container {
 		position: relative;
-		background-color: var(--sk-back-3);
+		background-color: var(--sk-bg-3);
 	}
 
 	.mobile .navigator {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 51bf179f68..22b640ad00 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -63,7 +63,6 @@
 		width: 100%;
 		height: 4rem;
 		display: flex;
-		border-top: 1px solid var(--sk-back-4);
 		padding: 0.2rem;
 		gap: 0.2rem;
 	}
@@ -75,10 +74,10 @@
 	input {
 		flex: 1;
 		padding: 0.2rem 0.6rem;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 72946ce6d0..3f5d9888e1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -87,7 +87,7 @@
 
 		span:not(:last-child)::after {
 			content: ' / ';
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			font: var(--sk-font-ui-small);
 		}
 	}
@@ -99,7 +99,7 @@
 	}
 
 	option:disabled {
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		font-weight: bold;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 5311555407..f81adcef55 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -119,7 +119,7 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		user-select: none;
 		font: var(--sk-font-ui-small);
 	}
@@ -157,7 +157,7 @@
 	}
 
 	button {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		padding: 0 0 1px;
 		position: relative;
 	}
@@ -168,12 +168,12 @@
 
 	small {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		text-transform: uppercase;
 	}
 
 	span {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	svg {
@@ -184,6 +184,6 @@
 	:global(.dark) .loading {
 		--faded: #444;
 		--progress: #555;
-		--cutout: var(--sk-back-2);
+		--cutout: var(--sk-bg-2);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index bc3ddd28d5..e3db87fee1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -169,7 +169,7 @@
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		--menu-width: 5.4rem;
 	}
 
@@ -180,7 +180,7 @@
 		resize: none;
 		box-sizing: border-box;
 		border: none;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 	}
 
 	.terminal {
@@ -191,7 +191,7 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		border-top: 1px solid var(--sk-text-4);
+		border-top: 1px solid var(--sk-fg-4);
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 0b1ad018e2..e341b94c8c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -63,7 +63,7 @@
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		--menu-width: 5.4rem;
 	}
 
@@ -75,8 +75,8 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		background: var(--sk-back-1);
-		border-top: 1px solid var(--sk-text-4);
+		background: var(--sk-bg-1);
+		border-top: 1px solid var(--sk-fg-4);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 8dfdbe1054..b88621b2a2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -116,7 +116,7 @@
 	.text {
 		flex: 1 1 auto;
 		padding: 2.2rem var(--sk-page-padding-side);
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 
 		:global {
 			[data-file],
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
index 4d99ec4d54..90f18514d5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -51,8 +51,8 @@
 	ul {
 		margin: 0;
 		padding: 0;
-		background-color: var(--sk-back-3);
-		border: 1px solid var(--sk-theme-1);
+		background-color: var(--sk-bg-3);
+		border: 1px solid var(--sk-fg-accent);
 	}
 
 	li {
@@ -61,11 +61,11 @@
 		width: 1fr;
 	}
 	li:hover {
-		background-color: var(--sk-theme-1-variant);
+		background-color: var(--sk-bg-accent);
 	}
 
 	button {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		width: 100%;
 		text-align: left;
 		border: 0px;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index cf5403c480..6925730db9 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -158,7 +158,7 @@
 		overflow-x: hidden;
 		padding: 1rem 0rem;
 		margin: 0;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		list-style: none;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index b916b7e94a..e1cd06bca7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -111,7 +111,7 @@
 
 <style>
 	li {
-		--bg: var(--sk-back-3);
+		--bg: var(--sk-bg-3);
 		--inset: calc((var(--depth) * 1.2rem) + 1.5rem);
 		display: flex;
 		position: relative;
@@ -121,11 +121,11 @@
 		background: var(--bg) var(--icon) no-repeat;
 		background-position: calc(var(--inset) - 0.5rem) 50%;
 		background-size: 1.2rem;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 
 	li:hover {
-		--bg: var(--sk-back-3);
+		--bg: var(--sk-bg-3);
 	}
 
 	button,
@@ -140,10 +140,10 @@
 	}
 
 	input {
-		background: var(--sk-back-1);
-		color: var(--sk-text-1) !important;
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-1) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
-		border: 1px solid var(--sk-back-5);
+		border: 2px solid transparent;
 		padding: 0 0.5rem;
 		font: inherit;
 	}
@@ -200,7 +200,7 @@
 	}
 
 	[aria-current='true'] {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 	}
 
 	[aria-current='true']:has(:focus-visible)::after,
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index f47639ec1a..b7fc35260a 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -3,19 +3,19 @@
 }
 
 .cm-editor {
-	color: var(--sk-code-base);
+	color: var(--shiki-color-text);
 	background-color: transparent;
 	height: 100%;
 
 	&.cm-focused {
 		.cm-cursor {
-			border-left-color: var(--sk-text-3);
+			border-left-color: var(--sk-fg-3);
 		}
 
 		> .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
 		.cm-selectionBackground,
 		.cm-content ::selection {
-			background-color: var(--sk-selection-color);
+			background-color: var(--sk-bg-selection);
 		}
 
 		.cm-matchingBracket,
@@ -29,18 +29,18 @@
 	}
 
 	.cm-gutters {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		border: none;
 		padding: 0;
 		width: 5rem;
 	}
 
 	.cm-activeLine {
-		background: var(--sk-back-translucent);
+		background: var(--sk-bg-3);
 	}
 
 	.cm-activeLineGutter {
-		background-color: var(--sk-back-3);
+		background-color: var(--sk-bg-3);
 	}
 
 	.cm-lineNumbers {
@@ -101,16 +101,16 @@
 
 	.cm-selectionMatch {
 		background: var(--selection-color);
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 
 	.cm-tooltip.cm-tooltip-autocomplete {
-		color: var(--sk-text-2) !important;
+		color: var(--sk-fg-2) !important;
 		perspective: 1px;
 
 		& > ul > li[aria-selected] {
-			background-color: var(--sk-back-4);
-			color: var(--sk-text-1) !important;
+			background-color: var(--sk-bg-4);
+			color: var(--sk-fg-1) !important;
 		}
 
 		& > ul {
@@ -119,24 +119,24 @@
 	}
 
 	.cm-panels {
-		background: var(--sk-back-4);
-		color: var(--sk-text-1);
+		background: var(--sk-bg-4);
+		color: var(--sk-fg-1);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
-			border-top: 1px solid var(--sk-back-5);
-			border-bottom: 1px solid var(--sk-back-5);
+			border-top: 1px solid var(--sk-border-medium);
+			border-bottom: 1px solid var(--sk-border-medium);
 		}
 	}
 
 	.cm-button {
-		background: var(--sk-back-5);
+		background: var(--sk-bg-5);
 		border: 2px solid transparent;
 	}
 
 	.cm-textfield {
-		background: var(--sk-back-1);
-		color: var(--sk-text-1);
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-1);
 		border: 2px solid transparent;
 	}
 
@@ -157,7 +157,7 @@
 		--warning: hsl(40 100% 70%);
 		--error: hsl(0 100% 90%);
 		border: none;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		font: var(--sk-font-ui-small);
 		max-width: calc(100vw - 10em);
 		position: relative;
diff --git a/packages/editor/src/lib/theme.ts b/packages/editor/src/lib/theme.ts
index a868282f6b..a7e7f8cc85 100644
--- a/packages/editor/src/lib/theme.ts
+++ b/packages/editor/src/lib/theme.ts
@@ -3,14 +3,14 @@ import { tags as t } from '@lezer/highlight';
 
 export const theme = syntaxHighlighting(
 	HighlightStyle.define([
-		{ tag: t.keyword, color: 'var(--sk-code-keyword)' },
+		{ tag: t.keyword, color: 'var(--shiki-token-keyword)' },
 		{
 			tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-			color: 'var(--sk-code-base)'
+			color: 'var(--shiki-color-text)'
 		},
-		{ tag: [t.function(t.variableName), t.labelName], color: 'var(--sk-code-tags)' },
-		{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: 'var(--sk-code-base)' },
-		{ tag: [t.definition(t.name), t.separator], color: 'var(--sk-code-base)' },
+		{ tag: [t.function(t.variableName), t.labelName], color: 'var(--shiki-token-function)' },
+		{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: 'var(--shiki-color-text)' },
+		{ tag: [t.definition(t.name), t.separator], color: 'var(--shiki-color-text)' },
 		{
 			tag: [
 				t.typeName,
@@ -22,20 +22,20 @@ export const theme = syntaxHighlighting(
 				t.self,
 				t.namespace
 			],
-			color: 'var(--sk-code-tags)'
+			color: 'var(--shiki-token-function)'
 		},
 		{
 			tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-			color: 'var(--sk-code-base)'
+			color: 'var(--shiki-color-text)'
 		},
-		{ tag: [t.meta, t.comment], color: 'var(--sk-code-comment)' },
+		{ tag: [t.meta, t.comment], color: 'var(--shiki-token-comment)' },
 		{ tag: t.strong, fontWeight: 'bold' },
 		{ tag: t.emphasis, fontStyle: 'italic' },
 		{ tag: t.strikethrough, textDecoration: 'line-through' },
-		{ tag: t.link, color: 'var(--sk-code-base)', textDecoration: 'underline' },
-		{ tag: t.heading, fontWeight: 'bold', color: 'var(--sk-text-1)' },
+		{ tag: t.link, color: 'var(--shiki-color-text)', textDecoration: 'underline' },
+		{ tag: t.heading, fontWeight: 'bold', color: 'var(--sk-fg-1)' },
 		{ tag: [t.atom, t.bool], color: 'var(--sk-code-atom)' },
-		{ tag: [t.processingInstruction, t.string, t.inserted], color: 'var(--sk-code-string)' },
+		{ tag: [t.processingInstruction, t.string, t.inserted], color: 'var(--shiki-token-string)' },
 		{ tag: t.invalid, color: '#ff008c' }
 	])
 );
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 6789ad7e6c..9cf2f65296 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -199,7 +199,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-back-4);
+			background-color: var(--sk-bg-4);
 		}
 	}
 
@@ -223,7 +223,7 @@
 		height: 100%;
 		aspect-ratio: 1;
 		margin: 0;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		border-radius: 0;
 		cursor: pointer;
 	}
@@ -248,8 +248,8 @@
 		}
 
 		&.active {
-			color: var(--sk-text-2, #333);
-			border-bottom: 1px solid var(--sk-theme-1);
+			color: var(--sk-fg-2, #333);
+			border-bottom: 1px solid var(--sk-fg-accent);
 		}
 	}
 
@@ -264,14 +264,14 @@
 
 	.input-sizer {
 		display: flex;
-		color: var(--sk-text-3, #ccc);
+		color: var(--sk-fg-3, #ccc);
 	}
 
 	input {
 		position: absolute;
 		width: 100%;
 		border: none;
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		outline: none;
 		background-color: transparent;
 		top: 0;
@@ -287,7 +287,7 @@
 	}
 
 	.duplicate {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 	}
 
 	.remove {
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 4d66d3e971..99f73c5a1c 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -110,7 +110,7 @@
 		width: 100vw;
 		max-width: 320px;
 		z-index: 9999;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 1em;
 
 		p {
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index f05309b856..9ee85da6dc 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -84,6 +84,6 @@
 	}
 
 	.info {
-		background-color: var(--sk-text-4);
+		background-color: var(--sk-fg-4);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 559915d3ff..03f5ec69d0 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -163,18 +163,18 @@
 	}
 
 	.token {
-		color: var(--sk-code-base);
+		color: var(--shiki-color-text);
 	}
 
 	.token.string {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	.token.number {
-		color: var(--sk-code-number);
+		color: var(--shiki-token-constant);
 	}
 
 	.token.comment {
-		color: var(--sk-code-comment);
+		color: var(--shiki-token-comment);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 2ebf9e0afe..70540f2cf2 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -92,8 +92,8 @@
 		--base: hsl(45, 7%, 45%);
 		--string: hsl(41, 37%, 45%);
 		--number: hsl(102, 27%, 50%);
-		background: var(--sk-back-3);
-		color: var(--sk-code-base);
+		background: var(--sk-bg-3);
+		color: var(--shiki-color-text);
 		display: flex;
 		flex-direction: column;
 	}
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index b16bdcd3e5..449f829f28 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -43,7 +43,7 @@
 		padding: 0 10px;
 		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		line-height: 1.8;
 	}
 
@@ -51,7 +51,7 @@
 		display: block;
 		padding: 0 0 0 1.25em;
 		white-space: nowrap;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		user-select: none;
 	}
 
@@ -61,7 +61,7 @@
 	}
 
 	.string {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	label {
@@ -69,7 +69,7 @@
 	}
 
 	label[for] {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	label :global(input[type='checkbox']) {
@@ -113,16 +113,16 @@
 	}
 
 	input[type='radio'] + label:before {
-		background-color: var(--sk-text-4);
+		background-color: var(--sk-fg-4);
 		border-radius: 100%;
 		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-text-4);
+		border: 1px solid var(--sk-fg-4);
 	}
 
 	input[type='radio']:checked + label:before {
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-text-4);
+		border: 1px solid var(--sk-fg-4);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/ErrorOverlay.svelte b/packages/repl/src/lib/Output/ErrorOverlay.svelte
index 7f7a4aa1fc..691a2169ab 100644
--- a/packages/repl/src/lib/Output/ErrorOverlay.svelte
+++ b/packages/repl/src/lib/Output/ErrorOverlay.svelte
@@ -30,19 +30,19 @@
 		display: flex;
 		flex-direction: column;
 		gap: 1em;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 		padding: 1em;
-		border-top: 4px solid var(--sk-theme-1);
+		border-top: 4px solid var(--sk-fg-accent);
 		border-radius: 4px;
 		filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.1));
 	}
 
 	pre {
 		padding: 0.5em;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 	}
 
 	small {
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 4b353c6f13..e55c2936d6 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -157,7 +157,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-back-4);
+			background-color: var(--sk-bg-4);
 		}
 	}
 
@@ -170,13 +170,13 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-text-2, #999);
+		color: var(--sk-fg-2, #999);
 		border-radius: 0;
 	}
 
 	button.active {
-		border-bottom: 1px solid var(--sk-theme-1, --prime);
-		color: var(--sk-text-1, #333);
+		border-bottom: 1px solid var(--sk-fg-accent, --prime);
+		color: var(--sk-fg-1, #333);
 	}
 
 	div[slot] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 2fd61c030b..210a47de6f 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -71,7 +71,7 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 8443011907..6659ba496c 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -329,7 +329,7 @@
 <style>
 	.iframe-container {
 		position: absolute;
-		background-color: var(--sk-back-1, white);
+		background-color: var(--sk-bg-1, white);
 		border: none;
 		width: 100%;
 		height: 100%;
@@ -348,13 +348,13 @@
 	}
 
 	button {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
 
 		&:hover {
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 		}
 	}
 
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index bb286e07e8..1c80401e8e 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -35,7 +35,7 @@
 		--error-border: rgb(242, 214, 219);
 		--warning-bg: rgb(254, 251, 218);
 		--warning-border: rgb(242, 232, 163);
-		--json-tree-string-color: var(--sk-code-string);
+		--json-tree-string-color: var(--shiki-token-string);
 		--json-tree-font-family: var(--sk-font-family-mono);
 
 		:global(.dark) & {
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 2a1444bccf..440e83d755 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -164,8 +164,8 @@
 
 <style>
 	.line {
-		--bg: var(--sk-back-1);
-		--border: var(--sk-back-3);
+		--bg: var(--sk-bg-1);
+		--border: var(--sk-bg-3);
 		display: block;
 		position: relative;
 		width: 100%;
@@ -247,13 +247,13 @@
 		height: 1.4em;
 		padding: 0.5em;
 		border-radius: 0.4rem;
-		background-color: var(--sk-text-3, #777);
-		color: var(--sk-back-1);
+		background-color: var(--sk-fg-3, #777);
+		color: var(--sk-bg-1);
 		font-size: 1rem;
 	}
 
 	.meta {
-		color: var(--sk-text-2, #666);
+		color: var(--sk-fg-2, #666);
 		font-family: var(--sk-font-family-body) !important;
 		font-size: 12px;
 	}
diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
index 514462fd65..7c6c32ce50 100644
--- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
@@ -96,7 +96,7 @@
 		margin: 8px;
 		overflow: auto;
 		max-height: 200px;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: 2px;
 		overscroll-behavior: none;
 	}
@@ -108,7 +108,7 @@
 	}
 
 	th {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 0.5rem 1rem;
 		border: none;
 		position: sticky;
@@ -125,15 +125,15 @@
 	}
 
 	tr {
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 	}
 
 	tr:nth-child(2n) {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 	}
 
 	th,
 	td {
-		border-right: 1px solid var(--sk-back-3);
+		border-right: 1px solid var(--sk-bg-3);
 	}
 </style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 2137d76454..2c20688ae9 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -166,7 +166,7 @@
 <div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
-			--color="var(--sk-text-4)"
+			--color="var(--sk-fg-4)"
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
 			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
@@ -205,7 +205,7 @@
 		flex: 1;
 		height: 100%;
 		min-height: 0;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 		padding: 0;
 
 		&.embedded {
@@ -235,7 +235,7 @@
 			}
 
 			.divider::after {
-				background-color: var(--sk-back-5);
+				background-color: var(--sk-bg-5);
 			}
 
 			[data-pane='main'] > .divider::after {
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index 436dc05a11..6e210b8761 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -62,7 +62,7 @@
 		overflow-y: auto;
 		width: 100%;
 		height: var(--sk-banner-height);
-		background: var(--sk-theme-1-variant);
+		background: var(--sk-bg-accent);
 		color: white;
 		padding: 0 4rem;
 	}
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index 6e54349421..ab58584e88 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -32,12 +32,12 @@
 		border-radius: 1em;
 		top: 0;
 		left: 0;
-		background: var(--sk-back-6);
+		background: var(--sk-bg-5);
 		box-sizing: content-box;
 	}
 
 	input[type='checkbox']:checked::before {
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 	}
 
 	input[type='checkbox']::after {
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 6518cf9c62..7e6c5decf7 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -30,7 +30,7 @@
 		left: -1rem;
 		/* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */
 		top: calc(50% + min(50%, 1.5rem));
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 		z-index: 1;
 		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
index 8c2e3d3e6d..3587e71f27 100644
--- a/packages/site-kit/src/lib/components/HoverMenu.svelte
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -10,32 +10,25 @@
 
 <style>
 	.hover-menu {
+		padding: 0.5rem;
+
 		:global {
 			a,
 			button {
-				color: var(--sk-text-2);
-				padding: 1rem 1.3rem;
+				color: var(--sk-fg-2);
+				padding: 1rem;
 				display: block;
 				font: var(--sk-font-ui-medium);
 				text-decoration: none;
 				line-height: 1;
 				width: 100%;
 				text-align: left;
-
-				&:first-child {
-					padding-top: 1.3rem;
-					border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
-				}
-
-				&:last-child {
-					padding-bottom: 1.3rem;
-					border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
-				}
+				border-radius: var(--sk-border-radius-inner);
 			}
 
 			a:hover,
 			button:hover {
-				background-color: var(--sk-back-4);
+				background-color: var(--sk-bg-4);
 			}
 		}
 	}
diff --git a/packages/site-kit/src/lib/components/ModalOverlay.svelte b/packages/site-kit/src/lib/components/ModalOverlay.svelte
index 38820c6651..fa22d3c661 100644
--- a/packages/site-kit/src/lib/components/ModalOverlay.svelte
+++ b/packages/site-kit/src/lib/components/ModalOverlay.svelte
@@ -22,6 +22,6 @@
 		width: 100%;
 		height: 100%;
 		height: 100dvh;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
index ae0efb46c3..8b59e68c46 100644
--- a/packages/site-kit/src/lib/components/ScreenToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -41,16 +41,16 @@
 		justify-content: center;
 		width: 100%;
 		height: var(--sk-pane-controls-height);
-		border-top: 1px solid var(--sk-back-5);
+		border-top: 1px solid var(--sk-border-medium);
 		font: var(--sk-font-ui-small);
 		z-index: 2;
 	}
 
 	span {
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 
 	.active {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 3b90df1275..2870b7313d 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -107,17 +107,17 @@
 			padding: 0.2rem 0.4rem;
 			margin: 0 0.2rem;
 			top: -0.1rem;
-			background: var(--sk-back-4);
+			background: var(--sk-bg-4);
 		}
 
 		.code-block {
 			position: relative;
-			background: var(--sk-back-2);
-			border: 1px solid var(--sk-back-5);
+			background: var(--sk-bg-2);
+			border: 1px solid var(--sk-border-medium);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
 			margin: calc(0.5 * var(--sk-line-height-body)) 0;
-			/* background: var(--sk-back-3); */
+			/* background: var(--sk-bg-3); */
 
 			@media (min-width: 767px) {
 				margin: var(--sk-line-height-body) 0;
@@ -139,7 +139,7 @@
 
 				&:has(.filename) {
 					position: relative;
-					background: var(--sk-back-3);
+					background: var(--sk-bg-3);
 					padding-left: 1rem;
 				}
 
@@ -154,7 +154,7 @@
 					top: 0.1rem;
 					flex: 1;
 					font: var(--sk-font-ui-small);
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 					text-overflow: ellipsis;
 					overflow: hidden;
 					white-space: nowrap;
@@ -186,7 +186,7 @@
 						align-items: center;
 						font-size: 1.2rem;
 						font-family: var(--sk-font-family-mono);
-						color: var(--sk-text-2);
+						color: var(--sk-fg-2);
 					}
 
 					&::before {
@@ -281,7 +281,7 @@
 				width: 100%;
 				padding: 0.7rem 1rem;
 				box-sizing: border-box;
-				color: var(--sk-code-base);
+				color: var(--shiki-color-text);
 				border-radius: var(--sk-border-radius);
 				overflow-x: auto;
 
@@ -295,7 +295,7 @@
 				}
 
 				a:hover {
-					border-bottom: 1px solid var(--sk-theme-1);
+					border-bottom: 1px solid var(--sk-fg-accent);
 					text-decoration: none;
 				}
 
@@ -382,7 +382,7 @@
 				position: absolute;
 				top: 0.65em;
 				left: -1.8rem;
-				background-color: var(--sk-text-4);
+				background-color: var(--sk-fg-4);
 				width: 0.3em;
 				height: 0.3em;
 				border-radius: 50%;
@@ -412,13 +412,12 @@
 			font: var(--sk-font-body-small);
 			float: right;
 			pointer-events: all;
-			color: var(--sk-theme-1);
+			color: var(--sk-fg-accent);
 			cursor: pointer;
 		}
 
 		blockquote {
-			--primary-hsl: var(--sk-theme-1-hsl);
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 			padding: 0 0 0 4.5rem;
 
 			&.note,
@@ -439,18 +438,11 @@
 			}
 
 			&.deprecated {
-				--primary-hsl: var(--sk-text-warning-hsl);
-				--color: var(--primary-hsl);
-
 				p:first-child::before {
 					content: 'Deprecated ';
 					display: block;
 					font-style: normal;
 				}
-
-				a {
-					--color: var(--primary-hsl);
-				}
 			}
 
 			&::before {
@@ -461,7 +453,7 @@
 				left: 0;
 				top: 0;
 				font-family: var(--sk-font-family-heading);
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 			}
 
 			@media (max-width: 767px) {
@@ -521,12 +513,12 @@
 				display: flex;
 				align-items: center;
 				height: 3rem;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 				font: var(--sk-font-body-small);
 				user-select: none;
 
 				&:hover {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				.legacy &::after {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 271750afc9..182d1358e1 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -58,7 +58,7 @@
 	nav {
 		top: 0;
 		left: 0;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		position: relative;
 	}
 
@@ -86,7 +86,7 @@
 		transition: color 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		user-select: none;
 	}
 
@@ -100,7 +100,7 @@
 	}
 
 	[aria-current='page'] {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		text-decoration: underline;
 	}
 
@@ -133,7 +133,7 @@
 			height: var(--size);
 			top: calc(1.4rem - var(--size) * 0.5);
 			right: calc(-0.5 * var(--size));
-			background-color: var(--sk-back-1);
+			background-color: var(--sk-bg-1);
 			z-index: 2;
 			position: absolute;
 			rotate: 45deg;
diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 5c82a7ba2d..6c4335fcd4 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -64,7 +64,7 @@
 
 <style>
 	.tooltip-container {
-		--bg: var(--sk-back-2);
+		--bg: var(--sk-bg-2);
 		--arrow-size: 0.6rem;
 		display: none;
 		position: absolute;
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 6392b1f01d..4523cb1787 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -42,7 +42,7 @@
 	.try {
 		width: 100%;
 		margin: 0 auto;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 
 	.copy {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index cb3984d5ab..8f952595ec 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -8,7 +8,6 @@ import * as marked from 'marked';
 import { codeToHtml, createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
-import { fileURLToPath } from 'node:url';
 
 interface SnippetOptions {
 	file: string | null;
@@ -24,9 +23,7 @@ const METADATA_REGEX =
 
 const theme = createCssVariablesTheme({
 	name: 'css-variables',
-	variablePrefix: '--shiki-',
-	variableDefaults: {},
-	fontStyle: true
+	variablePrefix: '--shiki-'
 });
 
 // Hash the contents of this file and its dependencies so that we get a new cache in case we have changed
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index 149ebeae27..353c96e0ea 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -208,7 +208,7 @@
 		bottom: 0;
 		height: 99.5%;
 		border-radius: 1rem 1rem 0 0;
-		background: var(--background, var(--sk-back-2));
+		background: var(--background, var(--sk-bg-2));
 		will-change: height;
 		transition: 0.3s var(--quint-out);
 		transition-property: none;
@@ -265,7 +265,7 @@
 		& :global(a) {
 			position: relative;
 			padding: 0.3rem 0;
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 			font: var(--sk-font-ui-medium);
 			width: 100%;
 			height: 100%;
@@ -302,8 +302,8 @@
 		justify-content: start;
 		gap: 1rem;
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-3);
-		background-color: var(--sk-back-2);
+		color: var(--sk-fg-3);
+		background-color: var(--sk-bg-2);
 		width: 50%;
 		height: 4.8rem;
 		padding: 0 var(--sk-page-padding-side);
@@ -332,7 +332,7 @@
 		hr {
 			margin: 0.5rem 0;
 			height: 1px;
-			background: var(--sk-back-6);
+			background: var(--sk-border-dark);
 			border: none;
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 8251e2b001..24ccad0d22 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -94,7 +94,7 @@
 		padding-bottom: 0.8rem;
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 
 	h2 {
@@ -102,16 +102,16 @@
 		top: 0;
 		z-index: 1;
 		padding: 1rem 0;
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 	}
 
 	a {
 		display: flex;
 		align-items: center;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 
 		&[aria-current='page'] {
-			color: var(--sk-theme-1) !important;
+			color: var(--sk-fg-accent) !important;
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 5806d35b6f..df7248d052 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -188,7 +188,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.current-section {
 		display: flex;
 		align-items: center;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		margin-left: 0.4em;
 		font: var(--sk-font-ui-medium);
 	}
@@ -228,7 +228,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	button {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	.links {
@@ -237,7 +237,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 
 		a {
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 			font: var(--sk-font-ui-medium);
 
 			white-space: nowrap;
@@ -248,11 +248,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			outline-offset: -2px;
 
 			&:hover {
-				box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
+				box-shadow: inset 0 -1px 0 0 var(--sk-bg-5);
 			}
 
 			&[aria-current='page'] {
-				color: var(--sk-theme-1);
+				color: var(--sk-fg-accent);
 				box-shadow: inset 0 -1px 0 0 currentColor;
 			}
 
@@ -315,7 +315,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			position: relative;
 			display: none;
 			width: 100%;
-			background: var(--sk-back-1);
+			background: var(--sk-bg-1);
 			padding: 1rem var(--sk-page-padding-side);
 		}
 
diff --git a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
index 06fa1d76ae..7364c29b4f 100644
--- a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
+++ b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
@@ -57,7 +57,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		transition: width 0.4s;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index bd608efa5b..50cffe2390 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -13,9 +13,9 @@ Accessibility helper component to skip to the main content
 
 <style>
 	a {
-		background: var(--sk-back-1);
-		color: var(--sk-text-2);
-		border: 2px solid var(--sk-text-1);
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-2);
+		border: 2px solid var(--sk-fg-1);
 		padding: 8px;
 		position: absolute;
 		inset-block-start: 0;
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index 9dac8cd464..e9ac04945f 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -72,8 +72,8 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		border-radius: 3.5rem;
 		background:
 			no-repeat 0.6em 55% / 1.2em 1.2em url(http://github.com/icons/search.svg),
-			var(--sk-back-4);
-		color: var(--sk-text-3);
+			var(--sk-bg-4);
+		color: var(--sk-fg-3);
 	}
 
 	input:focus + .shortcut {
@@ -82,11 +82,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	input::placeholder {
 		text-transform: lowercase;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	.shortcut {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		position: absolute;
 		top: calc(50% - 0.9rem);
 		right: 0;
@@ -100,7 +100,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	kbd {
 		display: none;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		font-size: inherit;
 		font-family: inherit;
 	}
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 113fe1e4ba..9bcbf66ba6 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -294,7 +294,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	.search-box {
 		--padding: 1rem;
-		--background: var(--sk-back-2);
+		--background: var(--sk-bg-2);
 		/* background: var(--background); */
 		position: relative;
 		height: calc(100% - 2rem);
@@ -335,16 +335,12 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			height: 6rem;
 			border: none;
 			flex-shrink: 0;
-			color: var(--sk-text-1);
-			border-bottom: 1px solid var(--sk-back-6);
+			color: var(--sk-fg-1);
+			border-bottom: 1px solid var(--sk-border-dark);
 			background: inherit;
 
-			&::selection {
-				background-color: var(--sk-back-translucent);
-			}
-
 			&::placeholder {
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 				opacity: 0.3;
 			}
 
@@ -359,11 +355,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			top: 0;
 			height: 100%;
 			aspect-ratio: 1;
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 
 			&:hover,
 			&:focus {
-				color: var(--sk-text-3);
+				color: var(--sk-fg-3);
 			}
 
 			&:focus-visible {
@@ -379,7 +375,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		&:hover,
 		&:focus {
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 		}
 
 		&:focus-visible {
@@ -393,7 +389,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			text-transform: uppercase;
 			background: none;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			width: 100%;
 			height: 100%;
 		}
@@ -420,11 +416,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			gap: 1rem;
 
 			&:hover {
-				background: var(--sk-back-3);
+				background: var(--sk-bg-3);
 			}
 
 			a {
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 				display: block;
 				text-decoration: none;
 				margin: 0 -0.5rem;
@@ -439,16 +435,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			button[aria-label='Delete'] {
 				width: 3.2rem;
 				height: 3.2rem;
-				color: var(--sk-text-4);
-				background-color: var(--sk-back-2);
+				color: var(--sk-fg-4);
+				background-color: var(--sk-bg-2);
 
 				&:hover {
 					outline: none;
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				&:focus-visible {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 					outline-offset: -3px;
 				}
 			}
@@ -468,7 +464,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		background: var(--background);
 		padding: var(--padding);
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
 		pointer-events: all;
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6b83731fd9..66d8c45ce6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -80,7 +80,7 @@
 			background: var(--background);
 			top: 0;
 			display: block;
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			text-transform: uppercase;
 			padding: calc(0.5 * var(--padding)) var(--padding);
 			font: var(--sk-font-ui-medium);
@@ -149,7 +149,7 @@
 		}
 
 		&:hover {
-			--background: var(--sk-back-3);
+			--background: var(--sk-bg-3);
 			text-decoration: none;
 		}
 
@@ -169,7 +169,7 @@
 			width: 100%;
 			overflow: hidden;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 
 			span {
 				display: inline;
@@ -177,7 +177,7 @@
 				&:not(:last-child)::after {
 					content: ' • ';
 					position: relative;
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: var(--sk-font-ui-small);
 					top: -0.1rem;
 				}
@@ -189,7 +189,7 @@
 			width: calc(100% + 1rem);
 			left: -0.5rem;
 			overflow: hidden;
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 
 			&::before,
 			&::after {
@@ -212,7 +212,7 @@
 			}
 
 			span {
-				color: var(--sk-text-3);
+				color: var(--sk-fg-3);
 				font: var(--sk-font-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
@@ -227,7 +227,7 @@
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 			background: var(--highlight-color);
 			outline: 2px solid var(--highlight-color);
 		}
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 50158c7c6b..980162c06b 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -32,9 +32,9 @@ Renders a list of search results
 	.info {
 		padding: var(--padding);
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
 		pointer-events: all;
 		margin: 0;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 506fd6fc37..77437101ba 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -20,8 +20,8 @@ body {
 body {
 	font-family: var(--sk-font-family-body);
 	line-height: 1.5;
-	color: var(--sk-text-2);
-	background-color: var(--sk-back-1);
+	color: var(--sk-fg-2);
+	background-color: var(--sk-bg-1);
 	width: 100%;
 	tab-size: 2;
 	-moz-tab-size: 2;
@@ -33,11 +33,10 @@ body {
 	padding: 0;
 	scrollbar-width: thin;
 	scrollbar-color: var(--sk-scrollbar) transparent;
-	-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);
 }
 
 *:focus-visible {
-	outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
+	outline: 2px solid var(--sk-fg-accent);
 	border-radius: var(--sk-border-radius);
 }
 
@@ -84,7 +83,7 @@ h2,
 h3 {
 	position: relative;
 	text-wrap: balance;
-	color: var(--sk-text-1);
+	color: var(--sk-fg-1);
 }
 
 strong {
@@ -97,8 +96,8 @@ kbd {
 	position: relative;
 	border-radius: var(--sk-border-radius);
 	white-space: nowrap;
-	color: var(--sk-text-2);
-	background: var(--sk-back-4);
+	color: var(--sk-fg-2);
+	background: var(--sk-bg-4);
 	line-height: 1.7;
 }
 
@@ -130,7 +129,7 @@ header {
 }
 
 ::selection {
-	background: var(--sk-selection-color);
+	background: var(--sk-bg-selection);
 }
 
 /*	opinionated styles --------------------- */
@@ -162,12 +161,12 @@ button {
 }
 
 button[disabled] {
-	color: var(--sk-text-4);
+	color: var(--sk-fg-4);
 }
 
 /*  links ------------------------------------- */
 a {
-	color: var(--sk-theme-1);
+	color: var(--sk-fg-accent);
 }
 
 /*  tables --------------------------------- */
diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index 508789514a..d78c55301a 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -14,7 +14,7 @@
 	padding-left: 1rem;
 	border-radius: 0;
 	box-shadow: none;
-	border-top: 1px solid var(--sk-back-4);
+	border-top: 1px solid var(--sk-bg-4);
 }
 
 .ts-block-property-details {
@@ -39,7 +39,7 @@
 	.tag {
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index f0e403cbdd..14e5eab87c 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -1,205 +1,9 @@
-/*
-
-!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
-!you should change that for the other dark mode too
-
-*/
+@import 'http://github.com/tokens/colours.css';
+@import 'http://github.com/tokens/dimensions.css';
+@import 'http://github.com/tokens/typography.css';
 
 :root {
-	color-scheme: light;
-
-	--sk-back-h: 206;
-	--sk-selection-color: hsla(204, 100%, 63%, 0.3);
-
-	/* dimensions */
-	--sk-nav-height: 6rem;
-	--sk-secondary-nav-height: 5rem;
-	--sk-page-padding-top: 6rem;
-	--sk-page-padding-bottom: 8rem;
-	--sk-page-padding-side: 1.6rem;
-	--sk-thick-border-width: 0.3rem;
-	--sk-border-radius: 0.4rem;
-	--sk-page-content-width: 76rem;
-	--sk-banner-height: 0px;
-	--sk-pane-controls-height: 4.2rem;
-
-	/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
-	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
-	--sk-font-family-body: Georgia, serif;
-	--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
-	--sk-font-family-mono: 'Fira Mono', monospace;
-
-	--sk-font-size-h1: 3.6rem;
-	--sk-font-size-h2: 3rem;
-	--sk-font-size-h3: 2.4rem;
-	--sk-font-size-body: 1.8rem;
-	--sk-font-size-body-small: 1.6rem;
-	--sk-font-size-ui-small: 1.3rem;
-	--sk-font-size-ui-medium: 1.6rem;
-	--sk-font-size-ui-large: 3rem;
-	--sk-font-size-mono: 1.4rem;
-
-	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
-	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
-	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
-
-	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
-	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
-	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
-	--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
-		var(--sk-font-family-body);
-	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
-		var(--sk-font-family-body);
-	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
-	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
-	--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
-	--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
-
-	/* Base colors */
-	--sk-theme-1-hsl: 12, 93%, 43%;
-
-	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
-
-	--sk-back-1: hsl(0, 0%, 100%);
-	--sk-back-2: hsl(0, 0%, 100%);
-	--sk-back-3: hsl(0, 0%, 99%);
-	--sk-back-4: hsl(0, 0%, 95%);
-	--sk-back-5: hsl(0, 0%, 92%);
-	--sk-back-6: hsl(0, 0%, 86%);
-
-	--sk-text-1: hsl(0, 0%, 5%);
-	--sk-text-2: hsl(0, 0%, 12%);
-	--sk-text-3: hsl(0, 0%, 27%);
-	--sk-text-4: hsl(0, 0%, 45%);
-	--sk-scrollbar: rgba(0, 0, 0, 0.3);
-	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
-
-	/* same in light mode, different in dark mode */
-	--sk-theme-1-variant: var(--sk-theme-1);
-
-	--sk-code-base: var(--sk-text-2);
-	--sk-code-comment: var(--sk-text-4);
-	--sk-code-keyword: hsl(204, 100%, 38%);
-	--sk-code-function: var(--sk-theme-1);
-	--sk-code-string: hsl(30, 100%, 30%);
-	--sk-code-number: hsl(120, 100%, 25%);
-	--sk-code-template-string: hsl(2, 80%, 47%);
-	--sk-code-tags: var(--sk-code-function);
-	--sk-code-important: var(--sk-code-string);
-	--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
-	--sk-code-diff-inserted: hsl(120, 100%, 25%);
-	--sk-code-diff-removed: hsl(2, 80%, 47%);
-
-	--shiki-color-text: var(--sk-code-base);
-	--shiki-token-constant: var(--sk-code-base);
-	--shiki-token-string: var(--sk-code-string);
-	--shiki-token-comment: var(--sk-code-comment);
-	--shiki-token-keyword: var(--sk-code-keyword);
-	--shiki-token-parameter: var(--sk-code-base);
-	--shiki-token-function: var(--sk-code-function);
-	--shiki-token-string-expression: var(--sk-code-string);
-	--shiki-token-punctuation: var(--sk-code-base);
-	--shiki-token-link: var(--sk-code-keyword);
-
-	--sk-text-warning-hsl: 32, 95%, 44%;
-	--sk-text-warning: hsl(var(--sk-text-warning-hsl));
-
-	/* used for coloured backgrounds e.g. blockquotes */
-	--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
-	--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
-
-	/* overrides */
-	--shiki-color-background: var(--sk-back-2);
-
-	/* raised buttons */
-	--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
-	--sk-raised-width: 1px 2px 2px 1px;
-	--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
-	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
-	--sk-raised-active-width: 2px 1px 1px 2px;
-
 	/* this is necessary for elements with filters on safari, because safari is a uniquely awful piece of software.
 	   the 0.01 prevents Vite from optimising it to `translate(0, 0)`, which doesn't fix anything */
 	--safari-fix: translate3d(0, 0, 0.01);
-
-	/* set at 1.75x so if you zoom +/-10% from common settings it won't switch your font */
-	@media (min-resolution: 1.75x) {
-		--sk-font-family-body: 'EB Garamond', Georgia, serif;
-		--sk-font-size-body: 2.2rem;
-		--sk-font-size-body-small: 2rem;
-	}
-
-	&.font-boring {
-		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
-		--sk-font-size-body: 1.9rem;
-		--sk-font-size-body-small: 1.7rem;
-
-		p code {
-			font-size: 0.75em;
-		}
-	}
-
-	&.dark {
-		color-scheme: dark;
-		-webkit-font-smoothing: antialiased;
-
-		--sk-back-hue: 220;
-
-		--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
-		--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
-		--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
-		--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
-		--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
-		--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
-		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
-		--sk-theme-1-hsl: 12, 94%, 62%;
-		--sk-text-1: hsl(var(--sk-back-hue), 10%, 90%);
-		--sk-text-2: hsl(var(--sk-back-hue), 10%, 80%);
-		--sk-text-3: hsl(var(--sk-back-hue), 10%, 65%);
-		--sk-text-4: hsl(var(--sk-back-hue), 10%, 45%);
-		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
-		--sk-scrollbar: rgba(255, 255, 255, 0.3);
-		--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
-
-		--sk-theme-1-variant: hsl(15, 100%, 35%);
-
-		--sk-text-warning-hsl: 32, 67%, 56%;
-
-		--sk-code-base: hsl(45, 7%, 75%);
-		--sk-code-comment: hsl(0, 0%, 55%);
-		--sk-code-keyword: hsl(204, 88%, 65%);
-		--sk-code-function: hsl(19, 67%, 75%);
-		--sk-code-string: hsl(41, 37%, 68%);
-		--sk-code-number: hsl(120, 100%, 25%);
-		--sk-code-template-string: hsl(2, 80%, 47%);
-		--sk-code-tags: var(--sk-code-function);
-		--sk-code-important: var(--sk-code-string);
-
-		--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
-		--sk-code-diff-inserted: hsl(120, 46%, 48%);
-		--sk-code-diff-removed: hsl(2, 64%, 70%);
-
-		/* overrides */
-		--shiki-color-background: var(--sk-back-3);
-
-		/* raised buttons */
-		--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
-		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
-		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
-	}
-}
-
-@media screen and (min-width: 480px) {
-	:root {
-		--sk-page-padding-side: 3.2rem;
-	}
-}
-
-@media screen and (min-width: 800px) {
-	:root {
-		--sk-font-size-h1: 5.4rem;
-		--sk-page-padding-top: 8rem;
-		--sk-page-padding-side: 4.8rem;
-		--sk-secondary-nav-height: 6rem;
-	}
 }
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
new file mode 100644
index 0000000000..266114e116
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -0,0 +1,88 @@
+/*
+
+!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
+!you should change that for the other dark mode too
+
+*/
+
+:root {
+	color-scheme: light;
+
+	/* Foreground colours */
+	--sk-fg-1: hsl(0, 0%, 5%);
+	--sk-fg-2: hsl(0, 0%, 12%);
+	--sk-fg-3: hsl(0, 0%, 27%);
+	--sk-fg-4: hsl(0, 0%, 45%);
+	--sk-fg-accent: hsl(12, 93%, 43%);
+
+	--shiki-color-text: var(--sk-fg-2);
+	--shiki-token-constant: var(--shiki-color-text);
+	--shiki-token-string: hsl(30, 100%, 30%);
+	--shiki-token-comment: var(--sk-fg-4);
+	--shiki-token-keyword: hsl(204, 100%, 38%);
+	--shiki-token-parameter: var(--shiki-color-text);
+	--shiki-token-function: var(--sk-fg-accent);
+	--shiki-token-string-expression: var(--shiki-token-string);
+	--shiki-token-punctuation: var(--shiki-color-text);
+	--shiki-token-link: var(--shiki-token-keyword);
+
+	/* Background colours */
+	--sk-bg-1: hsl(0, 0%, 100%);
+	--sk-bg-2: hsl(0, 0%, 100%);
+	--sk-bg-3: hsl(0, 0%, 99%);
+	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-5: hsl(0, 0%, 92%);
+	--sk-bg-accent: var(--sk-fg-accent);
+	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+
+	/* Border colors */
+	--sk-border-light: hsl(0, 0%, 95%);
+	--sk-border-medium: hsl(0, 0%, 92%);
+	--sk-border-dark: hsl(0, 0%, 86%);
+
+	/* Misc */
+	--sk-scrollbar: rgba(0, 0, 0, 0.3);
+	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
+
+	/* overrides */
+	--shiki-color-background: var(--sk-bg-2);
+}
+
+:root.dark {
+	color-scheme: dark;
+
+	--sk-bg-hue: 220;
+
+	/* Foreground colours */
+	--sk-fg-1: hsl(var(--sk-bg-hue), 10%, 90%);
+	--sk-fg-2: hsl(var(--sk-bg-hue), 10%, 80%);
+	--sk-fg-3: hsl(var(--sk-bg-hue), 10%, 65%);
+	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
+	--sk-fg-accent: hsl(12, 94%, 62%);
+
+	--shiki-color-text: hsl(45, 7%, 75%);
+	--shiki-token-comment: hsl(0, 0%, 55%);
+	--shiki-token-keyword: hsl(204, 88%, 65%);
+	--shiki-token-function: hsl(19, 67%, 75%);
+	--shiki-token-string: hsl(41, 37%, 68%);
+
+	/* Background colours */
+	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
+	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
+	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
+	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
+	--sk-bg-5: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-bg-accent: hsl(15, 100%, 35%);
+
+	/* Border colours */
+	--sk-border-light: hsl(var(--sk-bg-hue), 15%, 32%);
+	--sk-border-medium: var(--sk-bg-5);
+	--sk-border-dark: var(--sk-bg-3);
+
+	/* Misc */
+	--sk-scrollbar: rgba(255, 255, 255, 0.3);
+	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
+
+	/* overrides */
+	--shiki-color-background: var(--sk-bg-3);
+}
diff --git a/packages/site-kit/src/lib/styles/tokens/dimensions.css b/packages/site-kit/src/lib/styles/tokens/dimensions.css
new file mode 100644
index 0000000000..ad12d58440
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/dimensions.css
@@ -0,0 +1,23 @@
+:root {
+	--sk-nav-height: 6rem;
+	--sk-secondary-nav-height: 5rem;
+	--sk-page-padding-top: 6rem;
+	--sk-page-padding-bottom: 8rem;
+	--sk-page-padding-side: 1.6rem;
+	--sk-thick-border-width: 0.3rem;
+	--sk-border-radius: 0.4rem;
+	--sk-border-radius-inner: 0.2rem;
+	--sk-page-content-width: 76rem;
+	--sk-banner-height: 0px;
+	--sk-pane-controls-height: 4.2rem;
+
+	@media screen and (min-width: 480px) {
+		--sk-page-padding-side: 3.2rem;
+	}
+
+	@media screen and (min-width: 800px) {
+		--sk-page-padding-top: 8rem;
+		--sk-page-padding-side: 4.8rem;
+		--sk-secondary-nav-height: 6rem;
+	}
+}
diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css
new file mode 100644
index 0000000000..8aac82de84
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/typography.css
@@ -0,0 +1,59 @@
+/* Note: prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
+
+:root {
+	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
+	--sk-font-family-body: Georgia, serif;
+	--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
+	--sk-font-family-mono: 'Fira Mono', monospace;
+
+	--sk-font-size-h1: 3.6rem;
+	--sk-font-size-h2: 3rem;
+	--sk-font-size-h3: 2.4rem;
+	--sk-font-size-body: 1.8rem;
+	--sk-font-size-body-small: 1.6rem;
+	--sk-font-size-ui-small: 1.3rem;
+	--sk-font-size-ui-medium: 1.6rem;
+	--sk-font-size-ui-large: 3rem;
+	--sk-font-size-mono: 1.4rem;
+
+	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
+	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
+	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
+
+	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
+	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
+	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
+	--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
+		var(--sk-font-family-body);
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
+		var(--sk-font-family-body);
+	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
+	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
+	--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
+	--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
+
+	/* set at 1.75x so if you zoom +/-10% from common settings it won't switch your font */
+	@media (min-resolution: 1.75x) {
+		--sk-font-family-body: 'EB Garamond', Georgia, serif;
+		--sk-font-size-body: 2.2rem;
+		--sk-font-size-body-small: 2rem;
+	}
+
+	&.font-boring {
+		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
+		--sk-font-size-body: 1.9rem;
+		--sk-font-size-body-small: 1.7rem;
+
+		p code {
+			font-size: 0.75em;
+		}
+	}
+
+	&.dark {
+		-webkit-font-smoothing: antialiased;
+	}
+
+	@media screen and (min-width: 800px) {
+		--sk-font-size-h1: 5.4rem;
+	}
+}
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 440a4fb550..67998a7ab2 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -1,3 +1,25 @@
+:root {
+	/* raised buttons */
+	--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-light);
+	--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+		var(--sk-border-medium);
+	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-dark);
+	--sk-raised-width: 1px 2px 2px 1px;
+	--sk-raised-active-width: 2px 1px 1px 2px;
+
+	&.dark {
+		/* raised buttons */
+		--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-medium);
+		--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-light);
+		--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
+			var(--sk-border-dark);
+	}
+}
+
 .raised {
 	border-radius: var(--sk-border-radius);
 	border-style: solid;
@@ -10,7 +32,7 @@
 			hsla(12, 93%, 70%);
 		--sk-raised-active-color: hsla(12, 93%, 30%) hsla(12, 93%, 70%) hsla(12, 93%, 70%)
 			hsla(12, 93%, 30%);
-		background: var(--sk-theme-1-variant);
+		background: var(--sk-bg-accent);
 		color: white;
 
 		:root.dark & {
@@ -32,7 +54,7 @@
 	}
 
 	&:disabled {
-		border-color: var(--sk-back-5);
+		border-color: var(--sk-border-medium);
 		border-width: 1px;
 	}
 }
@@ -53,7 +75,7 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		width: var(--arrow-size);
 		height: var(--arrow-size);
 		position: absolute;
-		background: var(--sk-text-3);
+		background: var(--sk-fg-3);
 		top: calc(100% + var(--arrow-size) * 0.5);
 		left: calc(50% - var(--arrow-size) * 0.5);
 		rotate: 45deg;
@@ -65,8 +87,8 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		top: calc(100% + var(--arrow-size));
 		left: 50%;
 		translate: -50% 0;
-		background: var(--sk-text-3);
-		color: var(--sk-back-4);
+		background: var(--sk-fg-3);
+		color: var(--sk-bg-4);
 		padding: 0.5em 0.8em;
 		border-radius: var(--sk-border-radius);
 		font: var(--sk-font-ui-small);
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
index c43f3e1840..bca7ab4eb0 100644
--- a/packages/site-kit/src/lib/styles/utils/dividers.css
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -1,6 +1,6 @@
 .divider {
 	z-index: 2;
 	&::after {
-		background-color: var(--sk-back-5) !important;
+		background-color: var(--sk-bg-5) !important;
 	}
 }

From ee26958aee7d403b9fe88ac1ee64cf1b7111ca28 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <accounts@dreamindani.com>
Date: Thu, 31 Oct 2024 16:20:36 -0600
Subject: [PATCH 052/453] docs: "What's new in Svelte" November newsletter
 (#672)

* first draft november

* H3 baby!

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* move svelte cli to sveltekit section

* prettier

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 ...11-01-whats-new-in-svelte-november-2024.md | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md

diff --git a/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
new file mode 100644
index 0000000000..a0d22df5a5
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
@@ -0,0 +1,89 @@
+---
+title: "What's new in Svelte: November 2024"
+description: 'New features in Svelte 5 and a ton of new community libraries'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+In case you missed the [announcement post](https://svelte.dev/blog/svelte-5-is-alive), the brand new [omnisite](https://svelte.dev/blog/the-omnisite) or the maintainers [shipping it LIVE during Svelte Summit](https://www.youtube.com/live/fAPFsRP-mbc?si=Atd1WNpoMddssSna&t=13084)... Svelte 5 is out!
+
+Also announced at Svelte Summit was [SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes)](https://hack.sveltesociety.dev/2024). The submission period ends January 9 and only projects started after October 18th are eligible. So get those `$`s ready and start hacking!
+
+Since the release of Svelte 5, there's already been one minor version to introduce a couple of helpful features. We'll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month's roundup...
+
+## What's new in Svelte
+
+If you've only recently [migrated to Svelte 5](https://svelte.dev/docs/svelte/v5-migration-guide), check out the last few months of updates for all the features that have gone into this release. For this month, you'll see some marked `-next.XXX`. These changes were in the 5.0 release.
+
+- Snippets can now be used to fill slots (**5.0.0-next.262**, [#13427](https://github.com/sveltejs/svelte/pull/13427))
+- `hidden until-found` and `beforematch` are now available on DOM elements (**5.0.0-next.266**, [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#using_until-found), [#13612](https://github.com/sveltejs/svelte/pull/13612))
+- **Breaking:** State mutations are not allowed in logic block expressions (**5.0.0-next.269**, [#13625](https://github.com/sveltejs/svelte/pull/13625))
+- `getContext()` is now allowed within `$derived` runes (**5.1.0**, [Docs](https://svelte.dev/docs/svelte/derived), [#13830](https://github.com/sveltejs/svelte/pull/13830))
+
+To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).
+
+## What's new in SvelteKit, Svelte CLI and Language Tools
+
+- `adapter-auto` now supports the Bun package manager (**3.3.1**, [#12854](https://github.com/sveltejs/kit/pull/12854))
+- The [Svelte CLI](https://svelte.dev/blog/sv-the-svelte-cli) now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in [the CLI Repository](https://github.com/sveltejs/cli) or by running `npx sv create` from your command line.
+- The Svelte extension now provides a Svelte 5 component migration command (**extensions-109.1.0**)
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [DocumentCloud](https://github.com/MuckRock/documentcloud-frontend/tree/sveltekit) is an all-in-one platform used by newsrooms around the world to manage primary source documents
+- [Chord](https://chord.fm/) is an app for recording podcasts and interviews in high quality
+- [Monokai.pro](https://monokai.pro/) uses Svelte 5 now (See the [Reddit Post](https://www.reddit.com/r/sveltejs/comments/1gd87ej/monokaipro_uses_svelte_5_now/) for more details)
+- [svelte audio visualizations](https://github.com/flo-bit/svelte-audio-visualizations) are useful for visualizing voice input and output
+- [avi12's](https://chromewebstore.google.com/detail/youtube-auto-hd-+-fps/fcphghnknhkimeagdglkljinmpbagone) [YouTube](https://chromewebstore.google.com/detail/youtube-time-manager/fpoooibdndpjcnoodfionoeakeojdjaj) [extensions](https://chromewebstore.google.com/detail/youtube-like-dislike-shor/fdkpkpelkkdkjhpacficichkfifijipc) are great examples of how Svelte can be used in Chrome extensions
+- [Multy](https://multy.me/) is a simple tool that allows you to create a list of URLs, and share it with a single link
+- [BlackJack](https://github.com/baterson/blackjack-svelte-5) is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Svelte Summit Fall 2024](https://www.youtube.com/watch?v=fAPFsRP-mbc&list=PL8bMgX1kyZTg28nrVEDoyRTQFWweUR6fn) was a blast! Keep an eye out on this playlist to see all the talks split up into individual videos
+- [Svelte 5 Basics - Complete Svelte 5 Course for Beginners](https://www.youtube.com/watch?v=8DQailPy3q8) by Syntax
+- [Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions](https://www.youtube.com/watch?v=8Sy04DGbJV8) by Stanislav Khromov
+
+_This Week in Svelte_
+
+- [Ep. 79](https://www.youtube.com/watch?v=wlngWKmIShA) — Changelog, Global/shared state, Kampsy-ui
+- [Ep. 80](https://www.youtube.com/watch?v=SHBxjWtlv4A) — Changelog, formgator
+- [Ep. 81](https://www.youtube.com/watch?v=xnNARAcjl9w) — Changelog, Inertia.js
+- [Ep. 82](https://www.youtube.com/watch?v=CS2Nuwdwvi0) — Changelog, Migration guide
+
+_To Read_
+
+- [Speed of Svelte reactive bindings vs keyboard events](https://zellwk.com/blog/svelte-reactive-bindings-speed/) by Zell Liew
+- [SvelteKit + Passkeys](https://passlock.dev/blog/passkeys/sveltekit-passkeys) by Passlock
+- [Local-First Web Development with Replicache: Building smooth user experiences](https://shootmail.app/blog/local-first-web-development-with-replicache) by Shootmail
+- [10 game-changing tools that level up Svelte developers in 2025](https://dev.to/sebconejo/10-game-changing-tools-that-level-up-svelte-developers-in-2025-14g3) by Sébastien Conejo
+
+_To Watch_
+
+- [Svelte 5 Is Like React, But Better](https://www.youtube.com/watch?v=31CyquY8RNE) by Theo - t3․gg
+- [JavaScript framework reinvents itself… Did "runes" just ruin Svelte?](https://www.youtube.com/watch?v=aYyZUDFZTrM) by Fireship
+
+### Libraries, Tools & Components
+
+- [Svelte 5 testing example](https://github.com/PaoloTorregroza/weather-testing) is a good example project demonstrating how to test Svelte 5 applications with Vitest
+- [Origin UI - Svelte](https://originui-svelte.pages.dev/) is an extensive collection of copy-and-paste components for quickly building app UIs
+- [Cancellable](https://choco-ui.com/blocks/cancellable) is a building block adds three reactive attributes to button and anchor elements to create a more consistent user experience across browsers and platforms
+- [svelte-simple-router](https://github.com/dvcol/svelte-simple-router) is a client-side router made for Svelte 5
+- [svelte-openai-realtime-api](https://github.com/flo-bit/svelte-openai-realtime-api) is a Svelte component for using the OpenAI realtime api
+- [FlyonUI](https://github.com/themeselection/flyonui) is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins
+- [Svelte-Next](https://svelte-next.codewithshin.com/) automates Svelte version updates
+- [SvelteKit Dynamic Component Load demo](https://github.com/khromov/sveltekit-dynamic-component-load-demo/#sveltekit-dynamic-component-load-demo) shows how you can dynamically load different Svelte components depending on what content your backend API delivers
+- [Tzezar's datagrid](https://github.com/tzezar/datagrid) is an easy to use, easy to customize, datagrid made in Svelte 5
+- [svelte-bundle](https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into single HTML files (with SSR!)
+- [svelte-virtuallists](https://github.com/orefalo/svelte-virtuallists) keeps your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists
+- [Sveltick](https://www.npmjs.com/package/sveltick) is a lightweight traffic-tracking library for your Svelte apps
+
+That's it for this huge month in Svelte! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋

From 06be7478215aa6ae8972677d715b7f362e2bd879 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:33:08 -0400
Subject: [PATCH 053/453] Sync `cli` docs (#729)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/cli/20-commands/10-sv-create.md      | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
index 36799f94ba..7425d3f3ce 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
@@ -12,16 +12,6 @@ npx sv create [options] [path]
 
 ## Options
 
-<!-- TODO this flag should probably just be '--types', and the options should be 'ts' or 'jsdoc' -->
-
-### `--check-types <option>`
-
-Whether and how to add typechecking to the project:
-
-- `typescript` — default to `.ts` files and use `lang="ts"` for `.svelte` components
-- `checkjs` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types
-- `none` — no typechecking. Not recommended!
-
 ### `--template <name>`
 
 Which project template to use:
@@ -30,9 +20,18 @@ Which project template to use:
 - `demo` — showcase app with a word guessing game that works without JavaScript
 - `library` — template for a Svelte library, set up with `svelte-package`
 
-### `--no-integrations`
+### `--types <option>`
+
+Whether and how to add typechecking to the project:
+
+- `ts` — default to `.ts` files and use `lang="ts"` for `.svelte` components
+- `jsdoc` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types
+
+### `--no-types`
+
+Prevent typechecking from being added. Not recommended!
 
-<!-- TODO should be renamed to `--no-addons` -->
+### `--no-add-ons`
 
 Run the command without the interactive add-ons prompt
 

From 5728b06ddeb0c73523c7b5edabd3bb42110f2f19 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 31 Oct 2024 18:35:45 -0400
Subject: [PATCH 054/453] gah why would you put the active line above the
 selection (#744)

---
 packages/editor/src/lib/codemirror.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index b7fc35260a..f8504a81ae 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -36,7 +36,12 @@
 	}
 
 	.cm-activeLine {
-		background: var(--sk-bg-3);
+		/* this must be translucent, or it will obscure the selection */
+		background: hsl(0, 0%, 0%, 0.04);
+
+		:root.dark & {
+			background: hsl(0, 0%, 100%, 0.04);
+		}
 	}
 
 	.cm-activeLineGutter {

From f79a22ff3e1f294c02f7f6b2c2d8cc0a188505ca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 31 Oct 2024 22:54:19 -0400
Subject: [PATCH 055/453] Sync `svelte` docs (#746)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/98-reference/.generated/client-errors.md    | 2 ++
 .../docs/svelte/98-reference/.generated/client-warnings.md  | 2 ++
 .../docs/svelte/98-reference/.generated/compile-errors.md   | 2 ++
 .../docs/svelte/98-reference/.generated/compile-warnings.md | 2 ++
 .../docs/svelte/98-reference/.generated/server-errors.md    | 2 ++
 .../docs/svelte/98-reference/.generated/shared-errors.md    | 2 ++
 .../docs/svelte/98-reference/.generated/shared-warnings.md  | 2 ++
 .../content/docs/svelte/98-reference/30-compiler-errors.md  | 2 ++
 .../docs/svelte/98-reference/30-compiler-warnings.md        | 2 ++
 .../content/docs/svelte/98-reference/30-runtime-errors.md   | 6 ++++++
 .../content/docs/svelte/98-reference/30-runtime-warnings.md | 4 ++++
 11 files changed, 28 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index 9879b67b33..90c9c1f9d1 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### bind_invalid_checkbox_value
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 743a47b67a..e9f1a88c3c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### binding_property_non_reactive
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 3981822d84..b32bc6b89c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### animation_duplicate
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index e2ac86be2f..775e0681c9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### a11y_accesskey
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
index f325b5349a..8cf6727da9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### lifecycle_function_unavailable
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
index 1a2bcf8d2d..52ef9d5f88 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### invalid_default_snippet
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
index 4ff3f89e6d..e9327e1e98 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
@@ -1,3 +1,5 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### dynamic_void_element_content
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 7e84a223a9..b9b3c8f7a3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -2,6 +2,8 @@
 title: 'Compiler errors'
 ---
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### animation_duplicate
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index bd2bddc791..662b04ea82 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -18,6 +18,8 @@ You can list multiple rules in a single comment (separated by commas), and add a
 <div onclick>...</div>
 ```
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### a11y_accesskey
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index d2d6476e5b..cecb8045ab 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -4,6 +4,8 @@ title: 'Runtime errors'
 
 ## Client errors
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### bind_invalid_checkbox_value
 
 ```
@@ -137,6 +139,8 @@ Updating state inside a derived or a template expression is forbidden. If the va
 
 ## Server errors
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### lifecycle_function_unavailable
 
 ```
@@ -146,6 +150,8 @@ Updating state inside a derived or a template expression is forbidden. If the va
 
 ## Shared errors
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### invalid_default_snippet
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 1f6c7598df..c1c79d53e4 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -4,6 +4,8 @@ title: 'Runtime warnings'
 
 ## Client warnings
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### binding_property_non_reactive
 
 ```
@@ -112,6 +114,8 @@ To resolve this, ensure you're comparing values where both values were created w
 
 ## Shared warnings
 
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
 ### dynamic_void_element_content
 
 ```

From 2dd332a2c62910c825ce3a2227e098b04ebd48d8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 06:30:08 -0400
Subject: [PATCH 056/453] Sync `svelte` docs (#748)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/03-$derived.md      |  6 ++++++
 .../content/docs/svelte/02-runes/04-$effect.md       |  2 +-
 .../content/docs/svelte/98-reference/20-svelte.md    | 12 +++++++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index 77ab07a0a9..6b38f99746 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -45,3 +45,9 @@ Sometimes you need to create complex derivations that don't fit inside a short e
 ```
 
 In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.
+
+## Understanding dependencies
+
+Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
+
+To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 354869f35e..3515a6c4e4 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -2,7 +2,7 @@
 title: $effect
 ---
 
-Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed, and re-runs the function when that state later changes.
+Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
 
 Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 18db845d67..f5315b7943 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -344,7 +344,17 @@ function unmount(component: Record<string, any>): void;
 
 ## untrack
 
-Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
+When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
+any state read inside `fn` will not be treated as a dependency.
+
+```ts
+$effect(() => {
+	// this will run when `data` changes, but not when `time` changes
+	save(data, {
+		timestamp: untrack(() => time)
+	});
+});
+```
 
 <div class="ts-block">
 

From 0cf5294d8a6ad361486b20ec27aaa46e4493c429 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 1 Nov 2024 08:10:50 -0400
Subject: [PATCH 057/453] fix codemirror search panel (#749)

* fix codemirror search panel

* prettier
---
 packages/editor/src/lib/close-dark.svg  |  1 +
 packages/editor/src/lib/close-light.svg |  1 +
 packages/editor/src/lib/codemirror.css  | 83 ++++++++++++++++++++-----
 3 files changed, 68 insertions(+), 17 deletions(-)
 create mode 100644 packages/editor/src/lib/close-dark.svg
 create mode 100644 packages/editor/src/lib/close-light.svg

diff --git a/packages/editor/src/lib/close-dark.svg b/packages/editor/src/lib/close-dark.svg
new file mode 100644
index 0000000000..46bd16cf54
--- /dev/null
+++ b/packages/editor/src/lib/close-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/editor/src/lib/close-light.svg b/packages/editor/src/lib/close-light.svg
new file mode 100644
index 0000000000..a9d4a2c049
--- /dev/null
+++ b/packages/editor/src/lib/close-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index f8504a81ae..da56caaa70 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -124,7 +124,8 @@
 	}
 
 	.cm-panels {
-		background: var(--sk-bg-4);
+		font: var(--sk-font-ui-small);
+		background: var(--sk-bg-2);
 		color: var(--sk-fg-1);
 
 		&.cm-panels-top,
@@ -132,26 +133,74 @@
 			border-top: 1px solid var(--sk-border-medium);
 			border-bottom: 1px solid var(--sk-border-medium);
 		}
-	}
 
-	.cm-button {
-		background: var(--sk-bg-5);
-		border: 2px solid transparent;
-	}
+		.cm-panel {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			padding: 0.5rem 4.2rem 0.5rem 0.5rem;
 
-	.cm-textfield {
-		background: var(--sk-bg-1);
-		color: var(--sk-fg-1);
-		border: 2px solid transparent;
-	}
+			.cm-button,
+			button[aria-label='close'] {
+				margin: 0;
+				font: inherit;
+				background: inherit;
+				height: 3.2rem;
+				padding: 0 0.8rem;
+				border-style: solid;
+				border-width: var(--sk-raised-width);
+				border-color: var(--sk-raised-color);
+				border-radius: var(--sk-border-radius);
 
-	.cm-search button:focus-visible,
-	.cm-search input:focus-visible {
-		border: 2px solid var(--flash);
-	}
+				&:hover {
+					border-color: var(--sk-raised-hover-color);
+				}
+
+				&:active {
+					border-color: var(--sk-raised-active-color);
+					border-width: var(--sk-raised-active-width);
+				}
+			}
+
+			button[aria-label='close'] {
+				aspect-ratio: 1;
+				top: 0.5rem;
+				right: 0.5rem;
+				color: transparent;
+				background: url(http://github.com/close-light.svg) 50% 50% no-repeat;
+				background-size: 1.8rem;
 
-	.cm-search input[type='checkbox']:focus-visible {
-		outline: 2px solid var(--flash);
+				:root.dark & {
+					background-image: url(http://github.com/close-dark.svg);
+				}
+			}
+
+			.cm-textfield {
+				font: inherit;
+				background: inherit;
+				color: var(--sk-fg-1);
+				border: 1px solid var(--sk-border-medium);
+				border-radius: var(--sk-border-radius);
+				margin: 0;
+			}
+
+			.cm-search button:focus-visible,
+			.cm-search input:focus-visible {
+				border: 2px solid var(--flash);
+			}
+
+			.cm-search input[type='checkbox']:focus-visible {
+				outline: 2px solid var(--flash);
+			}
+
+			label {
+				font: inherit;
+				display: inline-flex;
+				gap: 0.5rem;
+				align-items: center;
+				margin: 0 0 0 0.5rem;
+			}
+		}
 	}
 
 	.cm-searchMatch.cm-searchMatch-selected {

From bf77603d80b1273060aa00e36885c6ab4fe69961 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 1 Nov 2024 08:13:58 -0400
Subject: [PATCH 058/453] tiny fix

---
 packages/repl/src/lib/Output/CompilerOptions.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 449f829f28..e537a480f3 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -21,7 +21,7 @@
 				}}
 			/>
 			<label for={generate}><span class="string">"{generate}"</span></label>
-		{/each}
+		{/each},
 	</div>
 
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
@@ -33,7 +33,7 @@
 				workspace.update_compiler_options({ dev });
 			}}
 		/>
-		<span class="boolean">{workspace.compiler_options.dev}</span>,
+		<span class="boolean">{workspace.compiler_options.dev}</span>
 	</label>
 	});
 </div>
@@ -57,7 +57,7 @@
 
 	.key {
 		display: inline-block;
-		width: 9em;
+		width: 6em;
 	}
 
 	.string {

From 51094bb39a29c296bfbb6cb687ae5baddf3b66b9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 1 Nov 2024 09:44:11 -0400
Subject: [PATCH 059/453] More token tweaks (#751)

* rename border tokens

* fix

* get rid of --sk-bg-5

* fix border usage

* fixes

* move raised styles into buttons.css, add comment on usage

* prettier

* more
---
 .../src/lib/components/PageControls.svelte    |  2 +-
 .../src/routes/(authed)/apps/+page.svelte     |  2 +-
 .../playground/[id]/AppControls.svelte        |  2 +-
 .../routes/tutorial/[...slug]/+page.svelte    |  2 +-
 .../routes/tutorial/[...slug]/Chrome.svelte   |  2 +-
 packages/editor/src/lib/codemirror.css        |  6 +--
 .../src/lib/Input/ComponentSelector.svelte    |  2 +-
 packages/repl/src/lib/Output/Output.svelte    |  2 +-
 .../lib/Output/console/ConsoleTable.svelte    |  2 +-
 packages/repl/src/lib/Repl.svelte             |  4 --
 .../src/lib/components/Checkbox.svelte        |  2 +-
 .../src/lib/components/ScreenToggle.svelte    |  2 +-
 .../site-kit/src/lib/components/Text.svelte   |  2 +-
 .../site-kit/src/lib/nav/MobileMenu.svelte    |  2 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  2 +-
 .../site-kit/src/lib/search/SearchBox.svelte  |  2 +-
 packages/site-kit/src/lib/styles/text.css     |  2 +-
 .../src/lib/styles/tokens/colours.css         | 52 ++++++++-----------
 .../site-kit/src/lib/styles/utils/buttons.css | 33 +++++++-----
 .../src/lib/styles/utils/dividers.css         |  2 +-
 20 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte
index 41b946926f..df5f7c5624 100644
--- a/apps/svelte.dev/src/lib/components/PageControls.svelte
+++ b/apps/svelte.dev/src/lib/components/PageControls.svelte
@@ -61,7 +61,7 @@
 
 	.controls {
 		max-width: calc(var(--sk-page-content-width) + 1rem);
-		border-top: 1px solid var(--sk-border-medium);
+		border-top: 1px solid var(--sk-border);
 		padding: 1rem 0 0 0;
 		margin: 1rem 0 0 0;
 		text-wrap: balance;
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 0def54f1d5..e55b23cd2a 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -209,7 +209,7 @@
 		padding: 0.5rem 1rem;
 		line-height: 1;
 		display: flex;
-		border: 1px solid var(--sk-border-medium);
+		border: 1px solid var(--sk-border);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
 		font: var(--sk-font-ui-large);
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 49d392c6e5..768e2f6087 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -303,7 +303,7 @@
 
 	input {
 		background: transparent;
-		border: 1px solid var(--sk-border-medium);
+		border: 1px solid var(--sk-border);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
 		width: 0;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 870ee987ec..9539e5f3ec 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -369,7 +369,7 @@
 		/* we transform the default state, rather than the editor state, because otherwise
 		   the positioning of tooltips is wrong (doesn't take into account transforms) */
 		transform: translate(50%, 0);
-		border-top: 1px solid var(--sk-border-medium);
+		border-top: 1px solid var(--sk-border);
 	}
 
 	.top.offset {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 22b640ad00..5934e7475d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -74,7 +74,7 @@
 	input {
 		flex: 1;
 		padding: 0.2rem 0.6rem;
-		border: 1px solid var(--sk-border-medium);
+		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
 		color: var(--sk-fg-1);
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index da56caaa70..372964e783 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -130,8 +130,8 @@
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
-			border-top: 1px solid var(--sk-border-medium);
-			border-bottom: 1px solid var(--sk-border-medium);
+			border-top: 1px solid var(--sk-border);
+			border-bottom: 1px solid var(--sk-border);
 		}
 
 		.cm-panel {
@@ -179,7 +179,7 @@
 				font: inherit;
 				background: inherit;
 				color: var(--sk-fg-1);
-				border: 1px solid var(--sk-border-medium);
+				border: 1px solid var(--sk-border);
 				border-radius: var(--sk-border-radius);
 				margin: 0;
 			}
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 9cf2f65296..7bf8a90aaa 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -199,7 +199,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-bg-4);
+			background-color: var(--sk-border);
 		}
 	}
 
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index e55c2936d6..27c2ed7014 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -157,7 +157,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-bg-4);
+			background-color: var(--sk-border);
 		}
 	}
 
diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
index 7c6c32ce50..ced50fc8eb 100644
--- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
@@ -96,7 +96,7 @@
 		margin: 8px;
 		overflow: auto;
 		max-height: 200px;
-		border: 1px solid var(--sk-border-medium);
+		border: 1px solid var(--sk-border);
 		border-radius: 2px;
 		overscroll-behavior: none;
 	}
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 2c20688ae9..e0112c14ba 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -234,10 +234,6 @@
 				}
 			}
 
-			.divider::after {
-				background-color: var(--sk-bg-5);
-			}
-
 			[data-pane='main'] > .divider::after {
 				height: calc(100% - var(--sk-pane-controls-height));
 				top: var(--sk-pane-controls-height);
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index ab58584e88..7822a26191 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -32,7 +32,7 @@
 		border-radius: 1em;
 		top: 0;
 		left: 0;
-		background: var(--sk-bg-5);
+		background: var(--sk-bg-4);
 		box-sizing: content-box;
 	}
 
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
index 8b59e68c46..15fac1f5c0 100644
--- a/packages/site-kit/src/lib/components/ScreenToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -41,7 +41,7 @@
 		justify-content: center;
 		width: 100%;
 		height: var(--sk-pane-controls-height);
-		border-top: 1px solid var(--sk-border-medium);
+		border-top: 1px solid var(--sk-border);
 		font: var(--sk-font-ui-small);
 		z-index: 2;
 	}
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 2870b7313d..d75e61a900 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -113,7 +113,7 @@
 		.code-block {
 			position: relative;
 			background: var(--sk-bg-2);
-			border: 1px solid var(--sk-border-medium);
+			border: 1px solid var(--sk-border);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
 			margin: calc(0.5 * var(--sk-line-height-body)) 0;
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index 353c96e0ea..1645d648b4 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -332,7 +332,7 @@
 		hr {
 			margin: 0.5rem 0;
 			height: 1px;
-			background: var(--sk-border-dark);
+			background: var(--sk-border);
 			border: none;
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index df7248d052..a0689d170e 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -248,7 +248,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			outline-offset: -2px;
 
 			&:hover {
-				box-shadow: inset 0 -1px 0 0 var(--sk-bg-5);
+				box-shadow: inset 0 -1px 0 0 var(--sk-border);
 			}
 
 			&[aria-current='page'] {
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 9bcbf66ba6..7464177aa3 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -336,7 +336,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			border: none;
 			flex-shrink: 0;
 			color: var(--sk-fg-1);
-			border-bottom: 1px solid var(--sk-border-dark);
+			border-bottom: 1px solid var(--sk-border);
 			background: inherit;
 
 			&::placeholder {
diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index d78c55301a..55d7597f31 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -14,7 +14,7 @@
 	padding-left: 1rem;
 	border-radius: 0;
 	box-shadow: none;
-	border-top: 1px solid var(--sk-bg-4);
+	border-top: 1px solid var(--sk-border);
 }
 
 .ts-block-property-details {
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index 266114e116..ae6f6566b9 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -15,6 +15,18 @@
 	--sk-fg-4: hsl(0, 0%, 45%);
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
+	/* Background colours */
+	--sk-bg-1: hsl(0, 0%, 100%);
+	--sk-bg-2: hsl(0, 0%, 100%);
+	--sk-bg-3: hsl(0, 0%, 99%);
+	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-accent: var(--sk-fg-accent);
+	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+
+	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */
+	--sk-border: hsl(0, 0%, 92%);
+
+	/* Syntax highlighting — these come from `createCssVariablesTheme`, but are used elsewhere as well */
 	--shiki-color-text: var(--sk-fg-2);
 	--shiki-token-constant: var(--shiki-color-text);
 	--shiki-token-string: hsl(30, 100%, 30%);
@@ -26,26 +38,9 @@
 	--shiki-token-punctuation: var(--shiki-color-text);
 	--shiki-token-link: var(--shiki-token-keyword);
 
-	/* Background colours */
-	--sk-bg-1: hsl(0, 0%, 100%);
-	--sk-bg-2: hsl(0, 0%, 100%);
-	--sk-bg-3: hsl(0, 0%, 99%);
-	--sk-bg-4: hsl(0, 0%, 95%);
-	--sk-bg-5: hsl(0, 0%, 92%);
-	--sk-bg-accent: var(--sk-fg-accent);
-	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
-
-	/* Border colors */
-	--sk-border-light: hsl(0, 0%, 95%);
-	--sk-border-medium: hsl(0, 0%, 92%);
-	--sk-border-dark: hsl(0, 0%, 86%);
-
 	/* Misc */
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
 	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
-
-	/* overrides */
-	--shiki-color-background: var(--sk-bg-2);
 }
 
 :root.dark {
@@ -60,29 +55,24 @@
 	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
-	--shiki-color-text: hsl(45, 7%, 75%);
-	--shiki-token-comment: hsl(0, 0%, 55%);
-	--shiki-token-keyword: hsl(204, 88%, 65%);
-	--shiki-token-function: hsl(19, 67%, 75%);
-	--shiki-token-string: hsl(41, 37%, 68%);
-
 	/* Background colours */
 	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
 	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
 	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
 	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
-	--sk-bg-5: hsl(var(--sk-bg-hue), 15%, 25%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
-	/* Border colours */
-	--sk-border-light: hsl(var(--sk-bg-hue), 15%, 32%);
-	--sk-border-medium: var(--sk-bg-5);
-	--sk-border-dark: var(--sk-bg-3);
+	/* Border colour */
+	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
+
+	/* Syntax highlighting */
+	--shiki-color-text: hsl(45, 7%, 75%);
+	--shiki-token-comment: hsl(0, 0%, 55%);
+	--shiki-token-keyword: hsl(204, 88%, 65%);
+	--shiki-token-function: hsl(19, 67%, 75%);
+	--shiki-token-string: hsl(41, 37%, 68%);
 
 	/* Misc */
 	--sk-scrollbar: rgba(255, 255, 255, 0.3);
 	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
-
-	/* overrides */
-	--shiki-color-background: var(--sk-bg-3);
 }
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 67998a7ab2..90b6858292 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -1,22 +1,29 @@
 :root {
+	--sk-raised-border: var(--sk-border);
+	--sk-raised-highlight: hsl(0, 0%, 95%);
+	--sk-raised-shadow: hsl(0, 0%, 86%);
+
 	/* raised buttons */
-	--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
-		var(--sk-border-light);
-	--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
-		var(--sk-border-medium);
-	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
-		var(--sk-border-dark);
+	--sk-raised-color: var(--sk-raised-highlight) var(--sk-raised-border) var(--sk-raised-border)
+		var(--sk-raised-highlight);
+	--sk-raised-hover-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
+		var(--sk-raised-border);
+	--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-border) var(--sk-raised-border)
+		var(--sk-raised-shadow);
 	--sk-raised-width: 1px 2px 2px 1px;
 	--sk-raised-active-width: 2px 1px 1px 2px;
 
 	&.dark {
+		--sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%);
+		--sk-raised-shadow: var(--sk-bg-3);
+
 		/* raised buttons */
-		--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
-			var(--sk-border-medium);
-		--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
-			var(--sk-border-light);
-		--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
-			var(--sk-border-dark);
+		--sk-raised-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
+			var(--sk-raised-border);
+		--sk-raised-hover-color: var(--sk-raised-highlight) var(--sk-raised-shadow)
+			var(--sk-raised-shadow) var(--sk-raised-highlight);
+		--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-highlight)
+			var(--sk-raised-highlight) var(--sk-raised-shadow);
 	}
 }
 
@@ -54,7 +61,7 @@
 	}
 
 	&:disabled {
-		border-color: var(--sk-border-medium);
+		border-color: var(--sk-raised-border);
 		border-width: 1px;
 	}
 }
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
index bca7ab4eb0..d080d2158c 100644
--- a/packages/site-kit/src/lib/styles/utils/dividers.css
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -1,6 +1,6 @@
 .divider {
 	z-index: 2;
 	&::after {
-		background-color: var(--sk-bg-5) !important;
+		background-color: var(--sk-border) !important;
 	}
 }

From a41638534670ea70b94b2e4fa501540978461eb2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 11:52:55 -0400
Subject: [PATCH 060/453] Sync `kit` docs (#754)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md  | 2 +-
 .../content/docs/kit/20-core-concepts/30-form-actions.md      | 4 ++--
 .../docs/kit/60-appendix/30-migrating-to-sveltekit-2.md       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index ee64825aea..7231b588d0 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -333,7 +333,7 @@ export async function load({ fetch, setHeaders }) {
 }
 ```
 
-Setting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
+Setting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
 
 ## Using parent data
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index a86e56b784..dddae80da9 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -156,7 +156,7 @@ export const actions = {
 
 ### Validation errors
 
-If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
+If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
 
 ```js
 /// file: src/routes/login/+page.server.js
@@ -195,7 +195,7 @@ export const actions = {
 };
 ```
 
-> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.
+> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.
 
 ```svelte
 /// file: src/routes/login/+page.svelte
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
index ab2f6808ab..09252136e4 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
@@ -129,7 +129,7 @@ The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _
 
 During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
 
-Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
+Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
 
 ## `form` and `data` have been removed from `use:enhance` callbacks
 

From fae6640e0a4c546745f3903b758667c01b851330 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Fri, 1 Nov 2024 11:53:25 -0400
Subject: [PATCH 061/453] chore: replace non-breaking spaces (#752)

* update in blog

* update in tutorial

* update in site code
---
 .../blog/2016-11-26-frameworks-without-the-framework.md       | 2 +-
 .../content/blog/2017-09-06-the-zen-of-just-writing-css.md    | 2 +-
 apps/svelte.dev/content/blog/2019-04-20-write-less-code.md    | 2 +-
 .../content/blog/2019-04-22-svelte-3-rethinking-reactivity.md | 4 ++--
 .../blog/2022-11-01-whats-new-in-svelte-november-2022.md      | 2 +-
 .../tutorial/01-svelte/02-reactivity/02-deep-state/index.md   | 2 +-
 .../02-snippets/02-passing-snippets/index.md                  | 2 +-
 .../05-advanced-transitions/01-deferred-transitions/index.md  | 2 +-
 .../03-sveltekit/08-stores/02-navigating-store/index.md       | 2 +-
 .../09-errors-and-redirects/01-error-basics/index.md          | 2 +-
 .../04-advanced-sveltekit/01-hooks/04-handleerror/index.md    | 2 +-
 apps/svelte.dev/src/lib/server/renderer.ts                    | 2 +-
 apps/svelte.dev/src/routes/(authed)/apps/+page.svelte         | 2 +-
 apps/svelte.dev/src/routes/blog/+page.svelte                  | 3 +--
 14 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md b/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
index de7a227082..677273c48a 100644
--- a/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
+++ b/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
@@ -32,7 +32,7 @@ The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs
 
 And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
 
-It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
+It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
 
 ## But that's not the important thing
 
diff --git a/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md b/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
index f06a4aaac0..70e4cc06b9 100644
--- a/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
+++ b/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
@@ -19,7 +19,7 @@ Everything in CSS is global. Because of that, styles intended for one bit of mar
 
 It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
 
-The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
+The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
 
 ## Single File Components change all that
 
diff --git a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
index 27a8e88c8c..86bcc083ce 100644
--- a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
+++ b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
@@ -110,7 +110,7 @@ It's unusual for the difference to be _quite_ so obvious — in my experience, a
 
 ### Top-level elements
 
-In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
+In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
 
 In Vue, your markup must be wrapped in a `<template>` element, which I'd argue is redundant.
 
diff --git a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index a4dd7b2b3b..a5270a4f70 100644
--- a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -11,13 +11,13 @@ We think you're going to love it.
 
 ## What is Svelte?
 
-Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write _declarative_ state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
+Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write _declarative_ state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
 
 Instead, Svelte runs at _build time_, converting your components into highly efficient _imperative_ code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
 
 The first version of Svelte was all about [testing a hypothesis](/blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
 
-Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding _developer_ experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
+Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding _developer_ experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
 
 To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.
 
diff --git a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
index 1bae198e78..55f9282e47 100644
--- a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
+++ b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
@@ -77,7 +77,7 @@ _To Read_
 - [Using Sequelize with SvelteKit](https://cherrific.io/0xedB00816FB204b4CD9bCb45FF2EF693E99723484/story/23) by MetaZebre
 - [Implementing Maintenance mode on a SvelteKit site](https://blog.encodeart.dev/implementing-maintenance-mode-on-a-sveltekit-site) by Andreas Söderlund
 - [ActionStore: Real-time Svelte stores for Rails](https://dev.to/buhrmi/actionstore-real-time-svelte-stores-for-rails-4jhg) by Stefan Buhrmester
-- [Svelte CSS Image Slider: with Bouncy Overscroll](https://rodneylab.com/svelte-css-image-slider/) and [SvelteKit Local Edge Functions: Edge on Localhost](https://rodneylab.com/sveltekit-local-edge-functions/) by Rodney Lab
+- [Svelte CSS Image Slider: with Bouncy Overscroll](https://rodneylab.com/svelte-css-image-slider/) and [SvelteKit Local Edge Functions: Edge on Localhost](https://rodneylab.com/sveltekit-local-edge-functions/) by Rodney Lab
 - [Creating a Svelte Tabs component with Slot props](https://blog.openreplay.com/creating-a-svelte-tabs-component-with-slot-props/) by Shinichi Okada
 - [Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout](https://dev.to/stripe/sky-cart-an-open-source-cloud-agnostic-shopping-cart-using-stripe-checkout-o5k) by Mike Bifulco for Stripe
 
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
index e5caebe2f2..a1c71ec2ee 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
@@ -2,7 +2,7 @@
 title: Deep state
 ---
 
-As we saw in the previous exercise, state reacts to _reassignments_. But it also reacts to _mutations_ — we call this _deep reactivity_.
+As we saw in the previous exercise, state reacts to _reassignments_. But it also reacts to _mutations_ — we call this _deep reactivity_.
 
 Make `numbers` a reactive array:
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md
index 53335d34c2..d9957c2ef2 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md
@@ -2,7 +2,7 @@
 title: Passing snippets to components
 ---
 
-Since snippets — like functions — are just values, they can be passed to components as props.
+Since snippets — like functions — are just values, they can be passed to components as props.
 
 Take this `<FilteredList>` component. Its job is to filter the `data` that gets passed into it, but it has no opinions about how that data should be rendered — that's the responsibility of the parent component.
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
index 014e7fb986..c5fc3d8d30 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
@@ -30,4 +30,4 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 >
 ```
 
-Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next exercise.
+Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next exercise.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
index 27e13dce08..e2826055be 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
@@ -2,7 +2,7 @@
 title: navigating
 ---
 
-The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
+The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
 
 - `from` and `to` — objects with `params`, `route` and `url` properties
 - `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
index 9ea20e924a..e51502db11 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
@@ -15,7 +15,7 @@ export function load() {
 }
 ```
 
-Any other error — such as the one in `src/routes/unexpected/+page.server.js` — is treated as unexpected:
+Any other error — such as the one in `src/routes/unexpected/+page.server.js` — is treated as unexpected:
 
 ```js
 /// file: src/routes/unexpected/+page.server.js
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
index be0f93b330..4883c38b1b 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
@@ -13,7 +13,7 @@ export function handleError({ event, error }) {
 }
 ```
 
-If you navigate to `/the-bad-place`, you'll see this in action — the error page is shown, and if you open the terminal (using the button to the right of the URL bar), you'll see the message from `src/routes/the-bad-place/+page.server.js`.
+If you navigate to `/the-bad-place`, you'll see this in action — the error page is shown, and if you open the terminal (using the button to the right of the URL bar), you'll see the message from `src/routes/the-bad-place/+page.server.js`.
 
 Notice that we're _not_ showing the error message to the user. That's because error messages can include sensitive information that at best will confuse your users, and at worst could benefit evildoers. Instead, the error object available to your application — represented as `$page.error` in your `+error.svelte` pages, or `%sveltekit.error%` in your `src/error.html` fallback — is just this:
 
diff --git a/apps/svelte.dev/src/lib/server/renderer.ts b/apps/svelte.dev/src/lib/server/renderer.ts
index c22d239ab7..cfdb83780d 100644
--- a/apps/svelte.dev/src/lib/server/renderer.ts
+++ b/apps/svelte.dev/src/lib/server/renderer.ts
@@ -65,7 +65,7 @@ export const render_content = (
 			);
 		}
 
-		// special case — we need to make allowances for code snippets coming
+		// special case — we need to make allowances for code snippets coming
 		// from e.g. ambient.d.ts
 		if (filename.endsWith('$env-all.md') || filename.endsWith('$app-forms.md')) {
 			injected.push('// @errors: 7006 7031');
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index e55b23cd2a..3fc0a4d122 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <svelte:head>
-	<title>Your apps • Svelte</title>
+	<title>Your apps • Svelte</title>
 </svelte:head>
 
 <div class="apps">
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 9259f891f2..7be5043183 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <svelte:head>
-	<title>Blog • Svelte</title>
+	<title>Blog • Svelte</title>
 	<link
 		rel="alternate"
 		type="application/rss+xml"
@@ -81,7 +81,6 @@
 	article {
 		margin: 0 0 4rem 0;
 
-		/* we need to use :global because snippets don't currently cause a deopt */
 		&.top {
 			margin: 0 0 2rem 0;
 			padding: 0 0 4rem 0;

From f5d9c608479f49d58acfed85dfe69a60e9d6f2ba Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 11:53:50 -0400
Subject: [PATCH 062/453] Sync `svelte` docs (#750)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/07-misc/04-custom-elements.md           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
index 83874f2f5b..71c66f7edc 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
@@ -49,6 +49,8 @@ console.log(el.name);
 el.name = 'everybody';
 ```
 
+Note that you need to list out all properties explicitly, i.e. doing `let props = $props()` without declaring `props` in the [component options](#Component-options) means that Svelte can't know which props to expose as properties on the DOM element.
+
 ## Component lifecycle
 
 Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.

From 63ee13a9589073a65c489a7fba54039f85460fe6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 1 Nov 2024 11:59:07 -0400
Subject: [PATCH 063/453] More css tweaks (#753)

* tweaks

* various fixes

* more

* redundant

* accommodate prettier

* prettier
---
 .../src/lib/components/SecondaryNav.svelte    |  2 +-
 apps/svelte.dev/src/routes/+page.svelte       |  2 +-
 .../src/routes/_home}/Footer.svelte           |  2 +-
 .../routes/tutorial/[...slug]/Chrome.svelte   |  2 +-
 .../routes/tutorial/[...slug]/Controls.svelte |  5 --
 .../tutorial/[...slug]/filetree/Item.svelte   |  2 +-
 packages/editor/src/lib/codemirror.css        |  8 +-
 packages/repl/src/lib/Output/Output.svelte    | 17 ++--
 .../repl/src/lib/Output/PaneWithPanel.svelte  |  4 +-
 packages/repl/src/lib/Output/Viewer.svelte    |  8 +-
 packages/site-kit/package.json                |  4 -
 .../site-kit/src/lib/components/Text.svelte   |  1 -
 packages/site-kit/src/lib/home/Blurb.svelte   | 56 --------------
 .../site-kit/src/lib/home/TrySection.svelte   | 77 -------------------
 .../site-kit/src/lib/home/TryTerminal.svelte  | 74 ------------------
 packages/site-kit/src/lib/home/index.ts       |  3 -
 .../site-kit/src/lib/nav/MobileSubMenu.svelte |  1 -
 packages/site-kit/src/lib/nav/SkipLink.svelte | 11 ++-
 .../src/lib/search/SearchResultList.svelte    |  2 -
 .../src/lib/styles/tokens/colours.css         |  8 +-
 20 files changed, 35 insertions(+), 254 deletions(-)
 rename {packages/site-kit/src/lib/home => apps/svelte.dev/src/routes/_home}/Footer.svelte (83%)
 delete mode 100644 packages/site-kit/src/lib/home/Blurb.svelte
 delete mode 100644 packages/site-kit/src/lib/home/TrySection.svelte
 delete mode 100644 packages/site-kit/src/lib/home/TryTerminal.svelte
 delete mode 100644 packages/site-kit/src/lib/home/index.ts

diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index d02448382c..90508a1c94 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -17,7 +17,7 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
index ef2cb2cf01..9d54af7af4 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { Footer } from '@sveltejs/site-kit/home';
 	import { Section } from '@sveltejs/site-kit/components';
 	import Hero from './_home/Hero.svelte';
 	import Supporters from './_home/Supporters/index.svelte';
@@ -7,6 +6,7 @@
 	import Companies from './_home/Companies.svelte';
 	import Video from './_home/Video.svelte';
 	import Community from './_home/Community.svelte';
+	import Footer from './_home/Footer.svelte';
 </script>
 
 <svelte:head>
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/apps/svelte.dev/src/routes/_home/Footer.svelte
similarity index 83%
rename from packages/site-kit/src/lib/home/Footer.svelte
rename to apps/svelte.dev/src/routes/_home/Footer.svelte
index 4033e5c52d..dccbd88faf 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/apps/svelte.dev/src/routes/_home/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Section from '../components/Section.svelte';
+	import { Section } from '@sveltejs/site-kit/components';
 </script>
 
 <Section>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 5934e7475d..36d97566a0 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -77,7 +77,7 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 3f5d9888e1..c883dcb501 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -97,9 +97,4 @@
 		padding: 0 1rem;
 		font: var(--sk-font-ui-small);
 	}
-
-	option:disabled {
-		color: var(--sk-fg-1);
-		font-weight: bold;
-	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index e1cd06bca7..b468b09dff 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -141,7 +141,7 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-1) !important;
+		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 372964e783..219e2027ce 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -110,12 +110,12 @@
 	}
 
 	.cm-tooltip.cm-tooltip-autocomplete {
-		color: var(--sk-fg-2) !important;
+		color: var(--sk-fg-3) !important;
 		perspective: 1px;
 
 		& > ul > li[aria-selected] {
 			background-color: var(--sk-bg-4);
-			color: var(--sk-fg-1) !important;
+			color: var(--sk-fg-2) !important;
 		}
 
 		& > ul {
@@ -126,7 +126,7 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
@@ -178,7 +178,7 @@
 			.cm-textfield {
 				font: inherit;
 				background: inherit;
-				color: var(--sk-fg-1);
+				color: inherit;
 				border: 1px solid var(--sk-border);
 				border-radius: var(--sk-border-radius);
 				margin: 0;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 27c2ed7014..e9768528be 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -87,10 +87,10 @@
 	{#if workspace.current.name.endsWith('.md')}
 		<button class="active">Markdown</button>
 	{:else}
-		<button class:active={view === 'result'} onclick={() => (view = 'result')}>Result</button>
-		<button class:active={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
-		<button class:active={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
-		<button class:active={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
+		<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+		<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
+		<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
+		<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
 	{/if}
 </div>
 
@@ -170,13 +170,12 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2, #999);
+		color: var(--sk-fg-2);
 		border-radius: 0;
-	}
 
-	button.active {
-		border-bottom: 1px solid var(--sk-fg-accent, --prime);
-		color: var(--sk-fg-1, #333);
+		&[aria-current='true'] {
+			border-bottom: 1px solid var(--sk-fg-accent);
+		}
 	}
 
 	div[slot] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 210a47de6f..4a52e836e0 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -60,7 +60,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0 0.5em;
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
 		cursor: pointer;
 	}
 
@@ -71,7 +71,7 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 6659ba496c..69036ebfe9 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -301,7 +301,7 @@
 			</div>
 
 			<div slot="panel-header">
-				<button on:click|stopPropagation={clear_logs}>
+				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
@@ -347,14 +347,16 @@
 		opacity: 0.25;
 	}
 
+	/* TODO this stuff should live in global styles */
 	button {
 		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
+		padding: 0.3rem 0.8rem;
 
-		&:hover {
-			color: var(--sk-fg-1);
+		&:disabled {
+			color: var(--sk-fg-4);
 		}
 	}
 
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index f101cc0a24..e1906aed66 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -84,10 +84,6 @@
 			"default": "./src/lib/components/index.ts",
 			"svelte": "./src/lib/components/index.ts"
 		},
-		"./home": {
-			"default": "./src/lib/home/index.ts",
-			"svelte": "./src/lib/home/index.ts"
-		},
 		"./docs": {
 			"default": "./src/lib/docs/index.ts",
 			"svelte": "./src/lib/docs/index.ts"
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index d75e61a900..cbd6ffda91 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -417,7 +417,6 @@
 		}
 
 		blockquote {
-			color: var(--sk-fg-1);
 			padding: 0 0 0 4.5rem;
 
 			&.note,
diff --git a/packages/site-kit/src/lib/home/Blurb.svelte b/packages/site-kit/src/lib/home/Blurb.svelte
deleted file mode 100644
index 15b2830264..0000000000
--- a/packages/site-kit/src/lib/home/Blurb.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import Section from '../components/Section.svelte';
-	import type { Snippet } from 'svelte';
-
-	let { one, two, three }: { one?: Snippet; two?: Snippet; three?: Snippet } = $props();
-</script>
-
-<Section>
-	<div class="grid">
-		{#if one}
-			<div>
-				{@render one()}
-			</div>
-		{/if}
-
-		{#if two}
-			<div>
-				{@render two()}
-			</div>
-		{/if}
-
-		{#if three}
-			<div>
-				{@render three()}
-			</div>
-		{/if}
-	</div>
-</Section>
-
-<style>
-	.grid {
-		--columns: 1;
-
-		display: grid;
-		grid-template-columns: repeat(var(--columns), 1fr);
-		grid-gap: 1rem;
-	}
-
-	.grid {
-		display: grid;
-		gap: 1em;
-		margin: 0 0 4rem 0;
-	}
-
-	.grid:last-child {
-		margin-bottom: 0;
-	}
-
-	@media (min-width: 900px) {
-		.grid {
-			--columns: 3;
-
-			gap: 7rem;
-		}
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
deleted file mode 100644
index 4523cb1787..0000000000
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-	import Section from '../components/Section.svelte';
-	import TryTerminal from './TryTerminal.svelte';
-	import type { Snippet } from 'svelte';
-
-	let { content_heading, content }: { content_heading?: Snippet; content?: Snippet } = $props();
-</script>
-
-<Section>
-	<div class="grid" style="--columns: 2">
-		<div class="copy">
-			<h2>
-				{#if content_heading}{@render content_heading()}{:else}see for yourself{/if}
-			</h2>
-			<div>
-				{#if content}{@render content()}{:else}
-					Try it locally, <a target="_blank" rel="noreferrer" href="https://sveltekit.new/"
-						>on StackBlitz</a
-					>, or with
-					<a target="_blank" href="https://svelte.dev/tutorial">the interactive tutorial</a>.
-				{/if}
-			</div>
-		</div>
-
-		<div class="try">
-			<TryTerminal />
-		</div>
-	</div>
-</Section>
-
-<style>
-	.grid {
-		display: grid;
-		gap: 2em;
-		margin: 0 0 4rem 0;
-	}
-
-	.grid:last-child {
-		margin-bottom: 0;
-	}
-
-	.try {
-		width: 100%;
-		margin: 0 auto;
-		color: var(--sk-fg-1);
-	}
-
-	.copy {
-		text-align: left;
-		font: var(--sk-font-body);
-	}
-
-	h2 {
-		display: inline-block;
-		margin: 0 0 1rem;
-	}
-
-	@media (min-width: 900px) {
-		.grid {
-			grid-template-columns: repeat(var(--columns), 1fr);
-			gap: 7rem;
-		}
-
-		.copy {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			order: 2;
-		}
-
-		.copy div {
-			max-width: 15em;
-			text-align: center;
-		}
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
deleted file mode 100644
index 9cd4dc37c0..0000000000
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<div class="terminal">
-	<div class="chrome">
-		<span class="dot"></span>
-		<span class="dot"></span>
-		<span class="dot"></span>
-		<span class="title">terminal</span>
-	</div>
-	<pre><code
-			><span class="line">npx <span class="orange-highlight">sv</span> create my-app</span>
-<span class="line">cd my-app</span>
-<span class="line">npm install</span>
-<span class="line">npm run dev -- --open</span></code
-		></pre>
-</div>
-
-<style>
-	.terminal {
-		background: #212121;
-		margin: 0;
-		border-radius: var(--sk-border-radius);
-		overflow: hidden;
-	}
-
-	.terminal .chrome {
-		position: relative;
-		background: hsl(0, 0%, 10%);
-		color: #999;
-		display: flex;
-		align-items: center;
-		font-size: 1.8rem;
-		padding: 1rem;
-		gap: 1rem;
-		border-bottom: 1px #29252a solid;
-	}
-
-	.terminal .dot {
-		width: 1rem;
-		height: 1rem;
-		border-radius: 50%;
-		background-color: #999;
-	}
-
-	.title {
-		position: absolute;
-		display: flex;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		padding-top: 0.4rem;
-		align-items: center;
-		justify-content: center;
-		font-family: var(--sk-font-family-ui);
-	}
-
-	.terminal pre {
-		font: var(--sk-font-mono);
-		padding: 1em;
-	}
-
-	.line::before {
-		content: '$ ';
-		opacity: 0.3;
-	}
-
-	pre code {
-		color: white;
-		font-size: 1em;
-	}
-
-	.orange-highlight {
-		color: hsl(15, 100%, 65%);
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/index.ts b/packages/site-kit/src/lib/home/index.ts
deleted file mode 100644
index 33980d7923..0000000000
--- a/packages/site-kit/src/lib/home/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Blurb } from './Blurb.svelte';
-export { default as Footer } from './Footer.svelte';
-export { default as TrySection } from './TrySection.svelte';
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 24ccad0d22..49b98b06c2 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -94,7 +94,6 @@
 		padding-bottom: 0.8rem;
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-fg-1);
 	}
 
 	h2 {
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index 50cffe2390..548786cb38 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -13,14 +13,17 @@ Accessibility helper component to skip to the main content
 
 <style>
 	a {
+		display: flex;
+		align-items: center;
 		background: var(--sk-bg-1);
 		color: var(--sk-fg-2);
-		border: 2px solid var(--sk-fg-1);
-		padding: 8px;
+		height: calc(var(--sk-nav-height) - 2rem);
+		padding: 0 1rem;
 		position: absolute;
-		inset-block-start: 0;
-		inset-inline-start: 0;
+		inset-block-start: 1rem;
+		inset-inline-start: 1rem;
 		transform: translateY(-999px);
+		font: var(--sk-font-ui-medium);
 		z-index: 1000; /* 1 more than the banner z-index */
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 66d8c45ce6..6bc79f6182 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -189,7 +189,6 @@
 			width: calc(100% + 1rem);
 			left: -0.5rem;
 			overflow: hidden;
-			color: var(--sk-fg-1);
 
 			&::before,
 			&::after {
@@ -227,7 +226,6 @@
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
-			color: var(--sk-fg-1);
 			background: var(--highlight-color);
 			outline: 2px solid var(--highlight-color);
 		}
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index ae6f6566b9..fae3e3ad27 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -9,10 +9,10 @@
 	color-scheme: light;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(0, 0%, 5%);
-	--sk-fg-2: hsl(0, 0%, 12%);
-	--sk-fg-3: hsl(0, 0%, 27%);
-	--sk-fg-4: hsl(0, 0%, 45%);
+	--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
+	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */

From b886a23b2e46e8444332242234e7c557016a3dac Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:18:02 -0400
Subject: [PATCH 064/453] Sync `svelte` docs (#755)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/03-template-syntax/11-bind.md          | 2 +-
 .../content/docs/svelte/03-template-syntax/13-transition.md    | 3 +--
 .../docs/svelte/99-legacy/02-legacy-reactive-assignments.md    | 2 +-
 .../content/docs/svelte/99-legacy/40-legacy-component-api.md   | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 86a725f2f9..4fe3e7c4a8 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -230,7 +230,7 @@ All visible elements have the following readonly bindings, measured with a `Resi
 bind:this={dom_node}
 ```
 
-To get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:
+To get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:
 
 ```svelte
 <script>
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
index 51f1008209..51c11e8b34 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
@@ -68,7 +68,7 @@ transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out'
 
 Transitions can use custom functions. If the returned object has a `css` function, Svelte will generate keyframes for a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 
-The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
 
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
@@ -169,4 +169,3 @@ An element with transitions will dispatch the following events in addition to an
 	</p>
 {/if}
 ```
-
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md b/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
index 5f7c9da790..5abd481bfc 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
@@ -15,7 +15,7 @@ In legacy mode, any top-level statement (i.e. not inside a block or a function)
 	// when `a`, `b` or `sum` change
 	$: console.log(`${a} + ${b} = ${sum}`);
 
-	// this is a 'reactive assignment' — `sum` will be
+	// this is a 'reactive assignment' — `sum` will be
 	// recalculated when `a` or `b` change. It is
 	// not necessary to declare `sum` separately
 	$: sum = a + b;
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md b/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
index 917e4d724b..a08f53951c 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
@@ -11,7 +11,7 @@ In Svelte 3 and 4, the API for interacting with a component is different than in
 const component = new Component(options);
 ```
 
-A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
+A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
 
 ```ts
 // @noErrors

From e8ad5c435e6afe9321f4baee80409857cf9fb38d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:52:25 -0400
Subject: [PATCH 065/453] Sync `svelte` docs (#756)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/07-misc/02-testing.md        | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
index f0ed52a3c9..1c3d4ba6e1 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
@@ -21,9 +21,19 @@ Then adjust your `vite.config.js`:
 /// file: vite.config.js
 import { defineConfig } from +++'vitest/config'+++;
 
-export default defineConfig({ /* ... */ })
+export default defineConfig({
+	// ...
+	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
+	resolve: process.env.VITEST
+		? {
+				conditions: ['browser']
+			}
+		: undefined
+});
 ```
 
+> [!NOTE] If loading the browser version of all your packages is undesirable, because (for example) you also test backend libraries, [you may need to resort to an alias configuration](https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331)
+
 You can now write unit tests for code inside your `.js/.ts` files:
 
 ```js

From 559f9109b72014979c8376e3ff18055702f9cc97 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 1 Nov 2024 16:16:03 -0400
Subject: [PATCH 066/453] fix some more css (#758)

* fix some more css

* prettier
---
 .../src/lib/components/Modal.svelte           |  1 -
 .../src/lib/components/SecondaryNav.svelte    |  1 -
 .../src/routes/(authed)/apps/+page.svelte     |  1 -
 apps/svelte.dev/src/routes/blog/+page.svelte  |  8 ++--
 apps/svelte.dev/src/routes/docs/+page.svelte  |  2 +-
 .../routes/tutorial/[...slug]/Chrome.svelte   |  1 -
 .../[...slug]/filetree/ContextMenu.svelte     | 41 +++++++------------
 .../tutorial/[...slug]/filetree/Item.svelte   |  6 ---
 packages/editor/src/lib/codemirror.css        |  1 -
 .../src/lib/Input/ComponentSelector.svelte    |  1 -
 .../src/lib/Output/CompilerOptions.svelte     |  7 +---
 packages/repl/src/lib/Output/Output.svelte    |  1 -
 .../repl/src/lib/Output/PaneWithPanel.svelte  |  1 -
 packages/repl/src/lib/Output/Viewer.svelte    |  1 -
 .../src/lib/Output/console/ConsoleLine.svelte | 10 ++---
 .../src/lib/components/HoverMenu.svelte       |  2 +-
 .../src/lib/components/ScreenToggle.svelte    | 10 ++---
 .../site-kit/src/lib/components/Text.svelte   |  2 +-
 .../site-kit/src/lib/docs/DocsContents.svelte |  2 +-
 .../site-kit/src/lib/nav/MobileSubMenu.svelte |  1 -
 packages/site-kit/src/lib/nav/Nav.svelte      |  2 +-
 packages/site-kit/src/lib/nav/SkipLink.svelte |  2 +-
 .../site-kit/src/lib/search/SearchBox.svelte  |  6 +--
 .../src/lib/search/SearchResultList.svelte    |  2 +-
 packages/site-kit/src/lib/styles/base.css     |  1 -
 25 files changed, 38 insertions(+), 75 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/Modal.svelte b/apps/svelte.dev/src/lib/components/Modal.svelte
index 454db1b961..5685f1a16c 100644
--- a/apps/svelte.dev/src/lib/components/Modal.svelte
+++ b/apps/svelte.dev/src/lib/components/Modal.svelte
@@ -67,7 +67,6 @@
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;
diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 90508a1c94..3d40548042 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -17,7 +17,6 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 3fc0a4d122..e48dd1fb5c 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -156,7 +156,6 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 7be5043183..e66bb20a18 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -74,7 +74,7 @@
 
 	h2 {
 		display: inline-block;
-		color: var(--sk-fg-2);
+		color: var(--sk-fg-1);
 		font: var(--sk-font-h3);
 	}
 
@@ -87,14 +87,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-fg-2);
+				color: var(--sk-fg-1);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-fg-2);
+			color: inherit;
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -163,7 +163,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-fg-2);
+				color: inherit;
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 6af1962320..06929a50e5 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -111,7 +111,7 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-fg-2);
+		color: inherit;
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
 		background-color: var(--sk-bg-1);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 36d97566a0..3b6a1eb799 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -77,7 +77,6 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
index 90f18514d5..46994e20e3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -23,7 +23,7 @@
 
 {#if $menu_items}
 	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
-		<div class="navbar" id="navbar">
+		<div class="context-menu">
 			<ul>
 				{#each $menu_items.items as item}
 					<li>
@@ -38,50 +38,39 @@
 <svelte:window on:click={() => menu_items.set(null)} />
 
 <style>
-	.navbar {
+	.context-menu {
 		display: inline-flex;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		background-color: var(--back);
+		background-color: var(--sk-bg-2);
 		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
-		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
+		filter: var(--sk-shadow);
 	}
 
 	ul {
 		margin: 0;
-		padding: 0;
-		background-color: var(--sk-bg-3);
-		border: 1px solid var(--sk-fg-accent);
+		padding: 0.5rem;
+		background-color: var(--sk-bg-2);
 	}
 
 	li {
 		display: block;
 		list-style-type: none;
-		width: 1fr;
-	}
-	li:hover {
-		background-color: var(--sk-bg-accent);
+
+		&:hover {
+			background-color: var(--sk-bg-4);
+		}
 	}
 
 	button {
-		color: var(--sk-fg-2);
+		display: block;
 		width: 100%;
+		height: 100%;
 		text-align: left;
 		border: 0px;
-		padding: 0.4rem 1rem 0.2rem 1rem;
+		padding: 1rem;
 		font: var(--sk-font-ui-small);
-	}
-
-	li:first-child button {
-		padding-top: 0.5rem;
-	}
-
-	li:last-child button {
-		padding-bottom: 0.4rem;
-	}
-
-	button:hover {
-		background-color: var(--back-api);
+		line-height: 1;
+		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index b468b09dff..9ec7d1d07f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -121,11 +121,6 @@
 		background: var(--bg) var(--icon) no-repeat;
 		background-position: calc(var(--inset) - 0.5rem) 50%;
 		background-size: 1.2rem;
-		color: var(--sk-fg-2);
-	}
-
-	li:hover {
-		--bg: var(--sk-bg-3);
 	}
 
 	button,
@@ -141,7 +136,6 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 219e2027ce..66c8a75428 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -126,7 +126,6 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 7bf8a90aaa..4094f032cd 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -248,7 +248,6 @@
 		}
 
 		&.active {
-			color: var(--sk-fg-2, #333);
 			border-bottom: 1px solid var(--sk-fg-accent);
 		}
 	}
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index e537a480f3..064dda5819 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -40,11 +40,8 @@
 
 <style>
 	.options {
-		padding: 0 10px;
-		font-family: var(--sk-font-family-mono);
-		font-size: 13px;
-		color: var(--sk-fg-2);
-		line-height: 1.8;
+		padding: 0 1rem;
+		font: var(--sk-font-mono);
 	}
 
 	.option {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index e9768528be..1340f0340f 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -170,7 +170,6 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2);
 		border-radius: 0;
 
 		&[aria-current='true'] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 4a52e836e0..f4831419d9 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -71,7 +71,6 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 69036ebfe9..9b7ad4c321 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -349,7 +349,6 @@
 
 	/* TODO this stuff should live in global styles */
 	button {
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 440e83d755..a9d2c4730f 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -166,6 +166,7 @@
 	.line {
 		--bg: var(--sk-bg-1);
 		--border: var(--sk-bg-3);
+		font: var(--sk-font-mono);
 		display: block;
 		position: relative;
 		width: 100%;
@@ -201,7 +202,6 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		align-items: center;
 	}
 
@@ -219,7 +219,6 @@
 		grid-template-columns: minmax(0, auto) minmax(auto, 1fr);
 		grid-gap: 0 2rem;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
 
@@ -247,15 +246,14 @@
 		height: 1.4em;
 		padding: 0.5em;
 		border-radius: 0.4rem;
-		background-color: var(--sk-fg-3, #777);
+		background-color: var(--sk-fg-3);
 		color: var(--sk-bg-1);
 		font-size: 1rem;
 	}
 
 	.meta {
-		color: var(--sk-fg-2, #666);
-		font-family: var(--sk-font-family-body) !important;
-		font-size: 12px;
+		color: var(--sk-fg-4);
+		font: var(--sk-font-ui-small);
 	}
 
 	.meta-error {
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
index 3587e71f27..9bc8302272 100644
--- a/packages/site-kit/src/lib/components/HoverMenu.svelte
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -15,7 +15,7 @@
 		:global {
 			a,
 			button {
-				color: var(--sk-fg-2);
+				color: inherit;
 				padding: 1rem;
 				display: block;
 				font: var(--sk-font-ui-medium);
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
index 15fac1f5c0..e0e4e6c214 100644
--- a/packages/site-kit/src/lib/components/ScreenToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -16,7 +16,7 @@
 
 <!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="input-output-toggle">
-	<span class:active={!checked} style="text-align: right">{left}</span>
+	<span aria-current={!checked} style="text-align: right">{left}</span>
 	<span style="display:grid; place-items: center">
 		<Checkbox
 			{checked}
@@ -26,7 +26,7 @@
 			}}
 		/>
 	</span>
-	<span class:active={checked}>{right}</span>
+	<span aria-current={checked}>{right}</span>
 </label>
 
 <style>
@@ -46,11 +46,7 @@
 		z-index: 2;
 	}
 
-	span {
+	span[aria-current='false'] {
 		color: var(--sk-fg-4);
 	}
-
-	.active {
-		color: var(--sk-fg-2);
-	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index cbd6ffda91..89f5f43cc8 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -186,7 +186,7 @@
 						align-items: center;
 						font-size: 1.2rem;
 						font-family: var(--sk-font-family-mono);
-						color: var(--sk-fg-2);
+						color: inherit;
 					}
 
 					&::before {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 182d1358e1..775935e4b1 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -86,7 +86,7 @@
 		transition: color 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: var(--sk-fg-2);
+		color: inherit;
 		user-select: none;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 49b98b06c2..bbe50a5a6a 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -107,7 +107,6 @@
 	a {
 		display: flex;
 		align-items: center;
-		color: var(--sk-fg-2);
 
 		&[aria-current='page'] {
 			color: var(--sk-fg-accent) !important;
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index a0689d170e..2b00324ee9 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -237,7 +237,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 
 		a {
-			color: var(--sk-fg-2);
+			color: inherit;
 			font: var(--sk-font-ui-medium);
 
 			white-space: nowrap;
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index 548786cb38..c3ae77c9c7 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -16,7 +16,7 @@ Accessibility helper component to skip to the main content
 		display: flex;
 		align-items: center;
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2);
+		color: inherit;
 		height: calc(var(--sk-nav-height) - 2rem);
 		padding: 0 1rem;
 		position: absolute;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 7464177aa3..75b5fdda5c 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -340,8 +340,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			background: inherit;
 
 			&::placeholder {
-				color: var(--sk-fg-2);
-				opacity: 0.3;
+				color: var(--sk-fg-4);
+				opacity: 0.5;
 			}
 
 			&:focus-visible {
@@ -420,7 +420,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			a {
-				color: var(--sk-fg-2);
+				color: inherit;
 				display: block;
 				text-decoration: none;
 				margin: 0 -0.5rem;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6bc79f6182..f5ac8abaf6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -122,6 +122,7 @@
 		overflow: hidden;
 		background: var(--background);
 		font: var(--sk-font-ui-medium);
+		color: inherit;
 
 		&::before {
 			content: '';
@@ -169,7 +170,6 @@
 			width: 100%;
 			overflow: hidden;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-fg-2);
 
 			span {
 				display: inline;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 77437101ba..7205d93ff3 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -96,7 +96,6 @@ kbd {
 	position: relative;
 	border-radius: var(--sk-border-radius);
 	white-space: nowrap;
-	color: var(--sk-fg-2);
 	background: var(--sk-bg-4);
 	line-height: 1.7;
 }

From 5b0d55256f1d9efc2fcc6c80f5fcf20711477dc3 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 2 Nov 2024 11:59:54 +0100
Subject: [PATCH 067/453] fix: show compiler message for older Svelte versions
 (#761)

Older Svelte versions did extend their compiler error from Error without marking the message property as enumerable. Therefore we need to explicitly add it to the destructuring.
---
 packages/repl/src/lib/workers/bundler/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 6ca5f928f9..e510349fcf 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -609,7 +609,7 @@ async function bundle({
 			server: null,
 			imports: null,
 			warnings: client.warnings,
-			error: { ...e }
+			error: { ...e, message: e.message } // not all Svelte versions return an enumerable message property
 		};
 	}
 }

From e089aafe7d5b57ab4bf954b99c0d232a0f5fefd0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 2 Nov 2024 12:58:04 +0100
Subject: [PATCH 068/453] chore: warn instead of error when no linked repo
 found (#762)

Not everyone might be interested in having all repos locally linked up, and only care about locally syncing/updating specific repos at a time. That's currently not possible because the sync script error with a somewhat hard to understand error, because it can't find a certain repo. This adds a dedicated check and shows a warning instead of erroring.
---
 apps/svelte.dev/scripts/sync-docs/index.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 4866a41787..c2cccb82c6 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -167,6 +167,11 @@ if (parsed.values.pull) {
 }
 
 async function sync(pkg: Package) {
+	if (!fs.existsSync(`${REPOS}/${pkg.name}/${pkg.docs}`)) {
+		console.warn(`No linked repo found for ${pkg.name}`);
+		return;
+	}
+
 	const dest = `${DOCS}/${pkg.name}`;
 
 	fs.rmSync(dest, { force: true, recursive: true });

From 7d6fe753c8ac5de2512352ef4cfeb13f97afe083 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 2 Nov 2024 07:58:56 -0400
Subject: [PATCH 069/453] Sync `svelte` docs (#757)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/04-$effect.md         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 3515a6c4e4..b338795220 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -8,7 +8,7 @@ Most of the effects in a Svelte app are created by Svelte itself — they're the
 
 But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `<canvas>` element, or something across a network) with state inside your Svelte app.
 
-> [!NOTE] Avoid overusing effects! When you do too much work in them, code often becomes difficult to understand and maintain. See [when not to use effects](#When-not-to-use-effects) to learn about alternative approaches.
+> [!NOTE] Avoid overusing `$effect`! When you do too much work in effects, code often becomes difficult to understand and maintain. See [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
 
 Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
 
@@ -261,7 +261,7 @@ The `$effect.root` rune is an advanced feature that creates a non-tracked scope
 </script>
 ```
 
-## When not to use effects
+## When not to use `$effect`
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
 
@@ -288,7 +288,7 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 > [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
 
-You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy2rDMBD8lWXJwYE0dg-9KFYg31H3oNirIJBlYa1DjPG_F8l1XEop9LgzOzP7mFAbSwHF-4ROtYQCL97jAXn0sQh3skx4wNANfR2RMtS98XyuXMWWGLhjZUHCa1GcVix4cgwSdoEVU1bsn4wl_Y1I2kS6inekNdWcZXuQZ5giFDWpfwl5WYyT2fynbB1g1UWbTVbm2w6utOpKNq1TGucHhri6rLBX7kYVwtW4RtyVHUhOyXeGVj3klLxnyJP0i8lXNJUx6en-v6A48K85kTimpi0sYj-yAo-Wlh9FcL1LY4K3ahSgLT1OC3ZTXkBxfKN2uVC6T5LjAduuMdpQg4L7geaP-RNHPuClMQIAAA==)):
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
 
 ```svelte
 <script>
@@ -316,7 +316,7 @@ You might be tempted to do something convoluted with effects to link one value t
 </label>
 ```
 
-Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo2SP2-DMBDFv8rp1CFR84cOXQhU6p6tY-ngwoEsGWPhI0pk8d0rG5yglqGj37v7veMJh7VUZDH9dKhFS5jiuzG4Q74Z_7AXUky4Q9sNfemVzJa9NPxW6IIVMXDHQkEOL0lyipo1pBlyeLIsmDbJ9u4oqhdG2A2mLrgedMmy0zCYSjB9eMaGtuC8WXBkPtOBRd8QHy5CDXSa3Jk7HbOfDgjWuAo_U71kz9vr6Bgc2X44orPjow2dKfFNKhSTSW0GBl9iXmAvdEMFQqDmLgBH6HQYyt3ie0doxTV3IWqEY2DN88eohqePvsf9O9mf_if4HMSVXD89NfEI99qvbMs3RdPv4MXYaSWtUeKWQq3oOlfZCJNCcnildlFgWMcdtl0la0kVptwPNH6NP_uzV0acAgAA)):
+Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)):
 
 ```svelte
 <script>
@@ -346,7 +346,7 @@ Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAAC
 </label>
 ```
 
-If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACo2SQW-DMAyF_4pl7dBqXcsOu1CYtHtvO44dsmKqSCFExFRFiP8-xRCGth52tJ_9PecpA1bakMf0Y0CrasIU35zDHXLvQuGvZJhwh77p2nPoZP7casevhS3YEAM3rAzk8Jwkx9jzjixDDg-eFdMm2S6KoWolyK6ItuCqs2fWjYXOlYrpPTA2tIUhiAVH5iPtWbUX4v1VmY6Okzpzp2OepgNEGu_CT1St2fP2fXQ0juwwHNHZ4ScNmxn1RUaCybR1HUMIMS-wVfZCBYJQ80GAIzRWhvJh9d4RanXLB7Ea4SCsef4Qu1IG68Xu387h9D_GJ2ne8ZXpxTZUv1w994amjxCaMc1Se2dUn0Jl6DaHeFEuhWT_QvUqOlnHHdZNqStNJabcdjR-jt8IbC-7lgIAAA==)):
+If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACpWRwW6DMBBEf8WyekikFOihFwcq9TvqHkyyQUjGsfCCQMj_XnvBNKpy6Qn2DTOD1wu_tRocF18Lx9kCFwT4iRvVxenT2syNoDGyWjl4xi93g2AwxPDSXfrW4oc0EjUgwzsqzSr2VhTnxJwNHwf24lAhHIpjVDZNwy1KS5wlNoGMSg9wOCYksQccerMlv65p51X0p_Xpdt_4YEy9yTkmV3z4MJT579-bUqsaNB2kbI0dwlnCgirJe2UakJzVrbkKaqkWivasU1O1ULxnOVk3JU-Uxti0p_-vKO4no_enbQ_yXhnZn0aHs4b1jiJMK7q2zmo1C3bTMG3LaZQVrMjeoSPgaUtkDxePMCEX2Ie6b_8D4WyJJEwCAAA=)):
 
 ```svelte
 <script>

From 5a635e672f08e45dd445970c2ba199437da21af9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 08:36:59 -0400
Subject: [PATCH 070/453] More css tweaks (#764)

* remove redundant style

* various

* prettier
---
 .../routes/docs/[...path]/OnThisPage.svelte   | 10 ++--
 .../src/lib/Input/ComponentSelector.svelte    |  6 ---
 .../src/lib/Output/CompilerOptions.svelte     |  1 -
 .../site-kit/src/lib/nav/MobileMenu.svelte    |  2 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  6 +--
 .../site-kit/src/lib/search/Search.svelte     | 46 +++----------------
 .../src/lib/styles/tokens/colours.css         |  2 +-
 7 files changed, 15 insertions(+), 58 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 12f07fd486..185131131a 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -96,11 +96,7 @@
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
-
-				&:hover {
-					color: var(--sk-fg-3);
-				}
+				user-select: none;
 
 				&::before,
 				&::after {
@@ -148,6 +144,10 @@
 					color: var(--sk-fg-4);
 					margin: 0;
 					display: block;
+
+					&:hover {
+						color: var(--sk-fg-3);
+					}
 				}
 			}
 
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 4094f032cd..5ec4e75fc1 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -223,7 +223,6 @@
 		height: 100%;
 		aspect-ratio: 1;
 		margin: 0;
-		color: var(--sk-fg-3);
 		border-radius: 0;
 		cursor: pointer;
 	}
@@ -261,11 +260,6 @@
 		line-height: 1;
 	}
 
-	.input-sizer {
-		display: flex;
-		color: var(--sk-fg-3, #ccc);
-	}
-
 	input {
 		position: absolute;
 		width: 100%;
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 064dda5819..fa41bbb873 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -48,7 +48,6 @@
 		display: block;
 		padding: 0 0 0 1.25em;
 		white-space: nowrap;
-		color: var(--sk-fg-3);
 		user-select: none;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index 1645d648b4..8f617713bf 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -265,7 +265,7 @@
 		& :global(a) {
 			position: relative;
 			padding: 0.3rem 0;
-			color: var(--sk-fg-3);
+			color: inherit;
 			font: var(--sk-font-ui-medium);
 			width: 100%;
 			height: 100%;
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 2b00324ee9..7446b16c1c 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.current-section {
 		display: flex;
 		align-items: center;
-		color: var(--sk-fg-3);
+		color: inherit;
 		margin-left: 0.4em;
 		font: var(--sk-font-ui-medium);
 	}
@@ -227,10 +227,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	button {
-		color: var(--sk-fg-3);
-	}
-
 	.links {
 		display: flex;
 		width: 100%;
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index e9ac04945f..c46056c652 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -55,7 +55,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		position: relative;
 		display: flex;
 		align-items: center;
-		width: 100%;
+		width: 11rem;
 		font-size: 1.4rem;
 	}
 
@@ -68,12 +68,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		appearance: none;
 		-webkit-appearance: none;
 		width: 100%;
-		height: 4.2rem;
-		border-radius: 3.5rem;
+		height: 3.4rem;
+		border-radius: 5.6rem;
 		background:
 			no-repeat 0.6em 55% / 1.2em 1.2em url(http://github.com/icons/search.svg),
 			var(--sk-bg-4);
-		color: var(--sk-fg-3);
 	}
 
 	input:focus + .shortcut {
@@ -82,14 +81,14 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	input::placeholder {
 		text-transform: lowercase;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-4);
+		opacity: 0;
 	}
 
 	.shortcut {
-		color: var(--sk-fg-3);
 		position: absolute;
 		top: calc(50% - 0.9rem);
-		right: 0;
+		right: 1.6rem;
 		width: 100%;
 		text-align: right;
 		pointer-events: none;
@@ -99,36 +98,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	}
 
 	kbd {
-		display: none;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-4);
 		font-size: inherit;
 		font-family: inherit;
 	}
 
-	@media (min-width: 800px) {
-		.search-container {
-			width: 11rem;
-		}
-
-		.shortcut {
-			padding: 0 1.6rem 0 0;
-		}
-
-		input {
-			height: 3.4rem;
-			border-radius: 5.6rem;
-		}
-
-		input::placeholder {
-			opacity: 0;
-		}
-
-		/* we're using media query as an imperfect proxy for mobile/desktop */
-		kbd {
-			display: inline;
-		}
-	}
-
 	@media (min-width: 960px) {
 		.search-container {
 			width: 19rem;
@@ -138,10 +112,4 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 			opacity: 1;
 		}
 	}
-
-	@media (min-width: 1240px) {
-		.search-container {
-			width: 19rem;
-		}
-	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index fae3e3ad27..659ff74ec8 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -11,7 +11,7 @@
 	/* Foreground colours */
 	--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
 	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
-	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
+	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) and icons */
 	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 

From 8c115eec11e58eb792cabb3c60c1331644287041 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:13:31 -0400
Subject: [PATCH 071/453] Fix file panel (#767)

* simplify everything

* abort on escape

* unused

* tidy up

* fix

* fix

* fixes

* focus on add_new

* use aria-current

* small fix

* turn add-new into a button
---
 packages/editor/src/lib/Workspace.svelte.ts   |   7 +
 packages/editor/src/lib/codemirror.css        |   2 +
 .../src/lib/Input/ComponentSelector.svelte    | 212 ++++++++----------
 3 files changed, 101 insertions(+), 120 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 3c8cbe1a8a..c3ad11760a 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -206,6 +206,8 @@ export class Workspace {
 		if (is_file(item)) {
 			this.#select(item);
 			this.#onreset?.(this.#files);
+
+			this.modified[item.name] = true;
 		}
 
 		return item;
@@ -320,6 +322,11 @@ export class Workspace {
 			this.#select(new_item as File);
 		}
 
+		if (this.modified[previous.name]) {
+			delete this.modified[previous.name];
+			this.modified[name] = true;
+		}
+
 		this.#onreset?.(this.#files);
 	}
 
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 66c8a75428..5ab18f360e 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -8,6 +8,8 @@
 	height: 100%;
 
 	&.cm-focused {
+		outline: none;
+
 		.cm-cursor {
 			border-left-color: var(--sk-fg-3);
 		}
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 5ec4e75fc1..fe74cd788b 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { forcefocus } from '@sveltejs/site-kit/actions';
-	import { tick } from 'svelte';
 	import RunesInfo from './RunesInfo.svelte';
 	import Migrate from './Migrate.svelte';
 	import type { Workspace, File } from 'editor';
+	import { tick } from 'svelte';
 
 	interface Props {
 		runes: boolean;
@@ -14,39 +13,20 @@
 
 	let { runes, onchange, workspace, can_migrate }: Props = $props();
 
-	let editing_name: string | null = $state(null);
-	let input_value = $state('');
-
-	function select_file(filename: string) {
-		if (workspace.current.name !== filename) {
-			editing_name = null;
-			workspace.select(filename);
-		}
-	}
-
-	function edit_tab(file: File) {
-		if (workspace.current.name === file.name) {
-			editing_name = file.name;
-			input_value = file.name;
-		}
-	}
+	let input = $state() as HTMLInputElement;
+	let input_value = $state(workspace.current.name);
 
-	async function close_edit() {
-		if (input_value === editing_name) {
+	async function close_edit(file: File) {
+		if (input_value === file.name || input_value === '') {
 			// nothing to do
-			editing_name = null;
+			input_value = file.name;
 			return;
 		}
 
-		const edited_file = (workspace.files as File[]).find((val) => val.name === editing_name);
-		if (!edited_file) return; // TODO can this happen?
+		const deconflicted = deconflict(input_value, file);
 
-		const deconflicted = deconflict(input_value, edited_file);
-
-		workspace.rename(edited_file, deconflicted);
+		workspace.rename(file, deconflicted);
 		workspace.focus();
-
-		editing_name = null;
 	}
 
 	function deconflict(name: string, file?: File) {
@@ -70,7 +50,7 @@
 		onchange();
 	}
 
-	function add_new() {
+	async function add_new() {
 		const basename = deconflict(`Component.svelte`);
 
 		const file = workspace.add({
@@ -81,10 +61,11 @@
 			text: true
 		});
 
-		editing_name = file.name;
 		input_value = file.name;
-
 		onchange();
+
+		await tick();
+		input.focus();
 	}
 
 	// drag and drop
@@ -97,16 +78,18 @@
 	<div class="file-tabs">
 		{#each workspace.files as File[] as file, index (file.name)}
 			<div
-				id={file.name}
 				class="button"
+				class:editable={file.name !== 'App.svelte'}
 				role="button"
 				tabindex="0"
-				class:active={file.name === workspace.current.name}
-				class:draggable={file.name !== editing_name && index !== 0}
+				aria-current={file === workspace.current}
 				class:drag-over={file === dragover}
-				onclick={() => select_file(file.name)}
-				onkeyup={(e) => e.key === ' ' && select_file(file.name)}
-				draggable={file.name !== editing_name}
+				onclick={() => {
+					workspace.select(file.name);
+					input_value = file.name;
+				}}
+				onkeyup={(e) => e.key === ' ' && workspace.select(file.name)}
+				draggable="true"
 				ondragstart={() => (dragging = file)}
 				ondragover={(e) => (e.preventDefault(), (dragover = file))}
 				ondragleave={(e) => (e.preventDefault(), (dragover = null))}
@@ -120,42 +103,36 @@
 			>
 				<i class="drag-handle"></i>
 
-				{#if file.name === 'App.svelte'}
-					<div class="uneditable">
-						App.svelte{#if workspace.modified[file.name]}*{/if}
-					</div>
-				{:else if file.name === editing_name}
-					<span class="input-sizer">
-						<span style="color: transparent">{input_value}</span>
-					</span>
+				<span class="filename">
+					{(file === workspace.current && file.name !== 'App.svelte' ? input_value : file.name) +
+						(workspace.modified[file.name] ? '*' : '') || ' '}
+				</span>
 
+				{#if file === workspace.current && file.name !== 'App.svelte'}
 					<!-- svelte-ignore a11y_autofocus -->
 					<input
-						use:forcefocus
 						spellcheck={false}
+						bind:this={input}
 						bind:value={input_value}
 						onfocus={async (event) => {
 							const input = event.currentTarget;
-							await tick();
-							input.select();
+							setTimeout(() => {
+								input.select();
+							});
 						}}
-						onblur={close_edit}
+						onblur={() => close_edit(file)}
 						onkeydown={(e) => {
 							if (e.key === 'Enter') {
 								e.preventDefault();
 								e.currentTarget.blur();
 							}
+
+							if (e.key === 'Escape') {
+								input_value = file.name;
+								e.currentTarget.blur();
+							}
 						}}
 					/>
-				{:else}
-					<div
-						class="editable"
-						title="edit component name"
-						onclick={() => edit_tab(file)}
-						onkeyup={(e) => e.key === ' ' && edit_tab(file)}
-					>
-						{file.name}{#if workspace.modified[file.name]}*{/if}
-					</div>
 
 					<span
 						class="remove"
@@ -166,7 +143,7 @@
 						}}
 						onkeyup={(e) => e.key === ' ' && remove_file(file)}
 					>
-						<svg width="12" height="12" viewBox="0 0 24 24">
+						<svg viewBox="0 0 24 24">
 							<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
 							<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
 						</svg>
@@ -176,7 +153,11 @@
 		{/each}
 	</div>
 
-	<button class="add-new" onclick={add_new} aria-label="add new component" title="add new component"
+	<button
+		class="raised add-new"
+		onclick={add_new}
+		aria-label="add new component"
+		title="add new component"
 	></button>
 
 	<div class="runes">
@@ -189,6 +170,8 @@
 	.component-selector {
 		position: relative;
 		display: flex;
+		gap: 0.5rem;
+		align-items: center;
 		padding: 0 1rem 0 0;
 
 		/* fake border (allows tab borders to appear above it) */
@@ -206,13 +189,13 @@
 	.file-tabs {
 		border: none;
 		margin: 0;
+		height: 100%;
 		white-space: nowrap;
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
 
-	.file-tabs .button,
-	.add-new {
+	.file-tabs .button {
 		position: relative;
 		display: inline-flex;
 		align-items: center;
@@ -221,19 +204,17 @@
 		border: none;
 		padding: 0 1rem;
 		height: 100%;
-		aspect-ratio: 1;
-		margin: 0;
-		border-radius: 0;
 		cursor: pointer;
 	}
 
-	.add-new {
-		background: url(http://github.com/file-new.svg) 50% 50% no-repeat;
-		background-size: 1em;
-	}
-
 	.file-tabs .button {
-		padding: 0 1rem 0 2em;
+		--padding-left: 2.6rem;
+		--padding-right: 1.4rem;
+		padding: 0 var(--padding-right) 0 var(--padding-left);
+
+		&.editable {
+			--padding-right: 1.8rem;
+		}
 
 		.drag-handle {
 			cursor: move;
@@ -246,75 +227,66 @@
 			background-size: 1em;
 		}
 
-		&.active {
-			border-bottom: 1px solid var(--sk-fg-accent);
+		.remove {
+			position: absolute;
+			display: none;
+			top: 0;
+			right: 0;
+			padding: 0 0.2rem;
+			width: 1.6rem;
+			height: 100%;
+			cursor: pointer;
+
+			svg {
+				width: 100%;
+				height: 100%;
+			}
 		}
-	}
 
-	.editable,
-	.uneditable,
-	.input-sizer,
-	input {
-		display: inline-block;
-		position: relative;
-		line-height: 1;
+		&.drag-over {
+			background: var(--sk-bg-4);
+		}
+
+		&[aria-current='true'] {
+			border-bottom: 1px solid var(--sk-fg-accent);
+
+			&.editable .filename {
+				cursor: text;
+			}
+
+			.remove {
+				display: block;
+			}
+		}
 	}
 
 	input {
 		position: absolute;
-		width: 100%;
+		width: calc(100% - var(--padding-left) - var(--padding-right));
 		border: none;
-		color: var(--sk-fg-accent);
 		outline: none;
-		background-color: transparent;
+		background-color: inherit;
+		color: inherit;
 		top: 0;
-		left: 0;
+		left: var(--padding-left);
 		height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-family: var(--sk-font-family-ui);
 		font: var(--sk-font-ui-small); /* TODO can we just inherit */
-		padding: 0 1rem 1px 2em;
 		box-sizing: border-box;
-	}
 
-	.duplicate {
-		color: var(--sk-fg-accent);
-	}
-
-	.remove {
-		position: absolute;
-		display: none;
-		right: 1px;
-		top: 4px;
-		width: 16px;
-		text-align: right;
-		padding: 12px 0 12px 5px;
-		font-size: 8px;
-		cursor: pointer;
-	}
-
-	.file-tabs .button.active .editable {
-		cursor: text;
-	}
-
-	.file-tabs .button.active .remove {
-		display: block;
-	}
-
-	.file-tabs .button.drag-over {
-		background: #67677814;
-	}
-
-	.file-tabs .button.drag-over {
-		cursor: move;
+		&:focus {
+			color: var(--sk-fg-accent);
+		}
 	}
 
 	.add-new {
-		padding: 12px 10px 8px 8px;
-		height: 40px;
-		text-align: center;
+		height: 3.2rem;
+		aspect-ratio: 1;
+		background: url(http://github.com/file-new.svg) 50% 50% no-repeat;
+		background-size: 1em;
 	}
 
 	.runes {

From 5a7d8ff08e6e7bfb6e1039eec98db162d16a5a9a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:29:13 -0400
Subject: [PATCH 072/453] tweak

---
 packages/site-kit/src/lib/nav/MobileMenu.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index 8f617713bf..d07bcc1fd2 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -218,7 +218,7 @@
 		}
 
 		:root.dark & {
-			border-top: solid 1.1px hsla(0, 0%, 100%, 0.2);
+			border-top: solid 1px var(--sk-raised-highlight);
 		}
 	}
 

From 3c83b3d31703f94b92481ca161ebc72a0750eddb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:30:26 -0400
Subject: [PATCH 073/453] tweak

---
 packages/repl/src/lib/Message.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index 9ee85da6dc..1d3bf313c1 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -52,7 +52,7 @@
 		padding: 12px 16px 12px 44px;
 		font: var(--sk-font-ui-small);
 		margin: 0;
-		border-top: 1px solid white;
+		border-top: 1px solid var(--sk-border);
 	}
 
 	.message::before {

From cc6d07ed05247789b430d87085b1e1afe47020ff Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:35:29 -0400
Subject: [PATCH 074/453] fix nav submenu autoscroll (#768)

fix #759
---
 packages/site-kit/src/lib/nav/MobileSubMenu.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index bbe50a5a6a..f3d1a1a1ce 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -12,7 +12,7 @@
 	});
 
 	export async function scrollToActive() {
-		const active = nav.querySelector('[aria-current="true"]') as HTMLElement;
+		const active = nav.querySelector('[aria-current="page"]') as HTMLElement;
 
 		if (!active) {
 			nav.scrollTop = 0;

From eb18e82c0c4656faacc3660f0bf13082ab4fda77 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:41:54 -0400
Subject: [PATCH 075/453] remove unused state

---
 packages/site-kit/src/lib/nav/Nav.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 7446b16c1c..b1281b74b6 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -30,8 +30,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	let current = $state.raw<NavigationLink | undefined>();
 	let menu_button: HTMLButtonElement;
 
-	let nav: HTMLElement | undefined = $state();
-
 	// Prevents navbar to show/hide when clicking in docs sidebar
 	let hash_changed = false;
 	function handle_hashchange() {
@@ -68,7 +66,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 />
 
 <nav
-	bind:this={nav}
 	class:visible
 	style:z-index={$overlay_open && ($searching || $on_this_page_open) ? 80 : null}
 	aria-label="Primary"

From e2c5fefa1faba7664a3560c790ce11429338a0ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 14:02:42 -0400
Subject: [PATCH 076/453] fix #766 (#769)

---
 packages/editor/src/lib/Workspace.svelte.ts   |  4 +--
 .../editor/src/lib/compile-worker/worker.ts   | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index c3ad11760a..0d392c347a 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -1,4 +1,4 @@
-import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
+import type { CompileError, CompileResult } from 'svelte/compiler';
 import { Compartment, EditorState } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
@@ -77,7 +77,7 @@ const default_extensions = [
 // 	extensions.push(vim());
 // }
 
-interface ExposedCompilerOptions {
+export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index 57eb4fbad8..06d79f314d 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -1,4 +1,5 @@
-import type { File } from '../Workspace.svelte';
+import type { CompileResult } from 'svelte/compiler';
+import type { ExposedCompilerOptions, File } from '../Workspace.svelte';
 
 // hack for magic-string and Svelte 4 compiler
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -39,12 +40,10 @@ addEventListener('message', async (event) => {
 	const { id, file, options } = event.data as {
 		id: number;
 		file: File;
-		options: { generate: 'client' | 'server'; dev: boolean };
+		options: ExposedCompilerOptions;
 	};
 
-	const fn = file.name.endsWith('.svelte') ? self.svelte.compile : self.svelte.compileModule;
-
-	if (!fn) {
+	if (!file.name.endsWith('.svelte') && !self.svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
 			id,
@@ -69,7 +68,22 @@ addEventListener('message', async (event) => {
 	}
 
 	try {
-		const result = fn(file.contents, { ...options, filename: file.name });
+		let result: CompileResult;
+
+		if (file.name.endsWith('.svelte')) {
+			result = self.svelte.compile(file.contents, {
+				generate: options.generate, // TODO do we need to adjust this for 3/4?
+				dev: options.dev,
+				modernAst: options.modernAst,
+				filename: file.name
+			});
+		} else {
+			result = self.svelte.compileModule(file.contents, {
+				generate: options.generate,
+				dev: options.dev,
+				filename: file.name
+			});
+		}
 
 		postMessage({
 			id,

From dbf94ed2d27327d8586a3b92b89993191ce2efbc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 14:45:37 -0400
Subject: [PATCH 077/453] fix padding

---
 packages/editor/src/lib/Editor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 9b7ab09c8d..9c484ff9b8 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -105,7 +105,7 @@
 		display: grid;
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
-		padding: 1rem 0;
+		padding: 0.4rem 0;
 		font: var(--sk-font-mono);
 	}
 

From ee14eb457a46c2e91bdd90d2b6777126cb3960d8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 14:47:36 -0400
Subject: [PATCH 078/453] fix font

---
 packages/editor/src/lib/Editor.svelte | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 9c484ff9b8..14b5e42fd3 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -106,11 +106,11 @@
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
 		padding: 0.4rem 0;
-		font: var(--sk-font-mono);
 	}
 
 	.fake * {
-		color: #ccc;
+		color: var(--sk-fg-4);
+		font: var(--sk-font-mono);
 	}
 
 	.fake-gutter {
@@ -121,10 +121,4 @@
 	.fake-content {
 		padding: 0 1rem;
 	}
-
-	@media (prefers-color-scheme: dark) {
-		.fake * {
-			color: #666;
-		}
-	}
 </style>

From 974d8c221c38d256721f0b45312b2b7c6ab61a03 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 15:29:03 -0400
Subject: [PATCH 079/453] fix smart quotes (#770)

fix smart quotes - closes #470
---
 .../site-kit/src/lib/markdown/renderer.ts     | 51 +++++++++----------
 packages/site-kit/src/lib/markdown/utils.ts   |  8 +--
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 8f952595ec..bd79475332 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -281,34 +281,33 @@ export async function render_content_markdown(
 				snippets.save(token.text, html);
 			}
 
-			// ensure that `foo`/`bar` is transformed to `foo` / `bar`
-			// https://github.com/sveltejs/svelte.dev/pull/577
-			const slash_index =
-				// @ts-expect-error
-				token.tokens?.findIndex((token) => token.type === 'text' && token.text === '/') ?? -1;
-
-			if (slash_index !== -1) {
-				// @ts-expect-error
-				const before = token.tokens[slash_index - 1];
-				// @ts-expect-error
-				const after = token.tokens[slash_index + 1];
-
-				if (before?.type === 'codespan' && after?.type === 'codespan') {
-					// @ts-expect-error
-					token.tokens[slash_index].raw = token.tokens[slash_index].text = ' / ';
+			const tokens = 'tokens' in token ? token.tokens : undefined;
+
+			if (tokens) {
+				// ensure that `foo`/`bar` is transformed to `foo` / `bar`
+				// https://github.com/sveltejs/svelte.dev/pull/577
+				const slash_index =
+					tokens.findIndex((token) => token.type === 'text' && token.text === '/') ?? -1;
+
+				if (slash_index !== -1) {
+					const before = tokens[slash_index - 1];
+					const after = tokens[slash_index + 1];
+
+					if (before?.type === 'codespan' && after?.type === 'codespan') {
+						// @ts-expect-error
+						tokens[slash_index].raw = tokens[slash_index].text = ' / ';
+					}
 				}
-			}
-		},
-		text(token) {
-			// @ts-expect-error I think this is a bug in marked — some text tokens have children,
-			// but that's not reflected in the types. In these cases we can't just use `token.tokens`
-			// because that will result in e.g. `<code>` elements not being generated
-			if (token.tokens) {
-				// @ts-expect-error
-				return this.parser!.parseInline(token.tokens);
-			}
 
-			return smart_quotes(token.text, true);
+				// smart quotes
+				for (let i = 0; i < tokens.length; i += 1) {
+					const token = tokens[i];
+
+					if (token.type === 'text') {
+						token.text = smart_quotes(token.text, { first: i === 0, html: true });
+					}
+				}
+			}
 		},
 		heading({ tokens, depth }) {
 			const text = this.parser!.parseInline(tokens);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index e4a06084be..d12d453c42 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -42,7 +42,10 @@ export const slugify = (str: string) => {
 		.replace(/-$/, '');
 };
 
-export function smart_quotes(str: string, html: boolean = false) {
+export function smart_quotes(
+	str: string,
+	{ first = true, html = false }: { first?: boolean; html?: boolean } = {}
+) {
 	// replace dumb quotes with smart quotes. This isn't a perfect algorithm — it
 	// wouldn't correctly handle `That '70s show` or `My country 'tis of thee`
 	// but a) it's very unlikely they'll occur in our docs, and
@@ -50,8 +53,7 @@ export function smart_quotes(str: string, html: boolean = false) {
 	return str.replace(
 		html ? /(.|^)(&#39;|&quot;)(.|$)/g : /(.|^)('|")(.|$)/g,
 		(m, before, quote, after) => {
-			const trimmed = before.trim();
-			const left = trimmed === '' || trimmed === '(';
+			const left = (first && before === '') || [' ', '\n', '('].includes(before);
 			let replacement = '';
 
 			if (html) {

From 35b623e121fd85448f5453e2c2da1e99ce3ae213 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 2 Nov 2024 15:29:27 -0400
Subject: [PATCH 080/453] Sync `svelte` docs (#771)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/06-runtime/03-lifecycle-hooks.md      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index 428ddf47fc..912bb3b2ca 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -84,9 +84,9 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 
 	$effect.pre(() => {
 		console.log('the component is about to update');
-		tick().then(
+		tick().then(() => {
 				console.log('the component just updated');
-		);
+		});
 	});
 </script>
 ```

From 450a179bf6edb11a2bc9c6cf92176984c6a9a497 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 15:38:11 -0400
Subject: [PATCH 081/453] nicer gutters (#772)

* nicer gutters

* fix

* better

* cursor
---
 apps/svelte.dev/src/lib/icons/chevron.svg     |  4 +-
 .../routes/docs/[...path]/OnThisPage.svelte   |  4 +-
 packages/editor/src/lib/Editor.svelte         |  2 +-
 packages/editor/src/lib/codemirror.css        | 49 ++++++++++++-------
 .../site-kit/src/lib/components/Text.svelte   |  4 +-
 .../src/lib/search/SearchResultList.svelte    |  4 +-
 6 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/apps/svelte.dev/src/lib/icons/chevron.svg b/apps/svelte.dev/src/lib/icons/chevron.svg
index d85858ec63..7334ed9673 100644
--- a/apps/svelte.dev/src/lib/icons/chevron.svg
+++ b/apps/svelte.dev/src/lib/icons/chevron.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.5 18L9.5 12L15.5 6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
\ No newline at end of file
+<path d="m6 9 6 6 6-6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 185131131a..c48e55108f 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -129,7 +129,7 @@
 					background-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: -90deg;
+					rotate: 0deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -153,7 +153,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 90deg;
+					rotate: 180deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */
diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 14b5e42fd3..20ad089fd6 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -115,7 +115,7 @@
 
 	.fake-gutter {
 		text-align: right;
-		padding-right: 3px;
+		padding-right: 0.7rem;
 	}
 
 	.fake-content {
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 5ab18f360e..9872dbf1d0 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -38,6 +38,14 @@
 	}
 
 	.cm-activeLine {
+		background: inherit;
+	}
+
+	.cm-foldGutter {
+		width: 1.4rem;
+	}
+
+	.cm-activeLineGutter {
 		/* this must be translucent, or it will obscure the selection */
 		background: hsl(0, 0%, 0%, 0.04);
 
@@ -46,8 +54,29 @@
 		}
 	}
 
-	.cm-activeLineGutter {
-		background-color: var(--sk-bg-3);
+	.cm-gutterElement {
+		position: relative;
+
+		&:where(:has([title='Fold line']), :has([title='Unfold line']))::after {
+			content: '';
+			position: absolute;
+			width: 100%;
+			right: 0;
+			top: 0;
+			height: 2.4rem;
+			background: url(http://github.com/$lib/icons/chevron.svg) no-repeat 50% 50%;
+			background-size: contain;
+			transition: transform 0.2s;
+			cursor: pointer;
+		}
+
+		&:has([title='Unfold line'])::after {
+			transform: rotate(-90deg);
+		}
+
+		span {
+			color: transparent;
+		}
 	}
 
 	.cm-lineNumbers {
@@ -60,10 +89,6 @@
 		}
 	}
 
-	.cm-foldGutter {
-		width: 1rem;
-	}
-
 	.cm-foldPlaceholder {
 		background-color: transparent;
 		border: none;
@@ -85,17 +110,7 @@
 	}
 
 	.cm-content {
-		/* ensure no gap between top of editor and highlighted first/last line */
-		padding-top: 0;
-		padding-bottom: 0;
-
-		.cm-line:first-child {
-			padding-top: 4px;
-		}
-
-		.cm-line:last-child {
-			padding-bottom: 4px;
-		}
+		padding: 0.4rem 0;
 	}
 
 	.cm-line {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 89f5f43cc8..40218618e9 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -495,7 +495,7 @@
 			&::after {
 				background: url(http://github.com/$lib/icons/chevron.svg) 50% 50% no-repeat;
 				background-size: 2rem;
-				rotate: -90deg;
+				rotate: 0deg;
 				transition: rotate 0.2s;
 				transition: rotate 0.2s;
 				top: 0.2rem;
@@ -534,7 +534,7 @@
 
 			&[open] {
 				&::after {
-					rotate: 90deg;
+					rotate: 180deg;
 				}
 
 				& > summary {
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index f5ac8abaf6..9ce7ac1e3f 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -100,12 +100,12 @@
 				height: 2rem;
 				background: url(http://github.com/$lib/icons/chevron.svg);
 				background-size: contain;
-				rotate: -90deg;
+				rotate: 0deg;
 				transition: rotate 0.2s;
 			}
 
 			[open] &::after {
-				rotate: 90deg;
+				rotate: 180deg;
 			}
 
 			span:not(:last-child)::after {

From 04c5a8061ac12e5004da1089bfea8016dc038ef7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 15:57:56 -0400
Subject: [PATCH 082/453] link to docs from diagnostics (#773)

link to docs from diagnostics - closes #431
---
 packages/editor/src/lib/Workspace.svelte.ts | 10 ++++++++--
 packages/editor/src/lib/codemirror.css      | 14 ++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 0d392c347a..ce67848cc2 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -124,7 +124,10 @@ export class Workspace {
 					span.innerHTML = `${error.message
 						.replace(/&/g, '&amp;')
 						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
+						.replace(
+							/`(.+?)`/g,
+							`<code>$1</code>`
+						)} (<a href="http://github.com/docs/svelte/compiler-errors#${error.code}">${error.code}</a>)`;
 
 					return span;
 				}
@@ -142,7 +145,10 @@ export class Workspace {
 					span.innerHTML = `${warning.message
 						.replace(/&/g, '&amp;')
 						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
+						.replace(
+							/`(.+?)`/g,
+							`<code>$1</code>`
+						)} (<a href="http://github.com/docs/svelte/compiler-warnings#${warning.code}">${warning.code}</a>)`;
 
 					return span;
 				}
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 9872dbf1d0..e88103d099 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -292,21 +292,15 @@
 						padding: 0.2rem 0.4rem;
 					}
 
-					strong {
+					a {
 						font: var(--sk-font-mono);
+						color: inherit;
 						font-size: 1em;
-						opacity: 0.7;
+						/* opacity: 0.7; */
+						text-decoration: underline;
 					}
 				}
 			}
 		}
-
-		&.cm-tooltip-below .cm-tooltip-section {
-			/* top: 1rem; */
-		}
-
-		&.cm-tooltip-above .cm-tooltip-section {
-			/* bottom: 1rem; */
-		}
 	}
 }

From 8e1175195336879f223ad00d860efb958c7f088f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 15:59:52 -0400
Subject: [PATCH 083/453] make context menu work properly (#774)

---
 .../[...slug]/filetree/ContextMenu.svelte     | 28 +++++++------------
 .../tutorial/[...slug]/filetree/Item.svelte   |  5 ++--
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
index 46994e20e3..4d932bb199 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -1,33 +1,25 @@
 <!-- @component
      A context menu for the tutorial's file tree
 -->
-<script module>
-	import { writable } from 'svelte/store';
+<script module lang="ts">
+	import type { MenuItem } from '$lib/tutorial';
 
-	/**
-	 * @type {import("svelte/store").Writable<{x: number; y: number; items: import('$lib/tutorial').MenuItem[]} | null>}
-	 */
-	let menu_items = writable(null);
+	let menu_items: { x: number; y: number; items: MenuItem[] } | null = $state(null);
 
-	/**
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {import('$lib/tutorial').MenuItem[]} items
-	 */
-	export function open(x, y, items) {
+	export function open(x: number, y: number, items: MenuItem[]) {
 		if (items.length > 0) {
-			menu_items.set({ x, y, items });
+			menu_items = { x, y, items };
 		}
 	}
 </script>
 
-{#if $menu_items}
-	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
+{#if menu_items}
+	<nav style="position: fixed; z-index: 5; top:{menu_items.y}px; left:{menu_items.x}px">
 		<div class="context-menu">
 			<ul>
-				{#each $menu_items.items as item}
+				{#each menu_items.items as item}
 					<li>
-						<button on:click={item.fn}>{item.label}</button>
+						<button onclick={item.fn}>{item.label}</button>
 					</li>
 				{/each}
 			</ul>
@@ -35,7 +27,7 @@
 	</nav>
 {/if}
 
-<svelte:window on:click={() => menu_items.set(null)} />
+<svelte:window onclick={() => (menu_items = null)} />
 
 <style>
 	.context-menu {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index 9ec7d1d07f..0d6cf40c48 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -2,6 +2,7 @@
 	import { tick } from 'svelte';
 	import { open } from './ContextMenu.svelte';
 	import type { MenuItem } from '$lib/tutorial';
+	import { forcefocus } from '@sveltejs/site-kit/actions';
 
 	interface Props {
 		basename?: string;
@@ -63,7 +64,7 @@
 		<!-- svelte-ignore a11y_autofocus -->
 		<input
 			type="text"
-			autofocus
+			use:forcefocus
 			autocomplete="off"
 			spellcheck="false"
 			value={basename}
@@ -135,7 +136,7 @@
 	}
 
 	input {
-		background: var(--sk-bg-1);
+		background: var(--sk-bg-3);
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;

From f4deccd10f50d6d8984224f32a74d69c7bc59e4d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 17:59:14 -0400
Subject: [PATCH 084/453] create docs-preview-create workflow (#776)

* create docs-preview-create workflow

* maybe it's as simple as this?
---
 .github/workflows/docs-preview-create.yml  | 26 +++++++++++++++++
 apps/svelte.dev/scripts/sync-docs/index.ts | 34 +++++++++++++++-------
 apps/svelte.dev/scripts/sync-docs/utils.ts |  4 +++
 3 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 .github/workflows/docs-preview-create.yml

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
new file mode 100644
index 0000000000..9b12c2a589
--- /dev/null
+++ b/.github/workflows/docs-preview-create.yml
@@ -0,0 +1,26 @@
+name: Docs preview create
+
+on:
+  repository_dispatch:
+    types: [docs-preview-create]
+
+jobs:
+  Sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+
+      - name: Checkout
+        run: git checkout -B refs/heads/sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+
+      - name: Sync
+        run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"
+
+      - name: Push
+        run: git add -A && git commit -m "sync docs" && git push -u origin sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index c2cccb82c6..44b6d3486f 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -30,6 +30,10 @@ const parsed = parseArgs({
 		pull: {
 			type: 'boolean',
 			short: 'p'
+		},
+		owner: {
+			type: 'string',
+			default: 'sveltejs'
 		}
 	},
 	strict: true,
@@ -40,11 +44,23 @@ const dirname = fileURLToPath(new URL('.', import.meta.url));
 const REPOS = path.join(dirname, '../../repos');
 const DOCS = path.join(dirname, '../../content/docs');
 
+const branches = {};
+
+for (const option of parsed.positionals) {
+	const [name, ...rest] = option.split('#');
+
+	if (branches[name]) {
+		throw new Error(`Duplicate branches for ${name}`);
+	}
+
+	branches[name] = rest.join('#') || 'main';
+}
+
 const packages: Package[] = [
 	{
 		name: 'svelte',
-		repo: 'sveltejs/svelte',
-		branch: 'main',
+		repo: `${parsed.values.owner}/svelte`,
+		branch: branches['svelte'] ?? 'main',
 		pkg: 'packages/svelte',
 		docs: 'documentation/docs',
 		types: 'types',
@@ -67,8 +83,8 @@ const packages: Package[] = [
 	},
 	{
 		name: 'kit',
-		repo: 'sveltejs/kit',
-		branch: 'main',
+		repo: `${parsed.values.owner}/kit`,
+		branch: branches['kit'] ?? 'main',
 		pkg: 'packages/kit',
 		docs: 'documentation/docs',
 		types: 'types',
@@ -127,15 +143,15 @@ const packages: Package[] = [
 	},
 	{
 		name: 'cli',
-		repo: 'sveltejs/cli',
-		branch: 'main',
+		repo: `${parsed.values.owner}/cli`,
+		branch: branches['cli'] ?? 'main',
 		pkg: 'packages/cli',
 		docs: 'documentation/docs',
 		types: null
 	}
 ];
 
-const unknown = parsed.positionals.filter((name) => !packages.some((pkg) => pkg.name === name));
+const unknown = Object.keys(branches).filter((name) => !packages.some((pkg) => pkg.name === name));
 
 if (unknown.length > 0) {
 	throw new Error(
@@ -144,9 +160,7 @@ if (unknown.length > 0) {
 }
 
 const filtered =
-	parsed.positionals.length === 0
-		? packages
-		: packages.filter((pkg) => parsed.positionals.includes(pkg.name));
+	parsed.positionals.length === 0 ? packages : packages.filter((pkg) => !!branches[pkg.name]);
 
 /**
  * Depending on your setup, this will either clone the Svelte and SvelteKit repositories
diff --git a/apps/svelte.dev/scripts/sync-docs/utils.ts b/apps/svelte.dev/scripts/sync-docs/utils.ts
index 774bb2fe75..93871e874f 100644
--- a/apps/svelte.dev/scripts/sync-docs/utils.ts
+++ b/apps/svelte.dev/scripts/sync-docs/utils.ts
@@ -8,6 +8,10 @@ export async function clone_repo(repo: string, name: string, branch: string, cwd
 	if (fs.existsSync(dir)) {
 		const opts = { cwd: dir };
 
+		if (!repo.startsWith('sveltejs/')) {
+			console.warn('Ignoring --owner flag for already-cloned repo');
+		}
+
 		if (execSync('git status -s', opts).toString() !== '') {
 			throw new Error(`${name} repo is dirty — aborting`);
 		}

From 1c7b6e81ce732cb440a156aa8e4cc20808b204fb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:05:04 -0400
Subject: [PATCH 085/453] try this

---
 .github/workflows/docs-preview-create.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 9b12c2a589..3503f97ab7 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -9,6 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          token: ${{ github.GH_TOKEN }}
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:

From 9687278fb4799d4082b8614098daed91441cc7b0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:06:27 -0400
Subject: [PATCH 086/453] oops

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 3503f97ab7..36ddf04ecc 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          token: ${{ github.GH_TOKEN }}
+          token: ${{ secrets.GH_TOKEN }}
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:

From 49936ea76e48a05d13602af93ce96595a0066d86 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:12:16 -0400
Subject: [PATCH 087/453] try this

---
 .github/workflows/docs-preview-create.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 36ddf04ecc..6bdb1184b7 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -24,5 +24,10 @@ jobs:
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"
 
+      - name: Configure Git
+        run: |
+          git config --global user.name "GitHub Actions Bot"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
       - name: Push
         run: git add -A && git commit -m "sync docs" && git push -u origin sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}

From c9ba19c8149bce0241a285a94d79b6169b8288d6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:13:54 -0400
Subject: [PATCH 088/453] try this

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 6bdb1184b7..c8bc0b4e89 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -19,7 +19,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Checkout
-        run: git checkout -B refs/heads/sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+        run: git checkout -B sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
 
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"

From 54c6ac77ab6d920eff49e0e9cc7e5a2179815a47 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:26:59 -0400
Subject: [PATCH 089/453] fix

---
 .github/workflows/docs-preview-create.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index c8bc0b4e89..889b26f278 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -4,6 +4,9 @@ on:
   repository_dispatch:
     types: [docs-preview-create]
 
+env:
+  BRANCH: sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+
 jobs:
   Sync:
     runs-on: ubuntu-latest
@@ -19,7 +22,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Checkout
-        run: git checkout -B sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+        run: git switch -c ${{ env.BRANCH }} || git switch ${{ env.BRANCH }}
 
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"
@@ -30,4 +33,4 @@ jobs:
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
       - name: Push
-        run: git add -A && git commit -m "sync docs" && git push -u origin sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}

From 43bd322f72eece83b8ddb6d2ea84cd0938ab34a3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:33:22 -0400
Subject: [PATCH 090/453] try this

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 889b26f278..0b54dfc17a 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -22,7 +22,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Checkout
-        run: git switch -c ${{ env.BRANCH }} || git switch ${{ env.BRANCH }}
+        run: git fetch origin ${{ env.BRANCH }} && git checkout ${{ env.BRANCH }} || git checkout -b ${{ env.BRANCH }}
 
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"

From cbc5e9e27e630d1a2180540ce9239ac6f81ea42f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 18:36:55 -0400
Subject: [PATCH 091/453] add docs-preview-delete workflow (#779)

---
 .github/workflows/docs-preview-delete.yml | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .github/workflows/docs-preview-delete.yml

diff --git a/.github/workflows/docs-preview-delete.yml b/.github/workflows/docs-preview-delete.yml
new file mode 100644
index 0000000000..8e2b567f1d
--- /dev/null
+++ b/.github/workflows/docs-preview-delete.yml
@@ -0,0 +1,16 @@
+name: Docs preview delete
+
+on:
+  repository_dispatch:
+    types: [docs-preview-delete]
+
+jobs:
+  Sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Delete branch
+        run: git push origin :sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}

From 2d8617ec148129953c83f8eaa3bc399c53c1739a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:41:08 -0400
Subject: [PATCH 092/453] create comments on PRs with deployment preview links
 (#780)

---
 .github/workflows/docs-preview-create.yml | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 0b54dfc17a..9fed3ca05f 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -33,4 +33,31 @@ jobs:
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
       - name: Push
+        id: push
         run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
+
+      - name: Get preview deployment URL
+        id: url
+        run: echo "SLUG=$(echo ${BRANCH//\//})" >> $GITHUB_ENV
+
+      - name: Find comment
+        id: fc
+        if: steps.push.outcome == 'success'
+        uses: peter-evans/find-comment@v3
+        with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
+          repository: ${{ github.event.client_payload.repo }}
+          issue-number: ${{ github.event.client_payload.pr }}
+          comment-author: 'github-actions[bot]'
+          body-includes: Build output
+
+      - name: Create comment
+        if: steps.fc.outputs.comment-id == ''
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
+          repository: ${{ github.event.client_payload.repo }}
+          issue-number: ${{ github.event.client_payload.pr }}
+          body: |
+            Preview deployment: https://svelte-dev-git-${{ env.SLUG }}-svelte.vercel.app/
+          edit-mode: replace

From f45f3e80392a37a3926adeef8f72a3e4b5004621 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:47:03 -0400
Subject: [PATCH 093/453] test without PAT

---
 .github/workflows/docs-preview-create.yml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 9fed3ca05f..10554c253e 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -45,17 +45,15 @@ jobs:
         if: steps.push.outcome == 'success'
         uses: peter-evans/find-comment@v3
         with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
           comment-author: 'github-actions[bot]'
           body-includes: Build output
 
       - name: Create comment
-        if: steps.fc.outputs.comment-id == ''
+        # if: steps.fc.outputs.comment-id == ''
         uses: peter-evans/create-or-update-comment@v4
         with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
           body: |

From b7a25ef5317983f5bb98c62d9b880e58dd558b47 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:49:42 -0400
Subject: [PATCH 094/453] okay we need the PAT

---
 .github/workflows/docs-preview-create.yml | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 10554c253e..e342fd95db 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -45,17 +45,21 @@ jobs:
         if: steps.push.outcome == 'success'
         uses: peter-evans/find-comment@v3
         with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
           comment-author: 'github-actions[bot]'
           body-includes: Build output
 
       - name: Create comment
-        # if: steps.fc.outputs.comment-id == ''
+        if: steps.fc.outputs.comment-id == ''
         uses: peter-evans/create-or-update-comment@v4
         with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
           body: |
-            Preview deployment: https://svelte-dev-git-${{ env.SLUG }}-svelte.vercel.app/
+            preview: https://svelte-dev-git-${{ env.SLUG }}-svelte.vercel.app/
+
+            _this is an automated message_
           edit-mode: replace

From d74e375e2156fddc068152f079f884e168236b79 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:50:24 -0400
Subject: [PATCH 095/453] tmp

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index e342fd95db..ae64bf1599 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -42,7 +42,7 @@ jobs:
 
       - name: Find comment
         id: fc
-        if: steps.push.outcome == 'success'
+        # if: steps.push.outcome == 'success'
         uses: peter-evans/find-comment@v3
         with:
           token: ${{ secrets.COMMENTER_TOKEN }}

From 5666362d811e305420694c851bba0667067554b8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:58:13 -0400
Subject: [PATCH 096/453] maybe this?

---
 .github/workflows/docs-preview-create.yml | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index ae64bf1599..6643eed946 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -5,12 +5,17 @@ on:
     types: [docs-preview-create]
 
 env:
-  BRANCH: sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+  ID: ${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
 
 jobs:
   Sync:
     runs-on: ubuntu-latest
     steps:
+      - name: Set env vars
+        run: |
+          echo "BRANCH=preview/$ID" >> $GITHUB_ENV
+          echo "SLUG=preview/$(echo ${ID//\//})" >> $GITHUB_ENV
+
       - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
@@ -36,10 +41,6 @@ jobs:
         id: push
         run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
 
-      - name: Get preview deployment URL
-        id: url
-        run: echo "SLUG=$(echo ${BRANCH//\//})" >> $GITHUB_ENV
-
       - name: Find comment
         id: fc
         # if: steps.push.outcome == 'success'

From c49b61dddb602aa82d17eaa1bcf7bccd99908367 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 20:59:47 -0400
Subject: [PATCH 097/453] doh

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 6643eed946..1f7866bfc7 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Set env vars
         run: |
           echo "BRANCH=preview/$ID" >> $GITHUB_ENV
-          echo "SLUG=preview/$(echo ${ID//\//})" >> $GITHUB_ENV
+          echo "SLUG=preview-$(echo ${ID//\//})" >> $GITHUB_ENV
 
       - uses: actions/checkout@v4
         with:

From 781b1d0f60bff4e567b3db4daea5a935a2f966b0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 21:08:28 -0400
Subject: [PATCH 098/453] fix, hopefully

---
 .github/workflows/docs-preview-create.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 1f7866bfc7..9507759114 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -43,14 +43,13 @@ jobs:
 
       - name: Find comment
         id: fc
-        # if: steps.push.outcome == 'success'
         uses: peter-evans/find-comment@v3
         with:
           token: ${{ secrets.COMMENTER_TOKEN }}
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
-          comment-author: 'github-actions[bot]'
-          body-includes: Build output
+          comment-author: 'Rich-Harris' # it's using my personal access token, not sure if there's a way to comment as a bot instead
+          body-includes: _this is an automated message_
 
       - name: Create comment
         if: steps.fc.outputs.comment-id == ''

From 37fa59ab0fd2b5b3a451bce7391b98a9335d6fef Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 21:46:11 -0400
Subject: [PATCH 099/453] shorter branch names

---
 .github/workflows/docs-preview-create.yml | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 9507759114..fcbfab0d57 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -5,17 +5,12 @@ on:
     types: [docs-preview-create]
 
 env:
-  ID: ${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
 
 jobs:
   Sync:
     runs-on: ubuntu-latest
     steps:
-      - name: Set env vars
-        run: |
-          echo "BRANCH=preview/$ID" >> $GITHUB_ENV
-          echo "SLUG=preview-$(echo ${ID//\//})" >> $GITHUB_ENV
-
       - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
@@ -59,7 +54,7 @@ jobs:
           repository: ${{ github.event.client_payload.repo }}
           issue-number: ${{ github.event.client_payload.pr }}
           body: |
-            preview: https://svelte-dev-git-${{ env.SLUG }}-svelte.vercel.app/
+            preview: https://svelte-dev-git-${{ env.BRANCH }}-svelte.vercel.app/
 
             _this is an automated message_
           edit-mode: replace

From 8a57a6c66242661d4535194a52fe76fdc2f5c6bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 22:03:16 -0400
Subject: [PATCH 100/453] add details on docs previews (#783)

---
 .github/workflows/docs-preview-delete.yml   |  5 +-
 apps/svelte.dev/scripts/sync-docs/README.md | 69 +++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-delete.yml b/.github/workflows/docs-preview-delete.yml
index 8e2b567f1d..d9f2a77f4b 100644
--- a/.github/workflows/docs-preview-delete.yml
+++ b/.github/workflows/docs-preview-delete.yml
@@ -4,6 +4,9 @@ on:
   repository_dispatch:
     types: [docs-preview-delete]
 
+env:
+  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+
 jobs:
   Sync:
     runs-on: ubuntu-latest
@@ -13,4 +16,4 @@ jobs:
           token: ${{ secrets.GH_TOKEN }}
 
       - name: Delete branch
-        run: git push origin :sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+        run: git push origin :${{ env.BRANCH }}
diff --git a/apps/svelte.dev/scripts/sync-docs/README.md b/apps/svelte.dev/scripts/sync-docs/README.md
index 3ee19e2469..6bec16cf83 100644
--- a/apps/svelte.dev/scripts/sync-docs/README.md
+++ b/apps/svelte.dev/scripts/sync-docs/README.md
@@ -83,3 +83,72 @@ You will need to add a `SYNC_REQUEST_TOKEN` to the repo. First, create a persona
 - under 'Repository permissions', change 'Contents' to 'Read and write'
 
 Then, go to `https://github.com/<ORG>/<REPO>/settings/secrets/actions`, click 'New repository secret' and paste in your newly generated personal access token.
+
+## Previews
+
+Preview deployments will be created for pull requests to external repos that result in documentation changes. In the external repo, add a `.github/workflows/docs-preview-create-request.yml` workflow...
+
+```yml
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview create request
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-create
+          client-payload: |-
+            {
+              "package": "<YOUR_PACKAGE_NAME>",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }
+```
+
+...and a `.github/workflows/docs-preview-delete-request.yml` workflow:
+
+```yml
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview delete request
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-delete
+          client-payload: |-
+            {
+              "package": "cli",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }
+```
+
+These use the same `SYNC_REQUEST_TOKEN` as above.
+
+Inside _this_ repo, the [`docs-preview-create.yml`](../../../../.github/workflows/docs-preview-create.yml) workflow creates a comment on the PR once the branch has been created, inferring the eventual Vercel preview deployment URL. It uses this repo's `COMMENTER_TOKEN` secret, which is a [personal access token](https://github.com/settings/personal-access-tokens/new) with write permissions on issues and pull requests.

From 6bbd8838e8ec84378c25c4db37b49b7b4536d7dc Mon Sep 17 00:00:00 2001
From: tobasqo <72609099+tobusiek@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:14:49 +0100
Subject: [PATCH 101/453] docs: Fix code typo in `Tutorial: Advanced Svelte
 Advanced transitions Animations` (#778)

fix docs typo
---
 .../05-advanced-transitions/02-animations/index.md            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
index 6c31a4a94b..8e6d78fd75 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done
+	class:done={todo.done}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done
+	class:done={todo.done}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++

From 7fb2f1738e2d95bf17b75a6be8e7f22d9266b341 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:16:04 +0100
Subject: [PATCH 102/453] fix: ensure correct options for Svelte 3/4 (#784)

- pass dom/ssr instead of client/server for `generate`
- don't pass `modernAst`, will crash the whole view with an "unknown option" error
---
 packages/editor/src/lib/compile-worker/worker.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index 06d79f314d..6a82a0a3ea 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -71,12 +71,20 @@ addEventListener('message', async (event) => {
 		let result: CompileResult;
 
 		if (file.name.endsWith('.svelte')) {
-			result = self.svelte.compile(file.contents, {
-				generate: options.generate, // TODO do we need to adjust this for 3/4?
+			const is_svelte_3_or_4 = !self.svelte.compileModule;
+			const compilerOptions: any = {
+				generate: is_svelte_3_or_4
+					? options.generate === 'client'
+						? 'dom'
+						: 'ssr'
+					: options.generate,
 				dev: options.dev,
-				modernAst: options.modernAst,
 				filename: file.name
-			});
+			};
+			if (!is_svelte_3_or_4) {
+				compilerOptions.modernAst = options.modernAst; // else Svelte 3/4 will throw an "unknown option" error
+			}
+			result = self.svelte.compile(file.contents, compilerOptions);
 		} else {
 			result = self.svelte.compileModule(file.contents, {
 				generate: options.generate,

From bd6bcbce8c53154eff92f0dc7518566afb0c4826 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 4 Nov 2024 11:32:53 -0500
Subject: [PATCH 103/453] `.cm-panel` should inherit `color` (#793)

fix #790
---
 packages/editor/src/lib/codemirror.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index e88103d099..32d00e83e0 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -143,6 +143,7 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
+		color: inherit;
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {

From 8d761206efdc90835b55cc5c289a46d39a413646 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 4 Nov 2024 15:02:33 -0500
Subject: [PATCH 104/453] more css tweaks (#765)

* more css tweaks

* tweak background colours

* reduce fg saturation

* bump --sk-fg-4 brightness to meet accessibility guidelines

* use fg-2 for on-this-page

* darker sidebar
---
 .../src/lib/components/SecondaryNav.svelte    |  2 +-
 apps/svelte.dev/src/routes/+page.svelte       |  2 +-
 .../src/routes/_home/Community.svelte         |  4 +--
 apps/svelte.dev/src/routes/blog/+page.svelte  |  2 +-
 .../src/routes/blog/[slug]/+page.svelte       |  7 +---
 .../src/routes/docs/[...path]/+layout.svelte  |  6 +++-
 .../routes/docs/[...path]/OnThisPage.svelte   |  2 +-
 .../routes/tutorial/[...slug]/Output.svelte   |  2 +-
 .../tutorial/[...slug]/OutputRollup.svelte    |  2 +-
 .../src/lib/Output/CompilerOptions.svelte     | 32 +++++++++---------
 packages/repl/src/lib/Repl.svelte             |  1 -
 .../src/lib/components/Checkbox.svelte        |  2 +-
 .../site-kit/src/lib/components/Text.svelte   | 11 ++++---
 .../site-kit/src/lib/docs/DocsContents.svelte |  2 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  6 +++-
 .../src/lib/styles/tokens/colours.css         | 33 ++++++++++---------
 .../src/lib/styles/tokens/typography.css      |  2 +-
 17 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 3d40548042..120b40e99c 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -16,7 +16,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
index 9d54af7af4..334672f692 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -46,7 +46,7 @@
 
 <style>
 	figcaption {
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.home :global {
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index 9173ffee45..1b0382f79a 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -27,10 +27,10 @@
 	figcaption {
 		position: relative;
 		top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		color: var(--sk-fg-4);
+		color: var(--sk-fg-3);
 		text-align: center;
 
 		a {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index e66bb20a18..0252ceaa1d 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -129,7 +129,7 @@
 				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index e4813de625..cf580b0eaf 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -45,11 +45,6 @@
 				img {
 					max-width: 100%;
 				}
-
-				figcaption {
-					color: var(--sk-fg-4);
-					font: var(--sk-font-body-small);
-				}
 			}
 
 			video {
@@ -65,7 +60,7 @@
 				font: var(--sk-font-body-small);
 
 				p {
-					color: var(--sk-fg-4);
+					color: inherit;
 					font: inherit;
 				}
 			}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index 4c3eed50f3..2390db9e54 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -40,8 +40,12 @@
 	}
 
 	.toc-container {
-		background: var(--sk-bg-3);
+		background: var(--sk-bg-2);
 		display: none;
+
+		:root.dark & {
+			background: var(--sk-bg-0);
+		}
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index c48e55108f..19977cd786 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -74,7 +74,7 @@
 			}
 
 			a {
-				color: var(--sk-fg-3);
+				color: var(--sk-fg-2);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index e3db87fee1..872b901123 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -191,7 +191,7 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index e341b94c8c..44e03789ae 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -76,7 +76,7 @@
 		font: var(--sk-font-mono);
 		padding: 1rem;
 		background: var(--sk-bg-1);
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index fa41bbb873..b67f20f4dd 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -27,12 +27,14 @@
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox
-			checked={workspace.compiler_options.dev!}
-			onchange={(dev) => {
-				workspace.update_compiler_options({ dev });
-			}}
-		/>
+		<span style="font-size: 1.2rem">
+			<Checkbox
+				checked={workspace.compiler_options.dev!}
+				onchange={(dev) => {
+					workspace.update_compiler_options({ dev });
+				}}
+			/>
+		</span>
 		<span class="boolean">{workspace.compiler_options.dev}</span>
 	</label>
 	});
@@ -94,31 +96,27 @@
 
 	input[type='radio'] + label:before {
 		content: '';
-		background: #eee;
 		display: block;
 		box-sizing: border-box;
 		float: left;
-		width: 15px;
-		height: 15px;
+		width: 1.6rem;
+		height: 1.6rem;
 		margin-left: -21px;
 		margin-top: 4px;
 		/* vertical-align: top; */
 		cursor: pointer;
 		text-align: center;
-		transition: box-shadow 0.1s ease-out;
-	}
-
-	input[type='radio'] + label:before {
+		transition: box-shadow 0.05s ease-out;
 		background-color: var(--sk-fg-4);
 		border-radius: 100%;
-		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.5em var(--sk-bg-2);
+		border: 1px solid var(--sk-border);
 	}
 
 	input[type='radio']:checked + label:before {
 		background-color: var(--sk-fg-accent);
-		box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.15em var(--sk-bg-2);
+		border: 1px solid var(--sk-fg-accent);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index e0112c14ba..e7e776214b 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -166,7 +166,6 @@
 <div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
-			--color="var(--sk-fg-4)"
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
 			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index 7822a26191..d2e61797ad 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -49,7 +49,7 @@
 		top: 2px;
 		left: 2px;
 		border-radius: 1em;
-		background: white;
+		background: var(--sk-bg-1);
 		box-shadow:
 			0 0px 1px rgba(0, 0, 0, 0.4),
 			0 4px 2px rgba(0, 0, 0, 0.1);
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 40218618e9..2428443720 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -512,14 +512,10 @@
 				display: flex;
 				align-items: center;
 				height: 3rem;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 				font: var(--sk-font-body-small);
 				user-select: none;
 
-				&:hover {
-					color: var(--sk-fg-3);
-				}
-
 				.legacy &::after {
 					position: absolute;
 					display: flex;
@@ -550,5 +546,10 @@
 				margin-bottom: 0;
 			}
 		}
+
+		figcaption {
+			font: var(--sk-font-ui-medium);
+			color: var(--sk-fg-3);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 775935e4b1..86bd2dc2e2 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -58,7 +58,7 @@
 	nav {
 		top: 0;
 		left: 0;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-2);
 		position: relative;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index b1281b74b6..5852493cc1 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -185,7 +185,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -200,6 +200,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 4px;
 			background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 		}
+
+		:root.dark & {
+			background-color: var(--sk-bg-3);
+		}
 	}
 
 	a {
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index 659ff74ec8..bfabccf0f3 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -9,17 +9,17 @@
 	color-scheme: light;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
-	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
-	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) and icons */
-	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
+	--sk-fg-1: hsl(0, 0%, 8%); /* for headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 15%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 40%); /* secondary text (e.g. figcaptions) and icons */
+	--sk-fg-4: hsl(0, 0%, 50%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */
 	--sk-bg-1: hsl(0, 0%, 100%);
-	--sk-bg-2: hsl(0, 0%, 100%);
-	--sk-bg-3: hsl(0, 0%, 99%);
-	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-2: hsl(0, 0%, 99.3%);
+	--sk-bg-3: hsl(0, 0%, 98.2%);
+	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
 
@@ -49,21 +49,22 @@
 	--sk-bg-hue: 220;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(var(--sk-bg-hue), 10%, 90%);
-	--sk-fg-2: hsl(var(--sk-bg-hue), 10%, 80%);
-	--sk-fg-3: hsl(var(--sk-bg-hue), 10%, 65%);
-	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
+	--sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%);
+	--sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%);
+	--sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%);
+	--sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%);
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
 	/* Background colours */
-	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
-	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
-	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
-	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
+	--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */
+	--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
+	--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
+	--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
+	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
 	/* Border colour */
-	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
 
 	/* Syntax highlighting */
 	--shiki-color-text: hsl(45, 7%, 75%);
diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css
index 8aac82de84..d276d5fc3b 100644
--- a/packages/site-kit/src/lib/styles/tokens/typography.css
+++ b/packages/site-kit/src/lib/styles/tokens/typography.css
@@ -25,7 +25,7 @@
 	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
 	--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
 		var(--sk-font-family-body);
-	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body-small)
 		var(--sk-font-family-body);
 	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
 	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);

From e830fe90735b0b55bc87a6c69276a74df649a55c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 4 Nov 2024 16:41:56 -0500
Subject: [PATCH 105/453] use pull_request_target instead of pull_request
 (#795)

---
 apps/svelte.dev/scripts/sync-docs/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/README.md b/apps/svelte.dev/scripts/sync-docs/README.md
index 6bec16cf83..6ccc1b4343 100644
--- a/apps/svelte.dev/scripts/sync-docs/README.md
+++ b/apps/svelte.dev/scripts/sync-docs/README.md
@@ -93,7 +93,7 @@ Preview deployments will be created for pull requests to external repos that res
 name: Docs preview create request
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 
@@ -124,7 +124,7 @@ jobs:
 name: Docs preview delete request
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
     types: [closed]

From 926b033dc9adf268c0b472c042b2e8ca0eb27897 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 04:20:10 +0100
Subject: [PATCH 106/453] feat: allow version to be a `pr-[prnumber]` or
 `commit-[commithash]` (#745)

* feat: allow version to be a `pkg.pr.new` url

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>

* fix: move from full url to `ref:[pr|hash]`

* fix: typescript

* chore: mode tarparser.d.ts

* chore: swap `ref:` for `pr-`

* feat: allow version to be `commit-[commithash]

* feat: show error if fetching the `tar` fails

* fix: lint

* bump tarparser

* DRY out

* fix: only use fetched package json if it's available

* move logic into component

* simplify with regex

* trim down a bit

* fix

* more robust error handling

* separate onstatus from onerror

* simplify with regex

* no need to thunkify

* DRY out

* avoid overloading svelteUrl, just use the verison string directly

* use Promise.withResolvers, simplify error handling

* turns out this code doesn't actually do anything - very old versions are already broken and this doesn't fix them. we can deal with that another time if we want to

* use existing FETCH_CACHE

* tidy up

* remove some unused code

* lint

* ugh

---------

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/src/config.js                 |   1 -
 .../tutorial/adapters/rollup/index.svelte.ts  |   3 +-
 .../(authed)/playground/[id]/+page.server.ts  |   5 +-
 .../(authed)/playground/[id]/+page.svelte     |  21 ++-
 .../playground/[id]/embed/+page.svelte        |  23 ++-
 packages/editor/package.json                  |   3 +-
 .../editor/src/lib/compile-worker/worker.ts   |  79 +++++----
 packages/repl/package.json                    |   1 +
 packages/repl/src/lib/Bundler.ts              |  18 ++-
 packages/repl/src/lib/Repl.svelte             |  14 +-
 .../repl/src/lib/workers/bundler/index.ts     | 150 +++++++++---------
 packages/repl/src/lib/workers/workers.d.ts    |   4 +-
 pnpm-lock.yaml                                |  11 ++
 13 files changed, 181 insertions(+), 152 deletions(-)

diff --git a/apps/svelte.dev/src/config.js b/apps/svelte.dev/src/config.js
index bdf5a5deca..86d210d0c3 100644
--- a/apps/svelte.dev/src/config.js
+++ b/apps/svelte.dev/src/config.js
@@ -1,6 +1,5 @@
 // REPL props
 
-export const svelteUrl = `https://unpkg.com/svelte@4`;
 export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
 	import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
 }';`;
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index f9b868b3ff..2907bbe4f5 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -24,8 +24,7 @@ export async function create(): Promise<Adapter> {
 
 	bundler = new Bundler({
 		packages_url: 'https://unpkg.com/',
-		svelte_url: `https://unpkg.com/svelte`,
-		// svelte_url: `${browser ? location.origin : ''}/svelte`, // TODO think about bringing back main-build for Playground?
+		svelte_version: 'latest',
 		onstatus(val) {
 			if (!done && val === null) {
 				done = true;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
index 6bb2dfbdce..2abc3dbdba 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit';
 import type { Examples } from '../api/examples/all.json/+server.js';
 
-export async function load({ fetch, params, url }) {
+export async function load({ fetch, params }) {
 	const examples_res = fetch('http://github.com/playground/api/examples/all.json').then((r) => r.json());
 	const res = await fetch(`/playground/api/${params.id}.json`);
 
@@ -21,7 +21,6 @@ export async function load({ fetch, params, url }) {
 					title: example.title,
 					slug: example.slug
 				}))
-			})),
-		version: url.searchParams.get('version') || 'latest'
+			}))
 	};
 }
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index a16ef352ab..d11f2522b7 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -4,7 +4,6 @@
 	import type { Gist } from '$lib/db/types';
 	import { Repl } from '@sveltejs/repl';
 	import { theme } from '@sveltejs/site-kit/stores';
-	import { onMount } from 'svelte';
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
@@ -18,15 +17,18 @@
 	let repl = $state() as ReturnType<typeof Repl>;
 	let name = $state(data.gist.name);
 	let modified = $state(false);
-	let version = data.version;
 	let setting_hash: any = null;
 
+	// svelte-ignore non_reactive_update
+	let version = $page.url.searchParams.get('version') || 'latest';
+	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
+
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
 	const can_escape = browser && !$page.url.hash;
 
-	onMount(() => {
-		if (version !== 'local') {
+	if (version !== 'local' && !is_pr_or_commit_version) {
+		$effect(() => {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
@@ -40,8 +42,8 @@
 						replaceState(url, {});
 					}
 				});
-		}
-	});
+		});
+	}
 
 	afterNavigate(() => {
 		name = data.gist.name;
@@ -148,11 +150,6 @@
 		}
 	}
 
-	const svelteUrl =
-		browser && version === 'local'
-			? `${location.origin}/playground/local`
-			: `https://unpkg.com/svelte@${version}`;
-
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>
 
@@ -198,7 +195,7 @@
 		<div style="display: contents" onfocusout={update_hash}>
 			<Repl
 				bind:this={repl}
-				{svelteUrl}
+				svelteVersion={version}
 				{relaxed}
 				{can_escape}
 				injectedJS={mapbox_setup}
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 9ed41e3564..e67c9e5285 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -4,23 +4,27 @@
 	import { theme } from '@sveltejs/site-kit/stores';
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
-	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 
 	let { data } = $props();
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
-	onMount(() => {
-		if (data.version !== 'local') {
-			fetch(`https://unpkg.com/svelte@${data.version}/package.json`)
+	// svelte-ignore non_reactive_update
+	let version = $page.url.searchParams.get('version') || 'latest';
+	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
+
+	if (version !== 'local' && !is_pr_or_commit_version) {
+		$effect(() => {
+			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
 					if (pkg.version !== data.version) {
 						replaceState(`/playground/${data.gist.id}/embed?version=${pkg.version}`, {});
 					}
 				});
-		}
-	});
+		});
+	}
 
 	afterNavigate(() => {
 		repl?.set({
@@ -28,11 +32,6 @@
 		});
 	});
 
-	const svelteUrl =
-		browser && data.version === 'local'
-			? `${location.origin}/playground/local`
-			: `https://unpkg.com/svelte@${data.version}`;
-
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>
 
@@ -48,7 +47,7 @@
 	{#if browser}
 		<Repl
 			bind:this={repl}
-			{svelteUrl}
+			svelteVersion={version}
 			{relaxed}
 			can_escape
 			injectedJS={mapbox_setup}
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 33bc485102..d5fc2e17ab 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -63,6 +63,7 @@
 	"type": "module",
 	"dependencies": {
 		"@lezer/highlight": "^1.2.1",
-		"esm-env": "^1.0.0"
+		"esm-env": "^1.0.0",
+		"tarparser": "^0.0.4"
 	}
 }
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index 6a82a0a3ea..dcd517572a 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -1,5 +1,7 @@
+import { parseTar } from 'tarparser';
 import type { CompileResult } from 'svelte/compiler';
 import type { ExposedCompilerOptions, File } from '../Workspace.svelte';
+import type { FileDescription } from 'tarparser';
 
 // hack for magic-string and Svelte 4 compiler
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -7,35 +9,52 @@ self.window = self;
 
 declare var self: Window & typeof globalThis & { svelte: typeof import('svelte/compiler') };
 
-let inited = false;
-let fulfil_ready: (arg?: never) => void;
-const ready = new Promise((f) => {
-	fulfil_ready = f;
-});
+let inited: PromiseWithResolvers<typeof self.svelte>;
 
-addEventListener('message', async (event) => {
-	if (!inited) {
-		inited = true;
-		const svelte_url = `https://unpkg.com/svelte@${event.data.version}`;
-		const { version } = await fetch(`${svelte_url}/package.json`).then((r) => r.json());
-
-		if (version.startsWith('4.')) {
-			// unpkg doesn't set the correct MIME type for .cjs files
-			// https://github.com/mjackson/unpkg/issues/355
-			const compiler = await fetch(`${svelte_url}/compiler.cjs`).then((r) => r.text());
-			(0, eval)(compiler + '\n//# sourceURL=compiler.cjs@' + version);
-		} else if (version.startsWith('3.')) {
-			const compiler = await fetch(`${svelte_url}/compiler.js`).then((r) => r.text());
-			(0, eval)(compiler + '\n//# sourceURL=compiler.js@' + version);
-		} else {
-			const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
-			(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
+async function init(v: string) {
+	const svelte_url = `https://unpkg.com/svelte@${v}`;
+	const match = /^(?:pr|commit)-(.+)/.exec(v);
+
+	let tarball: FileDescription[] | undefined;
+	let version: string;
+
+	if (match) {
+		const response = await fetch(`https://pkg.pr.new/svelte@${match[1]}`);
+
+		if (!response.ok) {
+			throw new Error('Could not fetch tarball');
 		}
 
-		fulfil_ready();
+		tarball = await parseTar(await response.arrayBuffer());
+
+		const json = tarball.find((file) => file.name === 'package/package.json')!.text;
+		version = JSON.parse(json).version;
+	} else {
+		version = (await fetch(`${svelte_url}/package.json`).then((r) => r.json())).version;
+	}
+
+	const entry = version.startsWith('3.')
+		? 'compiler.js'
+		: version.startsWith('4.')
+			? 'compiler.cjs'
+			: 'compiler/index.js';
+
+	const compiler = tarball
+		? tarball.find((file) => file.name === `package/${entry}`)!.text
+		: await fetch(`${svelte_url}/${entry}`).then((r) => r.text());
+
+	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
+
+	return self.svelte;
+}
+
+addEventListener('message', async (event) => {
+	if (!inited) {
+		inited = Promise.withResolvers();
+		init(event.data.version).then(inited.resolve, inited.reject);
 	}
 
-	await ready;
+	const svelte = await inited.promise;
 
 	const { id, file, options } = event.data as {
 		id: number;
@@ -43,7 +62,7 @@ addEventListener('message', async (event) => {
 		options: ExposedCompilerOptions;
 	};
 
-	if (!file.name.endsWith('.svelte') && !self.svelte.compileModule) {
+	if (!file.name.endsWith('.svelte') && !svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
 			id,
@@ -59,9 +78,9 @@ addEventListener('message', async (event) => {
 
 	let migration = null;
 
-	if (self.svelte.migrate) {
+	if (svelte.migrate) {
 		try {
-			migration = self.svelte.migrate(file.contents, { filename: file.name });
+			migration = svelte.migrate(file.contents, { filename: file.name });
 		} catch (e) {
 			// can this happen?
 		}
@@ -71,7 +90,7 @@ addEventListener('message', async (event) => {
 		let result: CompileResult;
 
 		if (file.name.endsWith('.svelte')) {
-			const is_svelte_3_or_4 = !self.svelte.compileModule;
+			const is_svelte_3_or_4 = !svelte.compileModule;
 			const compilerOptions: any = {
 				generate: is_svelte_3_or_4
 					? options.generate === 'client'
@@ -84,9 +103,9 @@ addEventListener('message', async (event) => {
 			if (!is_svelte_3_or_4) {
 				compilerOptions.modernAst = options.modernAst; // else Svelte 3/4 will throw an "unknown option" error
 			}
-			result = self.svelte.compile(file.contents, compilerOptions);
+			result = svelte.compile(file.contents, compilerOptions);
 		} else {
-			result = self.svelte.compileModule(file.contents, {
+			result = svelte.compileModule(file.contents, {
 				generate: options.generate,
 				dev: options.dev,
 				filename: file.name
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 6d5683f2da..4e3598d590 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -86,6 +86,7 @@
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.0.1",
+		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
 }
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
index 6fbef7eff6..49caae67c7 100644
--- a/packages/repl/src/lib/Bundler.ts
+++ b/packages/repl/src/lib/Bundler.ts
@@ -15,18 +15,20 @@ export default class Bundler {
 
 	constructor({
 		packages_url,
-		svelte_url,
-		onstatus
+		svelte_version,
+		onstatus,
+		onerror
 	}: {
 		packages_url: string;
-		svelte_url: string;
+		svelte_version: string;
 		onstatus: (val: string | null) => void;
+		onerror?: (message: string) => void;
 	}) {
-		this.hash = `${packages_url}:${svelte_url}`;
+		this.hash = `${packages_url}:${svelte_version}`;
 
 		if (!workers.has(this.hash)) {
 			const worker = new Worker();
-			worker.postMessage({ type: 'init', packages_url, svelte_url });
+			worker.postMessage({ type: 'init', packages_url, svelte_version });
 			workers.set(this.hash, worker);
 		}
 
@@ -44,6 +46,11 @@ export default class Bundler {
 					return;
 				}
 
+				if (event.data.type === 'error') {
+					onerror?.(event.data.message);
+					return;
+				}
+
 				onstatus(null);
 				handler(event.data);
 				this.handlers.delete(event.data.uid);
@@ -54,7 +61,6 @@ export default class Bundler {
 	bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
-
 			this.worker.postMessage({
 				uid,
 				type: 'bundle',
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index e7e776214b..65619ad316 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -12,7 +12,7 @@
 
 	interface Props {
 		packagesUrl?: string;
-		svelteUrl?: any;
+		svelteVersion?: string;
 		embedded?: boolean;
 		orientation?: 'columns' | 'rows';
 		relaxed?: boolean;
@@ -27,7 +27,7 @@
 
 	let {
 		packagesUrl = 'https://unpkg.com/',
-		svelteUrl = `${BROWSER ? location.origin : ''}/svelte`,
+		svelteVersion = 'latest',
 		embedded = false,
 		orientation = 'columns',
 		relaxed = false,
@@ -51,7 +51,7 @@
 
 	const workspace = new Workspace([dummy], {
 		initial: 'App.svelte',
-		svelte_version: svelteUrl.split('@')[1],
+		svelte_version: svelteVersion,
 		onupdate() {
 			rebundle();
 			onchange?.();
@@ -113,13 +113,14 @@
 	let width = $state(0);
 	let show_output = $state(false);
 	let status: string | null = $state(null);
+	let runtime_error: Error | null = $state(null);
 	let status_visible = $state(false);
 	let status_timeout: NodeJS.Timeout | undefined = undefined;
 
 	const bundler = BROWSER
 		? new Bundler({
 				packages_url: packagesUrl,
-				svelte_url: svelteUrl,
+				svelte_version: svelteVersion,
 				onstatus: (message) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to
@@ -134,8 +135,10 @@
 						status_visible = false;
 						status_timeout = undefined;
 					}
-
 					status = message;
+				},
+				onerror: (message) => {
+					runtime_error = new Error(message);
 				}
 			})
 		: null;
@@ -188,6 +191,7 @@
 					{injectedCSS}
 					{previewTheme}
 					{workspace}
+					runtimeError={status_visible ? runtime_error : null}
 				/>
 			</section>
 		</SplitPane>
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index e510349fcf..c241fa922d 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -16,6 +16,7 @@ import type { BundleMessageData } from '../workers';
 import type { Warning } from '../../types';
 import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
 import type { File } from 'editor';
+import { parseTar, type FileDescription } from 'tarparser';
 
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -26,38 +27,75 @@ let svelte_url: string;
 let version: string;
 let current_id: number;
 
-let fulfil_ready: (arg?: never) => void;
-const ready = new Promise((f) => {
-	fulfil_ready = f;
-});
+let inited = Promise.withResolvers<typeof svelte>();
+
+async function init(v: string, packages_url: string) {
+	const match = /^(pr|commit)-(.+)/.exec(v);
+
+	let tarball: FileDescription[] | undefined;
+
+	if (match) {
+		const response = await fetch(`https://pkg.pr.new/svelte@${match[2]}`);
+
+		if (!response.ok) {
+			throw new Error(
+				`impossible to fetch the compiler from this ${match[1] === 'pr' ? 'PR' : 'commit'}`
+			);
+		}
+
+		tarball = await parseTar(await response.arrayBuffer());
+
+		const json = tarball.find((file) => file.name === 'package/package.json')!.text;
+		version = JSON.parse(json).version;
+
+		svelte_url = `svelte://svelte@${version}`;
+
+		for (const file of tarball) {
+			const url = `${svelte_url}/${file.name.slice('package/'.length)}`;
+			FETCH_CACHE.set(url, Promise.resolve({ url, body: file.text }));
+		}
+	} else {
+		const response = await fetch(`${packages_url}/svelte@${v}/package.json`);
+		const pkg = await response.json();
+		version = pkg.version;
+		svelte_url = `${packages_url}/svelte@${version}`;
+	}
+
+	console.log(`Using Svelte compiler version ${version}`);
+
+	const entry = version.startsWith('3.')
+		? 'compiler.js'
+		: version.startsWith('4.')
+			? 'compiler.cjs'
+			: 'compiler/index.js';
+
+	const compiler = tarball
+		? tarball.find((file) => file.name === `package/${entry}`)!.text
+		: await fetch(`${svelte_url}/${entry}`).then((r) => r.text());
+
+	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
+
+	return svelte;
+}
 
 self.addEventListener('message', async (event: MessageEvent<BundleMessageData>) => {
 	switch (event.data.type) {
 		case 'init': {
-			({ packages_url, svelte_url } = event.data);
-
-			({ version } = await fetch(`${svelte_url}/package.json`).then((r) => r.json()));
-			console.log(`Using Svelte compiler version ${version}`);
-
-			if (version.startsWith('4.')) {
-				// unpkg doesn't set the correct MIME type for .cjs files
-				// https://github.com/mjackson/unpkg/issues/355
-				const compiler = await fetch(`${svelte_url}/compiler.cjs`).then((r) => r.text());
-				(0, eval)(compiler + '\n//# sourceURL=compiler.cjs@' + version);
-			} else if (version.startsWith('3.')) {
-				const compiler = await fetch(`${svelte_url}/compiler.js`).then((r) => r.text());
-				(0, eval)(compiler + '\n//# sourceURL=compiler.js@' + version);
-			} else {
-				const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
-				(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
-			}
-
-			fulfil_ready();
+			packages_url = event.data.packages_url;
+			init(event.data.svelte_version, packages_url).then(inited.resolve, inited.reject);
 			break;
 		}
 
 		case 'bundle': {
-			await ready;
+			try {
+				await inited.promise;
+			} catch (e) {
+				self.postMessage({
+					type: 'error',
+					uid: event.data.uid,
+					message: `Error loading the compiler: ${(e as Error).message}`
+				});
+			}
 			const { uid, files, options } = event.data;
 
 			if (files.length === 0) return;
@@ -122,29 +160,6 @@ async function follow_redirects(url: string, uid: number) {
 	return res?.url;
 }
 
-function compare_to_version(major: number, minor: number, patch: number): number {
-	const v = svelte.VERSION.match(/^(\d+)\.(\d+)\.(\d+)/);
-
-	// @ts-ignore
-	return +v[1] - major || +v[2] - minor || +v[3] - patch;
-}
-
-function is_v4() {
-	return compare_to_version(4, 0, 0) >= 0;
-}
-
-function is_v5() {
-	return compare_to_version(5, 0, 0) >= 0;
-}
-
-function is_legacy_package_structure() {
-	return compare_to_version(3, 4, 4) <= 0;
-}
-
-function has_loopGuardTimeout_feature() {
-	return compare_to_version(3, 14, 0) >= 0;
-}
-
 async function resolve_from_pkg(
 	pkg: Record<string, unknown>,
 	subpath: string,
@@ -236,26 +251,6 @@ async function get_bundle(
 
 			if (importee === 'esm-env') return importee;
 
-			const v5 = is_v5();
-			const v4 = !v5 && is_v4();
-
-			if (!v5) {
-				// importing from Svelte
-				if (importee === `svelte`)
-					return v4 ? `${svelte_url}/src/runtime/index.js` : `${svelte_url}/index.mjs`;
-
-				if (importee.startsWith(`svelte/`)) {
-					const sub_path = importee.slice(7);
-					if (v4) {
-						return `${svelte_url}/src/runtime/${sub_path}/index.js`;
-					}
-
-					return is_legacy_package_structure()
-						? `${svelte_url}/${sub_path}.mjs`
-						: `${svelte_url}/${sub_path}/index.mjs`;
-				}
-			}
-
 			if (importee === shared_file) return importee;
 
 			// importing from another file in REPL
@@ -280,7 +275,6 @@ async function get_bundle(
 					// relative import in an external file
 					const url = new URL(importee, importer).href;
 					self.postMessage({ type: 'status', uid, message: `resolving ${url}` });
-
 					return await follow_redirects(url, uid);
 				}
 			} else {
@@ -293,7 +287,10 @@ async function get_bundle(
 				}
 
 				const pkg_name = match[1];
-				const version = pkg_name === 'svelte' ? svelte.VERSION : match[2] ?? 'latest';
+				const pkg_url =
+					pkg_name === 'svelte'
+						? `${svelte_url}/package.json`
+						: `${packages_url}/${pkg_name}/package.json`;
 				const subpath = `.${match[3] ?? ''}`;
 
 				// if this was imported by one of our files, add it to the `imports` set
@@ -301,19 +298,16 @@ async function get_bundle(
 					imports.add(pkg_name);
 				}
 
-				const fetch_package_info = async () => {
+				const fetch_package_info = async (pkg_url: string) => {
 					try {
-						const pkg_url = await follow_redirects(
-							`${packages_url}/${pkg_name}@${version}/package.json`,
-							uid
-						);
+						const redirected = await follow_redirects(pkg_url, uid);
 
-						if (!pkg_url) throw new Error();
+						if (!redirected) throw new Error();
 
-						const pkg_json = (await fetch_if_uncached(pkg_url, uid))?.body;
+						const pkg_json = (await fetch_if_uncached(redirected, uid))?.body;
 						const pkg = JSON.parse(pkg_json ?? '""');
 
-						const pkg_url_base = pkg_url.replace(/\/package\.json$/, '');
+						const pkg_url_base = redirected.replace(/\/package\.json$/, '');
 
 						return {
 							pkg,
@@ -324,7 +318,7 @@ async function get_bundle(
 					}
 				};
 
-				const { pkg, pkg_url_base } = await fetch_package_info();
+				const { pkg, pkg_url_base } = await fetch_package_info(pkg_url);
 
 				try {
 					const resolved_id = await resolve_from_pkg(pkg, subpath, uid, pkg_url_base);
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index ab0b5d8383..1515b10974 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -50,10 +50,10 @@ export interface MigrateOutput {
 
 export type BundleMessageData = {
 	uid: number;
-	type: 'init' | 'bundle' | 'status';
+	type: 'init' | 'bundle' | 'status' | 'error';
 	message: string;
 	packages_url: string;
-	svelte_url: string;
+	svelte_version: string;
 	files: File[];
 	options: CompileOptions;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c128a2528..a0a8f1af55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -204,6 +204,9 @@ importers:
       esm-env:
         specifier: ^1.0.0
         version: 1.0.0
+      tarparser:
+        specifier: ^0.0.4
+        version: 0.0.4
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
@@ -358,6 +361,9 @@ importers:
       svelte:
         specifier: 5.0.1
         version: 5.0.1
+      tarparser:
+        specifier: ^0.0.4
+        version: 0.0.4
       zimmerframe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -2966,6 +2972,9 @@ packages:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
 
+  tarparser@0.0.4:
+    resolution: {integrity: sha512-H3+VR6ys/N4eRBYbcyKuy4i0lKAxW/tx+wZANTFPfXjHLkz7UDs7V9g0rdGJDsVWYyqnmvmLM7YqWZ7yrtoReA==}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -5941,6 +5950,8 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
+  tarparser@0.0.4: {}
+
   term-size@2.2.1: {}
 
   tiny-glob@0.2.9:

From 7ef01731344749e55c470bb809f867900c5765ee Mon Sep 17 00:00:00 2001
From: Manuel <30698007+manuel3108@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:46:12 +0100
Subject: [PATCH 107/453] docs: add docs for windows symbolic links for
 `sync-docs` command (#799)

chore: add docs for windows symbolic links for `sync-docs` command
---
 apps/svelte.dev/scripts/sync-docs/README.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/README.md b/apps/svelte.dev/scripts/sync-docs/README.md
index 6ccc1b4343..73ad236d0f 100644
--- a/apps/svelte.dev/scripts/sync-docs/README.md
+++ b/apps/svelte.dev/scripts/sync-docs/README.md
@@ -15,7 +15,14 @@ ln -s /path/to/wherever/you/cloned/sveltejs/kit repos/kit
 ln -s /path/to/wherever/you/cloned/sveltejs/cli repos/cli
 ```
 
-I have no idea what the equivalent Windows command would be.
+For windows powershell (requires administrator privileges):
+
+```bash
+cd apps/svelte.dev
+New-Item -Path .\repos\svelte -ItemType SymbolicLink -Value /path/to/wherever/you/cloned/sveltejs/svelte
+New-Item -Path .\repos\kit -ItemType SymbolicLink -Value /path/to/wherever/you/cloned/sveltejs/kit
+New-Item -Path .\repos\cli -ItemType SymbolicLink -Value /path/to/wherever/you/cloned/sveltejs/cli
+```
 
 ## Syncing
 

From bb848fdf8b2e0175b9052c5955af3998bc959d27 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 12:51:20 -0500
Subject: [PATCH 108/453] fix console styling (#800)

* fix some of the more egregious styling issues in the console

* fix more stuff
---
 .../repl/src/lib/Output/console/Console.svelte     | 14 +++++++++++++-
 .../repl/src/lib/Output/console/ConsoleLine.svelte |  7 ++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index 1c80401e8e..cc9471eb29 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -37,8 +37,10 @@
 		--warning-border: rgb(242, 232, 163);
 		--json-tree-string-color: var(--shiki-token-string);
 		--json-tree-font-family: var(--sk-font-family-mono);
+		--json-tree-font-size: 1.2rem;
+		--json-tree-li-line-height: 1.5;
 
-		:global(.dark) & {
+		:root.dark & {
 			--error-fg: rgb(235, 78, 109);
 			--error-bg: rgb(71, 48, 54);
 			--error-border: rgb(109, 65, 76);
@@ -59,5 +61,15 @@
 			--json-tree-operator-color: #e8eaed;
 			--json-tree-regex-color: #6cd1c7;
 		}
+
+		:global {
+			p,
+			ol,
+			ul {
+				font: var(--json-tree-font-family);
+				font-size: var(--json-tree-font-size);
+				line-height: 1.5;
+			}
+		}
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index a9d2c4730f..d5fe669cf5 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -202,7 +202,7 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		align-items: center;
+		align-items: start;
 	}
 
 	.log.expandable {
@@ -221,6 +221,7 @@
 		font-size: 1.2rem;
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
+		line-height: 1.5;
 
 		.location {
 			position: relative;
@@ -271,11 +272,11 @@
 		font-size: 0.9rem;
 		transition: 150ms;
 		transform-origin: 50% 50%;
-		transform: translateY(-1px);
+		transform: translateY(2px);
 	}
 
 	.arrow.expand {
-		transform: translateY(0px) rotateZ(90deg);
+		transform: translateY(2px) rotateZ(90deg);
 	}
 
 	.styled {

From e6c8e450dbf348d4dd9d2c37d457b4b1ceec20cc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:55:12 -0500
Subject: [PATCH 109/453] Sync `kit` docs (#802)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md       | 6 +++---
 apps/svelte.dev/content/docs/kit/98-reference/54-types.md   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 863d719093..6b1077b2ce 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -976,7 +976,7 @@ type Handle = (input: {
 
 ## HandleClientError
 
-The client-side [`handleError`](https://svelte.dev/docs/kit/hooks#shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.
+The client-side [`handleError`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.
 
 If an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.
 Make sure that this function _never_ throws an error.
@@ -996,7 +996,7 @@ type HandleClientError = (input: {
 
 ## HandleFetch
 
-The [`handleFetch`](https://svelte.dev/docs/kit/hooks#server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering)
+The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering)
 
 <div class="ts-block">
 
@@ -1012,7 +1012,7 @@ type HandleFetch = (input: {
 
 ## HandleServerError
 
-The server-side [`handleError`](https://svelte.dev/docs/kit/hooks#shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.
+The server-side [`handleError`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.
 
 If an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.
 Make sure that this function _never_ throws an error.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index 7dc647734d..a690e97eee 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -213,7 +213,7 @@ interface PageState {}
 
 ## Platform
 
-If your adapter provides [platform-specific context](https://svelte.dev/docs/kit/adapters#platform-specific-context) via `event.platform`, you can specify it here.
+If your adapter provides [platform-specific context](https://svelte.dev/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.
 
 <div class="ts-block">
 

From 8a70bbfc72f867d1d9081e8466bb557346b92b85 Mon Sep 17 00:00:00 2001
From: Manuel <30698007+manuel3108@users.noreply.github.com>
Date: Tue, 5 Nov 2024 19:56:16 +0100
Subject: [PATCH 110/453] chore: print correct packages in `watching for
 changes` message (#801)

---
 apps/svelte.dev/scripts/sync-docs/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 44b6d3486f..56cfd864ca 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -219,5 +219,5 @@ if (parsed.values.watch) {
 			});
 	}
 
-	console.log(`\nwatching for changes in ${parsed.positionals.join(', ')}`);
+	console.log(`\nwatching for changes in ${filtered.map((pkg) => pkg.name).join(', ')}`);
 }

From d983184061447f5839d8481ec61e1dbd41d2b26e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:25:44 -0500
Subject: [PATCH 111/453] Sync `kit` docs (#803)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/50-configuration.md           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 5784b7b36e..4c316a3ed0 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -555,7 +555,7 @@ params?: string;
 
 </div>
 
-a directory containing [parameter matchers](https://svelte.dev/docs/kit/advanced-routing#matching)
+a directory containing [parameter matchers](https://svelte.dev/docs/kit/advanced-routing#Matching)
 
 </div>
 </div>

From db583c6cc5a6bb6666f15fb99a794e28d87023ec Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 14:48:27 -0500
Subject: [PATCH 112/453] change sync branch names (#806)

---
 .github/workflows/sync-docs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 01bd5df484..4c6ba04953 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -25,5 +25,5 @@ jobs:
           commit-message: sync ${{ github.event.client_payload.package }} docs
           title: Sync `${{ github.event.client_payload.package }}` docs
           body: This is an automated pull request. See the [README](../tree/main/apps/svelte.dev/scripts/sync-docs/README.md) for more information
-          branch: sync/${{ github.event.client_payload.package }}
+          branch: sync-${{ github.event.client_payload.package }}
           base: main

From bd61e59291b92350d8a4af43264c51dadf3e7568 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:59:45 -0500
Subject: [PATCH 113/453] Sync `svelte` docs (#807)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/11-bind.md   |  2 ++
 .../05-special-elements/05-svelte-element.md    |  2 ++
 .../docs/svelte/07-misc/03-typescript.md        | 17 ++++++++++++++++-
 .../svelte/07-misc/07-v5-migration-guide.md     |  7 ++++---
 .../svelte/98-reference/21-svelte-compiler.md   |  2 +-
 .../svelte/98-reference/21-svelte-transition.md |  2 +-
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 4fe3e7c4a8..7dd03a6b04 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -223,6 +223,8 @@ All visible elements have the following readonly bindings, measured with a `Resi
 </div>
 ```
 
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+
 ## bind:this
 
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md
index 17ce06799c..ef7dc32066 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md
@@ -29,3 +29,5 @@ Svelte tries its best to infer the correct namespace from the element's surround
 ```svelte
 <svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
 ```
+
+`this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
index 525ba51d2f..5e16382187 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -195,7 +195,9 @@ Using it together with dynamic components to restrict what kinds of component ca
 <DynamicComponent prop="foo" />
 ```
 
-Closely related to the `Component` type is the `ComponentProps` type which extracts the properties a component expects.
+> [!LEGACY] In Svelte 4, components were of type `SvelteComponent`
+
+To extract the properties from a component, use `ComponentProps`.
 
 ```ts
 import type { Component, ComponentProps } from 'svelte';
@@ -211,6 +213,19 @@ function withProps<TComponent extends Component<any>>(
 withProps(MyComponent, { foo: 'bar' });
 ```
 
+To declare that a variable expects the constructor or instance type of a component:
+
+```svelte
+<script lang="ts">
+	import MyComponent from './MyComponent.svelte';
+
+	let componentConstructor: typeof MyComponent = MyComponent;
+	let componentInstance: MyComponent;
+</script>
+
+<MyComponent bind:this={componentInstance} />
+```
+
 ## Enhancing built-in DOM types
 
 Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 093ec5b86b..4ebfb5f905 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -36,7 +36,7 @@ In Svelte 4, a `$:` statement at the top level of a component could be used to d
 </script>
 ```
 
-As with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getCount()`.
+As with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getDouble()`.
 
 A `$:` statement could also be used to create side effects. In Svelte 5, this is achieved using the `$effect` rune:
 
@@ -599,13 +599,14 @@ To declare that a component of a certain type is required:
 
 ```svelte
 <script lang="ts">
-	import type { Component } from 'svelte';
+	import type { ---SvelteComponent--- +++Component+++ } from 'svelte';
 	import {
 		ComponentA,
 		ComponentB
 	} from 'component-library';
 
-	let component: Component<{ foo: string }> = $state(
+	---let component: typeof SvelteComponent<{ foo: string }>---
+	+++let component: Component<{ foo: string }>+++ = $state(
 		Math.random() ? ComponentA : ComponentB
 	);
 </script>
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index cf84d267d5..476fe2f031 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -701,7 +701,7 @@ preserveComments?: boolean;
 
 </div>
 
-If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
+If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
 
 </div>
 </div>
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
index 98f373ab66..ee626f94ca 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
@@ -42,7 +42,7 @@ function blur(
 
 ## crossfade
 
-The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 <div class="ts-block">
 

From 6f371091bbe52697c40bbaf7d54ec0c9473a1d47 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 15:10:37 -0500
Subject: [PATCH 114/453] Fix links (#804)

* bump svelte/kit

* configure prerender.origin

* bump

* fix links in blog posts

* shrug
---
 ...12-01-whats-new-in-svelte-december-2020.md |   2 +-
 ...21-03-01-whats-new-in-svelte-march-2021.md |   4 +-
 ...-01-13-accelerating-sveltes-development.md |   2 +-
 ...02-01-whats-new-in-svelte-february-2022.md |   4 +-
 ...2022-05-01-whats-new-in-svelte-may-2022.md |   2 +-
 ...022-06-01-whats-new-in-svelte-june-2022.md |   4 +-
 ...023-02-21-streaming-snapshots-sveltekit.md |   2 +-
 ...23-04-01-whats-new-in-svelte-april-2023.md |  12 +-
 ...023-07-01-whats-new-in-svelte-july-2023.md |   2 +-
 ...3-08-01-whats-new-in-svelte-august-2023.md |   2 +-
 ...11-01-whats-new-in-svelte-november-2024.md |   4 +-
 apps/svelte.dev/package.json                  |   4 +-
 .../playground/[id]/AppControls.svelte        |   2 +
 apps/svelte.dev/svelte.config.js              |   2 +
 packages/editor/package.json                  |   4 +-
 packages/repl/package.json                    |   4 +-
 packages/site-kit/package.json                |   4 +-
 pnpm-lock.yaml                                | 349 ++++++------------
 18 files changed, 151 insertions(+), 258 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
index 0da3abf848..5f8442fbe4 100644
--- a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -10,7 +10,7 @@ It's the last "What's new in Svelte" of the year and there's lots to celebrate!
 ## New features & impactful bug fixes
 
 1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
-2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#run-time-svelte-hascontext))
+2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://v4.svelte.dev/docs#run-time-svelte-hascontext))
 3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
 4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
 5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**)
diff --git a/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
index ef270dab5a..b4d4449d64 100644
--- a/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ b/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -11,13 +11,13 @@ Let's dive into the news 🐬
 
 ## What's new in `sveltejs/svelte`
 
-- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
+- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://v4.svelte.dev/docs#run-time-server-side-component-api))
 - Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
 - The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
 - Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
 - Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
 - Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
-- A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
+- A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://v4.svelte.dev/docs#compile-time-svelte-compile))
 - Continued improvement to TypeScript definitions
 
 For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
diff --git a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
index b3805bf3d1..bd2f092ae8 100644
--- a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -41,7 +41,7 @@ We’ve also been working closely with the [Vite](https://vitejs.dev) team to ir
 
 ## A growing community
 
-[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#What-happened-at-Svelte-Summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
 
 Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement. The initial ambassadors in alphabetical order are:
 
diff --git a/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
index c7517d2b7f..f5f56201b5 100644
--- a/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
+++ b/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
@@ -11,8 +11,8 @@ Let's take a look...
 
 ## Highlights from the Svelte changelog
 
-- **3.45.0** brought a [new a11y warning `a11y-no-redundant-roles`](https://svelte.dev/docs#accessibility-warnings-a11y-no-redundant-roles), destructuring and caching fixes
-- **3.46.0** added the much requested [`{@const}` tag](https://svelte.dev/docs#template-syntax-const) and [`style:` directive](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+- **3.45.0** brought a [new a11y warning `a11y-no-redundant-roles`](https://v4.svelte.dev/docs#accessibility-warnings-a11y-no-redundant-roles), destructuring and caching fixes
+- **3.46.0** added the much requested [`{@const}` tag](https://v4.svelte.dev/docs#template-syntax-const) and [`style:` directive](https://v4.svelte.dev/docs#template-syntax-element-directives-style-property)
 - Check out **3.46.1 - 3.46.3** for fixes to the `{@const}` tag and `style:` directive, along with a number of fixes to animations
 - [AST output is now available in the Svelte REPL](https://svelte.dev/repl/hello-world)
 
diff --git a/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md b/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
index 179e6aa658..a24aa0b554 100644
--- a/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
+++ b/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
@@ -9,7 +9,7 @@ With yesterday's Svelte Summit behind us, we've got a lot of news to share! Chec
 
 ## What's new in Svelte
 
-- The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](/tutorial/svelte/svelte-element) for more info (**3.47.0**)!
+- The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://v4.svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](/tutorial/svelte/svelte-element) for more info (**3.47.0**)!
 
 ## Language Tools updates
 
diff --git a/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
index b78a7ad962..17c270f359 100644
--- a/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
+++ b/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -11,8 +11,8 @@ Let's dive in!
 
 ## What's new in Svelte
 
-- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
-- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
+- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://v4.svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
+- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://v4.svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
 - Lots of bug fixes across `<svelte:element>`, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
 
 ## What's new in SvelteKit
diff --git a/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md b/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
index 5d4089a01c..10081a7a01 100644
--- a/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ b/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
@@ -29,7 +29,7 @@ export const load: PageServerLoad = () => {
 };
 ```
 
-SvelteKit will automatically await the `fetchPost` call before it starts rendering the page, since it’s at the top level. However, it won’t wait for the nested `fetchComments` call to complete – the page will render and `data.streamed.comments` will be a promise that will resolve as the request completes. We can show a loading state in the corresponding `+page.svelte` using Svelte’s [await block](https://svelte.dev/docs#template-syntax-await):
+SvelteKit will automatically await the `fetchPost` call before it starts rendering the page, since it’s at the top level. However, it won’t wait for the nested `fetchComments` call to complete – the page will render and `data.streamed.comments` will be a promise that will resolve as the request completes. We can show a loading state in the corresponding `+page.svelte` using Svelte’s [await block](/docs/svelte/await):
 
 ```svelte
 <script lang="ts">
diff --git a/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md b/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
index 3bcd5bfb4a..0233a58a0d 100644
--- a/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
+++ b/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
@@ -16,18 +16,18 @@ Now let's jump into this month's changes...
 ## What's new in Svelte
 
 - A bunch of new features are now available as of **3.56.0**!
-  - Add `|stopImmediatePropagation` event modifier for `on:eventname` ([#5085](https://github.com/sveltejs/svelte/issues/5085), [Docs](https://svelte.dev/docs#template-syntax-element-directives-on-eventname))
-  - Add `axis` parameter to `slide` transition ([#6182](https://github.com/sveltejs/svelte/issues/6182), [Docs](https://svelte.dev/docs#run-time-svelte-transition-slide))
-  - Add `readonly` utility to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518), [Docs](https://svelte.dev/docs#run-time-svelte-store-writable))
-  - Add `readyState` binding for media elements ([#6666](https://github.com/sveltejs/svelte/issues/6666), [Docs](https://svelte.dev/docs#template-syntax-element-directives-bind-property-media-element-bindings))
-  - Add `naturalWidth` and `naturalHeight` bindings to images ([#7771](https://github.com/sveltejs/svelte/issues/7771), [Docs](https://svelte.dev/docs#template-syntax-element-directives-bind-property-image-element-bindings))
+  - Add `|stopImmediatePropagation` event modifier for `on:eventname` ([#5085](https://github.com/sveltejs/svelte/issues/5085), [Docs](https://v4.svelte.dev/docs#template-syntax-element-directives-on-eventname))
+  - Add `axis` parameter to `slide` transition ([#6182](https://github.com/sveltejs/svelte/issues/6182), [Docs](https://v4.svelte.dev/docs#run-time-svelte-transition-slide))
+  - Add `readonly` utility to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518), [Docs](https://v4.svelte.dev/docs#run-time-svelte-store-writable))
+  - Add `readyState` binding for media elements ([#6666](https://github.com/sveltejs/svelte/issues/6666), [Docs](https://v4.svelte.dev/docs#template-syntax-element-directives-bind-property-media-element-bindings))
+  - Add `naturalWidth` and `naturalHeight` bindings to images ([#7771](https://github.com/sveltejs/svelte/issues/7771), [Docs](https://v4.svelte.dev/docs#template-syntax-element-directives-bind-property-image-element-bindings))
 - Support `<!-- svelte-ignore ... -->` on components ([#8082](https://github.com/sveltejs/svelte/issues/8082))
 - Inputs in a `bind:group` will clear when their value is set to `undefined` (**3.56.0**, [#8214](https://github.com/sveltejs/svelte/issues/8214))
 - `<input>` values will now persist when swapping elements with spread attributes in an `{#each}` block (**3.56.0**, [#7578](https://github.com/sveltejs/svelte/issues/7578))
 - Better warnings across the board - from `noreferrer` to `aria` rules (**3.56.0**)
 - Add <svelte:document> (**3.57.0**, [#3310](https://github.com/sveltejs/svelte/issues/3310))
 - The `style:` directive will now take precedence over a `style=` attribute (**3.57.0**, [#7475](https://github.com/sveltejs/svelte/issues/7475))
-- CSS units are now supported in the `fly` and `blur` transitions (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](https://svelte.dev/docs#run-time-svelte-transition))
+- CSS units are now supported in the `fly` and `blur` transitions (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](https://v4.svelte.dev/docs#run-time-svelte-transition))
 
 For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
 
diff --git a/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md b/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
index 28ef782f34..e67216b6ed 100644
--- a/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
+++ b/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
@@ -11,7 +11,7 @@ Svelte 4 is out and folks have been building! There's a bunch of new showcases,
 
 The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.
 
-If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details.
+If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](/docs/svelte/v4-migration-guide) for all the details.
 
 For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
 
diff --git a/apps/svelte.dev/content/blog/2023-08-01-whats-new-in-svelte-august-2023.md b/apps/svelte.dev/content/blog/2023-08-01-whats-new-in-svelte-august-2023.md
index 17eceae4c8..30653b960b 100644
--- a/apps/svelte.dev/content/blog/2023-08-01-whats-new-in-svelte-august-2023.md
+++ b/apps/svelte.dev/content/blog/2023-08-01-whats-new-in-svelte-august-2023.md
@@ -13,7 +13,7 @@ More on all that down below...
 
 There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
 
-The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
+The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](/docs/svelte/custom-elements) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
 
 In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).
 
diff --git a/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
index a0d22df5a5..7d70021378 100644
--- a/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
+++ b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
@@ -13,12 +13,12 @@ Since the release of Svelte 5, there's already been one minor version to introdu
 
 ## What's new in Svelte
 
-If you've only recently [migrated to Svelte 5](https://svelte.dev/docs/svelte/v5-migration-guide), check out the last few months of updates for all the features that have gone into this release. For this month, you'll see some marked `-next.XXX`. These changes were in the 5.0 release.
+If you've only recently [migrated to Svelte 5](/docs/svelte/v5-migration-guide), check out the last few months of updates for all the features that have gone into this release. For this month, you'll see some marked `-next.XXX`. These changes were in the 5.0 release.
 
 - Snippets can now be used to fill slots (**5.0.0-next.262**, [#13427](https://github.com/sveltejs/svelte/pull/13427))
 - `hidden until-found` and `beforematch` are now available on DOM elements (**5.0.0-next.266**, [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#using_until-found), [#13612](https://github.com/sveltejs/svelte/pull/13612))
 - **Breaking:** State mutations are not allowed in logic block expressions (**5.0.0-next.269**, [#13625](https://github.com/sveltejs/svelte/pull/13625))
-- `getContext()` is now allowed within `$derived` runes (**5.1.0**, [Docs](https://svelte.dev/docs/svelte/derived), [#13830](https://github.com/sveltejs/svelte/pull/13830))
+- `getContext()` is now allowed within `$derived` runes (**5.1.0**, [Docs](/docs/svelte/$derived), [#13830](https://github.com/sveltejs/svelte/pull/13830))
 
 To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).
 
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 4d081b6970..ed7509e546 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -52,7 +52,7 @@
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.4.3",
 		"@sveltejs/enhanced-img": "^0.3.4",
-		"@sveltejs/kit": "^2.7.0",
+		"@sveltejs/kit": "^2.7.7",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
 		"@types/cookie": "^0.6.0",
@@ -71,7 +71,7 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "5.0.0",
+		"svelte": "5.1.10",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^5.1.4",
 		"tiny-glob": "^0.2.9",
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 768e2f6087..7a894ffc35 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -10,6 +10,7 @@
 	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import type { File } from 'editor';
+	import type { Repl } from '@sveltejs/repl';
 
 	interface Props {
 		examples: Array<{ title: string; examples: any[] }>;
@@ -169,6 +170,7 @@
 			// because otherwise we'll read `select.value` and re-run this
 			// when we navigate, which we don't want
 			untrack(() => {
+				// @ts-ignore not sure why this is erroring
 				select.value = '';
 			});
 		}
diff --git a/apps/svelte.dev/svelte.config.js b/apps/svelte.dev/svelte.config.js
index 63068c76be..c32bb82b4e 100644
--- a/apps/svelte.dev/svelte.config.js
+++ b/apps/svelte.dev/svelte.config.js
@@ -11,6 +11,8 @@ const config = {
 		inlineStyleThreshold: 1000,
 
 		prerender: {
+			origin: 'https://svelte.dev/',
+
 			handleMissingId(warning) {
 				if (warning.id.startsWith('H4sIA')) {
 					// playground link — do nothing
diff --git a/packages/editor/package.json b/packages/editor/package.json
index d5fc2e17ab..1d237a0223 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -46,7 +46,7 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.7.7",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/repl": "workspace:*",
 		"@sveltejs/site-kit": "workspace:*",
@@ -55,7 +55,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.2.0",
-		"svelte": "^5.0.1",
+		"svelte": "^5.1.10",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 4e3598d590..c8c5d20efd 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -49,7 +49,7 @@
 	"devDependencies": {
 		"@lezer/common": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.6.3",
+		"@sveltejs/kit": "^2.7.7",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
@@ -85,7 +85,7 @@
 		"esrap": "^1.2.2",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.0.1",
+		"svelte": "5.1.10",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index e1906aed66..97c214c74f 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -46,14 +46,14 @@
 		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.6.3",
+		"@sveltejs/kit": "^2.7.7",
 		"@types/node": "^20.12.11",
 		"flexsearch": "^0.7.43",
 		"magic-string": "^0.30.11",
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
-		"svelte": "5.0.0-next.269",
+		"svelte": "5.1.10",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0a8f1af55..d81bf96455 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.0.0)
+        version: 1.1.3(svelte@5.1.10)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)
+        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -113,19 +113,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
-        version: 0.3.4(rollup@4.21.2)(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.3.4(rollup@4.21.2)(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.7.0
-        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.7.7
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0-next.6
-        version: 4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -164,7 +164,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.0.0)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -172,14 +172,14 @@ importers:
         specifier: ^0.3.2
         version: 0.3.2
       svelte:
-        specifier: 5.0.0
-        version: 5.0.0
+        specifier: 5.1.10
+        version: 5.1.10
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.0.0)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^5.1.4
-        version: 5.1.4(postcss@8.4.45)(svelte@5.0.0)(typescript@5.5.4)
+        version: 5.1.4(postcss@8.4.45)(svelte@5.1.10)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -246,13 +246,13 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.0.0
-        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.7.7
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.0.1)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.1.10)(typescript@5.5.4)
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../repl
@@ -261,7 +261,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -270,16 +270,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.2.4(prettier@3.3.2)(svelte@5.0.1)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
       publint:
         specifier: ^0.2.0
         version: 0.2.11
       svelte:
-        specifier: ^5.0.1
-        version: 5.0.1
+        specifier: ^5.1.10
+        version: 5.1.10
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.0.1)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -330,7 +330,7 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.0.1)
+        version: 1.1.3(svelte@5.1.10)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -339,7 +339,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
         specifier: ^2.2.0
-        version: 2.2.0(svelte@5.0.1)
+        version: 2.2.0(svelte@5.1.10)
       acorn:
         specifier: ^8.11.3
         version: 8.12.1
@@ -359,8 +359,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: 5.0.1
-        version: 5.0.1
+        specifier: 5.1.10
+        version: 5.1.10
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -373,16 +373,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.6.3
-        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.7.7
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.0.1)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.1.10)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -391,13 +391,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.0.1)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
       publint:
         specifier: ^0.1.9
         version: 0.1.16
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.0.1)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -472,11 +472,11 @@ importers:
         version: 1.22.0
       svelte-persisted-store:
         specifier: ^0.9.2
-        version: 0.9.4(svelte@5.0.0-next.269)
+        version: 0.9.4(svelte@5.1.10)
     devDependencies:
       '@sveltejs/kit':
-        specifier: ^2.6.3
-        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.7.7
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -494,13 +494,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.0.0-next.269)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
       svelte:
-        specifier: 5.0.0-next.269
-        version: 5.0.0-next.269
+        specifier: 5.1.10
+        version: 5.1.10
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.0.0-next.269)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -1457,8 +1457,8 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.7.0':
-    resolution: {integrity: sha512-4XyY1SCB/Eyz8E9G7SEBKViysYwVtDftuA7kyQ5bmuFNPWC1KZC4988rMvaJxhH2BbCTsbLPjNOZwiEGXt8/2g==}
+  '@sveltejs/kit@2.7.7':
+    resolution: {integrity: sha512-EvNErTd0QuIUX6SbZecOJQus3cILJR87XyIQXF4kfwWap63/OV58GGTEI47k3ydrFssAWGw4eu3RlB2dmBYETA==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1672,6 +1672,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   adm-zip@0.5.14:
     resolution: {integrity: sha512-DnyqqifT4Jrcvb8USYjp6FHtBpEIz1mnXu6pTRHZ0RL69LbQYiO+0lDFg5+OKA7U29oWSs3a/i8fhn8ZcceIWg==}
     engines: {node: '>=12.0'}
@@ -2796,8 +2801,8 @@ packages:
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
-  set-cookie-parser@2.7.0:
-    resolution: {integrity: sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==}
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
   sharp@0.33.4:
     resolution: {integrity: sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==}
@@ -2823,9 +2828,9 @@ packages:
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
-  sirv@2.0.4:
-    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
-    engines: {node: '>= 10'}
+  sirv@3.0.0:
+    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+    engines: {node: '>=18'}
 
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -2956,16 +2961,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.0.0:
-    resolution: {integrity: sha512-jv2IvTtakG58DqZMo6fY3T6HFmGV4iDQH2lSUyfmCEYaoa+aCNcF+9rERbdDvT4XDF0nQBg6TEoJn0dirED8VQ==}
-    engines: {node: '>=18'}
-
-  svelte@5.0.0-next.269:
-    resolution: {integrity: sha512-TiC0JWP0OwPcJ+z6ysS9UsH6WDplJYsJR+y4ble9fmbW5OYFEQHJrIlktrO23O8p8EPU/olUpKdfIcugR++jbQ==}
-    engines: {node: '>=18'}
-
-  svelte@5.0.1:
-    resolution: {integrity: sha512-tt8fZwbpZ7mgoXvjJLu7dObOPb7Jhj241NxkVD18wyVprhtkjzWerBc+dFMSRHqeoQYByOW4iFI7fXe6TBMj2w==}
+  svelte@5.1.10:
+    resolution: {integrity: sha512-lDR04z/5taV2qhqYt7UXQ3sVuv/FVfbHz4UBQpYP9Xlcv2OV0rw74hkZ7kbdZr3UKLgGdIGxG2UBxtRmgzB2Cg==}
     engines: {node: '>=18'}
 
   tar@6.2.1:
@@ -4119,13 +4116,9 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.0.0)':
+  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.10)':
     dependencies:
-      svelte: 5.0.0
-
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.0.1)':
-    dependencies:
-      svelte: 5.0.1
+      svelte: 5.1.10
 
   '@rollup/browser@4.17.2':
     dependencies:
@@ -4275,55 +4268,37 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
-      svelte: 5.0.0
-      svelte-parse-markup: 0.1.5(svelte@5.0.0)
+      svelte: 5.1.10
+      svelte-parse-markup: 0.1.5(svelte@5.1.10)
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@types/cookie': 0.6.0
-      cookie: 0.6.0
-      devalue: 5.1.1
-      esm-env: 1.0.0
-      import-meta-resolve: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      mrmime: 2.0.0
-      sade: 1.8.1
-      set-cookie-parser: 2.7.0
-      sirv: 2.0.4
-      svelte: 5.0.0-next.269
-      tiny-glob: 0.2.9
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-
-  '@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4333,15 +4308,15 @@ snapshots:
       magic-string: 0.30.12
       mrmime: 2.0.0
       sade: 1.8.1
-      set-cookie-parser: 2.7.0
-      sirv: 2.0.4
-      svelte: 5.0.1
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.0
+      svelte: 5.1.10
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4351,88 +4326,66 @@ snapshots:
       magic-string: 0.30.12
       mrmime: 2.0.0
       sade: 1.8.1
-      set-cookie-parser: 2.7.0
-      sirv: 2.0.4
-      svelte: 5.0.0
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.0
+      svelte: 5.1.10
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/package@2.3.1(svelte@5.0.1)(typescript@5.5.4)':
+  '@sveltejs/package@2.3.1(svelte@5.1.10)(typescript@5.5.4)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.2
-      svelte: 5.0.1
-      svelte2tsx: 0.7.8(svelte@5.0.1)(typescript@5.5.4)
+      svelte: 5.1.10
+      svelte2tsx: 0.7.8(svelte@5.1.10)(typescript@5.5.4)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/svelte-json-tree@2.2.0(svelte@5.0.1)':
+  '@sveltejs/svelte-json-tree@2.2.0(svelte@5.1.10)':
     dependencies:
-      svelte: 5.0.1
+      svelte: 5.1.10
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.0.0-next.269
+      svelte: 5.1.10
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.0.1
+      svelte: 5.1.10
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
-      svelte: 5.0.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.269)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
-      deepmerge: 4.3.1
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      svelte: 5.0.0-next.269
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.1)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.0.1
+      svelte: 5.1.10
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.0.0
+      svelte: 5.1.10
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4449,10 +4402,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.0.0
+      svelte: 5.1.10
     optionalDependencies:
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4536,10 +4489,10 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)':
     optionalDependencies:
-      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.0.0
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.1.10
 
   '@vitest/expect@2.1.2':
     dependencies:
@@ -4589,12 +4542,14 @@ snapshots:
     dependencies:
       acorn: 8.12.1
 
-  acorn-typescript@1.4.13(acorn@8.12.1):
+  acorn-typescript@1.4.13(acorn@8.14.0):
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.14.0
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0: {}
+
   adm-zip@0.5.14: {}
 
   agent-base@6.0.2:
@@ -5551,20 +5506,10 @@ snapshots:
       path-exists: 4.0.0
       which-pm: 2.0.0
 
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.0.0):
-    dependencies:
-      prettier: 3.3.2
-      svelte: 5.0.0
-
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.0.0-next.269):
-    dependencies:
-      prettier: 3.3.2
-      svelte: 5.0.0-next.269
-
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.0.1):
+  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.10):
     dependencies:
       prettier: 3.3.2
-      svelte: 5.0.1
+      svelte: 5.1.10
 
   prettier@2.8.8: {}
 
@@ -5707,7 +5652,7 @@ snapshots:
 
   set-blocking@2.0.0: {}
 
-  set-cookie-parser@2.7.0: {}
+  set-cookie-parser@2.7.1: {}
 
   sharp@0.33.4:
     dependencies:
@@ -5758,7 +5703,7 @@ snapshots:
     dependencies:
       is-arrayish: 0.3.2
 
-  sirv@2.0.4:
+  sirv@3.0.0:
     dependencies:
       '@polka/url': 1.0.0-next.28
       mrmime: 2.0.0
@@ -5830,108 +5775,52 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  svelte-check@4.0.1(svelte@5.0.0)(typescript@5.5.4):
+  svelte-check@4.0.1(svelte@5.1.10)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       fdir: 6.3.0
       picocolors: 1.1.0
       sade: 1.8.1
-      svelte: 5.0.0
+      svelte: 5.1.10
       typescript: 5.5.4
     transitivePeerDependencies:
       - picomatch
 
-  svelte-check@4.0.1(svelte@5.0.0-next.269)(typescript@5.5.4):
+  svelte-parse-markup@0.1.5(svelte@5.1.10):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      fdir: 6.3.0
-      picocolors: 1.1.0
-      sade: 1.8.1
-      svelte: 5.0.0-next.269
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - picomatch
+      svelte: 5.1.10
 
-  svelte-check@4.0.1(svelte@5.0.1)(typescript@5.5.4):
+  svelte-persisted-store@0.9.4(svelte@5.1.10):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      fdir: 6.3.0
-      picocolors: 1.1.0
-      sade: 1.8.1
-      svelte: 5.0.1
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - picomatch
-
-  svelte-parse-markup@0.1.5(svelte@5.0.0):
-    dependencies:
-      svelte: 5.0.0
-
-  svelte-persisted-store@0.9.4(svelte@5.0.0-next.269):
-    dependencies:
-      svelte: 5.0.0-next.269
+      svelte: 5.1.10
 
-  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.0.0)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.10)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.12
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.0.0
+      svelte: 5.1.10
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
 
-  svelte2tsx@0.7.8(svelte@5.0.1)(typescript@5.5.4):
+  svelte2tsx@0.7.8(svelte@5.1.10)(typescript@5.5.4):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.0.1
+      svelte: 5.1.10
       typescript: 5.5.4
 
-  svelte@5.0.0:
+  svelte@5.1.10:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.6
-      acorn: 8.12.1
-      acorn-typescript: 1.4.13(acorn@8.12.1)
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      esm-env: 1.0.0
-      esrap: 1.2.2
-      is-reference: 3.0.2
-      locate-character: 3.0.0
-      magic-string: 0.30.12
-      zimmerframe: 1.1.2
-
-  svelte@5.0.0-next.269:
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.12.1
-      acorn-typescript: 1.4.13(acorn@8.12.1)
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      esm-env: 1.0.0
-      esrap: 1.2.2
-      is-reference: 3.0.2
-      locate-character: 3.0.0
-      magic-string: 0.30.12
-      zimmerframe: 1.1.2
-
-  svelte@5.0.1:
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.12.1
-      acorn-typescript: 1.4.13(acorn@8.12.1)
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
       aria-query: 5.3.2
       axobject-query: 4.1.0
       esm-env: 1.0.0

From 123a2b305376a0aaf8b9b3d2d776b6861657f954 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 15:36:42 -0500
Subject: [PATCH 115/453] use relative links (#808)

* use relative links

* more
---
 ...per-towards-the-ideal-web-app-framework.md |  2 +-
 .../content/blog/2018-04-18-version-2.md      |  4 +-
 .../2019-01-31-svelte-on-the-changelog.md     |  2 +-
 .../2019-04-16-svelte-for-new-developers.md   |  2 +-
 ...19-04-22-svelte-3-rethinking-reactivity.md |  2 +-
 ...-10-01-whats-new-in-svelte-october-2020.md | 16 ++++----
 ...11-01-whats-new-in-svelte-november-2020.md |  4 +-
 ...020-11-05-whats-the-deal-with-sveltekit.md |  2 +-
 ...12-01-whats-new-in-svelte-december-2020.md | 10 ++---
 ...-01-01-whats-new-in-svelte-january-2021.md |  6 +--
 ...02-01-whats-new-in-svelte-february-2021.md |  4 +-
 ...21-03-01-whats-new-in-svelte-march-2021.md | 12 +++---
 ...21-04-01-whats-new-in-svelte-april-2021.md |  2 +-
 ...2021-05-01-whats-new-in-svelte-may-2021.md |  2 +-
 ...11-01-whats-new-in-svelte-november-2021.md |  2 +-
 ...-01-01-whats-new-in-svelte-january-2022.md |  4 +-
 ...-01-13-accelerating-sveltes-development.md |  4 +-
 ...02-01-whats-new-in-svelte-february-2022.md |  4 +-
 ...22-03-01-whats-new-in-svelte-march-2022.md |  2 +-
 ...9-01-whats-new-in-svelte-september-2022.md |  4 +-
 ...11-01-whats-new-in-svelte-november-2022.md |  6 +--
 .../2022-12-14-announcing-sveltekit-1.0.md    |  2 +-
 ...-01-01-whats-new-in-svelte-january-2023.md |  2 +-
 ...23-03-01-whats-new-in-svelte-march-2023.md |  4 +-
 ...23-04-01-whats-new-in-svelte-april-2023.md |  4 +-
 ...023-07-01-whats-new-in-svelte-july-2023.md |  6 +--
 ...9-01-whats-new-in-svelte-september-2023.md |  2 +-
 .../content/blog/2023-10-01-hacktoberfest.md  |  2 +-
 ...-10-01-whats-new-in-svelte-october-2023.md |  2 +-
 ...11-01-whats-new-in-svelte-november-2023.md |  2 +-
 ...-01-01-whats-new-in-svelte-january-2024.md |  4 +-
 ...024-06-01-whats-new-in-svelte-june-2024.md |  2 +-
 ...9-01-whats-new-in-svelte-september-2024.md |  2 +-
 ...11-01-whats-new-in-svelte-november-2024.md |  4 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 38 +++++++++----------
 .../kit/98-reference/20-$app-navigation.md    |  4 +-
 .../docs/kit/98-reference/20-$app-paths.md    |  4 +-
 .../docs/kit/98-reference/20-$app-stores.md   |  2 +-
 .../kit/98-reference/27-$service-worker.md    |  4 +-
 .../content/docs/kit/98-reference/54-types.md |  8 ++--
 .../docs/svelte/98-reference/20-svelte.md     | 10 ++---
 .../svelte/98-reference/21-svelte-compiler.md |  2 +-
 .../98-reference/21-svelte-transition.md      |  2 +-
 apps/svelte.dev/scripts/sync-docs/index.ts    |  3 +-
 apps/svelte.dev/scripts/sync-docs/types.ts    |  8 +++-
 apps/svelte.dev/scripts/sync-docs/utils.ts    | 10 -----
 packages/site-kit/src/lib/markdown/index.ts   |  2 +-
 .../site-kit/src/lib/markdown/preprocess.ts   |  6 +--
 packages/site-kit/src/lib/markdown/utils.ts   | 10 +++++
 49 files changed, 126 insertions(+), 121 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
index 86514fc279..c4c5643699 100644
--- a/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
+++ b/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
@@ -77,4 +77,4 @@ I believe the next frontier of web performance is 'whole-app optimisation'. Curr
 
 Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
 
-Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](https://svelte.dev/chat).
+Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](/chat).
diff --git a/apps/svelte.dev/content/blog/2018-04-18-version-2.md b/apps/svelte.dev/content/blog/2018-04-18-version-2.md
index 58f420fcd6..3043319b7d 100644
--- a/apps/svelte.dev/content/blog/2018-04-18-version-2.md
+++ b/apps/svelte.dev/content/blog/2018-04-18-version-2.md
@@ -11,7 +11,7 @@ Almost a year after we first started talking about version 2 on the Svelte issue
 
 ## tl;dr
 
-Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](https://svelte.dev/chat).
+Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](/chat).
 
 - Install Svelte v2 from npm
 - Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
@@ -198,4 +198,4 @@ Before, there was a `svelte.validate` method which checked your component was va
 
 ## My app is broken! Help!
 
-Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](https://svelte.dev/chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
+Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](/chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
diff --git a/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md b/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
index ca5805ac6d..d94d928795 100644
--- a/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
+++ b/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
@@ -14,7 +14,7 @@ Earlier this month, I had the privilege of appearing on [The Changelog](https://
 
 ...and, most importantly, Svelte 3.
 
-Unless you hang out in our [Discord server](https://svelte.dev/chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it _will_ be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
+Unless you hang out in our [Discord server](/chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it _will_ be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
 
 On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
 
diff --git a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
index c0ad2add2b..b12aabaad7 100644
--- a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -9,7 +9,7 @@ This short guide is designed to help you — someone who has looked at the [tuto
 
 If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people.
 
-If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat).
+If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](/chat).
 
 ## First things first
 
diff --git a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index a5270a4f70..7577994897 100644
--- a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -99,4 +99,4 @@ We don't take this lightly: hopefully once you've experienced Svelte 3 you'll un
 
 As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We _really_ want to add first-class TypeScript support.
 
-But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
+But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/apps/svelte.dev/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/apps/svelte.dev/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
index acf397c544..22e7496df0 100644
--- a/apps/svelte.dev/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
+++ b/apps/svelte.dev/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
@@ -9,10 +9,10 @@ Welcome to the first edition of our "What's new in Svelte" series! We'll try to
 
 ## New features
 
-1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.27.0), **3.26.0**, warning removed in **3.27.0**)
-2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**)
-3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
-4. CSS Selectors with `~` and `+` combinators are now supported ([Example](https://svelte.dev/repl/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**)
+1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](/playground/c305722adb4a4545b27b198ea8ff9bde?version=3.27.0), **3.26.0**, warning removed in **3.27.0**)
+2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](/playground/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**)
+3. `import.meta` now works in template expressions ([Example](/playground/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
+4. CSS Selectors with `~` and `+` combinators are now supported ([Example](/playground/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**)
 5. The `{#key}` block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**)
 6. Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper `<div>`s ([More info](https://github.com/sveltejs/svelte/issues/2079), **3.29.0**)
 7. When using TypeScript, you can now type the `createEventDispatcher` method:
@@ -43,7 +43,7 @@ In addition, Sapper's CSS handling has been rewritten over the course of recent
 
 ## Impactful bug fixes
 
-- CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
+- CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](/playground/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
 - `prettier-plugin-svelte` will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside `<pre>` tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.
 
 ## Coming up
@@ -56,8 +56,8 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.
 
 ## Svelte Showcase
 
-- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
-- [GitHub Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
+- [This CustomMenu example](/playground/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
+- [GitHub Tetris](/playground/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
 - [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
 - [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
 
@@ -72,7 +72,7 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.
 - [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
 - [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
 - [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
-- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
+- [This Tilt component](/playground/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
 
 ### Lots of examples of how use JS tech came out this month:
 
diff --git a/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
index 93ae099c7d..8700e116e7 100644
--- a/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
+++ b/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -10,8 +10,8 @@ Welcome back to the "What's new in Svelte" series! This month, we're covering ne
 ## New features & impactful bug fixes
 
 1. Destructuring Promises now works as expected by using the `{#await}` syntax
-   (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
-2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+   (**3.29.3**, [Example](/playground/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](/playground/29959e70103f4868a6525c0734934936?version=3.29.3))
 3. Better typings for the `get` function in `svelte/store` and on lifecycle hooks (**3.29.1**)
 
 ### What's going on in Sapper?
diff --git a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
index a89181fc6a..29baaf5c0c 100644
--- a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
+++ b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -91,4 +91,4 @@ Keep your eyes peeled for announcements about when we'll launch the public beta
 
 ## Where can I learn more?
 
-Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
+Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
diff --git a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
index 5f8442fbe4..2cdb968cd2 100644
--- a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -9,10 +9,10 @@ It's the last "What's new in Svelte" of the year and there's lots to celebrate!
 
 ## New features & impactful bug fixes
 
-1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
+1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](/playground/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
 2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://v4.svelte.dev/docs#run-time-svelte-hascontext))
 3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
-4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
+4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](/playground/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
 5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**)
 6. `rollup-plugin-svelte` had a new [7.0.0 release](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md). The biggest change is that the `css` option was removed. Users who were using that option should add another plugin like `rollup-plugin-css-only` as demonstrated [in the template](https://github.com/sveltejs/template/blob/5b1135c286f7a649daa99825a077586655051649/rollup.config.js#L48)
 
@@ -22,7 +22,7 @@ Lots of new TypeScript definition improvements to make editing Sapper apps even
 
 ## What's the deal with SvelteKit?
 
-We're glad you asked! If you didn't catch Rich's blog post from early last month, [you can find it here](https://svelte.dev/blog/whats-the-deal-with-sveltekit)!
+We're glad you asked! If you didn't catch Rich's blog post from early last month, [you can find it here](/blog/whats-the-deal-with-sveltekit)!
 
 For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
 
@@ -44,8 +44,8 @@ For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github
 
 - [u/loopcake got SSR working in Java Spring Boot](https://www.reddit.com/r/sveltejs/comments/jkh5up/svelte_ssr_but_its_java_spring_boot_and_its_native/) for all the Java shops out there looking to render Svelte server-side.
 - [svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe) shows off a fancy interaction pattern using svg paths.
-- [Crossfade Link Animation](https://svelte.dev/repl/7f68e148caf04b2787bb6f296208f870?version=3.29.7) demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
-- [Clip-Path Transitions](https://svelte.dev/repl/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)
+- [Crossfade Link Animation](/playground/7f68e148caf04b2787bb6f296208f870?version=3.29.7) demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
+- [Clip-Path Transitions](/playground/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)
 
 ### Learning Resources
 
diff --git a/apps/svelte.dev/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/apps/svelte.dev/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
index 32b6da1e26..18985f7ee4 100644
--- a/apps/svelte.dev/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
+++ b/apps/svelte.dev/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
@@ -9,7 +9,7 @@ Happy new year from Svelte! In the last month we made progress on Sapper's upcom
 
 ## What's changed in Svelte?
 
-A new minor release replaces the `SvelteComponent` class with a `SvelteComponentTyped` class. This renaming should help with backwards compatibility. We've updated [last month's blog post](https://svelte.dev/blog/whats-new-in-svelte-december-2020) to avoid any confusion with the name change.
+A new minor release replaces the `SvelteComponent` class with a `SvelteComponentTyped` class. This renaming should help with backwards compatibility. We've updated [last month's blog post](/blog/whats-new-in-svelte-december-2020) to avoid any confusion with the name change.
 
 If you're using `SvelteComponent` or the new `SvelteComponentTyped` in your project or library, let us know what you're using it for and we'll add it to the showcase!
 
@@ -25,7 +25,7 @@ To avoid too much churn during development, SvelteKit is still being worked on i
 
 In the meantime, you can explore the current build by running `npm init svelte@next` from your command line.
 
-As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)_, there are no docs or support available yet... So use at your own risk / for your own enjoyment!
+As cautioned in _[What's the deal with SvelteKit?](/blog/whats-the-deal-with-sveltekit)_, there are no docs or support available yet... So use at your own risk / for your own enjoyment!
 
 ---
 
@@ -55,7 +55,7 @@ As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats
 - [svelte-standalone-router](https://github.com/hjalmar/svelte-standalone-router) is a standalone router with an API based on [standalone-router](https://github.com/hjalmar/standalone-router)
 - [svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker) is a datepicker component with variations for time selection, date ranges and responsive themes
 - [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
-- [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect
+- [Svelte Zoomable](/playground/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect
 
 **Have a component you'd like to share?** [Submit your own component](https://sveltesociety.dev/help/submitting?type=package) to the list of [packages](https://sveltesociety.dev/packages) on the Svelte Society site.
 
diff --git a/apps/svelte.dev/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/apps/svelte.dev/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
index 3b8dd1d6c5..e69828afd6 100644
--- a/apps/svelte.dev/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
+++ b/apps/svelte.dev/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -51,11 +51,11 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv
 
 - [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) is a way to monitor Svelte reactive statements in Firefox devtools
 - [svelte-actions](https://github.com/sw-yx/svelte-actions) is a set of prototype Svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7).
-- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position
+- [This css grid gallery](/playground/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position
 - [Patchcab](https://github.com/spectrome/patchcab) is a modular Eurorack style synthesizer made with Web Audio.
 - [svelte-knob](https://github.com/MelihAltintas/svelte-knob) is a knob control to help with speedometer-style visualization
 - [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons
-- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
+- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](/playground/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
 - [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component
 - [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that exposes only a readable interface.
 
diff --git a/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
index b4d4449d64..0fdc637c9c 100644
--- a/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ b/apps/svelte.dev/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -11,11 +11,11 @@ Let's dive into the news 🐬
 
 ## What's new in `sveltejs/svelte`
 
-- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://v4.svelte.dev/docs#run-time-server-side-component-api))
-- Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
+- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](/playground/custom-stores) and [Server-side component API ](https://v4.svelte.dev/docs#run-time-server-side-component-api))
+- Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](/playground/01a14375951749dab9579cb6860eccde?version=3.32.0))
 - The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
 - Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
-- Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
+- Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](/playground/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
 - Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
 - A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://v4.svelte.dev/docs#compile-time-svelte-compile))
 - Continued improvement to TypeScript definitions
@@ -76,9 +76,9 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht
 - [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VSCode theme inspired by the svelte.dev REPL
 - [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control.
 - [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte
-- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
-- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord)
-- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
+- [Svelte Ripple](/playground/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
+- [Analog SVG Clock](/playground/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord)
+- [Console Log Styler](/playground/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
 - [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library
 - [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication
 
diff --git a/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
index 66a1a8f7ec..634254d989 100644
--- a/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
+++ b/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
@@ -9,7 +9,7 @@ Two projects that have been months (even years) in the making have made their wa
 
 ## What's up with SvelteKit?
 
-[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2).
+[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2).
 
 Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx.
 
diff --git a/apps/svelte.dev/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md b/apps/svelte.dev/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
index eb3ebb8ec4..73e0923609 100644
--- a/apps/svelte.dev/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
+++ b/apps/svelte.dev/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
@@ -9,7 +9,7 @@ Last week, Svelte Summit blew us away with a mountain of content! [Check out the
 
 ## New features in the Svelte Compiler
 
-- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](https://svelte.dev/repl/54148fd2af484f2c84977c94e523c7c5?version=3.38.0))
+- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](/playground/54148fd2af484f2c84977c94e523c7c5?version=3.38.0))
 - CSS custom properties can now be passed to components for use cases such as theming (**3.38.0**, [Docs coming soon](https://github.com/sveltejs/svelte/issues/6268))
 
 ## New in SvelteKit
diff --git a/apps/svelte.dev/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/apps/svelte.dev/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
index c5381b1931..850ce287ce 100644
--- a/apps/svelte.dev/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
+++ b/apps/svelte.dev/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
@@ -13,7 +13,7 @@ Now onto what's new!
 
 ## New in Svelte and SvelteKit
 
-- [svelte.dev](https://svelte.dev/) now runs on SvelteKit alongside [sveltesociety.dev](https://sveltesociety.dev). svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
+- [svelte.dev](/) now runs on SvelteKit alongside [sveltesociety.dev](https://sveltesociety.dev). svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
 - A new compiler option, `enableSourcemap`, provides more control over the compiler output for JS and CSS sourcemaps (**3.44.0**). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in `.svelte` templates (See [sveltejs/kit#720](https://github.com/sveltejs/kit/issues/720) and [sveltejs/vite-plugin-svelte#201](https://github.com/sveltejs/vite-plugin-svelte/pull/201))
 - The Svelte Language Tools now support reading the configuration of the VS Code CSS settings ([#1219](https://github.com/sveltejs/language-tools/issues/1219))
 - `vite-plugin-svelte` added a new `experimental.prebundleSvelteLibraries` option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of `svelte.config.js`. Please test it out and give us feedback!
diff --git a/apps/svelte.dev/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md b/apps/svelte.dev/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
index 8fda4e52f4..d4822ea0f2 100644
--- a/apps/svelte.dev/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
+++ b/apps/svelte.dev/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
@@ -22,7 +22,7 @@ Happy new year, Svelte Community! Lots to share this month across Svelte, Svelte
 
 - [Svelte 3.44.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3443) is out with a few bug fixes in the binding and loop code
 - Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript's "go to" functionality ([105.8.0 and later](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.8.0))
-- The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at [svelte.dev/apps](https://svelte.dev/apps)
+- The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at [svelte.dev/apps](/apps)
 
 ---
 
@@ -38,7 +38,7 @@ Happy new year, Svelte Community! Lots to share this month across Svelte, Svelte
 - [Version 0.2 of Tangent](http://tangentnotes.com/Download), a Svelte-based note writing app, is now in beta
 - [Intl Explorer](https://github.com/jesperorb/intl-explorer) is a tool for viewing output for all possible formatters for Intl
 
-A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for [svelte.dev](https://svelte.dev/). Thanks to all the contributors who made this possible!
+A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for [svelte.dev](/). Thanks to all the contributors who made this possible!
 
 If you're looking for a fun SvelteKit project to work on, [you can contribute to the Svelte Society site rewrite](https://github.com/svelte-society/sveltesociety-2021/issues) 💅
 
diff --git a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
index bd2f092ae8..2704c71a4c 100644
--- a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -41,7 +41,7 @@ We’ve also been working closely with the [Vite](https://vitejs.dev) team to ir
 
 ## A growing community
 
-[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#What-happened-at-Svelte-Summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](/blog/whats-new-in-svelte-december-2021#What-happened-at-Svelte-Summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
 
 Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement. The initial ambassadors in alphabetical order are:
 
@@ -66,4 +66,4 @@ SvelteKit is continuing to progress towards 1.0 and, in just the past week, we h
 
 While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. [Svelte 3.46.0](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460) was one of our biggest releases in awhile with two major new features added: [constants in markup](https://github.com/sveltejs/rfcs/blob/master/text/0007-markup-constants.md) and [style directives](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md).
 
-Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](https://svelte.dev/blog/rss.xml) or check monthly to be the first to get them.
+Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](/blog/rss.xml) or check monthly to be the first to get them.
diff --git a/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
index f5f56201b5..97b95686a6 100644
--- a/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
+++ b/apps/svelte.dev/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
@@ -14,7 +14,7 @@ Let's take a look...
 - **3.45.0** brought a [new a11y warning `a11y-no-redundant-roles`](https://v4.svelte.dev/docs#accessibility-warnings-a11y-no-redundant-roles), destructuring and caching fixes
 - **3.46.0** added the much requested [`{@const}` tag](https://v4.svelte.dev/docs#template-syntax-const) and [`style:` directive](https://v4.svelte.dev/docs#template-syntax-element-directives-style-property)
 - Check out **3.46.1 - 3.46.3** for fixes to the `{@const}` tag and `style:` directive, along with a number of fixes to animations
-- [AST output is now available in the Svelte REPL](https://svelte.dev/repl/hello-world)
+- [AST output is now available in the Svelte REPL](/playground/hello-world)
 
 ## What's new in SvelteKit
 
@@ -68,7 +68,7 @@ Want to work on a SvelteKit site with others, [try contributing to the Svelte So
 
 _To Read_
 
-- [Accelerating Svelte's Development](https://svelte.dev/blog/accelerating-sveltes-development) by Ben McCann
+- [Accelerating Svelte's Development](/blog/accelerating-sveltes-development) by Ben McCann
 - [Storybook for Vite](https://storybook.js.org/blog/storybook-for-vite/)
 - [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth
 - [Building an iOS app with Svelte, Capacitor and Firebase](https://harryherskowitz.com/2022/01/05/tapedrop-app.html) by Harry Herskowitz
diff --git a/apps/svelte.dev/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md b/apps/svelte.dev/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
index 1f2b88b236..9e741845bd 100644
--- a/apps/svelte.dev/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
+++ b/apps/svelte.dev/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
@@ -42,7 +42,7 @@ More on that and other new features and fixes below!
 - [The Making Known](https://the-making-known.com/) is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
 - [Svelte Kanban](https://github.com/V-Py/svelte-kanban) is a simple Svelte Kanban made in pure CSS
 - [fngrng](https://github.com/nvlgzr/fngrng) is a typing trainer focussed on accuracy over speed
-- [Generative grids](https://svelte.dev/repl/873988ce33db43f097c0ca69df57b3ac?version=3.46.4) is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
+- [Generative grids](/playground/873988ce33db43f097c0ca69df57b3ac?version=3.46.4) is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
 - [LifeHash](https://github.com/BlockchainCommons/lifehash.info) is a method of hash visualization that creates beautiful, deterministic icons
 - [TypedWebhook.tools](https://typedwebhook.tools/) is a webhook testing tool for checking payloads, with automatic type generation
 - [Speedskating](https://github.com/spiegelgraphics/speedskating) is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
diff --git a/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
index 7ff272f3f8..be53ed623a 100644
--- a/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
+++ b/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
@@ -91,8 +91,8 @@ _To Read_
 - [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints
 - [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles
 - [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps
-- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
-- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
+- [Neon Flicker](/playground/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
+- [ComboBox](/playground/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
 - [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects
 - [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue
 
diff --git a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
index 55f9282e47..75e8b7ca0d 100644
--- a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
+++ b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
@@ -25,9 +25,9 @@ There's also a _huge_ showcase to cover... so let's jump in!
 ## Svelte changes
 
 - New accessibility warnings, `a11y-click-events-have-key-events` and `a11y-no-noninteractive-tabindex`, will now warn when your components lack required key events or tabindex. While `a11y-role-has-required-aria-props` will no longer warn when elements match their semantic role (**3.51.0**)
-- `--style-props` are now supported on `<svelte:component>` and `<svg>` (**3.51.0**, Component Example: [Before](https://svelte.dev/repl/48984f20503f4959b70f24f4130d164b?version=3.47.0) and [After](https://svelte.dev/repl/48984f20503f4959b70f24f4130d164b?version=3.51.0), SVG Example: [Before](https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.50.0) and [After](https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.51.0))
-- "nullish" values for component event handlers are now supported (**3.51.0**, [Example](https://svelte.dev/repl/9228022922af4c76af68ce42349ccbf9?version=3.51.0))
-- Scoped styles can now be applied to `<svelte:element>` (**3.51.0**, [Example](https://svelte.dev/repl/23d982fc6f4f4f06a6aa227860fa2d84?version=3.51.0))
+- `--style-props` are now supported on `<svelte:component>` and `<svg>` (**3.51.0**, Component Example: [Before](/playground/48984f20503f4959b70f24f4130d164b?version=3.47.0) and [After](/playground/48984f20503f4959b70f24f4130d164b?version=3.51.0), SVG Example: [Before](/playground/b7a3f94255914044b35462234ccaea43?version=3.50.0) and [After](/playground/b7a3f94255914044b35462234ccaea43?version=3.51.0))
+- "nullish" values for component event handlers are now supported (**3.51.0**, [Example](/playground/9228022922af4c76af68ce42349ccbf9?version=3.51.0))
+- Scoped styles can now be applied to `<svelte:element>` (**3.51.0**, [Example](/playground/23d982fc6f4f4f06a6aa227860fa2d84?version=3.51.0))
 - You can now use `important` in inline style tags: `style:foo|important` (**3.52.0**, [#7365](https://github.com/sveltejs/svelte/issues/7365))
 - A warning will now be thrown when using `<a target="_blank">` without `rel="noreferrer"` (**3.52.0**, [#6188](https://github.com/sveltejs/svelte/issues/6188))
 
diff --git a/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md b/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
index 3fd84120a8..1c6fe2e46d 100644
--- a/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
+++ b/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
@@ -100,6 +100,6 @@ If you have an app built with pre-release versions of SvelteKit, we recommend up
 
 SvelteKit 1.0 is the beginning, not the end. It’s ready for production use today, but we’re just getting started. Our roadmap includes built-in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimisation, and many other improvements. Next year we’ll also start work on Svelte 4 — more on that later.
 
-But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on [Twitter](https://twitter.com/SvelteSociety) and [YouTube](https://youtube.com/sveltesociety) to stay up to date, and join us in our [Discord server](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs) to contribute back.
+But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on [Twitter](https://twitter.com/SvelteSociety) and [YouTube](https://youtube.com/sveltesociety) to stay up to date, and join us in our [Discord server](/chat) and on [GitHub](https://github.com/sveltejs) to contribute back.
 
 We can’t wait to see what you build.
diff --git a/apps/svelte.dev/content/blog/2023-01-01-whats-new-in-svelte-january-2023.md b/apps/svelte.dev/content/blog/2023-01-01-whats-new-in-svelte-january-2023.md
index 058cf20830..51747c2c4b 100644
--- a/apps/svelte.dev/content/blog/2023-01-01-whats-new-in-svelte-january-2023.md
+++ b/apps/svelte.dev/content/blog/2023-01-01-whats-new-in-svelte-january-2023.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-It's been just two weeks since the release of [SvelteKit 1.0](https://svelte.dev/blog/announcing-sveltekit-1.0)! If you haven't yet, check out the [livestream](https://www.youtube.com/watch?v=N4BRVkQVoMc), [new website](https://kit.svelte.dev/) and [tutorial](/tutorial) to learn all the features of SvelteKit step-by-step.
+It's been just two weeks since the release of [SvelteKit 1.0](/blog/announcing-sveltekit-1.0)! If you haven't yet, check out the [livestream](https://www.youtube.com/watch?v=N4BRVkQVoMc), [new website](https://kit.svelte.dev/) and [tutorial](/tutorial) to learn all the features of SvelteKit step-by-step.
 
 Let's dive into the details...
 
diff --git a/apps/svelte.dev/content/blog/2023-03-01-whats-new-in-svelte-march-2023.md b/apps/svelte.dev/content/blog/2023-03-01-whats-new-in-svelte-march-2023.md
index 33c0b0ae50..3c1794ae31 100644
--- a/apps/svelte.dev/content/blog/2023-03-01-whats-new-in-svelte-march-2023.md
+++ b/apps/svelte.dev/content/blog/2023-03-01-whats-new-in-svelte-march-2023.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-March is _coming in hot_ with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out [last week's blog post](https://svelte.dev/blog/streaming-snapshots-sveltekit) for more details.
+March is _coming in hot_ with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out [last week's blog post](/blog/streaming-snapshots-sveltekit) for more details.
 
 Svelte Society also launched [SvelteHack](https://hack.sveltesociety.dev/) last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!
 
@@ -56,7 +56,7 @@ Now let's jump into this month's changes...
 
 _Featuring Svelte Contributors and Ambassadors_
 
-- [Streaming, snapshots, and other new features since SvelteKit 1.0](https://svelte.dev/blog/streaming-snapshots-sveltekit) by Geoff Rich (on the Svelte Blog)
+- [Streaming, snapshots, and other new features since SvelteKit 1.0](/blog/streaming-snapshots-sveltekit) by Geoff Rich (on the Svelte Blog)
 - [View Transition Experiments with Svelte](https://geoffrich.net/posts/view-transition-experiments/) and [Native Page Transitions in SvelteKit (updated for 2023)](https://geoffrich.net/posts/page-transitions-1/) by Geoff Rich
 - [Ron Au's story and how to be whimsical!](https://www.svelteradio.com/episodes/ron-aus-story-and-how-to-be-whimsical) by Svelte Radio
 - [SvelteKit 1.0 with Rich Harris](https://podrocket.logrocket.com/sveltekit) by PodRocket
diff --git a/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md b/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
index 0233a58a0d..7388b400dc 100644
--- a/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
+++ b/apps/svelte.dev/content/blog/2023-04-01-whats-new-in-svelte-april-2023.md
@@ -36,7 +36,7 @@ For all the changes to the Svelte compiler, including unreleased changes, check
 - You can now get all cookies for a request with `cookies.getAll` (**1.10.0**, [#9287](https://github.com/sveltejs/kit/pull/9287), [Docs](/docs/kit/@sveltejs-kit#Cookies))
 - Easily manage the submission status of (multiple) forms with the new exposed `submitter` parameter in `use:enhance` (**1.12.0**, [#9425](https://github.com/sveltejs/kit/pull/9425), [Docs](/docs/kit/@sveltejs-kit#SubmitFunction))
 - The default error page now has dark mode styles (**1.13.0**, [#9460](https://github.com/sveltejs/kit/pull/9460))
-- You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the [announcement blog post](https://svelte.dev/blog/zero-config-type-safety)
+- You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the [announcement blog post](/blog/zero-config-type-safety)
 
 ---
 
@@ -60,7 +60,7 @@ For all the changes to the Svelte compiler, including unreleased changes, check
 
 _Featuring Svelte Contributors and Ambassadors_
 
-- [Streaming, snapshots, and other new features since SvelteKit 1.0](https://svelte.dev/blog/streaming-snapshots-sveltekit) by Geoff Rich on the svelte.dev Blog
+- [Streaming, snapshots, and other new features since SvelteKit 1.0](/blog/streaming-snapshots-sveltekit) by Geoff Rich on the svelte.dev Blog
 - [Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023](https://www.youtube.com/watch?v=vgXgex5E-8g) from Svelte Society
   - If you missed this one live, check out [the next one](https://www.youtube.com/watch?v=MJHO6FSioPI) - scheduled for April 5th
 - [Svelte Society - London February 2023](https://www.youtube.com/watch?v=RkQ_f7XxdMI)
diff --git a/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md b/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
index e67216b6ed..27092c1cd2 100644
--- a/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
+++ b/apps/svelte.dev/content/blog/2023-07-01-whats-new-in-svelte-july-2023.md
@@ -9,7 +9,7 @@ Svelte 4 is out and folks have been building! There's a bunch of new showcases,
 
 ## What's new in Svelte
 
-The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.
+The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.
 
 If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](/docs/svelte/v4-migration-guide) for all the details.
 
@@ -44,8 +44,8 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter`
 
 ### Learning Resources
 
-- [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4)
-- [svelte.dev: A complete overhaul](https://svelte.dev/blog/svelte-dev-overhaul)
+- [Announcing Svelte 4 post](/blog/svelte-4)
+- [svelte.dev: A complete overhaul](/blog/svelte-dev-overhaul)
 
 _Featuring Svelte Contributors and Ambassadors_
 
diff --git a/apps/svelte.dev/content/blog/2023-09-01-whats-new-in-svelte-september-2023.md b/apps/svelte.dev/content/blog/2023-09-01-whats-new-in-svelte-september-2023.md
index 966328ca0c..5abf6af7a2 100644
--- a/apps/svelte.dev/content/blog/2023-09-01-whats-new-in-svelte-september-2023.md
+++ b/apps/svelte.dev/content/blog/2023-09-01-whats-new-in-svelte-september-2023.md
@@ -17,7 +17,7 @@ Before we jump in, a warm welcome to the new Svelte Ambassadors: [@cainux](https
 
 - `URL` is now accepted in the `redirect` function (**1.23.0**, [Docs](/docs/kit/@sveltejs-kit#redirect), [#10570](https://github.com/sveltejs/kit/pull/10570))
 - Mistyped route filenames will now throw a warning (**1.23.0**, [#10558](https://github.com/sveltejs/kit/pull/10558))
-- The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](https://svelte.dev/blog/view-transitions) for more info (**1.24.0**, [Docs](/docs/kit/$app-navigation#onNavigate), [#9605](https://github.com/sveltejs/kit/pull/9605))
+- The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](/blog/view-transitions) for more info (**1.24.0**, [Docs](/docs/kit/$app-navigation#onNavigate), [#9605](https://github.com/sveltejs/kit/pull/9605))
 
 But that's just the new features! For all the patches and performance updates from this month, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
 
diff --git a/apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md b/apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md
index 62188b4797..02c181a023 100644
--- a/apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md
+++ b/apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md
@@ -19,6 +19,6 @@ If you need inspiration when looking for an issue to fix, check out the [low han
 
 It's a good idea to communicate clearly and often about what you're trying to solve or take on. You can do this by commenting on the issues you intend to take on. This helps avoid duplicate work and ensures that your contribution is in line with the project's goals. Nobody likes to have their work rejected, so it's best to ask questions early and often!
 
-Join our [Discord](https://svelte.dev/chat) and ask questions in the dedicated `#hacktoberfest` channel. We're happy to help you get started!
+Join our [Discord](/chat) and ask questions in the dedicated `#hacktoberfest` channel. We're happy to help you get started!
 
 We're excited to see what you've got in store for SvelteKit! Happy hacking! 🎃
diff --git a/apps/svelte.dev/content/blog/2023-10-01-whats-new-in-svelte-october-2023.md b/apps/svelte.dev/content/blog/2023-10-01-whats-new-in-svelte-october-2023.md
index 02660924a6..2a2294d705 100644
--- a/apps/svelte.dev/content/blog/2023-10-01-whats-new-in-svelte-october-2023.md
+++ b/apps/svelte.dev/content/blog/2023-10-01-whats-new-in-svelte-october-2023.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-Svelte 5 isn't out yet (you can, however, [preview it now](https://svelte-5-preview.vercel.app/)), but that doesn't mean we don't get a sneak peek! Most notably are [Runes](https://svelte.dev/blog/runes) - a simpler way to manage reactive variables in Svelte code. There's lots of links the showcase section for deeper dives on all things Runes, but let's talk about what else been released this month...
+Svelte 5 isn't out yet (you can, however, [preview it now](https://svelte-5-preview.vercel.app/)), but that doesn't mean we don't get a sneak peek! Most notably are [Runes](/blog/runes) - a simpler way to manage reactive variables in Svelte code. There's lots of links the showcase section for deeper dives on all things Runes, but let's talk about what else been released this month...
 
 ## What's new in Svelte & Language Tools
 
diff --git a/apps/svelte.dev/content/blog/2023-11-01-whats-new-in-svelte-november-2023.md b/apps/svelte.dev/content/blog/2023-11-01-whats-new-in-svelte-november-2023.md
index 56f9e4ee7a..6cffddbbed 100644
--- a/apps/svelte.dev/content/blog/2023-11-01-whats-new-in-svelte-november-2023.md
+++ b/apps/svelte.dev/content/blog/2023-11-01-whats-new-in-svelte-november-2023.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-Mark your calendars! [Svelte Summit Fall](https://www.sveltesummit.com/2023/fall) is on November 11th. Join us on [YouTube](https://www.youtube.com/@SvelteSociety/streams) and in the [Discord](https://svelte.dev/chat) for hours of Svelte-focused fun 🎥
+Mark your calendars! [Svelte Summit Fall](https://www.sveltesummit.com/2023/fall) is on November 11th. Join us on [YouTube](https://www.youtube.com/@SvelteSociety/streams) and in the [Discord](/chat) for hours of Svelte-focused fun 🎥
 
 Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month's releases brings an improved developer experience with better [block folding](https://code.visualstudio.com/docs/editor/codebasics#_folding), inferred types and configuration for `use:enhance`.
 
diff --git a/apps/svelte.dev/content/blog/2024-01-01-whats-new-in-svelte-january-2024.md b/apps/svelte.dev/content/blog/2024-01-01-whats-new-in-svelte-january-2024.md
index bd23816ce1..644597f38a 100644
--- a/apps/svelte.dev/content/blog/2024-01-01-whats-new-in-svelte-january-2024.md
+++ b/apps/svelte.dev/content/blog/2024-01-01-whats-new-in-svelte-january-2024.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-Happy New Year! It's been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the [release of SvelteKit 2](https://svelte.dev/blog/sveltekit-2)!
+Happy New Year! It's been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the [release of SvelteKit 2](/blog/sveltekit-2)!
 
 You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.
 
@@ -53,7 +53,7 @@ For all the release notes going forward, check out [the CHANGELOG on main](https
   and common developer docs
 - [hintable](https://github.com/willuhmjs/hintable) is an exciting word guessing game
 - [domian.io](https://domian.io/) retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them
-- [Story Scroller](https://svelte.dev/repl/6182be0c3ada4a15b5046f7d0d031727?version=4.2.8) is a REPL showcasing how Svelte can be used to make a scrollable cards list
+- [Story Scroller](/playground/6182be0c3ada4a15b5046f7d0d031727?version=4.2.8) is a REPL showcasing how Svelte can be used to make a scrollable cards list
 - [The Atlas of Sustainable Development Goals 2023](https://datatopics.worldbank.org/sdgatlas?lang=en) presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals.
 - [Lingotrack](https://lingotrack.com/) is a social platform for you as a language learner to track your progress and find engaging new media
 - [Lofi Flow](https://github.com/nico-mayer/lofi-flow) lets you save your best-loved YouTube lofi live radios and videos in one spot
diff --git a/apps/svelte.dev/content/blog/2024-06-01-whats-new-in-svelte-june-2024.md b/apps/svelte.dev/content/blog/2024-06-01-whats-new-in-svelte-june-2024.md
index fb2f8e85b0..c11fe27a5f 100644
--- a/apps/svelte.dev/content/blog/2024-06-01-whats-new-in-svelte-june-2024.md
+++ b/apps/svelte.dev/content/blog/2024-06-01-whats-new-in-svelte-june-2024.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-The maintainers have been hard at work getting the [Svelte 5 Release Candidate](https://svelte.dev/blog/svelte-5-release-candidate) ready for release. In this month's newsletter, you'll find highlights from the pre-release [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and a host of items from our community showcase.
+The maintainers have been hard at work getting the [Svelte 5 Release Candidate](/blog/svelte-5-release-candidate) ready for release. In this month's newsletter, you'll find highlights from the pre-release [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and a host of items from our community showcase.
 
 Let's dive in!
 
diff --git a/apps/svelte.dev/content/blog/2024-09-01-whats-new-in-svelte-september-2024.md b/apps/svelte.dev/content/blog/2024-09-01-whats-new-in-svelte-september-2024.md
index c7da4ebc83..b004afa165 100644
--- a/apps/svelte.dev/content/blog/2024-09-01-whats-new-in-svelte-september-2024.md
+++ b/apps/svelte.dev/content/blog/2024-09-01-whats-new-in-svelte-september-2024.md
@@ -69,7 +69,7 @@ _To Watch_
 
 ### Libraries, Tools & Components
 
-- [This gooey tooltip](https://svelte.dev/repl/790fd75f954846be83afaa9e5ea821a8?version=4.2.18) is fluid and satisfying
+- [This gooey tooltip](/playground/790fd75f954846be83afaa9e5ea821a8?version=4.2.18) is fluid and satisfying
 - [select-kit](https://github.com/snehalbaghel/select-kit) is a one-stop solution for all your select/combobox/autocomplete needs
 - [ssgoi](https://github.com/meursyphus/ssgoi) is a page transition library thats support animated page transition with every browser - including Safari
 - [@svelte-put/preaction](https://svelte-put-next.vnphanquang.com/docs/preaction) is a proof-of-concept Svelte preprocessor that allows usage of "preaction" - an extension to Svelte action with the ability to add static attributes on server-side
diff --git a/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
index 7d70021378..49c424ec59 100644
--- a/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
+++ b/apps/svelte.dev/content/blog/2024-11-01-whats-new-in-svelte-november-2024.md
@@ -5,7 +5,7 @@ author: Dani Sandoval
 authorURL: https://dreamindani.com
 ---
 
-In case you missed the [announcement post](https://svelte.dev/blog/svelte-5-is-alive), the brand new [omnisite](https://svelte.dev/blog/the-omnisite) or the maintainers [shipping it LIVE during Svelte Summit](https://www.youtube.com/live/fAPFsRP-mbc?si=Atd1WNpoMddssSna&t=13084)... Svelte 5 is out!
+In case you missed the [announcement post](/blog/svelte-5-is-alive), the brand new [omnisite](/blog/the-omnisite) or the maintainers [shipping it LIVE during Svelte Summit](https://www.youtube.com/live/fAPFsRP-mbc?si=Atd1WNpoMddssSna&t=13084)... Svelte 5 is out!
 
 Also announced at Svelte Summit was [SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes)](https://hack.sveltesociety.dev/2024). The submission period ends January 9 and only projects started after October 18th are eligible. So get those `$`s ready and start hacking!
 
@@ -25,7 +25,7 @@ To see all the amazing work that has gone into making the Svelte compiler better
 ## What's new in SvelteKit, Svelte CLI and Language Tools
 
 - `adapter-auto` now supports the Bun package manager (**3.3.1**, [#12854](https://github.com/sveltejs/kit/pull/12854))
-- The [Svelte CLI](https://svelte.dev/blog/sv-the-svelte-cli) now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in [the CLI Repository](https://github.com/sveltejs/cli) or by running `npx sv create` from your command line.
+- The [Svelte CLI](/blog/sv-the-svelte-cli) now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in [the CLI Repository](https://github.com/sveltejs/cli) or by running `npx sv create` from your command line.
 - The Svelte extension now provides a Svelte 5 component migration command (**extensions-109.1.0**)
 
 ---
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 6b1077b2ce..0927822697 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -184,7 +184,7 @@ function text(
 ## Action
 
 Shape of a form action method that is part of `export const actions = {..}` in `+page.server.js`.
-See [form actions](https://svelte.dev/docs/kit/form-actions) for more information.
+See [form actions](/docs/kit/form-actions) for more information.
 
 <div class="ts-block">
 
@@ -275,7 +275,7 @@ type ActionResult<
 ## Actions
 
 Shape of the `export const actions = {..}` object in `+page.server.js`.
-See [form actions](https://svelte.dev/docs/kit/form-actions) for more information.
+See [form actions](/docs/kit/form-actions) for more information.
 
 <div class="ts-block">
 
@@ -296,7 +296,7 @@ type Actions<
 
 ## Adapter
 
-[Adapters](https://svelte.dev/docs/kit/adapters) are responsible for taking the production build and turning it into something that can be deployed to a platform of your choosing.
+[Adapters](/docs/kit/adapters) are responsible for taking the production build and turning it into something that can be deployed to a platform of your choosing.
 
 <div class="ts-block">
 
@@ -384,7 +384,7 @@ during dev, build and prerendering
 
 ## AfterNavigate
 
-The argument passed to [`afterNavigate`](https://svelte.dev/docs/kit/$app-navigation#afterNavigate) callbacks.
+The argument passed to [`afterNavigate`](/docs/kit/$app-navigation#afterNavigate) callbacks.
 
 <div class="ts-block">
 
@@ -443,7 +443,7 @@ type AwaitedActions<
 
 ## BeforeNavigate
 
-The argument passed to [`beforeNavigate`](https://svelte.dev/docs/kit/$app-navigation#beforeNavigate) callbacks.
+The argument passed to [`beforeNavigate`](/docs/kit/$app-navigation#beforeNavigate) callbacks.
 
 <div class="ts-block">
 
@@ -955,8 +955,8 @@ and returns an `App.Platform` object
 
 ## Handle
 
-The [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook runs every time the SvelteKit server receives a [request](https://svelte.dev/docs/kit/web-standards#Fetch-APIs-Request) and
-determines the [response](https://svelte.dev/docs/kit/web-standards#Fetch-APIs-Response).
+The [`handle`](/docs/kit/hooks#Server-hooks-handle) hook runs every time the SvelteKit server receives a [request](/docs/kit/web-standards#Fetch-APIs-Request) and
+determines the [response](/docs/kit/web-standards#Fetch-APIs-Response).
 It receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`.
 This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
 
@@ -976,7 +976,7 @@ type Handle = (input: {
 
 ## HandleClientError
 
-The client-side [`handleError`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.
+The client-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.
 
 If an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.
 Make sure that this function _never_ throws an error.
@@ -996,7 +996,7 @@ type HandleClientError = (input: {
 
 ## HandleFetch
 
-The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering)
+The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering)
 
 <div class="ts-block">
 
@@ -1012,7 +1012,7 @@ type HandleFetch = (input: {
 
 ## HandleServerError
 
-The server-side [`handleError`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.
+The server-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.
 
 If an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.
 Make sure that this function _never_ throws an error.
@@ -1032,7 +1032,7 @@ type HandleServerError = (input: {
 
 ## HttpError
 
-The object returned by the [`error`](https://svelte.dev/docs/kit/@sveltejs-kit#error) function.
+The object returned by the [`error`](/docs/kit/@sveltejs-kit#error) function.
 
 <div class="ts-block">
 
@@ -1087,7 +1087,7 @@ type LessThan<
 
 ## Load
 
-The generic form of `PageLoad` and `LayoutLoad`. You should import those from `./$types` (see [generated types](https://svelte.dev/docs/kit/types#Generated-types))
+The generic form of `PageLoad` and `LayoutLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))
 rather than using `Load` directly.
 
 <div class="ts-block">
@@ -1119,7 +1119,7 @@ type Load<
 
 ## LoadEvent
 
-The generic form of `PageLoadEvent` and `LayoutLoadEvent`. You should import those from `./$types` (see [generated types](https://svelte.dev/docs/kit/types#Generated-types))
+The generic form of `PageLoadEvent` and `LayoutLoadEvent`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))
 rather than using `LoadEvent` directly.
 
 <div class="ts-block">
@@ -1559,7 +1559,7 @@ type NumericRange<
 
 ## OnNavigate
 
-The argument passed to [`onNavigate`](https://svelte.dev/docs/kit/$app-navigation#onNavigate) callbacks.
+The argument passed to [`onNavigate`](/docs/kit/$app-navigation#onNavigate) callbacks.
 
 <div class="ts-block">
 
@@ -1732,7 +1732,7 @@ Filled only after a form submission. See [form actions](https://svelte.dev/docs/
 
 ## ParamMatcher
 
-The shape of a param matcher. See [matching](https://svelte.dev/docs/kit/advanced-routing#Matching) for more info.
+The shape of a param matcher. See [matching](/docs/kit/advanced-routing#Matching) for more info.
 
 <div class="ts-block">
 
@@ -1754,7 +1754,7 @@ type PrerenderOption = boolean | 'auto';
 
 ## Redirect
 
-The object returned by the [`redirect`](https://svelte.dev/docs/kit/@sveltejs-kit#redirect) function
+The object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function
 
 <div class="ts-block">
 
@@ -2003,7 +2003,7 @@ isSubRequest: boolean;
 
 A `(event: RequestEvent) => Response` function exported from a `+server.js` file that corresponds to an HTTP verb (`GET`, `PUT`, `PATCH`, etc) and handles requests with that method.
 
-It receives `Params` as the first generic argument, which you can skip by using [generated types](https://svelte.dev/docs/kit/types#Generated-types) instead.
+It receives `Params` as the first generic argument, which you can skip by using [generated types](/docs/kit/types#Generated-types) instead.
 
 <div class="ts-block">
 
@@ -2022,7 +2022,7 @@ type RequestHandler<
 
 ## Reroute
 
-The [`reroute`](https://svelte.dev/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
+The [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
 
 <div class="ts-block">
 
@@ -2359,7 +2359,7 @@ A function that turns an asset filename into a `ReadableStream`. Required for th
 
 ## ServerLoad
 
-The generic form of `PageServerLoad` and `LayoutServerLoad`. You should import those from `./$types` (see [generated types](https://svelte.dev/docs/kit/types#Generated-types))
+The generic form of `PageServerLoad` and `LayoutServerLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))
 rather than using `ServerLoad` directly.
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index 8763e1b6ff..eb6fae486a 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -227,7 +227,7 @@ function preloadData(href: string): Promise<
 
 ## pushState
 
-Programmatically create a new history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
+Programmatically create a new history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
 
 <div class="ts-block">
 
@@ -244,7 +244,7 @@ function pushState(
 
 ## replaceState
 
-Programmatically replace the current history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
+Programmatically replace the current history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
index d2a5123db5..eb2416e52c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
@@ -11,7 +11,7 @@ import { assets, base, resolveRoute } from '$app/paths';
 
 ## assets
 
-An absolute path that matches [`config.kit.paths.assets`](https://svelte.dev/docs/kit/configuration#paths).
+An absolute path that matches [`config.kit.paths.assets`](/docs/kit/configuration#paths).
 
 > [!NOTE] If a value for `config.kit.paths.assets` is specified, it will be replaced with `'/_svelte_kit_assets'` during `vite dev` or `vite preview`, since the assets don't yet live at their eventual URL.
 
@@ -31,7 +31,7 @@ let assets:
 
 ## base
 
-A string that matches [`config.kit.paths.base`](https://svelte.dev/docs/kit/configuration#paths).
+A string that matches [`config.kit.paths.base`](/docs/kit/configuration#paths).
 
 Example usage: `<a href="http://github.com/%7Bbase%7D/your-page">Link</a>`
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
index 395e326054..2698387c39 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
@@ -67,7 +67,7 @@ const page: import('svelte/store').Readable<
 
 ## updated
 
-A readable store whose initial value is `false`. If [`version.pollInterval`](https://svelte.dev/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
+A readable store whose initial value is `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
 
 On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md b/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
index b875501564..0fe6457a17 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
@@ -43,7 +43,7 @@ const build: string[];
 
 ## files
 
-An array of URL strings representing the files in your static directory, or whatever directory is specified by `config.kit.files.assets`. You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](https://svelte.dev/docs/kit/configuration)
+An array of URL strings representing the files in your static directory, or whatever directory is specified by `config.kit.files.assets`. You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](/docs/kit/configuration)
 
 <div class="ts-block">
 
@@ -72,7 +72,7 @@ const prerendered: string[];
 
 ## version
 
-See [`config.kit.version`](https://svelte.dev/docs/kit/configuration#version). It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.
+See [`config.kit.version`](/docs/kit/configuration#version). It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index a690e97eee..6e22a754dd 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -175,7 +175,7 @@ message: string;
 
 ## Locals
 
-The interface that defines `event.locals`, which can be accessed in server [hooks](https://svelte.dev/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
+The interface that defines `event.locals`, which can be accessed in server [hooks](/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
 
 <div class="ts-block">
 
@@ -187,7 +187,7 @@ interface Locals {}
 
 ## PageData
 
-Defines the common shape of the [$page.data store](https://svelte.dev/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
+Defines the common shape of the [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
 The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
 Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
 
@@ -201,7 +201,7 @@ interface PageData {}
 
 ## PageState
 
-The shape of the `$page.state` object, which can be manipulated using the [`pushState`](https://svelte.dev/docs/kit/$app-navigation#pushState) and [`replaceState`](https://svelte.dev/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
+The shape of the `$page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
 
 <div class="ts-block">
 
@@ -213,7 +213,7 @@ interface PageState {}
 
 ## Platform
 
-If your adapter provides [platform-specific context](https://svelte.dev/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.
+If your adapter provides [platform-specific context](/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index f5315b7943..e647351f91 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -82,7 +82,7 @@ Use callback props and/or the `$host()` rune instead — see https://svelte.dev/
 
 </blockquote>
 
-Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).
+Creates an event dispatcher that can be used to dispatch [component events](/docs/svelte/legacy-on#Component-events).
 Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
 Component events created with `createEventDispatcher` create a
@@ -279,7 +279,7 @@ it can be called from an external module).
 
 If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
 
-`onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
+`onMount` does not run inside [server-side components](/docs/svelte/svelte-server#render).
 
 <div class="ts-block">
 
@@ -344,7 +344,7 @@ function unmount(component: Record<string, any>): void;
 
 ## untrack
 
-When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
+When used inside a [`$derived`](/docs/svelte/$derived) or [`$effect`](/docs/svelte/$effect),
 any state read inside `fn` will not be treated as a dependency.
 
 ```ts
@@ -733,7 +733,7 @@ let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
 ```
 You can only call a snippet through the `{@render ...}` tag.
 
-https://svelte.dev/docs/svelte/snippet
+/docs/svelte/snippet
 
 <div class="ts-block">
 
@@ -763,7 +763,7 @@ interface Snippet<Parameters extends unknown[] = []> {/*…*/}
 This was the base class for Svelte components in Svelte 4. Svelte 5+ components
 are completely different under the hood. For typing, use `Component` instead.
 To instantiate components, use `mount` instead`.
-See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 476fe2f031..229a67b459 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -21,7 +21,7 @@ import {
 
 The current version, as set in package.json.
 
-https://svelte.dev/docs/svelte-compiler#svelte-version
+/docs/svelte-compiler#svelte-version
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
index ee626f94ca..a555815ddf 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
@@ -42,7 +42,7 @@ function blur(
 
 ## crossfade
 
-The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+The `crossfade` function creates a pair of [transitions](/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 56cfd864ca..66d399a4a3 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -1,3 +1,4 @@
+import { strip_origin } from '@sveltejs/site-kit/markdown';
 import { preprocess } from '@sveltejs/site-kit/markdown/preprocess';
 import path from 'node:path';
 import fs from 'node:fs';
@@ -6,7 +7,7 @@ import ts from 'typescript';
 import glob from 'tiny-glob/sync';
 import chokidar from 'chokidar';
 import { fileURLToPath } from 'node:url';
-import { clone_repo, migrate_meta_json, strip_origin } from './utils';
+import { clone_repo, migrate_meta_json } from './utils';
 import { get_types, read_d_ts_file, read_types } from './types';
 import type { Modules } from '@sveltejs/site-kit/markdown';
 
diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index 2e7f054d75..592b0ed21c 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -1,8 +1,12 @@
 import fs from 'node:fs';
 import ts from 'typescript';
 import { format } from 'prettier';
-import { strip_origin } from './utils';
-import type { Modules, Declaration, TypeElement } from '@sveltejs/site-kit/markdown';
+import {
+	type Modules,
+	type Declaration,
+	type TypeElement,
+	strip_origin
+} from '@sveltejs/site-kit/markdown';
 
 export async function read_types(base: string, modules: Modules) {
 	{
diff --git a/apps/svelte.dev/scripts/sync-docs/utils.ts b/apps/svelte.dev/scripts/sync-docs/utils.ts
index 93871e874f..c5f41c0279 100644
--- a/apps/svelte.dev/scripts/sync-docs/utils.ts
+++ b/apps/svelte.dev/scripts/sync-docs/utils.ts
@@ -56,13 +56,3 @@ export function migrate_meta_json(path: string) {
 		fs.writeFileSync(file.replace('meta.json', 'index.md'), new_content);
 	}
 }
-
-/**
- * Type declarations include fully qualified URLs so that they become links when
- * you hover over names in an editor with TypeScript enabled. We need to remove
- * the origin so that they become root-relative, so that they work in preview
- * deployments and when developing locally
- */
-export function strip_origin(str: string) {
-	return str.replaceAll('https://svelte.dev/', '');
-}
diff --git a/packages/site-kit/src/lib/markdown/index.ts b/packages/site-kit/src/lib/markdown/index.ts
index c5ee6ecb17..3fe58b19a7 100644
--- a/packages/site-kit/src/lib/markdown/index.ts
+++ b/packages/site-kit/src/lib/markdown/index.ts
@@ -1,6 +1,6 @@
 export { render_content_markdown } from './renderer';
 
-export { transform, slugify, clean } from './utils';
+export { transform, slugify, clean, strip_origin } from './utils';
 
 // TODO none of these really belong here
 export type Modules = Array<{
diff --git a/packages/site-kit/src/lib/markdown/preprocess.ts b/packages/site-kit/src/lib/markdown/preprocess.ts
index 41a6cf7b65..cdb7155065 100644
--- a/packages/site-kit/src/lib/markdown/preprocess.ts
+++ b/packages/site-kit/src/lib/markdown/preprocess.ts
@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { SHIKI_LANGUAGE_MAP } from './utils';
+import { SHIKI_LANGUAGE_MAP, strip_origin } from './utils';
 import type { Declaration, TypeElement, Modules } from './index';
 
 /**
@@ -126,7 +126,7 @@ function render_declaration(declaration: Declaration, full: boolean) {
 	}
 
 	if (declaration.comment) {
-		content += declaration.comment + '\n\n';
+		content += strip_origin(declaration.comment) + '\n\n';
 	}
 
 	return (
@@ -194,7 +194,7 @@ function stringify_module(module: Modules[0]) {
 	}
 
 	if (module.comment) {
-		content += `${module.comment}\n\n`;
+		content += `${strip_origin(module.comment)}\n\n`;
 	}
 
 	for (const declaration of module.exports || []) {
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index d12d453c42..71bafd9f90 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -136,3 +136,13 @@ const parse = (str: string) => {
 		return str;
 	}
 };
+
+/**
+ * Type declarations include fully qualified URLs so that they become links when
+ * you hover over names in an editor with TypeScript enabled. We need to remove
+ * the origin so that they become root-relative, so that they work in preview
+ * deployments and when developing locally
+ */
+export function strip_origin(str: string) {
+	return str.replaceAll('https://svelte.dev/', '');
+}

From 401fe40a18cc44ef17ae4a6c7323069660bdc83b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 18:15:43 -0500
Subject: [PATCH 116/453] downgrade svelte (#810)

---
 apps/svelte.dev/package.json     |   2 +-
 apps/svelte.dev/svelte.config.js |   2 +-
 pnpm-lock.yaml                   | 117 +++++++++++++++++++++----------
 3 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index ed7509e546..2dfa8fac19 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -71,7 +71,7 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "5.1.10",
+		"svelte": "5.1.9",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^5.1.4",
 		"tiny-glob": "^0.2.9",
diff --git a/apps/svelte.dev/svelte.config.js b/apps/svelte.dev/svelte.config.js
index c32bb82b4e..0003193cc9 100644
--- a/apps/svelte.dev/svelte.config.js
+++ b/apps/svelte.dev/svelte.config.js
@@ -19,7 +19,7 @@ const config = {
 					return;
 				}
 
-				throw new Error(warning.message);
+				console.error(warning.message);
 			}
 		}
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d81bf96455..49eba003e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.1.10)
+        version: 1.1.3(svelte@5.1.9)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)
+        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -113,19 +113,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
-        version: 0.3.4(rollup@4.21.2)(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.3.4(rollup@4.21.2)(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0-next.6
-        version: 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -164,7 +164,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.9)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -172,14 +172,14 @@ importers:
         specifier: ^0.3.2
         version: 0.3.2
       svelte:
-        specifier: 5.1.10
-        version: 5.1.10
+        specifier: 5.1.9
+        version: 5.1.9
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.9)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^5.1.4
-        version: 5.1.4(postcss@8.4.45)(svelte@5.1.10)(typescript@5.5.4)
+        version: 5.1.4(postcss@8.4.45)(svelte@5.1.9)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -2965,6 +2965,10 @@ packages:
     resolution: {integrity: sha512-lDR04z/5taV2qhqYt7UXQ3sVuv/FVfbHz4UBQpYP9Xlcv2OV0rw74hkZ7kbdZr3UKLgGdIGxG2UBxtRmgzB2Cg==}
     engines: {node: '>=18'}
 
+  svelte@5.1.9:
+    resolution: {integrity: sha512-nzq+PPKGS2PoEWDjAcXSrKSbXmmmOAxd6dAz1IhRusUpVkFS6DMELWPyBPGwu6TpO/gsgtFXwX0M4+pAR5gzKw==}
+    engines: {node: '>=18'}
+
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
@@ -4120,6 +4124,10 @@ snapshots:
     dependencies:
       svelte: 5.1.10
 
+  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.9)':
+    dependencies:
+      svelte: 5.1.9
+
   '@rollup/browser@4.17.2':
     dependencies:
       '@types/estree': 1.0.5
@@ -4273,24 +4281,24 @@ snapshots:
       '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
-      svelte: 5.1.10
-      svelte-parse-markup: 0.1.5(svelte@5.1.10)
+      svelte: 5.1.9
+      svelte-parse-markup: 0.1.5(svelte@5.1.9)
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
     transitivePeerDependencies:
@@ -4314,9 +4322,9 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4328,7 +4336,7 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.1.10
+      svelte: 5.1.9
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
@@ -4356,11 +4364,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.1.10
+      svelte: 5.1.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
@@ -4378,14 +4386,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.1.10
+      svelte: 5.1.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4402,10 +4410,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.1.10
+      svelte: 5.1.9
     optionalDependencies:
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4489,10 +4497,10 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)':
     optionalDependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.1.10
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.1.9
 
   '@vitest/expect@2.1.2':
     dependencies:
@@ -5511,6 +5519,11 @@ snapshots:
       prettier: 3.3.2
       svelte: 5.1.10
 
+  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.9):
+    dependencies:
+      prettier: 3.3.2
+      svelte: 5.1.9
+
   prettier@2.8.8: {}
 
   prettier@3.3.2: {}
@@ -5787,22 +5800,34 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
-  svelte-parse-markup@0.1.5(svelte@5.1.10):
+  svelte-check@4.0.1(svelte@5.1.9)(typescript@5.5.4):
     dependencies:
-      svelte: 5.1.10
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 3.6.0
+      fdir: 6.3.0
+      picocolors: 1.1.0
+      sade: 1.8.1
+      svelte: 5.1.9
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte-parse-markup@0.1.5(svelte@5.1.9):
+    dependencies:
+      svelte: 5.1.9
 
   svelte-persisted-store@0.9.4(svelte@5.1.10):
     dependencies:
       svelte: 5.1.10
 
-  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.10)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.9)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.12
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.1.10
+      svelte: 5.1.9
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
@@ -5830,6 +5855,22 @@ snapshots:
       magic-string: 0.30.12
       zimmerframe: 1.1.2
 
+  svelte@5.1.9:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      esm-env: 1.0.0
+      esrap: 1.2.2
+      is-reference: 3.0.2
+      locate-character: 3.0.0
+      magic-string: 0.30.12
+      zimmerframe: 1.1.2
+
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0

From a9552a30f44133f9743052486b79b7fc2d7b9ff3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 6 Nov 2024 08:14:53 -0500
Subject: [PATCH 117/453] bump svelte (#811)

---
 apps/svelte.dev/package.json     |   2 +-
 apps/svelte.dev/svelte.config.js |   2 +-
 packages/editor/package.json     |   2 +-
 packages/repl/package.json       |   2 +-
 packages/site-kit/package.json   |   2 +-
 pnpm-lock.yaml                   | 223 +++++++++++++------------------
 6 files changed, 96 insertions(+), 137 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 2dfa8fac19..ebdf595265 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -71,7 +71,7 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "5.1.9",
+		"svelte": "5.1.11",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^5.1.4",
 		"tiny-glob": "^0.2.9",
diff --git a/apps/svelte.dev/svelte.config.js b/apps/svelte.dev/svelte.config.js
index 0003193cc9..c32bb82b4e 100644
--- a/apps/svelte.dev/svelte.config.js
+++ b/apps/svelte.dev/svelte.config.js
@@ -19,7 +19,7 @@ const config = {
 					return;
 				}
 
-				console.error(warning.message);
+				throw new Error(warning.message);
 			}
 		}
 	}
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 1d237a0223..2a3bc539a4 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -55,7 +55,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.2.0",
-		"svelte": "^5.1.10",
+		"svelte": "^5.1.11",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
diff --git a/packages/repl/package.json b/packages/repl/package.json
index c8c5d20efd..41d315bba9 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -85,7 +85,7 @@
 		"esrap": "^1.2.2",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.1.10",
+		"svelte": "5.1.11",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 97c214c74f..0f7318292c 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -53,7 +53,7 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
-		"svelte": "5.1.10",
+		"svelte": "5.1.11",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49eba003e8..a6f880a600 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.1.9)
+        version: 1.1.3(svelte@5.1.11)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)
+        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -113,19 +113,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
-        version: 0.3.4(rollup@4.21.2)(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0-next.6
-        version: 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -164,7 +164,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.9)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -172,14 +172,14 @@ importers:
         specifier: ^0.3.2
         version: 0.3.2
       svelte:
-        specifier: 5.1.9
-        version: 5.1.9
+        specifier: 5.1.11
+        version: 5.1.11
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.9)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^5.1.4
-        version: 5.1.4(postcss@8.4.45)(svelte@5.1.9)(typescript@5.5.4)
+        version: 5.1.4(postcss@8.4.45)(svelte@5.1.11)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -246,13 +246,13 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../repl
@@ -261,7 +261,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -270,16 +270,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
       publint:
         specifier: ^0.2.0
         version: 0.2.11
       svelte:
-        specifier: ^5.1.10
-        version: 5.1.10
+        specifier: ^5.1.11
+        version: 5.1.11
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -330,7 +330,7 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.1.10)
+        version: 1.1.3(svelte@5.1.11)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -339,7 +339,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
         specifier: ^2.2.0
-        version: 2.2.0(svelte@5.1.10)
+        version: 2.2.0(svelte@5.1.11)
       acorn:
         specifier: ^8.11.3
         version: 8.12.1
@@ -359,8 +359,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: 5.1.10
-        version: 5.1.10
+        specifier: 5.1.11
+        version: 5.1.11
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -373,16 +373,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -391,13 +391,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
       publint:
         specifier: ^0.1.9
         version: 0.1.16
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -472,11 +472,11 @@ importers:
         version: 1.22.0
       svelte-persisted-store:
         specifier: ^0.9.2
-        version: 0.9.4(svelte@5.1.10)
+        version: 0.9.4(svelte@5.1.11)
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -494,13 +494,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.10)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
       svelte:
-        specifier: 5.1.10
-        version: 5.1.10
+        specifier: 5.1.11
+        version: 5.1.11
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.10)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -2961,12 +2961,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.1.10:
-    resolution: {integrity: sha512-lDR04z/5taV2qhqYt7UXQ3sVuv/FVfbHz4UBQpYP9Xlcv2OV0rw74hkZ7kbdZr3UKLgGdIGxG2UBxtRmgzB2Cg==}
-    engines: {node: '>=18'}
-
-  svelte@5.1.9:
-    resolution: {integrity: sha512-nzq+PPKGS2PoEWDjAcXSrKSbXmmmOAxd6dAz1IhRusUpVkFS6DMELWPyBPGwu6TpO/gsgtFXwX0M4+pAR5gzKw==}
+  svelte@5.1.11:
+    resolution: {integrity: sha512-XpPcUBKCg2c+L0nDTkv0ekc8LOHMzN328MNOeAHt4sRcX5AROU9tkqwL35VvE6srt8RpmnzsXBGDwyRB5TSbuw==}
     engines: {node: '>=18'}
 
   tar@6.2.1:
@@ -4120,13 +4116,9 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.10)':
-    dependencies:
-      svelte: 5.1.10
-
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.9)':
+  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.11)':
     dependencies:
-      svelte: 5.1.9
+      svelte: 5.1.11
 
   '@rollup/browser@4.17.2':
     dependencies:
@@ -4276,37 +4268,37 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
-      svelte: 5.1.9
-      svelte-parse-markup: 0.1.5(svelte@5.1.9)
+      svelte: 5.1.11
+      svelte-parse-markup: 0.1.5(svelte@5.1.11)
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4318,13 +4310,13 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.1.10
+      svelte: 5.1.11
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4336,64 +4328,64 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.1.9
+      svelte: 5.1.11
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/package@2.3.1(svelte@5.1.10)(typescript@5.5.4)':
+  '@sveltejs/package@2.3.1(svelte@5.1.11)(typescript@5.5.4)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.2
-      svelte: 5.1.10
-      svelte2tsx: 0.7.8(svelte@5.1.10)(typescript@5.5.4)
+      svelte: 5.1.11
+      svelte2tsx: 0.7.8(svelte@5.1.11)(typescript@5.5.4)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/svelte-json-tree@2.2.0(svelte@5.1.10)':
+  '@sveltejs/svelte-json-tree@2.2.0(svelte@5.1.11)':
     dependencies:
-      svelte: 5.1.10
+      svelte: 5.1.11
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.1.10
+      svelte: 5.1.11
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.1.9
+      svelte: 5.1.11
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.10)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.1.10
+      svelte: 5.1.11
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.1.9
+      svelte: 5.1.11
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4410,10 +4402,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.1.9
+      svelte: 5.1.11
     optionalDependencies:
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4497,10 +4489,10 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)':
     optionalDependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.9)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.1.9
+      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.1.11
 
   '@vitest/expect@2.1.2':
     dependencies:
@@ -5514,15 +5506,10 @@ snapshots:
       path-exists: 4.0.0
       which-pm: 2.0.0
 
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.10):
+  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.11):
     dependencies:
       prettier: 3.3.2
-      svelte: 5.1.10
-
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.9):
-    dependencies:
-      prettier: 3.3.2
-      svelte: 5.1.9
+      svelte: 5.1.11
 
   prettier@2.8.8: {}
 
@@ -5788,74 +5775,46 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  svelte-check@4.0.1(svelte@5.1.10)(typescript@5.5.4):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      fdir: 6.3.0
-      picocolors: 1.1.0
-      sade: 1.8.1
-      svelte: 5.1.10
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - picomatch
-
-  svelte-check@4.0.1(svelte@5.1.9)(typescript@5.5.4):
+  svelte-check@4.0.1(svelte@5.1.11)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       fdir: 6.3.0
       picocolors: 1.1.0
       sade: 1.8.1
-      svelte: 5.1.9
+      svelte: 5.1.11
       typescript: 5.5.4
     transitivePeerDependencies:
       - picomatch
 
-  svelte-parse-markup@0.1.5(svelte@5.1.9):
+  svelte-parse-markup@0.1.5(svelte@5.1.11):
     dependencies:
-      svelte: 5.1.9
+      svelte: 5.1.11
 
-  svelte-persisted-store@0.9.4(svelte@5.1.10):
+  svelte-persisted-store@0.9.4(svelte@5.1.11):
     dependencies:
-      svelte: 5.1.10
+      svelte: 5.1.11
 
-  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.9)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.11)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.12
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.1.9
+      svelte: 5.1.11
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
 
-  svelte2tsx@0.7.8(svelte@5.1.10)(typescript@5.5.4):
+  svelte2tsx@0.7.8(svelte@5.1.11)(typescript@5.5.4):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.1.10
+      svelte: 5.1.11
       typescript: 5.5.4
 
-  svelte@5.1.10:
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.14.0
-      acorn-typescript: 1.4.13(acorn@8.14.0)
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      esm-env: 1.0.0
-      esrap: 1.2.2
-      is-reference: 3.0.2
-      locate-character: 3.0.0
-      magic-string: 0.30.12
-      zimmerframe: 1.1.2
-
-  svelte@5.1.9:
+  svelte@5.1.11:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0

From 42cd65f30819aeaba15e3fbf59adc700e075aa39 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 6 Nov 2024 09:42:14 -0500
Subject: [PATCH 118/453] add bluesky link (#812)

---
 apps/svelte.dev/src/lib/icons/bluesky-dark.svg  |  3 +++
 apps/svelte.dev/src/lib/icons/bluesky-light.svg |  3 +++
 packages/site-kit/src/lib/nav/MobileMenu.svelte |  1 +
 packages/site-kit/src/lib/nav/Nav.svelte        | 14 ++++++++++++++
 4 files changed, 21 insertions(+)
 create mode 100644 apps/svelte.dev/src/lib/icons/bluesky-dark.svg
 create mode 100644 apps/svelte.dev/src/lib/icons/bluesky-light.svg

diff --git a/apps/svelte.dev/src/lib/icons/bluesky-dark.svg b/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
new file mode 100644
index 0000000000..690f699a80
--- /dev/null
+++ b/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path fill="#d4d4d4" d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+</svg>
diff --git a/apps/svelte.dev/src/lib/icons/bluesky-light.svg b/apps/svelte.dev/src/lib/icons/bluesky-light.svg
new file mode 100644
index 0000000000..23249f9ed0
--- /dev/null
+++ b/apps/svelte.dev/src/lib/icons/bluesky-light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path fill="#666" d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+</svg>
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index d07bcc1fd2..abfda674c2 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -146,6 +146,7 @@
 
 						<ul>
 							<li><a href="http://github.com/chat">Discord</a></li>
+							<li><a href="https://bsky.app/profile/sveltesociety.dev">Bluesky</a></li>
 							<li><a href="https://github.com/sveltejs/svelte">GitHub</a></li>
 						</ul>
 					</div>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 5852493cc1..c1d1d321d6 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -124,6 +124,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 			<div class="external-links">
 				<a href="http://github.com/chat" data-icon="discord" aria-label="Discord Chat"></a>
+				<a
+					href="https://bsky.app/profile/sveltesociety.dev"
+					data-icon="bluesky"
+					aria-label="Svelte Society on Bluesky"
+				></a>
 				<a href="https://github.com/sveltejs/svelte" data-icon="github" aria-label="GitHub Repo"
 				></a>
 			</div>
@@ -385,6 +390,15 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				}
 			}
 
+			[data-icon='bluesky'] {
+				width: 3rem;
+				background-image: url(http://github.com/$lib/icons/bluesky-light.svg);
+
+				:global(.dark) & {
+					background-image: url(http://github.com/$lib/icons/bluesky-dark.svg);
+				}
+			}
+
 			[data-icon='github'] {
 				width: 3rem;
 				background-image: url(http://github.com/$lib/icons/github-light.svg);

From 5daa90bcc06ae4598531cef14e2718c8977073e5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 6 Nov 2024 20:48:56 -0500
Subject: [PATCH 119/453] fix redirects (#819)

* fix redirects

* bump
---
 apps/svelte.dev/package.json                  |  4 +-
 .../routes/tutorial/[...slug]/+page.server.ts |  3 +
 packages/editor/package.json                  |  2 +-
 packages/repl/package.json                    |  2 +-
 packages/site-kit/package.json                |  2 +-
 pnpm-lock.yaml                                | 56 +++++++++----------
 6 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index ebdf595265..d02571c2e7 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -50,9 +50,9 @@
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
-		"@sveltejs/adapter-vercel": "^5.4.3",
+		"@sveltejs/adapter-vercel": "^5.4.7",
 		"@sveltejs/enhanced-img": "^0.3.4",
-		"@sveltejs/kit": "^2.7.7",
+		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
 		"@types/cookie": "^0.6.0",
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
index dc417b0af9..f69d91c964 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
@@ -39,5 +39,8 @@ export function entries() {
 	// So that redirects from these URLs to /tutorial/<svelte/kit>/... work
 	entries.push({ slug: 'svelte' }, { slug: 'kit' });
 
+	// So that /tutorial/ redirects to /tutorial
+	entries.push({ slug: '' });
+
 	return entries;
 }
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 2a3bc539a4..57aa323ae3 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -46,7 +46,7 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.7.7",
+		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/repl": "workspace:*",
 		"@sveltejs/site-kit": "workspace:*",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 41d315bba9..e32aeeac1b 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -49,7 +49,7 @@
 	"devDependencies": {
 		"@lezer/common": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.7.7",
+		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 0f7318292c..71c07c0906 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -46,7 +46,7 @@
 		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.7.7",
+		"@sveltejs/kit": "^2.8.0",
 		"@types/node": "^20.12.11",
 		"flexsearch": "^0.7.43",
 		"magic-string": "^0.30.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6f880a600..602dc3a4d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)
+        version: 1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -112,14 +112,14 @@ importers:
         specifier: ^2.43.4
         version: 2.43.4
       '@sveltejs/adapter-vercel':
-        specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        specifier: ^5.4.7
+        version: 5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
         version: 0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.8.0
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
@@ -246,10 +246,10 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.8.0
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
@@ -373,10 +373,10 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.8.0
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
@@ -475,8 +475,8 @@ importers:
         version: 0.9.4(svelte@5.1.11)
     devDependencies:
       '@sveltejs/kit':
-        specifier: ^2.7.7
-        version: 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.8.0
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -1441,8 +1441,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/adapter-vercel@5.4.3':
-    resolution: {integrity: sha512-srZBkMpeaa7lflO1ZGdKTW3jWHscE9rdAkyxgRlVMVyugjcPOZ3dcpEfpoM4wtVCbpEOdHniWqQR9yL+zs4ybA==}
+  '@sveltejs/adapter-vercel@5.4.7':
+    resolution: {integrity: sha512-yOKz0fO6G35UbTgEm8VWVeZqnOmMjhxANJt0hlsCo9OKcbLq2cTuh6AvVmcvhg8BzLEspiF4gv8ENtuJgHWvgA==}
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
@@ -1457,8 +1457,8 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.7.7':
-    resolution: {integrity: sha512-EvNErTd0QuIUX6SbZecOJQus3cILJR87XyIQXF4kfwWap63/OV58GGTEI47k3ydrFssAWGw4eu3RlB2dmBYETA==}
+  '@sveltejs/kit@2.8.0':
+    resolution: {integrity: sha512-HCiWupCuKJQ3aPaC4Xc6lpPdjOOnoGzEiYjOqMqppdtfGtY2ABrx932Vw66ZwS2RGXc0BmZvFvNq5SzqlmDVLg==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -4268,23 +4268,23 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
   '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
@@ -4296,7 +4296,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4314,7 +4314,7 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4489,9 +4489,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)':
     optionalDependencies:
-      '@sveltejs/kit': 2.7.7(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.1.11
 
   '@vitest/expect@2.1.2':

From 175a8f2d07c1d1fd2536b246d970bb242d5ef5be Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:49:20 -0500
Subject: [PATCH 120/453] Sync `kit` docs (#818)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/98-reference/10-@sveltejs-kit.md   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 0927822697..0eb8a5b8c6 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -10,6 +10,7 @@ import {
 	VERSION,
 	error,
 	fail,
+	isActionFailure,
 	isHttpError,
 	isRedirect,
 	json,
@@ -86,6 +87,22 @@ function fail<
 
 
 
+## isActionFailure
+
+Checks whether this is an action failure thrown by `fail`.
+
+<div class="ts-block">
+
+```dts
+function isActionFailure(
+	e: unknown
+): e is ActionFailure<undefined>;
+```
+
+</div>
+
+
+
 ## isHttpError
 
 Checks whether this is an error thrown by `error`.

From f34057743fd85783016bbe2c985ee9d94db0e41b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:09:20 -0500
Subject: [PATCH 121/453] Sync `svelte` docs (#814)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/07-misc/03-typescript.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
index 5e16382187..e02ac7b6b1 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge
 
 ## Typing wrapper components
 
-In case you're writing a component that wraps a native element, you may want to expose all the attributes of underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
+In case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
 
 ```svelte
 <script lang="ts">
@@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
 </button>
 ```
 
+Not all elements have a dedicated type definition. For those without one, use `SvelteHTMLElements`:
+
+```svelte
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	let { children, ...rest }: SvelteHTMLElements['div'] = $props();
+</script>
+
+<div {...rest}>
+	{@render children()}
+</div>
+```
+
 ## Typing `$state`
 
 You can type `$state` like any other variable.

From bda251ecaaeafb5aeeffdfdef452cf8c5c7cf816 Mon Sep 17 00:00:00 2001
From: Alc-Alc <45509143+Alc-Alc@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:40:57 +0530
Subject: [PATCH 122/453] docs(snippets-and-render-tags): Replace hard coded
 text (#820)

docs(snippets-and-render-tags): Replace hard coded text with `{description}` in `monkey` snippet

Co-authored-by: Alc-Alc <alc@localhost>
---
 .../02-snippets/01-snippets-and-render-tags/index.md            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md
index d9331e47aa..8d827a73db 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md
@@ -15,7 +15,7 @@ Begin by _declaring a snippet_:
 +++{#snippet monkey()}+++
 	<tr>
 		<td>{emoji}</td>
-		<td>see no evil</td>
+		<td>{description}</td>
 		<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
 		<td>&amp#{emoji.codePointAt(0)}</td>
 	</tr>

From 2e91d807ec5a58493150740c088c766d40652945 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 12 Nov 2024 03:49:02 -0500
Subject: [PATCH 123/453] fix: mobile nav links to SvelteKit tutorials (#830)

Fixes #829. Pointing the link to the right place seemed like the correct way to address this, not fixing the redirects.
---
 apps/svelte.dev/src/routes/+layout.server.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index cedf974eec..d5afa4bd2b 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -28,7 +28,11 @@ const nav_links: NavigationLink[] = [
 				title: section.metadata.title,
 				sections: section.children.map((page) => ({
 					title: page.metadata.title,
-					path: '/tutorial/' + page.slug.split('/').pop()
+					path:
+						'/tutorial/' +
+						(page.slug.includes('sveltekit/') ? 'kit' : 'svelte') +
+						'/' +
+						page.slug.split('/').pop()
 				}))
 			}))
 		}))

From 220fb5e91213744dd1ca4aa9cd9b89378e1bbc7e Mon Sep 17 00:00:00 2001
From: broemp <derbrommi@live.de>
Date: Wed, 13 Nov 2024 22:35:21 +0100
Subject: [PATCH 124/453] docs: Fix Typo in advanced tutorial (#863)

Update index.md

Fix Typo
---
 .../01-advanced-reactivity/01-raw-state/index.md                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md
index 937fa219d2..118197c26e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md
@@ -4,7 +4,7 @@ title: Raw state
 
 In previous exercises, we learned that state is [deeply reactive](deep-state) — if you (for example) change a property of an object, or push to an array, it will cause the UI to update. This works by creating a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that intercepts reads and writes.
 
-Occasionally, that's not what you want. If you're not changing individual properties, or if it's important to main referential equality, then you can use _raw state_ instead.
+Occasionally, that's not what you want. If you're not changing individual properties, or if it's important to maintain referential equality, then you can use _raw state_ instead.
 
 In this example, we have a chart of Svelte's steadily increasing stock price. We want the chart to update when new data comes in, which we could achieve by turning `data` into state...
 

From e88231b17657802b29931916806b8d29601fa3d2 Mon Sep 17 00:00:00 2001
From: Lael <127096683+laelhalawani@users.noreply.github.com>
Date: Mon, 25 Nov 2024 18:05:13 +0100
Subject: [PATCH 125/453] docs: tweak tutorial (#879)

clarified the code slightly by providing file names where the changes apply for context and an example of the last use
---
 .../01-svelte/03-props/03-spread-props/index.md        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
index daded48b5e..37ab21c616 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
@@ -2,7 +2,7 @@
 title: Spread props
 ---
 
-In this exercise, we've forgotten to pass the `name` prop expected by `PackageInfo.svelte`, meaning the `<code>` element is empty and the npm link is broken.
+In this exercise, in `App.svelte` we've forgotten to pass the `name` prop expected by `PackageInfo.svelte`, meaning the `<code>` element is empty and the npm link is broken.
 
 We _could_ fix it by adding the prop...
 
@@ -23,7 +23,7 @@ We _could_ fix it by adding the prop...
 <PackageInfo +++{...pkg}+++ />
 ```
 
-> [!NOTE] Conversely, you can get an object containing all the props that were passed into a component using a rest property...
+> [!NOTE] Conversely, in `PackageInfo.svelte` you can get an object containing all the props that were passed into a component using a rest property...
 >
 > ```js
 > let { name, ...stuff } = $props();
@@ -34,3 +34,9 @@ We _could_ fix it by adding the prop...
 > ```js
 > let stuff = $props();
 > ```
+>
+> ...in which case you can access the properties by their object paths:
+>
+> ```js
+> console.log(stuff.name, stuff.version, stuff.description, stuff.website)
+> ```

From 799fd0f718eb5d617ade842a79ac553a1217810c Mon Sep 17 00:00:00 2001
From: Konstantinos Kostarellis <delight@users.noreply.github.com>
Date: Mon, 25 Nov 2024 18:10:54 +0100
Subject: [PATCH 126/453] fix: repl example '<svelte:document>' (#871)

Fixing the repl example '<svelte:document>'

Svelte Repl isn't working without `.toString()` on the selection.
---
 .../17-special-elements/04-svelte-document/+assets/App.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte
index e3ea0002e4..822fd884a0 100644
--- a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte
+++ b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	let selection = $state('');
 
-	const handleSelectionChange = (e) => (selection = document.getSelection());
+	const handleSelectionChange = (e) => (selection = document.getSelection().toString());
 </script>
 
 <svelte:document onselectionchange={handleSelectionChange} />

From 0b7a0cb49833e23b97e22353fdf62b1c022a1b64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 25 Nov 2024 18:12:26 +0100
Subject: [PATCH 127/453] fix: resolve `module` and `browser` conditions for
 fetched packages in REPL (#872)

Resolve `module` and `browser` conditions for fetched packages in REPL
---
 packages/repl/src/lib/workers/bundler/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index c241fa922d..1aae33b2a2 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -176,7 +176,7 @@ async function resolve_from_pkg(
 		try {
 			const resolved = resolve.exports(pkg, subpath, {
 				browser: true,
-				conditions: ['svelte', 'development']
+				conditions: ['svelte', 'module', 'browser', 'development']
 			});
 
 			return resolved?.[0];

From a9367a41c9afd93e56f1939cbed1ba36d4cc6b43 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 25 Nov 2024 12:14:48 -0500
Subject: [PATCH 128/453] feat: add vim mode via query param (#813)

closes #570
---
 packages/editor/src/lib/Workspace.svelte.ts | 38 +++++++++++----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index ce67848cc2..d73f4f65ea 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -52,31 +52,17 @@ function file_type(file: Item) {
 }
 
 const tab_behaviour = new Compartment();
+const vim_mode = new Compartment();
 
 const default_extensions = [
 	basicSetup,
 	EditorState.tabSize.of(2),
 	tab_behaviour.of(keymap.of([{ key: 'Tab', run: acceptCompletion }])),
 	indentUnit.of('\t'),
-	theme
+	theme,
+	vim_mode.of([])
 ];
 
-// TODO add vim mode via a compartment (https://codemirror.net/examples/config/)
-// let installed_vim = false;
-// let should_install_vim = localStorage.getItem('vim') === 'true';
-
-// const q = new URLSearchParams(location.search);
-// if (q.has('vim')) {
-// 	should_install_vim = q.get('vim') === 'true';
-// 	localStorage.setItem('vim', should_install_vim.toString());
-// }
-
-// if (!installed_vim && should_install_vim) {
-// 	installed_vim = true;
-// 	const { vim } = await import('@replit/codemirror-vim');
-// 	extensions.push(vim());
-// }
-
 export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
@@ -243,11 +229,27 @@ export class Workspace {
 		this.modified = {};
 	}
 
-	link(view: EditorView) {
+	async link(view: EditorView) {
 		if (this.#view) throw new Error('view is already linked');
 		this.#view = view;
 
 		view.setState(this.#get_state(untrack(() => this.#current)));
+
+		let should_install_vim = localStorage.getItem('vim') === 'true';
+
+		const q = new URLSearchParams(location.search);
+		if (q.has('vim')) {
+			should_install_vim = q.get('vim') === 'true';
+			localStorage.setItem('vim', should_install_vim.toString());
+		}
+
+		if (should_install_vim) {
+			const { vim } = await import('@replit/codemirror-vim');
+
+			this.#view?.dispatch({
+				effects: vim_mode.reconfigure(vim())
+			});
+		}
 	}
 
 	move(from: Item, to: Item) {

From d401d8c0d79c8411a7580957434b1ad90dd698e7 Mon Sep 17 00:00:00 2001
From: Thiago Lino Gomes <thiagolinog8@gmail.com>
Date: Tue, 26 Nov 2024 09:29:29 -0300
Subject: [PATCH 129/453] fix: update all $state.frozen autocomplete sugestions
 to $state.raw (#889)

---
 .../tutorial/01-svelte/03-props/03-spread-props/index.md    | 2 +-
 .../src/lib/codemirror/autocompletionDataProvider.js        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
index 37ab21c616..adfcaacb66 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
@@ -38,5 +38,5 @@ We _could_ fix it by adding the prop...
 > ...in which case you can access the properties by their object paths:
 >
 > ```js
-> console.log(stuff.name, stuff.version, stuff.description, stuff.website)
+> console.log(stuff.name, stuff.version, stuff.description, stuff.website);
 > ```
diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index 8cf10cea4d..3954def5d0 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -493,7 +493,7 @@ const is_state = (node) => {
 
 /**
  * Returns `true` if we're already in a valid call expression, e.g.
- * changing an existing `$state()` to `$state.frozen()`
+ * changing an existing `$state()` to `$state.raw()`
  * @type {import("./types").Test}
  */
 const is_state_call = (node) => {
@@ -583,8 +583,8 @@ export const runes = [
 	{ snippet: '$derived.by', test: is_state_call },
 	{ snippet: '$effect(() => {\n\t${}\n});', test: is_statement },
 	{ snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement },
-	{ snippet: '$state.frozen(${});', test: is_state },
-	{ snippet: '$state.frozen', test: is_state_call },
+	{ snippet: '$state.raw(${});', test: is_state },
+	{ snippet: '$state.raw', test: is_state_call },
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },

From e80d79d54c0b70e0c5ca560dc1e7b53cd64f0c0c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:55:38 +0100
Subject: [PATCH 130/453] Sync `svelte` docs (#826)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/03-template-syntax/06-snippet.md   |  2 +-
 .../docs/svelte/06-runtime/01-stores.md       | 22 +++++++++++++++++++
 .../content/docs/svelte/07-misc/02-testing.md |  2 +-
 .../docs/svelte/07-misc/03-typescript.md      |  4 ++--
 .../svelte/07-misc/07-v5-migration-guide.md   |  6 ++---
 .../98-reference/.generated/compile-errors.md |  6 +++++
 .../svelte/98-reference/21-svelte-legacy.md   | 19 ++++++++++++++++
 .../svelte/98-reference/30-compiler-errors.md |  6 +++++
 8 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index d4ec5a0cef..4bbc970c5d 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -169,7 +169,7 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 
 ```svelte
 <!--- file: App.svelte --->
-<Button>click me<Button>
+<Button>click me</Button>
 ```
 
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
index 8ea01e5314..9cff5a754f 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
@@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
 - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
 - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
 
+```ts
+/// file: state.svelte.js
+export const userState = $state({
+	name: 'name',
+	/* ... */
+});
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { userState } from './state.svelte';
+</script>
+
+<p>User name: {userState.name}</p>
+<button onclick={() => {
+	userState.name = 'new name';
+}}>
+	change name
+</button>
+```
+
 Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
 
 ## svelte/store
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
index 1c3d4ba6e1..c8774e341f 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
@@ -197,7 +197,7 @@ When writing component tests that involve two-way bindings, context or snippet p
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
 
-To get start with Playwright, either let you guide by [their VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
+To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
 
 After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
index e02ac7b6b1..f4513a9a2d 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -142,7 +142,7 @@ In case you're writing a component that wraps a native element, you may want to
 </script>
 
 <button {...rest}>
-	{@render children()}
+	{@render children?.()}
 </button>
 ```
 
@@ -156,7 +156,7 @@ Not all elements have a dedicated type definition. For those without one, use `S
 </script>
 
 <div {...rest}>
-	{@render children()}
+	{@render children?.()}
 </div>
 ```
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 4ebfb5f905..687f8e93b1 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -169,11 +169,11 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 
 <Pump
 	---on:---inflate={(power) => {
-		size += power---.details---;
+		size += power---.detail---;
 		if (size > 75) burst = true;
 	}}
 	---on:---deflate={(power) => {
-		if (size > 0) size -= power---.details---;
+		if (size > 0) size -= power---.detail---;
 	}}
 />
 
@@ -317,7 +317,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 > - import the function
 > - call the function to get a dispatch function
 > - call said dispatch function with a string and possibly a payload
-> - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent`
+> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent`
 >
 > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
 >
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index b32bc6b89c..16cd361e52 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -412,6 +412,12 @@ Expected whitespace
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_element_attribute
+
+```
+`<%name%>` does not support non-event attributes or spread attributes
+```
+
 ### import_svelte_internal_forbidden
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
index 51059bd576..45f2e3b65c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
@@ -281,4 +281,23 @@ function trusted(
 
 
 
+## LegacyComponentType
+
+Support using the component as both a class and function during the transition period
+
+<div class="ts-block">
+
+```dts
+type LegacyComponentType = {
+	new (o: ComponentConstructorOptions): SvelteComponent;
+	(
+		...args: Parameters<Component<Record<string, any>>>
+	): ReturnType<
+		Component<Record<string, any>, Record<string, any>>
+	>;
+};
+```
+
+</div>
+
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index b9b3c8f7a3..5bd6e6eef2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -416,6 +416,12 @@ Expected whitespace
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_element_attribute
+
+```
+`<%name%>` does not support non-event attributes or spread attributes
+```
+
 ### import_svelte_internal_forbidden
 
 ```

From 1b686b8bb2d85ceb0148343d37aa0335d2c4750d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:56:26 +0100
Subject: [PATCH 131/453] Sync `kit` docs (#828)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/20-core-concepts/10-routing.md           | 2 +-
 apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md  | 2 +-
 .../content/docs/kit/20-core-concepts/30-form-actions.md      | 4 ++--
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md     | 2 +-
 .../kit/25-build-and-deploy/70-adapter-cloudflare-workers.md  | 2 +-
 .../content/docs/kit/25-build-and-deploy/90-adapter-vercel.md | 4 ++--
 apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md     | 2 +-
 .../content/docs/kit/30-advanced/67-shallow-routing.md        | 4 ++--
 apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md        | 4 ----
 .../content/docs/kit/60-appendix/20-integrations.md           | 4 +++-
 apps/svelte.dev/content/docs/kit/98-reference/54-types.md     | 2 +-
 11 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 78c2b0ac71..3cb2ba3ef3 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -330,7 +330,7 @@ By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.j
 <input type="number" bind:value={b}> =
 {total}
 
-<button on:click={add}>Calculate</button>
+<button onclick={add}>Calculate</button>
 ```
 
 ```js
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index 7231b588d0..bba63fd2be 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -661,7 +661,7 @@ export async function load({ fetch, depends }) {
 </script>
 
 <p>random number: {data.number}</p>
-<button on:click={rerunLoadFunction}>Update random number</button>
+<button onclick={rerunLoadFunction}>Update random number</button>
 ```
 
 ### When do load functions rerun?
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index dddae80da9..74d08c9fdc 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -451,7 +451,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	}
 </script>
 
-<form method="POST" on:submit|preventDefault={handleSubmit}>
+<form method="POST" onsubmit|preventDefault={handleSubmit}>
 	<!-- content -->
 </form>
 ```
@@ -484,7 +484,7 @@ Form actions are the preferred way to send data to the server, since they can be
 	}
 </script>
 
-<button on:click={rerun}>Rerun CI</button>
+<button onclick={rerun}>Rerun CI</button>
 ```
 
 ```js
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index b1dea91bdd..3704dc0454 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -84,7 +84,7 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index 6635f566d3..b4e270f622 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -105,7 +105,7 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index 57867ce7c9..f8150c0fd7 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -44,13 +44,13 @@ export const config = {
 /// file: admin/+layout.js
 /** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
-	runtime: 'nodejs18.x'
+	runtime: 'nodejs22.x'
 };
 ```
 
 The following options apply to all functions:
 
-- `runtime`: `'edge'`, `'nodejs18.x'` or `'nodejs20.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard
+- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'` or `'nodejs22.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard
 - `regions`: an array of [edge network regions](https://vercel.com/docs/concepts/edge-network/regions) (defaulting to `["iad1"]` for serverless functions) or `'all'` if `runtime` is `edge` (its default). Note that multiple regions for serverless functions are only supported on Enterprise plans
 - `split`: if `true`, causes a route to be deployed as an individual function. If `split` is set to `true` at the adapter level, all routes will be deployed as individual functions
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
index 7449b51377..5fd17455ad 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
@@ -126,7 +126,7 @@ The exception is when the error occurs inside the root `+layout.js` or `+layout.
 
 If you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'):
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
index f10edd0ad5..af7d389599 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
@@ -57,7 +57,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {#each data.thumbnails as thumbnail}
 	<a
 		href="http://github.com/photos/%7Bthumbnail.id%7D"
-		on:click={async (e) => {
+		onclick={async (e) => {
 			if (innerWidth < 640        // bail if the screen is too small
 				|| e.shiftKey             // or the link is opened in a new window
 				|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)
@@ -86,7 +86,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {/each}
 
 {#if $page.state.selected}
-	<Modal on:close={() => history.back()}>
+	<Modal onclose={() => history.back()}>
 		<!-- pass page data to the +page.svelte component,
 		     just like SvelteKit would on navigation -->
 		<PhotoPage data={$page.state.selected} />
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index 4e0b2d536c..89e3db4b14 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -27,10 +27,6 @@ In order to support SSR, a JS backend — such as Node.js or Deno-based server,
 
 It is also possible to write custom adapters or leverage community adapters to deploy SvelteKit to more platforms such as specialized server environments, browser extensions, or native applications. See [integrations](./integrations) for more examples and integrations.
 
-## How do I use HMR with SvelteKit?
-
-SvelteKit has HMR enabled by default powered by [svelte-hmr](https://github.com/sveltejs/svelte-hmr). If you saw [Rich's presentation at the 2020 Svelte Summit](/blog/whats-the-deal-with-sveltekit), you may have seen a more powerful-looking version of HMR presented. This demo had `svelte-hmr`'s `preserveLocalState` flag on. This flag is now off by default because it may lead to unexpected behaviour and edge cases. But don't worry, you are still getting HMR with SvelteKit! If you'd like to preserve local state you can use the `@hmr:keep` or `@hmr:keep-all` directives as documented on the [svelte-hmr](https://github.com/sveltejs/svelte-hmr) page.
-
 ## How do I include details from package.json in my application?
 
 You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](./configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
index d3d9a8fcf7..63e3fa5ad5 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
@@ -4,7 +4,7 @@ title: Integrations
 
 ## `vitePreprocess`
 
-Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of JS and CSS that Vite supports: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
+Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
 
 ```js
 // svelte.config.js
@@ -15,6 +15,8 @@ export default {
 };
 ```
 
+You will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`.
+
 ## Adders
 
 Run `npx sv add` to setup many different complex integrations with a single command including:
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index 6e22a754dd..b8211dbc4e 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -25,7 +25,7 @@ To solve this problem, SvelteKit generates `.d.ts` files for each of your endpoi
 
 ```ts
 /// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts
-/// link: false
+/// link: true
 import type * as Kit from '@sveltejs/kit';
 
 type RouteParams = {

From 8aa34c1addc7f52e7c08ccd719209ea964ba48f2 Mon Sep 17 00:00:00 2001
From: Vhtmui <46163279+vhtmui@users.noreply.github.com>
Date: Sat, 30 Nov 2024 02:04:29 +0800
Subject: [PATCH 132/453] fix: incorrect value in <select> element. (#894)

Fix incorrect value in <select> element.

Co-authored-by: 15363205631 <q.2@foxmail.com>
---
 apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index c883dcb501..14ff90479d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -17,7 +17,7 @@
 	// TODO this really sucks, why is `exercise.slug` not the slug?
 	let actual_slug = $derived.by(() => {
 		const parts = exercise.slug.split('/');
-		return `${parts[1]}/${parts[3]}`;
+		return `${parts[1].includes('kit') ? 'kit' : 'svelte'}/${parts[3]}`;
 	});
 </script>
 

From 0b3567e0eaaa235ee88e09619aa330958508d2d7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 30 Nov 2024 12:25:55 -0500
Subject: [PATCH 133/453] Sync `kit` docs (#897)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 0eb8a5b8c6..973c5252e2 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -94,9 +94,7 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(
-	e: unknown
-): e is ActionFailure<undefined>;
+function isActionFailure(e: unknown): e is ActionFailure;
 ```
 
 </div>

From 4486c859229d07a99b138b192928948aa4fe7521 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 30 Nov 2024 12:26:33 -0500
Subject: [PATCH 134/453] Sync `cli` docs (#898)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index 8db5eb3b16..f0cdf18380 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -2,7 +2,7 @@
 title: sv migrate
 ---
 
-`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package.
+`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package.
 
 Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.
 

From 9d357d29e5c812e26627494fa747560ac446b280 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 30 Nov 2024 12:27:32 -0500
Subject: [PATCH 135/453] Sync `svelte` docs (#901)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/98-reference/21-svelte-transition.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
index a555815ddf..5a3848c8ac 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
@@ -143,7 +143,7 @@ function fly(
 
 ## scale
 
-Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+Animates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.
 
 <div class="ts-block">
 

From 229e7b13c3c0e7ee2e29789c194f6f86ec5a7c1c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 09:05:32 -0500
Subject: [PATCH 136/453] Sync `svelte` docs (#903)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../05-special-elements/01-svelte-boundary.md | 79 +++++++++++++++++++
 ...1-svelte-window.md => 02-svelte-window.md} |  0
 ...elte-document.md => 03-svelte-document.md} |  0
 .../{03-svelte-body.md => 04-svelte-body.md}  |  0
 .../{04-svelte-head.md => 05-svelte-head.md}  |  0
 ...svelte-element.md => 06-svelte-element.md} |  0
 ...svelte-options.md => 07-svelte-options.md} |  0
 .../98-reference/.generated/compile-errors.md | 12 +++
 .../svelte/98-reference/21-svelte-compiler.md |  5 ++
 .../svelte/98-reference/30-compiler-errors.md | 12 +++
 10 files changed, 108 insertions(+)
 create mode 100644 apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{01-svelte-window.md => 02-svelte-window.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{02-svelte-document.md => 03-svelte-document.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{03-svelte-body.md => 04-svelte-body.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{04-svelte-head.md => 05-svelte-head.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{05-svelte-element.md => 06-svelte-element.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/05-special-elements/{06-svelte-options.md => 07-svelte-options.md} (100%)

diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
new file mode 100644
index 0000000000..2e9f85c83a
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
@@ -0,0 +1,79 @@
+---
+title: <svelte:boundary>
+---
+
+```svelte
+<svelte:boundary onerror={handler}>...</svelte:boundary>
+```
+
+Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+
+If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+
+Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries.
+
+## Properties
+
+For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+
+### `failed`
+
+If an `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+
+```svelte
+<svelte:boundary>
+	<FlakyComponent />
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>oops! try again</button>
+	{/snippet}
+</svelte:boundary>
+```
+
+> [!NOTE]
+> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...
+>
+> ```svelte
+> <svelte:boundary {failed}>...</svelte:boundary>
+> ```
+>
+> ...or implicitly by declaring it directly inside the boundary, as in the example above.
+
+### `onerror`
+
+If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...
+
+```svelte
+<svelte:boundary onerror={(e) => report(e)}>
+	...
+</svelte:boundary>
+```
+
+...or using `error` and `reset` outside the boundary itself:
+
+```svelte
+<script>
+	let error = $state(null);
+	let reset = $state(() => {});
+
+	function onerror(e, r) {
+		error = e;
+		reset = r;
+	}
+</script>
+
+<svelte:boundary {onerror}>
+	<FlakyComponent />
+</svelte:boundary>
+
+{#if error}
+	<button onclick={() => {
+		error = null;
+		reset();
+	}}>
+		oops! try again
+	</button>
+{/if}
+```
+
+If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-window.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-window.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-document.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-document.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-body.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-body.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-head.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-head.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md
rename to apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 16cd361e52..77166097a2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -762,6 +762,18 @@ A component can have a single top-level `<style>` element
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
+### svelte_boundary_invalid_attribute
+
+```
+Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+```
+
+### svelte_boundary_invalid_attribute_value
+
+```
+Attribute value must be a non-string expression
+```
+
 ### svelte_component_invalid_this
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 229a67b459..f35fc41bb9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -445,6 +445,11 @@ namespace AST {
 		name: 'svelte:fragment';
 	}
 
+	export interface SvelteBoundary extends BaseElement {
+		type: 'SvelteBoundary';
+		name: 'svelte:boundary';
+	}
+
 	export interface SvelteHead extends BaseElement {
 		type: 'SvelteHead';
 		name: 'svelte:head';
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 5bd6e6eef2..7e67488655 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -766,6 +766,18 @@ A component can have a single top-level `<style>` element
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
+### svelte_boundary_invalid_attribute
+
+```
+Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+```
+
+### svelte_boundary_invalid_attribute_value
+
+```
+Attribute value must be a non-string expression
+```
+
 ### svelte_component_invalid_this
 
 ```

From f7acf3722005e5f2161d8835b1dfb27ce43a108e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 1 Dec 2024 09:24:26 -0500
Subject: [PATCH 137/453] install @cloudflare/workers-types (#905)

---
 apps/svelte.dev/package.json | 1 +
 pnpm-lock.yaml               | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index d02571c2e7..98adb156da 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -48,6 +48,7 @@
 		"yootils": "^0.3.1"
 	},
 	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20241127.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.4.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 602dc3a4d5..8c03798ccb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,9 @@ importers:
         specifier: ^0.3.1
         version: 0.3.1
     devDependencies:
+      '@cloudflare/workers-types':
+        specifier: ^4.20241127.0
+        version: 4.20241127.0
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
@@ -585,6 +588,9 @@ packages:
   '@changesets/write@0.3.1':
     resolution: {integrity: sha512-SyGtMXzH3qFqlHKcvFY2eX+6b0NGiFcNav8AFsYwy5l8hejOeoeTDemu5Yjmke2V5jpzY+pBvM0vCCQ3gdZpfw==}
 
+  '@cloudflare/workers-types@4.20241127.0':
+    resolution: {integrity: sha512-UqlvtqV8eI0CdPR7nxlbVlE52+lcjHvGdbYXEPwisy23+39RsFV7OOy0da0moJAhqnL2OhDmWTOaKdsVcPHiJQ==}
+
   '@codemirror/autocomplete@6.16.0':
     resolution: {integrity: sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==}
     peerDependencies:
@@ -3434,6 +3440,8 @@ snapshots:
       human-id: 1.0.2
       prettier: 2.8.8
 
+  '@cloudflare/workers-types@4.20241127.0': {}
+
   '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)':
     dependencies:
       '@codemirror/language': 6.10.3

From 4821d7cd0e2ffc8f66b63a04f2b42ebaa91e417a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 09:44:03 -0500
Subject: [PATCH 138/453] Sync `kit` docs (#906)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md       | 2 ++
 .../kit/25-build-and-deploy/70-adapter-cloudflare-workers.md    | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 3704dc0454..9a4b2b7e71 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -86,6 +86,8 @@ To include type declarations for your bindings, reference them in your `src/app.
 
 ```ts
 /// file: src/app.d.ts
+import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
+
 declare global {
 	namespace App {
 		interface Platform {
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index b4e270f622..bd53dd4d8e 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -107,6 +107,8 @@ To include type declarations for your bindings, reference them in your `src/app.
 
 ```ts
 /// file: src/app.d.ts
+import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
+
 declare global {
 	namespace App {
 		interface Platform {

From 125c7ef0c9f24175e4e55f1d0a7c1d1736318af9 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 1 Dec 2024 15:57:44 +0100
Subject: [PATCH 139/453] docs: error boundary tutorial (#893)

* docs: error boundary tutorial

* rework

* tweaks

* bump svelte

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../+assets/app-a/src/lib/App.svelte          |   5 +
 .../app-a/src/lib/FlakyComponent.svelte       |  16 ++
 .../+assets/app-b/src/lib/App.svelte          |  13 ++
 .../07-svelte-boundary/index.md               |  59 ++++++++
 apps/svelte.dev/package.json                  |   2 +-
 pnpm-lock.yaml                                | 137 +++++++++++++-----
 6 files changed, 193 insertions(+), 39 deletions(-)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..474e902444
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import FlakyComponent from './FlakyComponent.svelte';
+</script>
+
+<FlakyComponent />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
new file mode 100644
index 0000000000..1af174044a
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
@@ -0,0 +1,16 @@
+<script>
+	let mouse = $state({ x: 0, y: 0 });
+</script>
+
+<svelte:window
+	onmousemove={(e) => {
+		mouse.x = e.clientX;
+		mouse.y = e.clientY;
+	}}
+/>
+
+<p>{mouse.x}x{mouse.y}</p>
+
+<button onclick={() => mouse = null}>
+	whatever you do, don't click this button
+</button>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..282cb12b60
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import FlakyComponent from './FlakyComponent.svelte';
+</script>
+
+
+<svelte:boundary onerror={(e) => console.error(e)}>
+	<FlakyComponent />
+
+	{#snippet failed(error, reset)}
+		<p>Oops! {error.message}</p>
+		<button onclick={reset}>Reset</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md
new file mode 100644
index 0000000000..7eb09110aa
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md
@@ -0,0 +1,59 @@
+---
+title: <svelte:boundary>
+---
+
+To prevent errors from leaving your app in a broken state, you can contain them inside an _error boundary_ using the `<svelte:boundary>` element.
+
+In this example, `<FlakyComponent>` contains a bug — clicking the button will set `mouse` to `null`, meaning that the `{mouse.x}` and `{mouse.y}` expressions in the template will fail to render.
+
+In an ideal world we'd simply fix the bug. But that's not always an option — sometimes the component belongs to someone else, and sometimes you just need to guard against the unexpected. Begin by wrapping `<FlakyComponent />` with `<svelte:boundary>`:
+
+```svelte
+<!--- file: App.svelte --->
++++<svelte:boundary>+++
+	<FlakyComponent />
++++</svelte:boundary>+++
+```
+
+So far, nothing has changed, because the boundary doesn't specify a handler. Add a `failed` [snippet](snippets-and-render-tags) to provide some UI to show when an error occurs:
+
+```svelte
+<!--- file: App.svelte --->
+<svelte:boundary>
+	<FlakyComponent />
+
++++	{#snippet failed(error)}
+		<p>Oops! {error.message}</p>
+	{/snippet}+++
+</svelte:boundary>
+```
+
+Now, when we click the button, the contents of the boundary are replaced with the snippet. We can attempt to reset things by making use of the second argument passed to `failed`:
+
+```svelte
+<!--- file: App.svelte --->
+<svelte:boundary>
+	<FlakyComponent />
+
+	{#snippet failed(error+++, reset+++)}
+		<p>Oops! {error.message}</p>
+		+++<button onclick={reset}>Reset</button>+++
+	{/snippet}
+</svelte:boundary>
+```
+
+We can also specify an `onerror` handler, which is called with the same arguments passed to the `failed` snippet:
+
+```svelte
+<!--- file: App.svelte --->
+<svelte:boundary +++onerror={(e) => console.error(e)}+++>
+	<FlakyComponent />
+
+	{#snippet failed(error, reset)}
+		<p>Oops! {error.message}</p>
+		<button onclick={reset}>Reset</button>
+	{/snippet}
+</svelte:boundary>
+```
+
+This is useful for sending information about the error to a reporting service, or adding UI outside the error boundary itself.
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 98adb156da..54a05f92d9 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -72,7 +72,7 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "5.1.11",
+		"svelte": "5.3.0",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^5.1.4",
 		"tiny-glob": "^0.2.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c03798ccb..65b17938ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.1.11)
+        version: 1.1.3(svelte@5.3.0)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)
+        version: 1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -116,19 +116,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.7
-        version: 5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
-        version: 0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.3.4(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0-next.6
-        version: 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -167,7 +167,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.3.0)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -175,14 +175,14 @@ importers:
         specifier: ^0.3.2
         version: 0.3.2
       svelte:
-        specifier: 5.1.11
-        version: 5.1.11
+        specifier: 5.3.0
+        version: 5.3.0
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.3.0)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^5.1.4
-        version: 5.1.4(postcss@8.4.45)(svelte@5.1.11)(typescript@5.5.4)
+        version: 5.1.4(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -2044,6 +2044,9 @@ packages:
   esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 
+  esm-env@1.2.1:
+    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -2052,6 +2055,9 @@ packages:
   esrap@1.2.2:
     resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
 
+  esrap@1.2.3:
+    resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -2268,6 +2274,9 @@ packages:
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-subdir@1.2.0:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
@@ -2971,6 +2980,10 @@ packages:
     resolution: {integrity: sha512-XpPcUBKCg2c+L0nDTkv0ekc8LOHMzN328MNOeAHt4sRcX5AROU9tkqwL35VvE6srt8RpmnzsXBGDwyRB5TSbuw==}
     engines: {node: '>=18'}
 
+  svelte@5.3.0:
+    resolution: {integrity: sha512-R9v8vAlW/bO94S7QdBJMYveMyI8gMqNnGOtEVLPveNVws+CEiQHn8BNWrtIIpkB28IXLnmjV2HaRTJz31XJmIw==}
+    engines: {node: '>=18'}
+
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
@@ -4128,6 +4141,10 @@ snapshots:
     dependencies:
       svelte: 5.1.11
 
+  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.3.0)':
+    dependencies:
+      svelte: 5.3.0
+
   '@rollup/browser@4.17.2':
     dependencies:
       '@types/estree': 1.0.5
@@ -4281,24 +4298,24 @@ snapshots:
       '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
-      svelte: 5.1.11
-      svelte-parse-markup: 0.1.5(svelte@5.1.11)
+      svelte: 5.3.0
+      svelte-parse-markup: 0.1.5(svelte@5.3.0)
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
     transitivePeerDependencies:
@@ -4322,9 +4339,9 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4336,7 +4353,7 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.1.11
+      svelte: 5.3.0
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
@@ -4364,11 +4381,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
-      svelte: 5.1.11
+      svelte: 5.3.0
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
@@ -4386,14 +4403,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.1.11
+      svelte: 5.3.0
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4410,10 +4427,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.1.11
+      svelte: 5.3.0
     optionalDependencies:
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4497,10 +4514,10 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.1.11
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.3.0
 
   '@vitest/expect@2.1.2':
     dependencies:
@@ -4909,6 +4926,8 @@ snapshots:
 
   esm-env@1.0.0: {}
 
+  esm-env@1.2.1: {}
+
   esprima@4.0.1: {}
 
   esrap@1.2.2:
@@ -4916,6 +4935,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.6
 
+  esrap@1.2.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -5145,6 +5169,10 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.6
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
   is-subdir@1.2.0:
     dependencies:
       better-path-resolve: 1.0.0
@@ -5519,6 +5547,11 @@ snapshots:
       prettier: 3.3.2
       svelte: 5.1.11
 
+  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.3.0):
+    dependencies:
+      prettier: 3.3.2
+      svelte: 5.3.0
+
   prettier@2.8.8: {}
 
   prettier@3.3.2: {}
@@ -5795,22 +5828,34 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
-  svelte-parse-markup@0.1.5(svelte@5.1.11):
+  svelte-check@4.0.1(svelte@5.3.0)(typescript@5.5.4):
     dependencies:
-      svelte: 5.1.11
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 3.6.0
+      fdir: 6.3.0
+      picocolors: 1.1.0
+      sade: 1.8.1
+      svelte: 5.3.0
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte-parse-markup@0.1.5(svelte@5.3.0):
+    dependencies:
+      svelte: 5.3.0
 
   svelte-persisted-store@0.9.4(svelte@5.1.11):
     dependencies:
       svelte: 5.1.11
 
-  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.1.11)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.12
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.1.11
+      svelte: 5.3.0
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
@@ -5838,6 +5883,22 @@ snapshots:
       magic-string: 0.30.12
       zimmerframe: 1.1.2
 
+  svelte@5.3.0:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      esm-env: 1.2.1
+      esrap: 1.2.3
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.12
+      zimmerframe: 1.1.2
+
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0

From 9b8b8179b476b6171ac24fe2be73d723fba9cc2a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 1 Dec 2024 10:07:29 -0500
Subject: [PATCH 140/453] add advent of svelte blog post (#904)

tidy up
---
 .../blog/2024-12-01-advent-of-svelte.md       | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
new file mode 100644
index 0000000000..d2c12087a8
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -0,0 +1,109 @@
+---
+title: Advent of Svelte
+description: Twenty-four days, twenty-four features
+author: The Svelte team
+authorURL: https://svelte.dev/
+pinnedUntil: 2024-12-26
+---
+
+Last December, [Svelte Society](https://bsky.app/profile/sveltesociety.dev) presented an advent calendar's worth of [festive Svelte-themed code challenges](https://advent.sveltesociety.dev/).
+
+This year, we're turning it around: you get to relax while _we_ take on a challenge. We've set ourselves a goal of releasing one thing a day from here until Christmas, whether it's a new feature in Svelte or SvelteKit or an improvement to the website.
+
+Follow [@svelte.dev](https://bsky.app/profile/svelte.dev) and [@sveltesociety.dev](https://bsky.app/profile/sveltesociety.dev) and check back every day to see what we've been cooking up.
+
+## Day 1: Error boundaries
+
+This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering. See the [docs](/docs/svelte/svelte-boundary) and [tutorial](/tutorial/svelte/svelte-boundary) for more.
+
+## Day 2
+
+Coming soon!
+
+## Day 3
+
+Coming soon!
+
+## Day 4
+
+Coming soon!
+
+## Day 5
+
+Coming soon!
+
+## Day 6
+
+Coming soon!
+
+## Day 7
+
+Coming soon!
+
+## Day 8
+
+Coming soon!
+
+## Day 9
+
+Coming soon!
+
+## Day 10
+
+Coming soon!
+
+## Day 11
+
+Coming soon!
+
+## Day 12
+
+Coming soon!
+
+## Day 13
+
+Coming soon!
+
+## Day 14
+
+Coming soon!
+
+## Day 15
+
+Coming soon!
+
+## Day 16
+
+Coming soon!
+
+## Day 17
+
+Coming soon!
+
+## Day 18
+
+Coming soon!
+
+## Day 19
+
+Coming soon!
+
+## Day 20
+
+Coming soon!
+
+## Day 21
+
+Coming soon!
+
+## Day 22
+
+Coming soon!
+
+## Day 23
+
+Coming soon!
+
+## Day 24
+
+Coming soon!

From a865f37f3f060a698b79a4b35cbce97835c5c413 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 10:12:32 -0500
Subject: [PATCH 141/453] Sync `svelte` docs (#907)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/05-special-elements/01-svelte-boundary.md      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
index 2e9f85c83a..d0a2fb9ae9 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
@@ -6,6 +6,9 @@ title: <svelte:boundary>
 <svelte:boundary onerror={handler}>...</svelte:boundary>
 ```
 
+> [!NOTE]
+> This feature was added in 5.3.0
+
 Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
 
 If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.

From 1368a7a28bca6c1471417bec2bcd6c5ec5e5241b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:32:40 -0500
Subject: [PATCH 142/453] Sync `svelte` docs (#908)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/03-each.md | 24 +++++++++++++++++++
 .../svelte/98-reference/21-svelte-compiler.md |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
index e4246b6e9a..df0ba4d8f5 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
@@ -74,6 +74,30 @@ You can freely use destructuring and rest patterns in each blocks.
 {/each}
 ```
 
+## Each blocks without an item
+
+```svelte
+<!--- copy: false  --->
+{#each expression}...{/each}
+```
+
+```svelte
+<!--- copy: false  --->
+{#each expression, index}...{/each}
+```
+
+In case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):
+
+```svelte
+<div class="chess-board">
+	{#each { length: 8 }, rank}
+		{#each { length: 8 }, file}
+			<div class:black={(rank + file) % 2 === 1}></div>
+		{/each}
+	{/each}
+</div>
+```
+
 ## Else blocks
 
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index f35fc41bb9..3e680c2eaf 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -475,7 +475,8 @@ namespace AST {
 	export interface EachBlock extends BaseNode {
 		type: 'EachBlock';
 		expression: Expression;
-		context: Pattern;
+		/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */
+		context: Pattern | null;
 		body: Fragment;
 		fallback?: Fragment;
 		index?: string;

From 9d97da3a10f3afed2c91dfe4c9e4a863ca8d9a41 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 08:38:36 -0500
Subject: [PATCH 143/453] advent of svelte day 2 (#909)

---
 .../content/blog/2024-12-01-advent-of-svelte.md      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index d2c12087a8..4104ef662f 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -14,11 +14,17 @@ Follow [@svelte.dev](https://bsky.app/profile/svelte.dev) and [@sveltesociety.de
 
 ## Day 1: Error boundaries
 
-This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering. See the [docs](/docs/svelte/svelte-boundary) and [tutorial](/tutorial/svelte/svelte-boundary) for more.
+This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.
 
-## Day 2
+- [docs](/docs/svelte/svelte-boundary)
+- [tutorial](/tutorial/svelte/svelte-boundary)
 
-Coming soon!
+## Day 2: `each` without `as`
+
+If you just want to render something in an `{#each ...}` block _n_ times, and don't care about the value, you can now omit the `as` part.
+
+- [docs](/docs/svelte/each#Each-blocks-without-an-item)
+- [demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)
 
 ## Day 3
 

From 4f819ed614901b416fe1ab66338566c68bde8007 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 11:46:26 -0500
Subject: [PATCH 144/453] Sync `svelte` docs (#910)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/05-special-elements/01-svelte-boundary.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
index d0a2fb9ae9..15f249a771 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
@@ -21,7 +21,7 @@ For the boundary to do anything, one or both of `failed` and `onerror` must be p
 
 ### `failed`
 
-If an `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+If a `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
 
 ```svelte
 <svelte:boundary>

From 2efd674dd45894ad7b01cbca1cd3017c002190e2 Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <97441447+Vardhaman619@users.noreply.github.com>
Date: Mon, 2 Dec 2024 22:26:27 +0530
Subject: [PATCH 145/453] fix: resolve incorrect link activation for first and
 last sections (#869)

---
 .../src/routes/docs/[...path]/OnThisPage.svelte  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 19977cd786..2e1b840b81 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -10,25 +10,33 @@
 	afterNavigate(() => {
 		current = location.hash.slice(1);
 		headings = content.querySelectorAll('h2');
+		update(); // Ensure active link is set correctly on navigation
 	});
 
+	// Update function to activate the correct section link
 	function update() {
-		// a section is 'active' when it crosses the threshold
 		const threshold = (innerHeight * 1) / 3;
+		let found = false;
 
-		for (let i = 0; i < headings.length; i += 1) {
+		for (let i = 0; i < headings.length; i++) {
 			const heading = headings[i];
 			const next = headings[i + 1];
 
+			// If the current heading is above the threshold and the next heading is below it
 			if (
-				next &&
 				heading.getBoundingClientRect().top < threshold &&
-				next.getBoundingClientRect().top > threshold
+				(!next || next.getBoundingClientRect().top > threshold)
 			) {
 				current = heading.id;
+				found = true;
 				break;
 			}
 		}
+
+		// Handle case when scrolled to the top of the page
+		if (!found && scrollY === 0) {
+			current = '';
+		}
 	}
 </script>
 

From 0cf5e7e29651545013b4d9853c56db952b5f0c32 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 15:23:18 -0500
Subject: [PATCH 146/453] chore: advent of svelte banner (#914)

---
 apps/svelte.dev/src/routes/+layout.server.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index d5afa4bd2b..0e93e4fb32 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -56,18 +56,18 @@ const sections: Record<string, string> = {
 };
 
 const banner: BannerData = {
-	id: 'sveltehack2024',
-	start: new Date('22 Oct, 2024 00:00:00 UTC'),
-	end: new Date('15 December, 2024 23:59:59 UTC'),
+	id: 'adventofsvelte2024',
+	start: new Date('1 December, 2024 00:00:00 UTC'),
+	end: new Date('25 December, 2024 23:59:59 UTC'),
 	arrow: true,
 	content: {
-		lg: 'Cast runes, win prizes: SvelteHack 2024',
-		sm: 'SvelteHack 2024'
+		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
+		sm: 'Advent of Svelte 2024'
 	},
-	href: 'https://hack.sveltesociety.dev/2024'
+	href: '/blog/advent-of-svelte'
 };
 
-export const load = async ({ url, fetch }) => {
+export const load = async ({ url }) => {
 	const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
 
 	return {

From 83ae7197fc6763e67e1353ce4704381ea357ad34 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <accounts@dreamindani.com>
Date: Mon, 2 Dec 2024 13:25:40 -0700
Subject: [PATCH 147/453] docs: "What's new in Svelte" November newsletter
 (#881)

* first draft of dec newsletter

* Apply suggestions from code review

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>

* It's december!

* Forgot to update the description

* Update apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md

* Update 2024-12-01-whats-new-in-svelte-december-2024.md

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...12-01-whats-new-in-svelte-december-2024.md | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md

diff --git a/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md b/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md
new file mode 100644
index 0000000000..092f15229c
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md
@@ -0,0 +1,99 @@
+---
+title: "What's new in Svelte: December 2024"
+description: 'A better CLI and a bunch of UI libraries now support Svelte 5'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+I can't believe it's already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉
+
+As we look forward to the next year and watch the Svelte team do [24 features in 24 days](advent-of-svelte), let's dive into what's new in the past month...
+
+## What's new in Svelte
+
+The bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you're noticing anything weird, make sure you upgrade to the latest version and, as always, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) for all the bug fixes.
+
+The features since last month can be found below:
+
+- `ContentVisibilityAutoStateChangeEvent` has been added to element definitions (**5.2.5**, [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/ContentVisibilityAutoStateChangeEvent), [#14373](https://github.com/sveltejs/svelte/pull/14373))
+
+## What's new in SvelteKit, Svelte CLI and Language Tools
+
+- `isActionFailure` is a new helper method to check if a variable is an instanceof `ActionFailure` - helpful for debugging parsing of user input (**2.8.0**, [#12878](https://github.com/sveltejs/kit/pull/12878))
+- `const load = ...` declarations will now be typed automatically (**svelte2tsx-0.7.23**, [#2540](https://github.com/sveltejs/language-tools/pull/2540))
+- The CLI will now include a `jsconfig.json` in the 'no type checking' template (**0.6.2**, [#290](https://github.com/sveltejs/cli/pull/290))
+- When installing dependencies, the CLI will display the package manager's output (**0.6.3**, [#305](https://github.com/sveltejs/cli/pull/305))
+- A short description will now be shown for each add-on in the CLI menu (**0.6.5**, [#299](https://github.com/sveltejs/cli/pull/299))
+- Instance types will now be provided automatically in Svelte 5 (**svelte2tsx-0.7.23**, [#2553](https://github.com/sveltejs/language-tools/pull/2553))
+- A code lens indicator for "runes mode" will now appear atop a file when detected - "legacy mode" when not (**language-server-0.17.4**, [#2554](https://github.com/sveltejs/language-tools/pull/2554))
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Unsubscribe](https://unsubscribe.jnr.cx/) is an interactive site that makes fun of how hard it is to unsubscribe from things on the internet these days
+- [Dealcrane](https://dealcrane.com/?utm_source=discord&utm_medium=social&utm_campaign=beta_promo&utm_content=svelte) helps technology shoppers find discounts across popular internet shopping sites
+- [Raw Web](https://rawweb.org/) is a search engine for indexing the content of independent, especially personal, websites
+- [Jovian Moon's personal site](https://github.com/StephenGunn/jovian) features an interactive rocket ship to fly you straight to Jupiter (or anywhere else you want to go)
+- [Font Preview](https://github.com/songkeys/font-preview) makes it easy to analyze and explore font characters in the browser
+- [Dunks & Threes](https://dunksandthrees.com/) is a professional basketball analysis platform that provides data-driven NBA predictions
+- [AdresseDuBien](https://adressedubien.com/) is a small utility to find addresses for real estate ads (for France) with a Libre Map implementation
+- [PixelAttack](https://jason1610.github.io/PixelAttack/) takes an image, pixelizes it and makes the pixels fight each other
+- [NeoHtop](https://github.com/Abdenasser/neohtop) is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI
+- [WebVM](https://github.com/leaningtech/webvm) is a Linux virtual machine that runs in your browser
+- [Sveltris](https://svelte.dev/playground/8594eea15c6244908c3efad284fe2aa4?version=5.2.1) is Tetris built entirely in the Svelte REPL
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Svelte 🧡](https://bsky.app/profile/paolo.ricciuti.me/feed/svelte-feed) is a Bluesky feed to keep up to date on Svelte news in that application
+- [SvelteKit Streaming: The Complete Guide](https://khromov.se/sveltekit-streaming-the-complete-guide/) by Stanislav Khromov
+- [Remote Workshop: Svelte 5 & Runes](https://ti.to/mainmatter/svelte-5-runes-feb-2025) is taking place February 6-7th, 2025 and taught by Paolo Ricciuti
+- [Svelte 5: In Action | Build A Tasks App](https://www.youtube.com/watch?v=uSWMvDPpG0k) by Syntax
+- [Svelte Society London](https://www.youtube.com/watch?v=mxM208nCvHc) - featuring Paolo with his talk, _Herd your async tasks!_
+
+_This Week in Svelte_
+
+- [Ep. 83](https://www.youtube.com/watch?v=1a-iKUCF5_g) — You might not need an effect
+- [Ep. 84](https://www.youtube.com/watch?v=kVbQyKf4Oe4) — manifest.build
+- [Ep. 85](https://www.youtube.com/watch?v=yY963ovcDQ0) — @sheepdog/svelte
+
+_To Read_
+
+- [Web software development (2024)](https://fitech101.aalto.fi/web-software-development/) is a self-study course for all things web development and features Svelte heavily
+- [Async Fetching in Svelte 5](https://dev.to/jdgamble555/async-fetching-in-svelte-5-826) by Jonathan Gamble
+- [Cross-Origin-Isolation with SvelteKit, Vite, and Firebase](https://www.captaincodeman.com/cross-origin-isolation-with-sveltekit-vite-and-firebase) by Captain Codeman
+- [The $effect.tracking rune](https://www.matsimon.dev/blog/svelte-in-depth-effect-tracking) by Matt Simon
+
+### Libraries, Tools & Components
+
+_Component Libraries_
+
+- [shadcn-svelte](https://next.shadcn-svelte.com/) now supports Svelte 5 and has brand new docs to go with the update
+- [Zag](https://zagjs.com/overview/introduction) now supports Svelte 5
+- [Skeleton V3](https://github.com/skeletonlabs/skeleton/discussions/2919) is now in beta (and, as expected, supports Svelte 5)
+- [Storybook 8.4](https://www.reddit.com/r/sveltejs/comments/1gpqusy/storybook_84_release/) now supports Svelte 5 and CSF natively with component testing built-in
+
+_Icon Libraries_
+
+- [svelicon](https://github.com/friendofsvelte/svelicon) converts Iconify SVG icons to type-safe components with one command
+- [moving icons](https://www.movingicons.dev/) is a collection of animated icons based on the lucide icon library
+- [Monicon](https://github.com/oktaysenkan/monicon) is an all-in-one icon library that provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome
+
+_Everything Else_
+
+- [Svelte Multitone Image](https://stephane-vanraes.github.io/svelte-multitoneimage/) is a simple image renderer to apply multitone effects for Svelte
+- [number-flow](https://github.com/barvian/number-flow) is a component to transition, format, and localize numbers
+- [sveltednd](https://github.com/thisuxhq/SvelteDnD) is a lightweight, flexible drag and drop library for Svelte 5 applications
+- [ShadEditor](https://github.com/Tsuzat/ShadEditor) is a highly extensible text editor for svelte made with TipTap and ShadCN UI
+- [Tipex](https://www.npmjs.com/package/@friendofsvelte/tipex) is an advanced rich text editor based on Tiptap and Prosemirror
+- [svelte-bundle](https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into a single HTML file
+- [svelte5-router](https://github.com/mateothegreat/svelte5-router) is an SPA router that allows you to divide & conquer your app with nested routers
+- [@sheepdog/svelte](https://github.com/mainmatter/sheepdog) is a library to manage async tasks and concurrency with ease.
+
+That's it for this huge month in Svelte! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next ~~time~~ year! 👋

From 8f8ae89cbea4fdf91f8e07f3e6282bb0085cbb56 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 16:12:55 -0500
Subject: [PATCH 148/453] Bigints (#916)

* handle bigints in AST output tab

* stringify bigints for console dupe detection
---
 packages/repl/src/lib/Output/AstNode.svelte    | 5 +++--
 packages/repl/src/lib/Output/srcdoc/index.html | 5 +++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 03f5ec69d0..381f19625e 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -92,7 +92,7 @@
 				<span class="token comment">{String(value)}</span>
 			{:else}
 				<span class="token {typeof value}">
-					{JSON.stringify(value)}
+					{typeof value === 'bigint' ? `${value}n` : JSON.stringify(value)}
 				</span>
 			{/if}
 		</span>
@@ -170,7 +170,8 @@
 		color: var(--shiki-token-string);
 	}
 
-	.token.number {
+	.token.number,
+	.token.bigint {
 		color: var(--shiki-token-constant);
 	}
 
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index 21f049cbcc..d93691525b 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -155,6 +155,11 @@
 								return { type: 'Set', value };
 							}
 
+							// if we don't handle bigints separately, they will cause JSON.stringify to blow up
+							if (typeof value === 'bigint') {
+								return { type: 'BigInt', value: value + '' };
+							}
+
 							return value;
 						});
 					} catch (error) {

From 08c787df5f48f31977f7b0faee7128a1f2c9e55b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 18:40:24 -0500
Subject: [PATCH 149/453] include classes in exports (#917)

* include classes in exports

* regenerate
---
 .../docs/kit/98-reference/10-@sveltejs-kit.md |  77 ++---
 .../docs/svelte/98-reference/20-svelte.md     | 282 +++++++++---------
 .../98-reference/21-svelte-reactivity.md      |  23 ++
 apps/svelte.dev/scripts/sync-docs/types.ts    |   4 +-
 4 files changed, 211 insertions(+), 175 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 973c5252e2..c91a17a065 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -7,6 +7,7 @@ title: @sveltejs/kit
 ```js
 // @noErrors
 import {
+	Server,
 	VERSION,
 	error,
 	fail,
@@ -19,6 +20,43 @@ import {
 } from '@sveltejs/kit';
 ```
 
+## Server
+
+<div class="ts-block">
+
+```dts
+class Server {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+constructor(manifest: SSRManifest);
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+init(options: ServerInitOptions): Promise<void>;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+respond(request: Request, options: RequestOptions): Promise<Response>;
+```
+
+<div class="ts-block-property-details"></div>
+</div></div>
+
+
+
 ## VERSION
 
 <div class="ts-block">
@@ -94,7 +132,9 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(e: unknown): e is ActionFailure;
+function isActionFailure(
+	e: unknown
+): e is ActionFailure<undefined>;
 ```
 
 </div>
@@ -2303,41 +2343,6 @@ A `[file]: size` map of all assets imported by server code
 </div>
 </div></div>
 
-## Server
-
-<div class="ts-block">
-
-```dts
-class Server {/*…*/}
-```
-
-<div class="ts-block-property">
-
-```dts
-constructor(manifest: SSRManifest);
-```
-
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-init(options: ServerInitOptions): Promise<void>;
-```
-
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-respond(request: Request, options: RequestOptions): Promise<Response>;
-```
-
-<div class="ts-block-property-details"></div>
-</div></div>
-
 ## ServerInitOptions
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index e647351f91..6eb9cc5122 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -7,6 +7,8 @@ title: svelte
 ```js
 // @noErrors
 import {
+	SvelteComponent,
+	SvelteComponentTyped,
 	afterUpdate,
 	beforeUpdate,
 	createEventDispatcher,
@@ -26,6 +28,148 @@ import {
 } from 'svelte';
 ```
 
+## SvelteComponent
+
+This was the base class for Svelte components in Svelte 4. Svelte 5+ components
+are completely different under the hood. For typing, use `Component` instead.
+To instantiate components, use `mount` instead`.
+See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+
+<div class="ts-block">
+
+```dts
+class SvelteComponent<
+	Props extends Record<string, any> = Record<string, any>,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+static element?: typeof HTMLElement;
+```
+
+<div class="ts-block-property-details">
+
+The custom element version of the component. Only present if compiled with the `customElement` compiler option
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+[prop: string]: any;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
+is a stop-gap solution. Migrate towards using `mount` instead. See
+https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more info.
+
+</div>
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+$destroy(): void;
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+for more info.
+
+</div>
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+$on<K extends Extract<keyof Events, string>>(
+	type: K,
+	callback: (e: Events[K]) => void
+): () => void;
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+for more info.
+
+</div>
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+$set(props: Partial<Props>): void;
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
+is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+for more info.
+
+</div>
+
+</div>
+</div></div>
+
+
+
+## SvelteComponentTyped
+
+<blockquote class="tag deprecated">
+
+Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
+</blockquote>
+
+<div class="ts-block">
+
+```dts
+class SvelteComponentTyped<
+	Props extends Record<string, any> = Record<string, any>,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> extends SvelteComponent<Props, Events, Slots> {}
+```
+
+</div>
+
+
+
 ## afterUpdate
 
 <blockquote class="tag deprecated">
@@ -758,142 +902,4 @@ interface Snippet<Parameters extends unknown[] = []> {/*…*/}
 <div class="ts-block-property-details"></div>
 </div></div>
 
-## SvelteComponent
-
-This was the base class for Svelte components in Svelte 4. Svelte 5+ components
-are completely different under the hood. For typing, use `Component` instead.
-To instantiate components, use `mount` instead`.
-See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
-
-<div class="ts-block">
-
-```dts
-class SvelteComponent<
-	Props extends Record<string, any> = Record<string, any>,
-	Events extends Record<string, any> = any,
-	Slots extends Record<string, any> = any
-> {/*…*/}
-```
-
-<div class="ts-block-property">
-
-```dts
-static element?: typeof HTMLElement;
-```
-
-<div class="ts-block-property-details">
-
-The custom element version of the component. Only present if compiled with the `customElement` compiler option
-
-</div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-[prop: string]: any;
-```
-
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
-```
-
-<div class="ts-block-property-details">
-
-<div class="ts-block-property-bullets">
-
-- <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
-is a stop-gap solution. Migrate towards using `mount` instead. See
-https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more info.
-
-</div>
-
-</div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-$destroy(): void;
-```
-
-<div class="ts-block-property-details">
-
-<div class="ts-block-property-bullets">
-
-- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
-for more info.
-
-</div>
-
-</div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-$on<K extends Extract<keyof Events, string>>(
-	type: K,
-	callback: (e: Events[K]) => void
-): () => void;
-```
-
-<div class="ts-block-property-details">
-
-<div class="ts-block-property-bullets">
-
-- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
-for more info.
-
-</div>
-
-</div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-$set(props: Partial<Props>): void;
-```
-
-<div class="ts-block-property-details">
-
-<div class="ts-block-property-bullets">
-
-- <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
-for more info.
-
-</div>
-
-</div>
-</div></div>
-
-## SvelteComponentTyped
-
-<blockquote class="tag deprecated">
-
-Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
-
-</blockquote>
-
-<div class="ts-block">
-
-```dts
-class SvelteComponentTyped<
-	Props extends Record<string, any> = Record<string, any>,
-	Events extends Record<string, any> = any,
-	Slots extends Record<string, any> = any
-> extends SvelteComponent<Props, Events, Slots> {}
-```
-
-</div>
-
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index b6ada6638a..0106ee1ea0 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
@@ -22,6 +22,19 @@ Svelte provides reactive versions of various built-ins like `SvelteMap`, `Svelte
 <input bind:value={url.href} />
 ```
 
+
+
+```js
+// @noErrors
+import {
+	SvelteDate,
+	SvelteMap,
+	SvelteSet,
+	SvelteURL,
+	SvelteURLSearchParams
+} from 'svelte/reactivity';
+```
+
 ## SvelteDate
 
 <div class="ts-block">
@@ -48,6 +61,8 @@ constructor(...params: any[]);
 <div class="ts-block-property-details"></div>
 </div></div>
 
+
+
 ## SvelteMap
 
 <div class="ts-block">
@@ -83,6 +98,8 @@ set(key: K, value: V): this;
 <div class="ts-block-property-details"></div>
 </div></div>
 
+
+
 ## SvelteSet
 
 <div class="ts-block">
@@ -118,6 +135,8 @@ add(value: T): this;
 <div class="ts-block-property-details"></div>
 </div></div>
 
+
+
 ## SvelteURL
 
 <div class="ts-block">
@@ -144,6 +163,8 @@ get searchParams(): SvelteURLSearchParams;
 <div class="ts-block-property-details"></div>
 </div></div>
 
+
+
 ## SvelteURLSearchParams
 
 <div class="ts-block">
@@ -171,3 +192,5 @@ class SvelteURLSearchParams extends URLSearchParams {/*…*/}
 </div></div>
 
 
+
+
diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index 592b0ed21c..c46507dd93 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -152,7 +152,9 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 					.trim();
 
 				const collection =
-					ts.isVariableStatement(statement) || ts.isFunctionDeclaration(statement)
+					ts.isVariableStatement(statement) ||
+					ts.isClassDeclaration(statement) ||
+					ts.isFunctionDeclaration(statement)
 						? exports
 						: types;
 

From b87845afef6fc6634a2d49c2ff9f24c8b300e736 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:17:12 -0500
Subject: [PATCH 150/453] Sync `svelte` docs (#918)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 6eb9cc5122..8c43d2d84f 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -32,7 +32,7 @@ import {
 
 This was the base class for Svelte components in Svelte 4. Svelte 5+ components
 are completely different under the hood. For typing, use `Component` instead.
-To instantiate components, use `mount` instead`.
+To instantiate components, use `mount` instead.
 See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 <div class="ts-block">

From 1666909d255d5dba1366c150737754ebc2df3029 Mon Sep 17 00:00:00 2001
From: NANGGO <yamsiri@gmail.com>
Date: Tue, 3 Dec 2024 18:09:18 +0900
Subject: [PATCH 151/453] docs: update sample code to replace deprecated
 <svelte:component> (#919)

---
 .../05-advanced-loading/01-universal-load-functions/index.md   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
index 32bf1b9dbf..6118fb88ed 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
@@ -29,7 +29,8 @@ We can now use the `component` returned from these `load` functions like any oth
 	<a href="http://github.com/blue">blue</a>
 
 +++	{#if $page.data.component}
-		<svelte:component this={$page.data.component} />
+		{@const Component = $page.data.component}
+		<Component />
 	{/if}+++
 </nav>
 ```

From 04be0aa971c497f163c14bd71272fa1874a75163 Mon Sep 17 00:00:00 2001
From: "Dominik G." <dominik.goepel@gmx.de>
Date: Tue, 3 Dec 2024 10:12:03 +0100
Subject: [PATCH 152/453] docs: adjust blog example (#920)

replace rows with grid-template-rows to increase browser compat
---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 4104ef662f..e41b089e4d 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -24,7 +24,7 @@ This is a long-awaited and much-requested feature, that allows you to isolate an
 If you just want to render something in an `{#each ...}` block _n_ times, and don't care about the value, you can now omit the `as` part.
 
 - [docs](/docs/svelte/each#Each-blocks-without-an-item)
-- [demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)
+- [demo](/playground/untitled#H4sIAAAAAAAAA3WP3WrDMAyFX0VoDFqWtGRXxWsKY4-x7MKx1SbUtY2tdi0h7z7s_myD9k6c8-lIZ0Ard4QCPzqKEVong8YC172hiOJzQD75ZCcBiyv87v0sHshw0loZ6Z6unGWyHFHgUvcHUEbGWDeo0qUyX2pw1diGhyeSqoMBDNkNdwIWMBYQpN2OyX4EpJ8uQMO_J0RrpNrWwyQFwEvGpvAMr1DXNVTjajnX_WF1SZ6n5JxyG2--XUY-Gcro7M_bMJyXdR-9kScBm9Drt7OWxpJp541kKpUz-52NAgJ5kjxZFFCtw_QuG9z3I7B1QVMQUPkjRGd6DbnjxZXRk-IySO6dgCqpWZ9l6Ppsw61U201we6vFv_3cPvc-18UCmY6MgsOexq_xBw8BVaUkAgAA)
 
 ## Day 3
 

From 6fb74111a5f5ba410bf57bdafbdb8197f7a59ce2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:03:05 -0500
Subject: [PATCH 153/453] Sync `svelte` docs (#922)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/03-template-syntax/06-snippet.md   | 17 +++++++++++
 .../98-reference/.generated/compile-errors.md | 30 +++++++++++++++++++
 .../svelte/98-reference/30-compiler-errors.md | 30 +++++++++++++++++++
 3 files changed, 77 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index 4bbc970c5d..f8148f3dc3 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -246,6 +246,23 @@ We can tighten things up further by declaring a generic, so that `data` and `row
 </script>
 ```
 
+## Exporting snippets
+
+Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
+
+```svelte
+<script module>
+	export { add };
+</script>
+
+{#snippet add(a, b)}
+	{a} + {b} = {a + b}
+{/snippet}
+```
+
+> [!NOTE]
+> This requires Svelte 5.5.0 or newer
+
 ## Programmatic snippets
 
 Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 77166097a2..e1925324e6 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -400,6 +400,12 @@ Expected token %token%
 Expected whitespace
 ```
 
+### export_undefined
+
+```
+`%name%` is not defined
+```
+
 ### global_reference_invalid
 
 ```
@@ -694,6 +700,30 @@ Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migra
 Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
 ```
 
+### snippet_invalid_export
+
+```
+An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
+```
+
+It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
+
+```svelte
+<script module>
+	export { greeting };
+</script>
+
+<script>
+	let message = 'hello';
+</script>
+
+{#snippet greeting(name)}
+	<p>{message} {name}!</p>
+{/snippet}
+```
+
+...because `greeting` references `message`, which is defined in the second `<script>`.
+
 ### snippet_invalid_rest_parameter
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 7e67488655..105df23dc3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -404,6 +404,12 @@ Expected token %token%
 Expected whitespace
 ```
 
+### export_undefined
+
+```
+`%name%` is not defined
+```
+
 ### global_reference_invalid
 
 ```
@@ -698,6 +704,30 @@ Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migra
 Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
 ```
 
+### snippet_invalid_export
+
+```
+An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
+```
+
+It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
+
+```svelte
+<script module>
+	export { greeting };
+</script>
+
+<script>
+	let message = 'hello';
+</script>
+
+{#snippet greeting(name)}
+	<p>{message} {name}!</p>
+{/snippet}
+```
+
+...because `greeting` references `message`, which is defined in the second `<script>`.
+
 ### snippet_invalid_rest_parameter
 
 ```

From e24407ce47bc416e9916c0f75297c807c73f8e6e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 11:16:04 -0500
Subject: [PATCH 154/453] =?UTF-8?q?advent=20of=20svelte=20day=203=20?=
 =?UTF-8?q?=E2=80=94=20exported=20snippets=20(#924)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

exported snippets
---
 .../svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index e41b089e4d..e27c45b3df 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -26,9 +26,12 @@ If you just want to render something in an `{#each ...}` block _n_ times, and do
 - [docs](/docs/svelte/each#Each-blocks-without-an-item)
 - [demo](/playground/untitled#H4sIAAAAAAAAA3WP3WrDMAyFX0VoDFqWtGRXxWsKY4-x7MKx1SbUtY2tdi0h7z7s_myD9k6c8-lIZ0Ard4QCPzqKEVong8YC172hiOJzQD75ZCcBiyv87v0sHshw0loZ6Z6unGWyHFHgUvcHUEbGWDeo0qUyX2pw1diGhyeSqoMBDNkNdwIWMBYQpN2OyX4EpJ8uQMO_J0RrpNrWwyQFwEvGpvAMr1DXNVTjajnX_WF1SZ6n5JxyG2--XUY-Gcro7M_bMJyXdR-9kScBm9Drt7OWxpJp541kKpUz-52NAgJ5kjxZFFCtw_QuG9z3I7B1QVMQUPkjRGd6DbnjxZXRk-IySO6dgCqpWZ9l6Ppsw61U201we6vFv_3cPvc-18UCmY6MgsOexq_xBw8BVaUkAgAA)
 
-## Day 3
+## Day 3: exported snippets
 
-Coming soon!
+You can now export snippets from a component's `<script module>`, for use in other components, as long as those snippets don't reference anything belonging to the component instance.
+
+- [docs](/docs/svelte/snippet#Exporting-snippets)
+- [demo](/playground/16b7dd7105c248e59ec8a437697f588d?version=5.5.0)
 
 ## Day 4
 

From f02876b01a0b09dbe1b3bccea489c2b7dea803e4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:51:36 -0500
Subject: [PATCH 155/453] Sync `svelte` docs (#923)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/07-misc/03-typescript.md      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
index f4513a9a2d..fbf8817069 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -40,26 +40,26 @@ If you want to use one of these features, you need to setup up a `script` prepro
 
 To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
 
-### Using SvelteKit or Vite
-
-The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.
-
 ```ts
 /// file: svelte.config.js
 // @noErrors
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
-	preprocess: vitePreprocess()
+	// Note the additional `{ script: true }`
+	preprocess: vitePreprocess({ script: true })
 };
 
 export default config;
 ```
 
-If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+### Using SvelteKit or Vite
+
+The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.
 
 ```ts
 /// file: svelte.config.js
+// @noErrors
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
@@ -69,6 +69,8 @@ const config = {
 export default config;
 ```
 
+If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+
 In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
 
 ### Other build tools
@@ -77,6 +79,14 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 > [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead
 
+## tsconfig.json settings
+
+When using TypeScript, make sure your `tsconfig.json` is setup correctly.
+
+- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler
+- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
+- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. 
+
 ## Typing `$props`
 
 Type `$props` just like a regular object with certain properties.

From c8f62af67f414bb467ea7c9ea42487bb4c5b714b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:52:04 -0500
Subject: [PATCH 156/453] Sync `kit` docs (#921)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index c91a17a065..2c13be6219 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -132,9 +132,7 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(
-	e: unknown
-): e is ActionFailure<undefined>;
+function isActionFailure(e: unknown): e is ActionFailure;
 ```
 
 </div>

From 0d2d24f4da4734bc0a187804a6cc395fe245c109 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:53:11 +0100
Subject: [PATCH 157/453] fix: add polyfills / avoid using `structuredClone`
 (#915)

- polyfills for `at` and `withResolvers`
- avoid using `structuredClone`, we can use `JSON.parse(JSON.stringify(..))` instead at that position

makes the site work in more browsers

closes #911
---
 apps/svelte.dev/src/hooks.client.js            |  1 +
 .../(authed)/playground/[id]/+page.svelte      |  4 ++--
 .../editor/src/lib/compile-worker/worker.ts    |  1 +
 packages/repl/src/lib/workers/bundler/index.ts |  1 +
 packages/site-kit/package.json                 |  3 +++
 packages/site-kit/src/lib/polyfills/index.ts   | 18 ++++++++++++++++++
 packages/site-kit/src/lib/search/search.ts     |  1 +
 7 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 apps/svelte.dev/src/hooks.client.js
 create mode 100644 packages/site-kit/src/lib/polyfills/index.ts

diff --git a/apps/svelte.dev/src/hooks.client.js b/apps/svelte.dev/src/hooks.client.js
new file mode 100644
index 0000000000..e6e098b1ec
--- /dev/null
+++ b/apps/svelte.dev/src/hooks.client.js
@@ -0,0 +1 @@
+import '@sveltejs/site-kit/polyfills';
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index d11f2522b7..f5181943ce 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -69,8 +69,8 @@
 
 		if (!hash && !saved) {
 			repl?.set({
-				// TODO make this munging unnecessary
-				files: structuredClone(data.gist.components).map(munge)
+				// TODO make this munging unnecessary (using JSON instead of structuredClone for better browser compat)
+				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge)
 			});
 
 			modified = false;
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index dcd517572a..9ea49a6b5f 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import { parseTar } from 'tarparser';
 import type { CompileResult } from 'svelte/compiler';
 import type { ExposedCompilerOptions, File } from '../Workspace.svelte';
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 1aae33b2a2..fbb7e9540f 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import '../patch_window';
 import { sleep } from '../../utils';
 import { rollup } from '@rollup/browser';
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 71c07c0906..84abf82b95 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -98,6 +98,9 @@
 			"default": "./src/lib/nav/index.ts",
 			"svelte": "./src/lib/nav/index.ts"
 		},
+		"./polyfills": {
+			"default": "./src/lib/polyfills/index.ts"
+		},
 		"./icons/link.svg": "./src/lib/icons/link.svg",
 		"./icons/search.svg": "./src/lib/icons/search.svg",
 		"./search": {
diff --git a/packages/site-kit/src/lib/polyfills/index.ts b/packages/site-kit/src/lib/polyfills/index.ts
new file mode 100644
index 0000000000..b2f91178dd
--- /dev/null
+++ b/packages/site-kit/src/lib/polyfills/index.ts
@@ -0,0 +1,18 @@
+// Some polyfills for things used throughout the app for better browser compat
+
+if (!Array.prototype.at) {
+	Array.prototype.at = /** @param {number} index */ function (index) {
+		return this[index >= 0 ? index : this.length + index];
+	};
+}
+
+if (!Promise.withResolvers) {
+	Promise.withResolvers = function () {
+		let resolve: any, reject: any;
+		const promise = new Promise<any>((res, rej) => {
+			resolve = res;
+			reject = rej;
+		});
+		return { resolve, reject, promise };
+	};
+}
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 56e022118f..01555ecd2d 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/packages/site-kit/src/lib/search/search.ts
@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
 import type { Block, BlockGroup } from './types';
 

From 42bd7b828ae926b43b75810937685ad08d43e0aa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 21:48:47 -0500
Subject: [PATCH 158/453] Sync `svelte` docs (#926)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/02-$state.md | 142 +++++++++++++++++-
 .../.generated/client-warnings.md             |  74 +++++++++
 .../.generated/compile-warnings.md            |   6 -
 .../98-reference/30-compiler-warnings.md      |   6 -
 .../98-reference/30-runtime-warnings.md       |  74 +++++++++
 5 files changed, 283 insertions(+), 19 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index e8213d3cf4..77140dc690 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -36,12 +36,7 @@ let todos = $state([
 ...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:
 
 ```js
-// @filename: ambient.d.ts
-declare global {
-	const todos: Array<{ done: boolean, text: string }>
-}
-
-// @filename: index.js
+let todos = [{ done: false, text: 'add more todos' }];
 // ---cut---
 todos[0].done = !todos[0].done;
 ```
@@ -64,6 +59,17 @@ todos.push({
 
 > [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
 
+Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+let { done, text } = todos[0];
+
+// this will not affect the value of `done`
+todos[0].done = !todos[0].done;
+```
+
 ### Classes
 
 You can also use `$state` in class fields (whether public or private):
@@ -85,7 +91,42 @@ class Todo {
 }
 ```
 
-> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields.
+> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.
+
+When calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `<button>` rather than the `Todo`:
+
+```svelte
+<button onclick={todo.reset}>
+	reset
+</button>
+```
+
+You can either use an inline function...
+
+```svelte
+<button onclick=+++{() => todo.reset()}>+++
+	reset
+</button>
+```
+
+...or use an arrow function in the class definition:
+
+```js
+// @errors: 7006 2554
+class Todo {
+	done = $state(false);
+	text = $state();
+
+	constructor(text) {
+		this.text = text;
+	}
+
+	+++reset = () => {+++
+		this.text = '';
+		this.done = false;
+	}
+}
+```
 
 ## `$state.raw`
 
@@ -127,3 +168,90 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 ```
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
+
+## Passing state into functions
+
+JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+	return a + b;
+}
+
+let a = 1;
+let b = 2;
+let total = add(a, b);
+console.log(total); // 3
+
+a = 3;
+b = 4;
+console.log(total); // still 3!
+```
+
+If `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {() => number} getA
+ * @param {() => number} getB
+ */
+function add(+++getA, getB+++) {
+	return +++() => getA() + getB()+++;
+}
+
+let a = 1;
+let b = 2;
+let total = add+++(() => a, () => b)+++;
+console.log(+++total()+++); // 3
+
+a = 3;
+b = 4;
+console.log(+++total()+++); // 7
+```
+
+State in Svelte is no different — when you reference something declared with the `$state` rune...
+
+```js
+let a = +++$state(1)+++;
+let b = +++$state(2)+++;
+```
+
+...you're accessing its _current value_.
+
+Note that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {{ a: number, b: number }} input
+ */
+function add(input) {
+	return {
+		get value() {
+			return input.a + input.b;
+		}
+	};
+}
+
+let input = $state({ a: 1, b: 2 });
+let total = add(input);
+console.log(total.value); // 3
+
+input.a = 3;
+input.b = 4;
+console.log(total.value); // 7
+```
+
+...though if you find yourself writing code like that, consider using [classes](#Classes) instead.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index e9f1a88c3c..ef19a28994 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -1,5 +1,39 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### assignment_value_stale
+
+```
+Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+```
+
+Given a case like this...
+
+```svelte
+<script>
+	let object = $state({ array: null });
+
+	function add() {
+		(object.array ??= []).push(object.array.length);
+	}
+</script>
+
+<button onclick={add}>add</button>
+<p>items: {JSON.stringify(object.items)}</p>
+```
+
+...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.
+
+You can fix this by separating it into two statements:
+
+```js
+let object = { array: [0] };
+// ---cut---
+function add() {
+	object.array ??= [];
+	object.array.push(object.array.length);
+}
+```
+
 ### binding_property_non_reactive
 
 ```
@@ -86,6 +120,46 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
+### reactive_declaration_non_reactive_property
+
+```
+A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
+```
+
+In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
+
+In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
+
+Often, the result is the same — for example these can be considered equivalent:
+
+```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
+$: sum = a + b;
+```
+
+```js
+let a = 1, b = 2;
+// ---cut---
+const sum = $derived(a + b);
+```
+
+In some cases — such as the one that triggered the above warning — they are _not_ the same:
+
+```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
+const add = () => a + b;
+
+// the compiler can't 'see' that `sum` depends on `a` and `b`, but
+// they _would_ be read while executing the `$derived` version
+$: sum = add();
+```
+
+Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
+
+When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
+
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 775e0681c9..cc948e2547 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -726,12 +726,6 @@ Reactive declarations only exist at the top level of the instance script
 Reassignments of module-level declarations will not cause reactive statements to update
 ```
 
-### reactive_declaration_non_reactive_property
-
-```
-Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
-```
-
 ### script_context_deprecated
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 662b04ea82..082eb9879f 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -746,12 +746,6 @@ Reactive declarations only exist at the top level of the instance script
 Reassignments of module-level declarations will not cause reactive statements to update
 ```
 
-### reactive_declaration_non_reactive_property
-
-```
-Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
-```
-
 ### script_context_deprecated
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index c1c79d53e4..4bcc6019db 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -6,6 +6,40 @@ title: 'Runtime warnings'
 
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### assignment_value_stale
+
+```
+Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+```
+
+Given a case like this...
+
+```svelte
+<script>
+	let object = $state({ array: null });
+
+	function add() {
+		(object.array ??= []).push(object.array.length);
+	}
+</script>
+
+<button onclick={add}>add</button>
+<p>items: {JSON.stringify(object.items)}</p>
+```
+
+...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.
+
+You can fix this by separating it into two statements:
+
+```js
+let object = { array: [0] };
+// ---cut---
+function add() {
+	object.array ??= [];
+	object.array.push(object.array.length);
+}
+```
+
 ### binding_property_non_reactive
 
 ```
@@ -92,6 +126,46 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
+### reactive_declaration_non_reactive_property
+
+```
+A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
+```
+
+In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
+
+In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
+
+Often, the result is the same — for example these can be considered equivalent:
+
+```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
+$: sum = a + b;
+```
+
+```js
+let a = 1, b = 2;
+// ---cut---
+const sum = $derived(a + b);
+```
+
+In some cases — such as the one that triggered the above warning — they are _not_ the same:
+
+```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
+const add = () => a + b;
+
+// the compiler can't 'see' that `sum` depends on `a` and `b`, but
+// they _would_ be read while executing the `$derived` version
+$: sum = add();
+```
+
+Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
+
+When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
+
 ### state_proxy_equality_mismatch
 
 ```

From cbf9f29a5af092d1fd861b9cb01ff665c128f8bd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 4 Dec 2024 10:04:46 -0500
Subject: [PATCH 159/453] Sync `svelte` docs (#928)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/11-bind.md | 43 ++++++++++++++++++-
 .../98-reference/.generated/compile-errors.md |  4 +-
 .../.generated/compile-warnings.md            |  4 +-
 .../svelte/98-reference/30-compiler-errors.md |  4 +-
 .../98-reference/30-compiler-warnings.md      |  4 +-
 .../docs/svelte/99-legacy/20-legacy-slots.md  | 28 +++++++-----
 6 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 7dd03a6b04..fe3cf727e2 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -53,6 +53,22 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
 
 If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
 
+Since 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
+
+```svelte
+<script>
+	let value = $state('');
+</script>
+
+<form>
+	<input bind:value defaultValue="not the empty string">
+	<input type="reset" value="Reset">
+</form>
+```
+
+> [!NOTE]
+> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.
+
 ## `<input bind:checked>`
 
 Checkbox and radio inputs can be bound with `bind:checked`:
@@ -64,16 +80,29 @@ Checkbox and radio inputs can be bound with `bind:checked`:
 </label>
 ```
 
+Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
+
+```svelte
+<script>
+	let checked = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked defaultChecked={true}>
+	<input type="reset" value="Reset">
+</form>
+```
+
 ## `<input bind:group>`
 
 Inputs that work together can use `bind:group`.
 
 ```svelte
 <script>
-	let tortilla = 'Plain';
+	let tortilla = $state('Plain');
 
 	/** @type {Array<string>} */
-	let fillings = [];
+	let fillings = $state([]);
 </script>
 
 <!-- grouped radio inputs are mutually exclusive -->
@@ -146,6 +175,16 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
+You can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
+
+```svelte
+<select bind:value={selected}>
+	<option value={a}>a</option>
+	<option value={b} selected>b</option>
+	<option value={c}>c</option>
+</select>
+```
+
 ## `<audio>`
 
 `<audio>` elements have their own set of bindings — five two-way ones...
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index e1925324e6..3bd162d8d7 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -487,12 +487,12 @@ A component cannot have a default export
 ### node_invalid_placement
 
 ```
-%thing% is invalid inside `<%parent%>`
+%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index cc948e2547..481959ba3d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -643,12 +643,12 @@ Svelte 5 components are no longer classes. Instantiate them using `mount` or `hy
 ### node_invalid_placement_ssr
 
 ```
-%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 105df23dc3..27d00875f6 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -491,12 +491,12 @@ A component cannot have a default export
 ### node_invalid_placement
 
 ```
-%thing% is invalid inside `<%parent%>`
+%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 082eb9879f..2121848c20 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -663,12 +663,12 @@ Svelte 5 components are no longer classes. Instantiate them using `mount` or `hy
 ### node_invalid_placement_ssr
 
 ```
-%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md b/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
index 5189f2017d..3474782e93 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
@@ -74,39 +74,45 @@ If no slotted content is provided, a component can define fallback content by pu
 
 Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
 
-The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
-
 ```svelte
-<!-- FancyList.svelte -->
+<!--- file: FancyList.svelte --->
 <ul>
-	{#each items as item}
+	{#each items as data}
 		<li class="fancy">
-			<slot prop={item} />
+			<!-- 'item' here... -->
+			<slot item={process(data)} />
 		</li>
 	{/each}
 </ul>
+```
 
-<!-- App.svelte -->
-<FancyList {items} let:prop={thing}>
-	<div>{thing.text}</div>
+```svelte
+<!--- file: App.svelte --->
+<!-- ...corresponds to 'item' here: -->
+<FancyList {items} let:item={processed}>
+	<div>{processed.text}</div>
 </FancyList>
 ```
 
+The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
+
 Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
 
 ```svelte
-<!-- FancyList.svelte -->
+<!--- file: FancyList.svelte --->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot name="item" {item} />
+			<slot name="item" item={process(data)} />
 		</li>
 	{/each}
 </ul>
 
 <slot name="footer" />
+```
 
-<!-- App.svelte -->
+```svelte
+<!--- file: App.svelte --->
 <FancyList {items}>
 	<div slot="item" let:item>{item.text}</div>
 	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>

From fb84f19e4cac38be978fe575f6932912698d64c1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 4 Dec 2024 10:05:04 -0500
Subject: [PATCH 160/453] Sync `kit` docs (#929)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 3cb2ba3ef3..b54074cdd7 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -169,7 +169,7 @@ To create a layout that applies to every page, make a file called `src/routes/+l
 ...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:
 
 ```svelte
-<!---- file: src/routes/+layout.svelte --->
+<!--- file: src/routes/+layout.svelte --->
 <script>
 	let { children } = $props();
 </script>

From 0709259746928df807c0d871334cede2d15145b5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 4 Dec 2024 11:53:41 -0500
Subject: [PATCH 161/453] advent of svelte day 4 (#930)

---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index e27c45b3df..81e37f356e 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -31,11 +31,14 @@ If you just want to render something in an `{#each ...}` block _n_ times, and do
 You can now export snippets from a component's `<script module>`, for use in other components, as long as those snippets don't reference anything belonging to the component instance.
 
 - [docs](/docs/svelte/snippet#Exporting-snippets)
-- [demo](/playground/16b7dd7105c248e59ec8a437697f588d?version=5.5.0)
+- [demo](/playground/16b7dd7105c248e59ec8a437697f588d)
 
-## Day 4
+## Day 4: form control default values
 
-Coming soon!
+When you reset a form, the value of each `<input>` element reverts to its `defaultValue`. This is normally the empty string, but you can now control it directly in your template.
+
+- [docs](/docs/svelte/bind#input-bind:value)
+- [demo](/playground/b30cfac16c3c4a3ab3d76ad20a5925cf)
 
 ## Day 5
 

From fac26479dcdef99e39d21970a36b528f19a872ec Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 4 Dec 2024 11:55:29 -0500
Subject: [PATCH 162/453] consistency

---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 81e37f356e..a197220292 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -12,7 +12,7 @@ This year, we're turning it around: you get to relax while _we_ take on a challe
 
 Follow [@svelte.dev](https://bsky.app/profile/svelte.dev) and [@sveltesociety.dev](https://bsky.app/profile/sveltesociety.dev) and check back every day to see what we've been cooking up.
 
-## Day 1: Error boundaries
+## Day 1: error boundaries
 
 This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.
 

From 2c8542a27fe73329d813d8d7fa6f5ce9e8472554 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Dec 2024 09:39:35 -0500
Subject: [PATCH 163/453] Sync `svelte` docs (#932)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/07-misc/07-v5-migration-guide.md    | 2 ++
 apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md       | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 687f8e93b1..09ea84f26c 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -823,6 +823,8 @@ The `foreign` namespace was only useful for Svelte Native, which we're planning
 
 `afterUpdate` callbacks in a parent component will now run after `afterUpdate` callbacks in any child components.
 
+`beforeUpdate/afterUpdate` no longer run when the component contains a `<slot>` and its content is updated.
+
 Both functions are disallowed in runes mode — use `$effect.pre(...)` and `$effect(...)` instead.
 
 ### `contenteditable` behavior change
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
index 4fceda03d6..b56c27af86 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
@@ -102,6 +102,12 @@ If you need hash-based routing on the client side, check out [svelte-spa-router]
 
 You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages?category=routers).
 
+## How do I write a mobile app with Svelte?
+
+While most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when building mobile apps, you can turn a [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.
+
+Svelte Native was an option available for Svelte 4, but note that Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.
+
 ## Can I tell Svelte not to remove my unused styles?
 
 No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.

From ea6528e5d716c68b35ed8f09c8238c050e13e3b6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 10:14:15 -0500
Subject: [PATCH 164/453] fix deprecated note styles (#937)

---
 .../content/docs/svelte/98-reference/20-svelte.md  | 14 +++++++-------
 .../docs/svelte/98-reference/21-svelte-compiler.md |  2 +-
 .../docs/svelte/98-reference/21-svelte-legacy.md   |  8 ++++----
 apps/svelte.dev/scripts/sync-docs/types.ts         |  6 ++++++
 packages/site-kit/src/lib/components/Text.svelte   | 11 +++++++++--
 packages/site-kit/src/lib/markdown/index.ts        |  1 +
 packages/site-kit/src/lib/markdown/preprocess.ts   |  6 +++++-
 7 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 8c43d2d84f..0c42bc8adb 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -150,7 +150,7 @@ for more info.
 
 ## SvelteComponentTyped
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
@@ -172,7 +172,7 @@ class SvelteComponentTyped<
 
 ## afterUpdate
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect
 
@@ -196,7 +196,7 @@ function afterUpdate(fn: () => void): void;
 
 ## beforeUpdate
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre
 
@@ -220,7 +220,7 @@ function beforeUpdate(fn: () => void): void;
 
 ## createEventDispatcher
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events
 
@@ -593,7 +593,7 @@ The custom element version of the component. Only present if compiled with the `
 
 ## ComponentConstructorOptions
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 In Svelte 4, components are classes. In Svelte 5, they are functions.
 Use `mount` instead to instantiate components.
@@ -693,7 +693,7 @@ $$inline?: boolean;
 
 ## ComponentEvents
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.
 
@@ -770,7 +770,7 @@ type ComponentProps<
 
 ## ComponentType
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 This type is obsolete when working with the new `Component` type.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 3e680c2eaf..14190e6bbe 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -159,7 +159,7 @@ function preprocess(
 
 ## walk
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Replace this with `import { walk } from 'estree-walker'`
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
index 45f2e3b65c..28f610991d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
@@ -27,7 +27,7 @@ import {
 
 ## asClassComponent
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 
@@ -58,7 +58,7 @@ function asClassComponent<
 
 ## createBubbler
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.
 
@@ -80,7 +80,7 @@ function createBubbler(): (
 
 ## createClassComponent
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 
@@ -199,7 +199,7 @@ function preventDefault(
 
 ## run
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your component code to Svelte 5.
 
diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index c46507dd93..53e3b579a0 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -76,6 +76,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 				let start = statement.pos;
 				let comment = '';
 				let deprecated_notice: string | null = null;
+				let since_notice: string | null = null;
 
 				// @ts-ignore i think typescript is bad at typescript
 				if (statement.jsDoc) {
@@ -97,6 +98,10 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 								deprecated_notice = tag.comment;
 							}
 
+							if (tag.tagName.escapedText === 'since') {
+								since_notice = tag.comment;
+							}
+
 							if (tag.tagName.escapedText === 'example') {
 								comment += `\n\n${tag.comment}`;
 							}
@@ -174,6 +179,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 						name,
 						comment: cleanup_comment(comment),
 						deprecated: deprecated_notice,
+						since: since_notice,
 						overloads: []
 					};
 
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 2428443720..22ba0189d8 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -439,8 +439,9 @@
 			&.deprecated {
 				p:first-child::before {
 					content: 'Deprecated ';
-					display: block;
-					font-style: normal;
+					font: var(--sk-font-ui-medium);
+					text-transform: uppercase;
+					color: var(--sk-fg-4);
 				}
 			}
 
@@ -462,6 +463,12 @@
 			}
 		}
 
+		.since p {
+			font: var(--sk-font-ui-medium);
+			text-transform: uppercase;
+			color: var(--sk-fg-4);
+		}
+
 		details {
 			position: relative;
 
diff --git a/packages/site-kit/src/lib/markdown/index.ts b/packages/site-kit/src/lib/markdown/index.ts
index 3fe58b19a7..eca67cde79 100644
--- a/packages/site-kit/src/lib/markdown/index.ts
+++ b/packages/site-kit/src/lib/markdown/index.ts
@@ -15,6 +15,7 @@ export interface Declaration {
 	name: string;
 	comment: string;
 	deprecated?: string | null;
+	since?: string | null;
 	overloads: Array<{
 		snippet: string;
 		children: TypeElement[];
diff --git a/packages/site-kit/src/lib/markdown/preprocess.ts b/packages/site-kit/src/lib/markdown/preprocess.ts
index cdb7155065..4d9eded6c1 100644
--- a/packages/site-kit/src/lib/markdown/preprocess.ts
+++ b/packages/site-kit/src/lib/markdown/preprocess.ts
@@ -122,7 +122,11 @@ function render_declaration(declaration: Declaration, full: boolean) {
 	let content = '';
 
 	if (declaration.deprecated) {
-		content += `<blockquote class="tag deprecated">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
+		content += `<blockquote class="tag deprecated note">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
+	}
+
+	if (declaration.since) {
+		content += `<blockquote class="since note">\n\nAvailable since ${declaration.since}\n\n</blockquote>\n\n`;
 	}
 
 	if (declaration.comment) {

From 5b9f2ec9a0ebb39e1daffd1c81bb36bf8ad8075f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:33:19 -0500
Subject: [PATCH 165/453] Sync `svelte` docs (#938)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/98-reference/21-svelte-motion.md   |  41 +++++-
 .../98-reference/21-svelte-reactivity.md      | 131 +++++++++++++++++-
 2 files changed, 170 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
index 263329be9a..39d91f95ff 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
+++ b/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.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index 0106ee1ea0..233f7b75d2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/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>
+
+
+
 

From 3ba6329c28120352376c49ff680a2cc438666e77 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 10:48:17 -0500
Subject: [PATCH 166/453] advent of svelte day 5 (#939)

day 5
---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index a197220292..82139809af 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -40,9 +40,14 @@ When you reset a form, the value of each `<input>` element reverts to its `defau
 - [docs](/docs/svelte/bind#input-bind:value)
 - [demo](/playground/b30cfac16c3c4a3ab3d76ad20a5925cf)
 
-## Day 5
+## Day 5: `MediaQuery`, `prefersReducedMotion` and `createSubscriber`
 
-Coming soon!
+It's a three-in-one kind of day. `new MediaQuery(...)` gives you an object with a reactive `current` property that's true when the media query matches. `prefersReducedMotion` is an instance of `MediaQuery` that matches if the user has expressed a [preference for reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), helping you build accessible apps. Under the hood, both are using the `createSubscriber` mechanism, which gives you an easy way to set up event listeners when a value is read inside an effect.
+
+- [`createSubscriber` docs](/docs/svelte/svelte-reactivity#createSubscriber)
+- [`MediaQuery` docs](/docs/svelte/svelte-reactivity#MediaQuery)
+- [`prefersReducedMotion` docs](/docs/svelte/svelte-motion#prefersReducedMotion)
+- [demo](/playground/89f6f3bb738149fcb6e708cfce878e0f)
 
 ## Day 6
 

From 140dbff2b62c246fb42fb7d3354f349edcca28c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez=20G=C3=B3mez?=
 <github@martingonzalez.net>
Date: Thu, 5 Dec 2024 12:28:24 -0500
Subject: [PATCH 167/453] feat: Render full posts on RSS feed (#934)

* Render full posts on RSS feed

* fix tab
---
 .../src/routes/blog/rss.xml/+server.js        | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
index 0695c2351e..ee994f9a4a 100644
--- a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
+++ b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
@@ -1,4 +1,5 @@
 import { index } from '$lib/server/content';
+import { render_content } from '$lib/server/renderer';
 
 export const prerender = false; // TODO
 
@@ -25,8 +26,24 @@ function escapeHTML(html) {
 }
 
 /** @param {import('@sveltejs/site-kit').Document[]} posts */
-const get_rss = (posts) =>
+const get_rss = async (posts) => {
+	const renderedPosts = await Promise.all(
+		posts
+			.filter((post) => !post.metadata.draft)
+			.map(
+				async (post) => `
+		<item>
+			<title>${escapeHTML(post.metadata.title)}</title>
+			<link>https://svelte.dev/${post.slug}</link>
+			<author>${escapeHTML(post.metadata.author)}</author>
+			<description>${escapeHTML(await render_content(post.file, post.body))}</description>
+			<pubDate>${formatPubdate(/** @type {string} */ (post.file.split('/').pop()).slice(0, 10))}</pubDate>
+		</item>
 	`
+			)
+	);
+
+	return `
 <?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0">
 
@@ -39,19 +56,7 @@ const get_rss = (posts) =>
 		<title>Svelte</title>
 		<link>https://svelte.dev/blog</link>
 	</image>
-	${posts
-		.filter((post) => !post.metadata.draft)
-		.map(
-			(post) => `
-		<item>
-			<title>${escapeHTML(post.metadata.title)}</title>
-			<link>https://svelte.dev/${post.slug}</link>
-			<description>${escapeHTML(post.metadata.description)}</description>
-			<pubDate>${formatPubdate(/** @type {string} */ (post.file.split('/').pop()).slice(0, 10))}</pubDate>
-		</item>
-	`
-		)
-		.join('')}
+			${renderedPosts.join('')}
 </channel>
 
 </rss>
@@ -59,9 +64,10 @@ const get_rss = (posts) =>
 		.replace(/>[^\S]+/gm, '>')
 		.replace(/[^\S]+</gm, '<')
 		.trim();
+};
 
 export async function GET() {
-	return new Response(get_rss(index.blog.children), {
+	return new Response(await get_rss(index.blog.children), {
 		headers: {
 			'Cache-Control': `max-age=${30 * 60 * 1e3}`,
 			'Content-Type': 'application/rss+xml'

From 044c08dbf8dd00ede79d90572b323fdecd605836 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 13:32:09 -0500
Subject: [PATCH 168/453] strip origin from links in deprecation notices (#941)

---
 apps/svelte.dev/scripts/sync-docs/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index 53e3b579a0..fbee849d04 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -95,7 +95,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 					if (jsDoc.tags) {
 						for (const tag of jsDoc.tags) {
 							if (tag.tagName.escapedText === 'deprecated') {
-								deprecated_notice = tag.comment;
+								deprecated_notice = tag.comment && strip_origin(tag.comment);
 							}
 
 							if (tag.tagName.escapedText === 'since') {

From c478ec821096c5aa0b1d4df972bc776f7034526c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Dec 2024 13:43:03 -0500
Subject: [PATCH 169/453] Sync `svelte` docs (#940)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/98-reference/20-svelte.md      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 0c42bc8adb..a680264fa6 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -79,7 +79,7 @@ constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
 
 - <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
 is a stop-gap solution. Migrate towards using `mount` instead. See
-https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more info.
+[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 </div>
 
@@ -97,7 +97,7 @@ $destroy(): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -119,7 +119,7 @@ $on<K extends Extract<keyof Events, string>>(
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -138,7 +138,7 @@ $set(props: Partial<Props>): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -174,7 +174,7 @@ class SvelteComponentTyped<
 
 <blockquote class="tag deprecated note">
 
-Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect
+Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
 
 </blockquote>
 
@@ -198,7 +198,7 @@ function afterUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated note">
 
-Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre
+Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead
 
 </blockquote>
 
@@ -222,7 +222,7 @@ function beforeUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated note">
 
-Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events
+Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)
 
 </blockquote>
 
@@ -553,13 +553,13 @@ interface Component<
 ): {
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$on?(type: string, callback: (e: any) => void): () => void;
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$set?(props: Partial<Props>): void;

From 9c12b0e36454d31f799ed7745a7255f2473712e7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 5 Dec 2024 13:54:22 -0500
Subject: [PATCH 170/453] prerender RSS feed (#943)

---
 apps/svelte.dev/src/routes/blog/rss.xml/+server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
index ee994f9a4a..b99e9981b6 100644
--- a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
+++ b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
@@ -1,7 +1,7 @@
 import { index } from '$lib/server/content';
 import { render_content } from '$lib/server/renderer';
 
-export const prerender = false; // TODO
+export const prerender = true;
 
 const months = ',Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',');
 

From b0165dd98ee4240e5db13c442dc292122625ee46 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 09:14:02 -0500
Subject: [PATCH 171/453] Sync `svelte` docs (#944)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/98-reference/20-svelte.md      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index a680264fa6..821571e059 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -152,7 +152,7 @@ for more info.
 
 <blockquote class="tag deprecated note">
 
-Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+Use `Component` instead. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
 </blockquote>
 
@@ -174,7 +174,7 @@ class SvelteComponentTyped<
 
 <blockquote class="tag deprecated note">
 
-Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
+Use [`$effect`](/docs/svelte/$effect) instead
 
 </blockquote>
 
@@ -198,7 +198,7 @@ function afterUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated note">
 
-Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead
+Use [`$effect.pre`](/docs/svelte/$effect#$effect.pre) instead
 
 </blockquote>
 
@@ -222,7 +222,7 @@ function beforeUpdate(fn: () => void): void;
 
 <blockquote class="tag deprecated note">
 
-Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)
+Use callback props and/or the `$host()` rune instead — see [migration guide](/docs/svelte/v5-migration-guide#Event-changes-Component-events)
 
 </blockquote>
 
@@ -597,7 +597,7 @@ The custom element version of the component. Only present if compiled with the `
 
 In Svelte 4, components are classes. In Svelte 5, they are functions.
 Use `mount` instead to instantiate components.
-See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </blockquote>

From 0b27a96419bfc6822ab8efea077464fb1a136ac2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 6 Dec 2024 09:50:46 -0500
Subject: [PATCH 172/453] Motion tutorials (#949)

* update tween exercise

* update spring tutorial
---
 .../+assets/app-a/src/lib/App.svelte          |  0
 .../+assets/app-a/src/lib/Counter.svelte      |  0
 .../+assets/app-a/src/lib/shared.js           |  0
 .../+assets/app-b/src/lib/Counter.svelte      |  0
 .../+assets/app-b/src/lib/shared.js           |  0
 .../05-stores}/index.md                       |  2 +-
 .../+assets/app-a/src/lib/App.svelte          | 32 ++++++++++++
 .../+assets/app-b/src/lib/App.svelte          | 38 ++++++++++++++
 .../01-tweens}/index.md                       | 41 ++++++++++++---
 .../+assets/app-a/src/lib/App.svelte          | 20 ++++---
 .../+assets/app-b/src/lib/App.svelte          | 18 +++----
 .../03-motion/02-springs/index.md             | 52 +++++++++++++++++++
 .../{03-stores => 03-motion}/index.md         |  2 +-
 .../+assets/app-a/src/lib/App.svelte          | 34 ------------
 .../+assets/app-b/src/lib/App.svelte          | 38 --------------
 .../03-stores/03-springs/index.md             | 29 -----------
 .../routes/tutorial/[...slug]/+page.server.ts |  3 +-
 17 files changed, 177 insertions(+), 132 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/+assets/app-a/src/lib/Counter.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/+assets/app-a/src/lib/shared.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/+assets/app-b/src/lib/Counter.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/+assets/app-b/src/lib/shared.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/01-introducing-stores => 01-advanced-reactivity/05-stores}/index.md (98%)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/02-tweens => 03-motion/01-tweens}/index.md (54%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/03-springs => 03-motion/02-springs}/+assets/app-a/src/lib/App.svelte (72%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores/03-springs => 03-motion/02-springs}/+assets/app-b/src/lib/App.svelte (71%)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{03-stores => 03-motion}/index.md (85%)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/Counter.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/Counter.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/shared.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/shared.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/Counter.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/Counter.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/shared.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/shared.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/index.md
similarity index 98%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/index.md
index 5806b49b70..12e360cce3 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/index.md
@@ -1,5 +1,5 @@
 ---
-title: Introducing stores
+title: Stores
 ---
 
 Prior to the introduction of runes in Svelte 5, stores were the idiomatic way to handle reactive state outside components. That's no longer the case, but you'll still encounter stores when using Svelte (including in SvelteKit, for now), so it's worth knowing how to use them.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..fd6bffe84e
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	let progress = $state(0);
+</script>
+
+<progress value={progress}></progress>
+
+<button onclick={() => (progress = 0)}>
+	0%
+</button>
+
+<button onclick={() => (progress = 0.25)}>
+	25%
+</button>
+
+<button onclick={() => (progress = 0.5)}>
+	50%
+</button>
+
+<button onclick={() => (progress = 0.75)}>
+	75%
+</button>
+
+<button onclick={() => (progress = 1)}>
+	100%
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..9f91b29859
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { Tween } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	let progress = new Tween(0, {
+		duration: 400,
+		easing: cubicOut
+	});
+</script>
+
+<progress value={progress.current}></progress>
+
+<button onclick={() => (progress.target = 0)}>
+	0%
+</button>
+
+<button onclick={() => (progress.target = 0.25)}>
+	25%
+</button>
+
+<button onclick={() => (progress.target = 0.5)}>
+	50%
+</button>
+
+<button onclick={() => (progress.target = 0.75)}>
+	75%
+</button>
+
+<button onclick={() => (progress.target = 1)}>
+	100%
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md
similarity index 54%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md
index 04cfc2751a..ea945ff563 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md
@@ -2,28 +2,53 @@
 title: Tweened values
 ---
 
-Alongside the `writable` and `readable` stores, Svelte ships stores for adding motion to your user interfaces.
+Often, a good way to communicate that a value is changing is to use _motion_. Svelte ships classes for adding motion to your user interfaces.
 
-Let's start by changing the `progress` store to a `tweened` store:
+Import the `Tween` class from `svelte/motion`:
 
 ```svelte
 /// file: App.svelte
 <script>
-	import { +++tweened+++ } from 'svelte/+++motion+++';
+	+++import { Tween } from 'svelte/motion';+++
 
-	const progress = +++tweened+++(0);
+	let progress = $state(0);
 </script>
 ```
 
+Turn `progress` into an instance of `Tween`:
+
+```svelte
+/// file: App.svelte
+<script>
+	import { Tween } from 'svelte/motion';
+
+	let progress = +++new Tween+++(0);
+</script>
+```
+
+The `Tween` class has a writable `target` property and a readonly `current` property — update the `<progress>` element...
+
+```svelte
+<progress value={progress.+++current+++}></progress>
+```
+
+...and each of the event handlers:
+
+```svelte
+<button onclick={() => (progress.+++target+++ = 0)}>
+	0%
+</button>
+```
+
 Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
 
 ```svelte
 /// file: App.svelte
 <script>
-	import { tweened } from 'svelte/motion';
+	import { Tween } from 'svelte/motion';
 	+++import { cubicOut } from 'svelte/easing';+++
 
-	const progress = tweened(0, +++{
+	let progress = new Tween(0, +++{
 		duration: 400,
 		easing: cubicOut
 	}+++);
@@ -32,11 +57,11 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 
 > [!NOTE] The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
 
-The full set of options available to `tweened`:
+The full set of options available to `Tween`:
 
 - `delay` — milliseconds before the tween starts
 - `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value
 - `easing` — a `p => t` function
 - `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
 
-You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes.
+You can also call `progress.set(value, options)` instead of assigning directly to `progress.target`, in which case `options` will override the defaults. The `set` method returns a promise that resolves when the tween completes.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-a/src/lib/App.svelte
similarity index 72%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-a/src/lib/App.svelte
index 977097b152..1bc011b1ff 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-a/src/lib/App.svelte
@@ -1,23 +1,21 @@
 <script>
-	import { writable } from 'svelte/store';
-
-	let coords = writable({ x: 50, y: 50 });
-	let size = writable(10);
+	let coords = $state({ x: 50, y: 50 });
+	let size = $state(10);
 </script>
 
 <svg
 	onmousemove={(e) => {
-		coords.set({ x: e.clientX, y: e.clientY });
+		coords = { x: e.clientX, y: e.clientY };
 	}}
-	onmousedown={() => size.set(30)}
-	onmouseup={() => size.set(10)}
+	onmousedown={() => (size = 30)}
+	onmouseup={() => (size = 10)}
 	role="presentation"
 >
 	<circle
-		cx={$coords.x}
-		cy={$coords.y}
-		r={$size}
-	/>
+		cx={coords.x}
+		cy={coords.y}
+		r={size}
+	></circle>
 </svg>
 
 <div class="controls">
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte
similarity index 71%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte
index 4f9169b321..380a9bdcd2 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte
@@ -1,26 +1,26 @@
 <script>
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 
-	let coords = spring({ x: 50, y: 50 }, {
+	let coords = new Spring({ x: 50, y: 50 }, {
 		stiffness: 0.1,
 		damping: 0.25
 	});
 
-	let size = spring(10);
+	let size = new Spring(10);
 </script>
 
 <svg
 	onmousemove={(e) => {
-		coords.set({ x: e.clientX, y: e.clientY });
+		coords.target = { x: e.clientX, y: e.clientY };
 	}}
-	onmousedown={() => size.set(30)}
-	onmouseup={() => size.set(10)}
+	onmousedown={() => (size.target = 30)}
+	onmouseup={() => (size.target = 10)}
 	role="presentation"
 >
 	<circle
-		cx={$coords.x}
-		cy={$coords.y}
-		r={$size}
+		cx={coords.current.x}
+		cy={coords.current.y}
+		r={size.current}
 	/>
 </svg>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md
new file mode 100644
index 0000000000..ae3d828e5a
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md
@@ -0,0 +1,52 @@
+---
+title: Springs
+---
+
+The `Spring` class is an alternative to `Tween` that often works better for values that are frequently changing.
+
+In this example we have a circle that follows the mouse, and two values — the circle's coordinates, and its size. Let's convert them to springs:
+
+```svelte
+/// file: App.svelte
+<script>
+	+++import { Spring } from 'svelte/motion+++';
+
+	let coords = +++new Spring+++({ x: 50, y: 50 });
+	let size = +++new Spring+++(10);
+</script>
+```
+
+As with `Tween`, springs have a writable `target` property and a readonly `current` property. Update the event handlers...
+
+```svelte
+<svg
+	onmousemove={(e) => {
+		coords.+++target+++ = { x: e.clientX, y: e.clientY };
+	}}
+	onmousedown={() => (size.+++target+++ = 30)}
+	onmouseup={() => (size.+++target+++ = 10)}
+	role="presentation"
+>
+```
+
+...and the `<circle>` attributes:
+
+```svelte
+<circle
+	cx={coords.+++current+++.x}
+	cy={coords.+++current+++.y}
+	r={size.+++current+++}
+></circle>
+```
+
+Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
+
+```js
+/// file: App.svelte
+let coords = new Spring({ x: 50, y: 50 }, +++{
+	stiffness: 0.1,
+	damping: 0.25
+}+++);
+```
+
+Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md
similarity index 85%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md
index 4650becb32..9876cf5c14 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md
@@ -1,5 +1,5 @@
 ---
-title: Stores
+title: Motion
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index d32c05b8da..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	import { writable } from 'svelte/store';
-
-	const progress = writable(0.5);
-</script>
-
-<progress value={$progress}></progress>
-
-<button onclick={() => progress.set(0)}>
-	0%
-</button>
-
-<button onclick={() => progress.set(0.25)}>
-	25%
-</button>
-
-<button onclick={() => progress.set(0.5)}>
-	50%
-</button>
-
-<button onclick={() => progress.set(0.75)}>
-	75%
-</button>
-
-<button onclick={() => progress.set(1)}>
-	100%
-</button>
-
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
deleted file mode 100644
index 661576c6ac..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
-
-	const progress = tweened(0.5, {
-		duration: 400,
-		easing: cubicOut
-	});
-</script>
-
-<progress value={$progress}></progress>
-
-<button onclick={() => progress.set(0)}>
-	0%
-</button>
-
-<button onclick={() => progress.set(0.25)}>
-	25%
-</button>
-
-<button onclick={() => progress.set(0.5)}>
-	50%
-</button>
-
-<button onclick={() => progress.set(0.75)}>
-	75%
-</button>
-
-<button onclick={() => progress.set(1)}>
-	100%
-</button>
-
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md
deleted file mode 100644
index 7af895fb6b..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Springs
----
-
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
-
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
-
-```svelte
-/// file: App.svelte
-<script>
-	import { +++spring+++ } from 'svelte/+++motion+++';
-
-	let coords = +++spring+++({ x: 50, y: 50 });
-	let size = +++spring+++(10);
-</script>
-```
-
-Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
-
-```js
-/// file: App.svelte
-let coords = spring({ x: 50, y: 50 }, +++{
-	stiffness: 0.1,
-	damping: 0.25
-}+++);
-```
-
-Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
index f69d91c964..62c15ca1bd 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
@@ -9,7 +9,8 @@ const redirects = new Map([
 	['reactive-statements', 'svelte/effects'],
 	['updating-arrays-and-objects', 'svelte/deep-state'],
 	['event-modifiers', 'svelte/capturing'],
-	['dom-event-forwarding', 'svelte/spreading-events']
+	['dom-event-forwarding', 'svelte/spreading-events'],
+	['svelte/introducing-stores', 'stores']
 ]);
 
 export async function load({ params }) {

From fb5eb6d11fce9e2c50a1df3c14b469c0beffbdad Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:08:05 -0500
Subject: [PATCH 173/453] Sync `svelte` docs (#946)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/06-runtime/01-stores.md       |   2 +-
 .../docs/svelte/06-runtime/02-context.md      |   2 +-
 .../svelte/98-reference/21-svelte-motion.md   | 293 +++++++++++++++++-
 3 files changed, 292 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
index 9cff5a754f..12d5576b40 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
+++ b/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>
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 62dd0c6a9e..30799215b6 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/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>
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
index 39d91f95ff..c8593b251c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
+++ b/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">

From 16aab595589f8ed839bdbf0e71b20786f1ad772f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 6 Dec 2024 10:16:15 -0500
Subject: [PATCH 174/453] day 6 (#950)

---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 82139809af..a1bbda0946 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -49,9 +49,14 @@ It's a three-in-one kind of day. `new MediaQuery(...)` gives you an object with
 - [`prefersReducedMotion` docs](/docs/svelte/svelte-motion#prefersReducedMotion)
 - [demo](/playground/89f6f3bb738149fcb6e708cfce878e0f)
 
-## Day 6
+## Day 6: `Spring` and `Tween`
 
-Coming soon!
+We now have modern state-based alternatives to the `spring` and `tweened` stores of old. Smooth!
+
+- [`Tween` tutorial](/tutorial/svelte/tweens)
+- [`Spring` tutorial](/tutorial/svelte/springs)
+- [docs](/docs/svelte/svelte-motion)
+- [demo](/playground/8a021b2ec2064230bde4a10b08464876?version=5.8.0)
 
 ## Day 7
 

From 4bafbe68e16e7995a99a2c8c52024a80afbeec99 Mon Sep 17 00:00:00 2001
From: Thiago Lino Gomes <thiagolinog8@gmail.com>
Date: Sat, 7 Dec 2024 05:38:30 -0300
Subject: [PATCH 175/453] docs: Remove duplicate info about {#each} block
 (#953)

---
 .../content/docs/svelte/03-template-syntax/03-each.md           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
index df0ba4d8f5..70666f6a57 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
@@ -23,8 +23,6 @@ Iterating over values can be done with an each block. The values in question can
 </ul>
 ```
 
-You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
-
 An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
 
 ```svelte

From b1cb6c7da377fa542f548328efce7f57c589e240 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 7 Dec 2024 10:38:21 -0500
Subject: [PATCH 176/453] better nav (#933)

* WIP better nav

* fixes

* fix

* arrow key controls

* rename, fix

* fix
---
 .../src/lib/components/ModalDropdown.svelte   | 142 ++++++++++++++++++
 .../src/lib/components/SelectIcon.svelte      |  60 --------
 .../playground/[id]/AppControls.svelte        |  48 ++++--
 .../routes/tutorial/[...slug]/Controls.svelte |  56 ++++---
 packages/site-kit/src/lib/actions/focus.ts    |   8 +-
 packages/site-kit/src/lib/styles/index.css    |   1 +
 .../site-kit/src/lib/styles/utils/nav.css     |  53 +++++++
 7 files changed, 265 insertions(+), 103 deletions(-)
 create mode 100644 apps/svelte.dev/src/lib/components/ModalDropdown.svelte
 delete mode 100644 apps/svelte.dev/src/lib/components/SelectIcon.svelte
 create mode 100644 packages/site-kit/src/lib/styles/utils/nav.css

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
new file mode 100644
index 0000000000..c5456c24ae
--- /dev/null
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { focusable_children, trap } from '@sveltejs/site-kit/actions';
+	import { Icon } from '@sveltejs/site-kit/components';
+	import type { Snippet } from 'svelte';
+
+	let { children, label }: { children: Snippet; label: string } = $props();
+
+	let open = $state(false);
+
+	afterNavigate(() => {
+		open = false;
+	});
+</script>
+
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			open = false;
+		}
+	}}
+/>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<details
+	class="examples-select"
+	bind:open
+	ontogglecapture={(e) => {
+		const details = e.target as HTMLDetailsElement;
+
+		if (details === e.currentTarget || !details.open) {
+			return;
+		}
+
+		details.scrollIntoView();
+	}}
+	ontoggle={(e) => {
+		const details = e.currentTarget;
+		if (!details.open) return;
+
+		// close all details elements...
+		for (const child of details.querySelectorAll('details[open]')) {
+			(child as HTMLDetailsElement).open = false;
+		}
+
+		// except parents of the current one
+		const current = details.querySelector(`[href="http://github.com/$%7B$page.url.pathname%7D"]`) as HTMLAnchorElement | null;
+		if (!current) return;
+
+		let node = current as Element;
+
+		while ((node = (node.parentNode) as Element) && node !== details) {
+			if (node.nodeName === 'DETAILS') {
+				(node as HTMLDetailsElement).open = true;
+			}
+		}
+
+		current.scrollIntoView();
+		current.focus();
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			const children = focusable_children(e.currentTarget);
+
+			if (e.key === 'ArrowDown') {
+				children.next();
+			} else {
+				children.prev();
+			}
+		}
+
+		if (document.activeElement?.nodeName === 'SUMMARY' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+			(document.activeElement.parentNode as HTMLDetailsElement).open = e.key === 'ArrowRight';
+		}
+	}}
+>
+	<summary class="raised icon" aria-label={label}><Icon name="menu" /></summary>
+
+	<div class="contents" use:trap>
+		{@render children()}
+	</div>
+</details>
+
+<style>
+	details {
+		position: relative;
+
+		&:has(:focus-visible) .raised.icon {
+			outline: 2px solid var(--sk-fg-accent);
+			border-radius: var(--sk-border-radius);
+		}
+
+		span {
+			pointer-events: none;
+		}
+	}
+
+	summary {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		user-select: none;
+	}
+
+	details[open] summary::before {
+		content: '';
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.3);
+		backdrop-filter: grayscale(0.7) blur(3px);
+		z-index: 9998;
+	}
+
+	.contents {
+		position: absolute;
+		z-index: 9999;
+		background: var(--sk-bg-2);
+		padding: 1rem;
+		border-radius: var(--sk-border-radius);
+		filter: var(--sk-shadow);
+		max-height: calc(100vh - 16rem);
+		overflow-y: auto;
+	}
+
+	.icon {
+		position: relative;
+		color: var(--sk-fg-3);
+		line-height: 1;
+		background-size: 1.8rem;
+		z-index: 9999;
+	}
+
+	.icon:hover,
+	.icon:focus-visible {
+		opacity: 1;
+	}
+</style>
diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
deleted file mode 100644
index 991221459b..0000000000
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	import { Icon } from '@sveltejs/site-kit/components';
-	import type { Snippet } from 'svelte';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
-
-	let { children, value, ...props }: HTMLSelectAttributes & { children: Snippet } = $props();
-
-	export { value }; // allow it to be temporarily overwritten
-</script>
-
-<div class="examples-select">
-	<span class="raised icon"><Icon name="menu" /></span>
-	<select {...props} {value}>
-		{@render children()}
-	</select>
-</div>
-
-<style>
-	.examples-select {
-		position: relative;
-
-		&:has(select:focus-visible) .raised.icon {
-			outline: 2px solid var(--sk-fg-accent);
-			border-radius: var(--sk-border-radius);
-		}
-
-		span {
-			pointer-events: none;
-		}
-	}
-
-	select {
-		opacity: 0.0001;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	span.icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		user-select: none;
-	}
-
-	.icon {
-		position: relative;
-		color: var(--sk-fg-3);
-		line-height: 1;
-		background-size: 1.8rem;
-		z-index: 999;
-	}
-
-	.icon:hover,
-	.icon:focus-visible {
-		opacity: 1;
-	}
-</style>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 7a894ffc35..a1b6917141 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { isMac } from '$lib/utils/compat.js';
 	import { get_app_context } from '../../app-context';
 	import type { Gist, User } from '$lib/db/types';
 	import { browser } from '$app/environment';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import type { File } from 'editor';
@@ -39,7 +39,7 @@
 	let saving = $state(false);
 	let justSaved = $state(false);
 	let justForked = $state(false);
-	let select: ReturnType<typeof SelectIcon>;
+	let select: ReturnType<typeof ModalDropdown>;
 
 	function wait(ms: number) {
 		return new Promise((f) => setTimeout(f, ms));
@@ -180,15 +180,31 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <SecondaryNav>
-	<SelectIcon
-		bind:this={select}
-		title="examples"
-		value={gist.id}
-		onchange={async (e) => {
-			goto(`/playground/${e.currentTarget.value}`);
-		}}
-	>
-		<option value="untitled">Create new</option>
+	<ModalDropdown label="Examples">
+		<div class="secondary-nav-dropdown">
+			<a class="create-new" href="http://github.com/playground/untitled">Create new</a>
+
+			{#each examples as section}
+				<details>
+					<summary>{section.title}</summary>
+
+					<ul>
+						{#each section.examples as example}
+							<li>
+								<a
+									href="http://github.com/playground/%7Bexample.slug%7D"
+									aria-current={$page.params.id === example.slug ? 'page' : undefined}
+								>
+									{example.title}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</details>
+			{/each}
+		</div>
+
+		<!-- <option value="untitled">Create new</option>
 		<option disabled selected value="">or choose an example</option>
 		{#each examples as section}
 			<optgroup label={section.title}>
@@ -196,8 +212,8 @@
 					<option value={example.slug}>{example.title}</option>
 				{/each}
 			</optgroup>
-		{/each}
-	</SelectIcon>
+		{/each} -->
+	</ModalDropdown>
 
 	<input
 		bind:value={name}
@@ -324,4 +340,8 @@
 		top: -0.2rem;
 		right: -0.2rem;
 	}
+
+	.create-new {
+		margin-bottom: 1rem;
+	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 14ff90479d..17e04eb2f3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Icon } from '@sveltejs/site-kit/components';
 
@@ -13,33 +13,37 @@
 	}
 
 	let { index, exercise, completed, toggle }: Props = $props();
-
-	// TODO this really sucks, why is `exercise.slug` not the slug?
-	let actual_slug = $derived.by(() => {
-		const parts = exercise.slug.split('/');
-		return `${parts[1].includes('kit') ? 'kit' : 'svelte'}/${parts[3]}`;
-	});
 </script>
 
 <SecondaryNav>
-	<SelectIcon
-		value={actual_slug}
-		onchange={(e) => {
-			goto(`/tutorial/${e.currentTarget.value}`);
-		}}
-	>
-		{#each index as part}
-			<optgroup label={part.title}>
-				{#each part.chapters as chapter}
-					<option disabled>{chapter.title}</option>
+	<ModalDropdown label="Menu">
+		<div class="secondary-nav-dropdown">
+			{#each index as part}
+				<details>
+					<summary>{part.title}</summary>
+
+					{#each part.chapters as chapter}
+						<details>
+							<summary>{chapter.title}</summary>
 
-					{#each chapter.exercises as exercise}
-						<option value={exercise.slug}>{exercise.title}</option>
+							<ul>
+								{#each chapter.exercises as exercise}
+									<li value={exercise.slug}>
+										<a
+											aria-current={$page.url.pathname === `/tutorial/${exercise.slug}`
+												? 'page'
+												: undefined}
+											href="http://github.com/tutorial/%7Bexercise.slug%7D">{exercise.title}</a
+										>
+									</li>
+								{/each}
+							</ul>
+						</details>
 					{/each}
-				{/each}
-			</optgroup>
-		{/each}
-	</SelectIcon>
+				</details>
+			{/each}
+		</div>
+	</ModalDropdown>
 
 	<a
 		href={exercise.prev ? `/tutorial/${exercise.prev?.slug}` : undefined}
@@ -77,6 +81,10 @@
 			opacity: 0.1;
 			cursor: default;
 		}
+
+		&[aria-current='page'] {
+			color: var(--sk-fg-accent);
+		}
 	}
 
 	.breadcrumbs {
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index b0f434d95a..77d7b825e5 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -7,8 +7,10 @@ export function forcefocus(node: HTMLInputElement) {
 
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
+		// this rather intimating selector selects elements that aren't children of closed <details> elements,
+		// except for the <summary> elements that are their direct children
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])'
+			':where(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):not(details:not([open]) *), summary:not(details:not([open]) details *)'
 		)
 	);
 
@@ -31,10 +33,6 @@ export function focusable_children(node: HTMLElement) {
 		while ((node = reordered[i])) {
 			i += d;
 
-			if (node.matches('details:not([open]) *')) {
-				continue;
-			}
-
 			if (!selector || node.matches(selector)) {
 				node.focus();
 				return;
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index e336fe3089..af9bf0c95a 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -12,4 +12,5 @@
 @import 'http://github.com/text.css';
 @import 'http://github.com/utils/buttons.css';
 @import 'http://github.com/utils/dividers.css';
+@import 'http://github.com/utils/nav.css';
 @import 'http://github.com/utils/twoslash.css';
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
new file mode 100644
index 0000000000..f5ef788bd4
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -0,0 +1,53 @@
+.secondary-nav-dropdown {
+	max-height: 50rem;
+	width: 30rem;
+	max-width: calc(100vw - 2 * var(--sk-page-padding-side) - 2rem);
+	font: var(--sk-font-ui-medium);
+
+	details {
+		padding-left: 1rem;
+
+		summary {
+			position: relative;
+			font: inherit;
+			display: block;
+			user-select: none;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0.3rem;
+				left: -2rem;
+				width: 1.8rem;
+				height: 1.8rem;
+				background: url(http://github.com/$lib/icons/chevron.svg) no-repeat 50% 50%;
+				background-size: 100%;
+				rotate: -90deg;
+			}
+
+			[open] > &::before {
+				rotate: none;
+			}
+		}
+
+		ul {
+			font: inherit;
+			list-style: none;
+			margin: 0;
+			padding-left: 1rem;
+		}
+	}
+
+	& > details {
+		padding-left: 2rem;
+	}
+
+	a:not([aria-current='page']) {
+		color: inherit;
+	}
+
+	/* necessary for reasons i don't fully understand */
+	& > details[open]:last-child:not(:has([aria-current='page'])) {
+		padding-bottom: 1rem;
+	}
+}

From 2f4404556ce6995aec192ca9ff81ec6b786f51de Mon Sep 17 00:00:00 2001
From: Vanceagher <48972091+Vanceagher@users.noreply.github.com>
Date: Sat, 7 Dec 2024 10:40:40 -0500
Subject: [PATCH 177/453] Fix: grammar fix in index.md (#948)

Update index.md

Fix grammar. "There's a" => "There are a"
---
 .../01-svelte/02-reactivity/04-inspecting-state/index.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md
index eb06a46466..7ca390ef1c 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md
@@ -6,7 +6,7 @@ It's often useful to be able to track the value of a piece of state as it change
 
 Inside the `addNumber` function, we've added a `console.log` statement. But if you click the button and open the console drawer (using the button to the right of the URL bar), you'll see a warning, and a message saying the message could not be cloned.
 
-That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There's a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`:
+That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There are a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`:
 
 ```js
 /// file: App.svelte

From 7b7abe97fd7696933adab104eda335600a75d9c9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 7 Dec 2024 10:41:17 -0500
Subject: [PATCH 178/453] Sync `svelte` docs (#951)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/98-reference/21-svelte-motion.md    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
index c8593b251c..d37c7bf8bd 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
@@ -17,6 +17,12 @@ import {
 
 ## Spring
 
+<blockquote class="since note">
+
+Available since 5.8.0
+
+</blockquote>
+
 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.
 

From 808116b653c10589f38b114533a19bc2cda9fbc8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 7 Dec 2024 10:41:46 -0500
Subject: [PATCH 179/453] Sync `kit` docs (#952)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md       | 6 ++++++
 .../content/docs/kit/98-reference/15-@sveltejs-kit-node.md  | 6 ++++++
 .../content/docs/kit/98-reference/20-$app-server.md         | 6 ++++++
 3 files changed, 18 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 2c13be6219..afbf2ca54e 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -2075,6 +2075,12 @@ type RequestHandler<
 
 ## Reroute
 
+<blockquote class="since note">
+
+Available since 2.3.0
+
+</blockquote>
+
 The [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
index 37a0ea2a28..c96e57ee4c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
@@ -15,6 +15,12 @@ import {
 
 ## createReadableStream
 
+<blockquote class="since note">
+
+Available since 2.4.0
+
+</blockquote>
+
 Converts a file on disk to a readable stream
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
index 32ba649b36..f3d534ea8e 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
@@ -11,6 +11,12 @@ import { read } from '$app/server';
 
 ## read
 
+<blockquote class="since note">
+
+Available since 2.4.0
+
+</blockquote>
+
 Read the contents of an imported asset from the filesystem
 
 ```js

From 46bd8b9797c7b79f88ef8df33752f7528c4dcb79 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 7 Dec 2024 16:13:12 -0500
Subject: [PATCH 180/453] Advent of svelte day 7 (#956)

* day 7

* lowercase
---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index a1bbda0946..8198f95b33 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -58,9 +58,11 @@ We now have modern state-based alternatives to the `spring` and `tweened` stores
 - [docs](/docs/svelte/svelte-motion)
 - [demo](/playground/8a021b2ec2064230bde4a10b08464876?version=5.8.0)
 
-## Day 7
+## Day 7: better tutorial navigation
 
-Coming soon!
+A lot of you disliked the dropdown navigation for the tutorial — essentially a giant, unwieldy `<select>` element — so we've replaced it with a hierarchical menu. Because it's all just `<details>` and `<a>` elements, we get accessibility features for free. You can even navigate the tutorial with JavaScript disabled!
+
+- [tutorial](/tutorial/svelte/welcome-to-svelte)
 
 ## Day 8
 

From d4db2b12f1a1feaf4f91fbc35beaa164a01811ee Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 7 Dec 2024 13:14:42 -0800
Subject: [PATCH 181/453] chore: update REPL autocomplete (remove `$state.is`,
 `on:` directive, etc) (#957)

update autocomplete stuff to current svelte 5
---
 .../codemirror/autocompletionDataProvider.js  | 250 +++++++++---------
 1 file changed, 125 insertions(+), 125 deletions(-)

diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index 3954def5d0..8da28bb39d 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -3,119 +3,119 @@
  */
 
 export const globalEvents = [
-	{ name: 'on:abort' },
-	{ name: 'on:animationcancel' },
-	{ name: 'on:animationend' },
-	{ name: 'on:animationiteration' },
-	{ name: 'on:animationstart' },
-	{ name: 'on:auxclick' },
-	{ name: 'on:beforeinput' },
-	{ name: 'on:blur' },
-	{ name: 'on:cancel' },
-	{ name: 'on:canplay' },
-	{ name: 'on:canplaythrough' },
-	{ name: 'on:change' },
-	{ name: 'on:click' },
-	{ name: 'on:close' },
-	{ name: 'on:contextmenu' },
-	{ name: 'on:copy' },
-	{ name: 'on:cuechange' },
-	{ name: 'on:cut' },
-	{ name: 'on:dblclick' },
-	{ name: 'on:drag' },
-	{ name: 'on:dragend' },
-	{ name: 'on:dragenter' },
-	{ name: 'on:dragleave' },
-	{ name: 'on:dragover' },
-	{ name: 'on:dragstart' },
-	{ name: 'on:drop' },
-	{ name: 'on:durationchange' },
-	{ name: 'on:emptied' },
-	{ name: 'on:ended' },
-	{ name: 'on:error' },
-	{ name: 'on:focus' },
-	{ name: 'on:formdata' },
-	{ name: 'on:gotpointercapture' },
-	{ name: 'on:input' },
-	{ name: 'on:invalid' },
-	{ name: 'on:keydown' },
-	{ name: 'on:keypress' },
-	{ name: 'on:keyup' },
-	{ name: 'on:load' },
-	{ name: 'on:loadeddata' },
-	{ name: 'on:loadedmetadata' },
-	{ name: 'on:loadstart' },
-	{ name: 'on:lostpointercapture' },
-	{ name: 'on:mousedown' },
-	{ name: 'on:mouseenter' },
-	{ name: 'on:mouseleave' },
-	{ name: 'on:mousemove' },
-	{ name: 'on:mouseout' },
-	{ name: 'on:mouseover' },
-	{ name: 'on:mouseup' },
-	{ name: 'on:paste' },
-	{ name: 'on:pause' },
-	{ name: 'on:play' },
-	{ name: 'on:playing' },
-	{ name: 'on:pointercancel' },
-	{ name: 'on:pointerdown' },
-	{ name: 'on:pointerenter' },
-	{ name: 'on:pointerleave' },
-	{ name: 'on:pointermove' },
-	{ name: 'on:pointerout' },
-	{ name: 'on:pointerover' },
-	{ name: 'on:pointerup' },
-	{ name: 'on:progress' },
-	{ name: 'on:ratechange' },
-	{ name: 'on:reset' },
-	{ name: 'on:resize' },
-	{ name: 'on:scroll' },
-	{ name: 'on:securitypolicyviolation' },
-	{ name: 'on:seeked' },
-	{ name: 'on:seeking' },
-	{ name: 'on:select' },
-	{ name: 'on:selectionchange' },
-	{ name: 'on:selectstart' },
-	{ name: 'on:slotchange' },
-	{ name: 'on:stalled' },
-	{ name: 'on:submit' },
-	{ name: 'on:suspend' },
-	{ name: 'on:timeupdate' },
-	{ name: 'on:toggle' },
-	{ name: 'on:touchcancel' },
-	{ name: 'on:touchend' },
-	{ name: 'on:touchmove' },
-	{ name: 'on:touchstart' },
-	{ name: 'on:transitioncancel' },
-	{ name: 'on:transitionend' },
-	{ name: 'on:transitionrun' },
-	{ name: 'on:transitionstart' },
-	{ name: 'on:volumechange' },
-	{ name: 'on:waiting' },
-	{ name: 'on:webkitanimationend' },
-	{ name: 'on:webkitanimationiteration' },
-	{ name: 'on:webkitanimationstart' },
-	{ name: 'on:webkittransitionend' },
-	{ name: 'on:wheel' }
+	{ name: 'onabort' },
+	{ name: 'onanimationcancel' },
+	{ name: 'onanimationend' },
+	{ name: 'onanimationiteration' },
+	{ name: 'onanimationstart' },
+	{ name: 'onauxclick' },
+	{ name: 'onbeforeinput' },
+	{ name: 'onblur' },
+	{ name: 'oncancel' },
+	{ name: 'oncanplay' },
+	{ name: 'oncanplaythrough' },
+	{ name: 'onchange' },
+	{ name: 'onclick' },
+	{ name: 'onclose' },
+	{ name: 'oncontextmenu' },
+	{ name: 'oncopy' },
+	{ name: 'oncuechange' },
+	{ name: 'oncut' },
+	{ name: 'ondblclick' },
+	{ name: 'ondrag' },
+	{ name: 'ondragend' },
+	{ name: 'ondragenter' },
+	{ name: 'ondragleave' },
+	{ name: 'ondragover' },
+	{ name: 'ondragstart' },
+	{ name: 'ondrop' },
+	{ name: 'ondurationchange' },
+	{ name: 'onemptied' },
+	{ name: 'onended' },
+	{ name: 'onerror' },
+	{ name: 'onfocus' },
+	{ name: 'onformdata' },
+	{ name: 'ongotpointercapture' },
+	{ name: 'oninput' },
+	{ name: 'oninvalid' },
+	{ name: 'onkeydown' },
+	{ name: 'onkeypress' },
+	{ name: 'onkeyup' },
+	{ name: 'onload' },
+	{ name: 'onloadeddata' },
+	{ name: 'onloadedmetadata' },
+	{ name: 'onloadstart' },
+	{ name: 'onlostpointercapture' },
+	{ name: 'onmousedown' },
+	{ name: 'onmouseenter' },
+	{ name: 'onmouseleave' },
+	{ name: 'onmousemove' },
+	{ name: 'onmouseout' },
+	{ name: 'onmouseover' },
+	{ name: 'onmouseup' },
+	{ name: 'onpaste' },
+	{ name: 'onpause' },
+	{ name: 'onplay' },
+	{ name: 'onplaying' },
+	{ name: 'onpointercancel' },
+	{ name: 'onpointerdown' },
+	{ name: 'onpointerenter' },
+	{ name: 'onpointerleave' },
+	{ name: 'onpointermove' },
+	{ name: 'onpointerout' },
+	{ name: 'onpointerover' },
+	{ name: 'onpointerup' },
+	{ name: 'onprogress' },
+	{ name: 'onratechange' },
+	{ name: 'onreset' },
+	{ name: 'onresize' },
+	{ name: 'onscroll' },
+	{ name: 'onsecuritypolicyviolation' },
+	{ name: 'onseeked' },
+	{ name: 'onseeking' },
+	{ name: 'onselect' },
+	{ name: 'onselectionchange' },
+	{ name: 'onselectstart' },
+	{ name: 'onslotchange' },
+	{ name: 'onstalled' },
+	{ name: 'onsubmit' },
+	{ name: 'onsuspend' },
+	{ name: 'ontimeupdate' },
+	{ name: 'ontoggle' },
+	{ name: 'ontouchcancel' },
+	{ name: 'ontouchend' },
+	{ name: 'ontouchmove' },
+	{ name: 'ontouchstart' },
+	{ name: 'ontransitioncancel' },
+	{ name: 'ontransitionend' },
+	{ name: 'ontransitionrun' },
+	{ name: 'ontransitionstart' },
+	{ name: 'onvolumechange' },
+	{ name: 'onwaiting' },
+	{ name: 'onwebkitanimationend' },
+	{ name: 'onwebkitanimationiteration' },
+	{ name: 'onwebkitanimationstart' },
+	{ name: 'onwebkittransitionend' },
+	{ name: 'onwheel' }
 ];
 
 /** @type {{ name: string, description?: string }[]} */
 export const svelteEvents = [
 	...globalEvents,
 	{
-		name: 'on:introstart',
+		name: 'onintrostart',
 		description: 'Available when element has transition'
 	},
 	{
-		name: 'on:introend',
+		name: 'onintroend',
 		description: 'Available when element has transition'
 	},
 	{
-		name: 'on:outrostart',
+		name: 'onoutrostart',
 		description: 'Available when element has transition'
 	},
 	{
-		name: 'on:outroend',
+		name: 'onoutroend',
 		description: 'Available when element has transition'
 	}
 ];
@@ -271,24 +271,24 @@ export const svelteTags = [
 				description: 'An alias for window.navigator.onLine'
 			},
 			// window events
-			{ name: 'on:afterprint' },
-			{ name: 'on:beforeprint' },
-			{ name: 'on:beforeunload' },
-			{ name: 'on:gamepadconnected' },
-			{ name: 'on:gamepaddisconnected' },
-			{ name: 'on:hashchange' },
-			{ name: 'on:languagechange' },
-			{ name: 'on:message' },
-			{ name: 'on:messageerror' },
-			{ name: 'on:offline' },
-			{ name: 'on:online' },
-			{ name: 'on:pagehide' },
-			{ name: 'on:pageshow' },
-			{ name: 'on:popstate' },
-			{ name: 'on:rejectionhandled' },
-			{ name: 'on:storage' },
-			{ name: 'on:unhandledrejection' },
-			{ name: 'on:unload' }
+			{ name: 'onafterprint' },
+			{ name: 'onbeforeprint' },
+			{ name: 'onbeforeunload' },
+			{ name: 'ongamepadconnected' },
+			{ name: 'ongamepaddisconnected' },
+			{ name: 'onhashchange' },
+			{ name: 'onlanguagechange' },
+			{ name: 'onmessage' },
+			{ name: 'onmessageerror' },
+			{ name: 'onoffline' },
+			{ name: 'ononline' },
+			{ name: 'onpagehide' },
+			{ name: 'onpageshow' },
+			{ name: 'onpopstate' },
+			{ name: 'onrejectionhandled' },
+			{ name: 'onstorage' },
+			{ name: 'onunhandledrejection' },
+			{ name: 'onunload' }
 		]
 	},
 	{
@@ -297,12 +297,12 @@ export const svelteTags = [
 			"As with <svelte:window>, this element allows you to add listeners to events on document, such as visibilitychange, which don't fire on window.",
 		attributes: [
 			// document events
-			{ name: 'on:fullscreenchange' },
-			{ name: 'on:fullscreenerror' },
-			{ name: 'on:pointerlockchange' },
-			{ name: 'on:pointerlockerror' },
-			{ name: 'on:readystatechange' },
-			{ name: 'on:visibilitychange' }
+			{ name: 'onfullscreenchange' },
+			{ name: 'onfullscreenerror' },
+			{ name: 'onpointerlockchange' },
+			{ name: 'onpointerlockerror' },
+			{ name: 'onreadystatechange' },
+			{ name: 'onvisibilitychange' }
 		]
 	},
 	{
@@ -588,7 +588,7 @@ export const runes = [
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },
-	{ snippet: '$state.is(${})' },
-	{ snippet: '$effect.active()' },
-	{ snippet: '$inspect(${});', test: is_statement }
+	{ snippet: '$effect.tracking()' },
+	{ snippet: '$inspect(${});', test: is_statement },
+	{ snippet: '$host()' }
 ];

From c9c48fb1b8b122a3c3cd9fda131902c8b55706d3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 8 Dec 2024 06:49:34 -0500
Subject: [PATCH 182/453] Sync `kit` docs (#958)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
index b2b8e07aa8..a68197ef8b 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
@@ -18,6 +18,6 @@ Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks
 
 ## Guides
 
-[Lucia](https://lucia-next.pages.dev/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
+[Lucia](https://lucia-auth.com/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
 
-An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-next.pages.dev/) rather than having multiple web frameworks inside their project.
+An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.

From 6b50faa0b70ede2303e0a4977c20ce0f4be163f8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 8 Dec 2024 07:40:51 -0500
Subject: [PATCH 183/453] Sync `svelte` docs (#959)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/11-bind.md | 24 +++++++++++++++++++
 .../98-reference/.generated/compile-errors.md | 14 ++++++++++-
 .../svelte/98-reference/21-svelte-compiler.md |  5 +++-
 .../svelte/98-reference/30-compiler-errors.md | 14 ++++++++++-
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index fe3cf727e2..90046c8c45 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -12,10 +12,34 @@ The general syntax is `bind:property={expression}`, where `expression` is an _lv
 <input bind:value />
 ```
 
+
 Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.
 
 Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.
 
+## Function bindings
+
+You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
+
+```svelte
+<input bind:value={
+	() => value,
+	(v) => value = v.toLowerCase()}
+/>
+```
+
+In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
+
+```svelte
+<div
+	bind:clientWidth={null, redraw}
+	bind:clientHeight={null, redraw}
+>...</div>
+```
+
+> [!NOTE]
+> Function bindings are available in Svelte 5.9.0 and newer.
+
 ## `<input bind:value>`
 
 A `bind:value` directive on an `<input>` element binds the input's `value` property:
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 3bd162d8d7..d726d25fa1 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -78,10 +78,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
 Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 ```
 
+### bind_group_invalid_expression
+
+```
+`bind:group` can only bind to an Identifier or MemberExpression
+```
+
 ### bind_invalid_expression
 
 ```
-Can only bind to an Identifier or MemberExpression
+Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
 ```
 
 ### bind_invalid_name
@@ -94,6 +100,12 @@ Can only bind to an Identifier or MemberExpression
 `bind:%name%` is not a valid binding. %explanation%
 ```
 
+### bind_invalid_parens
+
+```
+`bind:%name%={get, set}` must not have surrounding parentheses
+```
+
 ### bind_invalid_target
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 14190e6bbe..1b9c7714bc 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -320,7 +320,10 @@ namespace AST {
 		/** The 'x' in `bind:x` */
 		name: string;
 		/** The y in `bind:x={y}` */
-		expression: Identifier | MemberExpression;
+		expression:
+			| Identifier
+			| MemberExpression
+			| SequenceExpression;
 	}
 
 	/** A `class:` directive */
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 27d00875f6..dad143bf75 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -82,10 +82,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
 Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 ```
 
+### bind_group_invalid_expression
+
+```
+`bind:group` can only bind to an Identifier or MemberExpression
+```
+
 ### bind_invalid_expression
 
 ```
-Can only bind to an Identifier or MemberExpression
+Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
 ```
 
 ### bind_invalid_name
@@ -98,6 +104,12 @@ Can only bind to an Identifier or MemberExpression
 `bind:%name%` is not a valid binding. %explanation%
 ```
 
+### bind_invalid_parens
+
+```
+`bind:%name%={get, set}` must not have surrounding parentheses
+```
+
 ### bind_invalid_target
 
 ```

From d964e0b1e5fbd024b35620f7e170dead88f896a7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 8 Dec 2024 11:20:20 -0500
Subject: [PATCH 184/453] docs: Advent day 8 (#960)

---
 .../svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 8198f95b33..176f506d50 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -64,9 +64,12 @@ A lot of you disliked the dropdown navigation for the tutorial — essentially a
 
 - [tutorial](/tutorial/svelte/welcome-to-svelte)
 
-## Day 8
+## Day 8: functional bindings
 
-Coming soon!
+You can now do `bind:value={get, set}` to validate and transform bound values. This works for all bindings, even on components.
+
+- [docs](/docs/svelte/bind#Function-bindings)
+- [demo](/playground/1ddd82f573b94201b3c8fcab33bf0a46?version=5.9.0)
 
 ## Day 9
 

From c917b47d9a79c899ee3016c8b4c0ca093d5e16bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 8 Dec 2024 17:10:53 -0500
Subject: [PATCH 185/453] oops i meant to say this

---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 176f506d50..912cbdf9e9 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -64,7 +64,7 @@ A lot of you disliked the dropdown navigation for the tutorial — essentially a
 
 - [tutorial](/tutorial/svelte/welcome-to-svelte)
 
-## Day 8: functional bindings
+## Day 8: function bindings
 
 You can now do `bind:value={get, set}` to validate and transform bound values. This works for all bindings, even on components.
 

From b53b691a75d242aabc1bdfc21c0732aefc189161 Mon Sep 17 00:00:00 2001
From: ajatamayo <ajatamayo@gmail.com>
Date: Mon, 9 Dec 2024 21:03:03 +0800
Subject: [PATCH 186/453] chore: Update comments on utils.js for clarity and
 accuracy (#963)

Update comments on utils.js for clarity and accuracy
---
 .../04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
index 0bc02b4934..f2216d52d2 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
@@ -1,5 +1,5 @@
 export async function roll() {
-	// Fetch a random number between 0 and 6
+	// Fetch a random number from 1 to 6
 	// (with a delay, so that we can see it)
 	return new Promise((fulfil, reject) => {
 		setTimeout(() => {

From d697639cfb2134f3f2ade334735c7917b33dc577 Mon Sep 17 00:00:00 2001
From: Bernie Sumption <bernie@berniecode.com>
Date: Mon, 9 Dec 2024 13:03:52 +0000
Subject: [PATCH 187/453] fix: make Safari rendering of summary elements the
 same as other browsers (#964)

Hide details summary arrow on Safari
---
 apps/svelte.dev/src/lib/components/ModalDropdown.svelte  | 4 ++++
 packages/site-kit/src/lib/components/Text.svelte         | 4 ++++
 packages/site-kit/src/lib/search/SearchResultList.svelte | 4 ++++
 packages/site-kit/src/lib/styles/utils/nav.css           | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index c5456c24ae..7a8f1b4cea 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -102,6 +102,10 @@
 		align-items: center;
 		justify-content: center;
 		user-select: none;
+
+		&::-webkit-details-marker {
+			display: none;
+		}
 	}
 
 	details[open] summary::before {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 22ba0189d8..9e58b9dd62 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -523,6 +523,10 @@
 				font: var(--sk-font-body-small);
 				user-select: none;
 
+				&::-webkit-details-marker {
+					display: none;
+				}
+
 				.legacy &::after {
 					position: absolute;
 					display: flex;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 9ce7ac1e3f..6f66c40240 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -111,6 +111,10 @@
 			span:not(:last-child)::after {
 				content: ' • ';
 			}
+
+			&::-webkit-details-marker {
+				display: none;
+			}
 		}
 	}
 
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
index f5ef788bd4..08da0a172b 100644
--- a/packages/site-kit/src/lib/styles/utils/nav.css
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -13,6 +13,10 @@
 			display: block;
 			user-select: none;
 
+			&::-webkit-details-marker {
+				display: none;
+			}
+
 			&::before {
 				content: '';
 				position: absolute;

From 337799e60429c391cbeff3b00e0820c80c86a584 Mon Sep 17 00:00:00 2001
From: GwangJin Kim <heygwangjin@gmail.com>
Date: Mon, 9 Dec 2024 22:06:43 +0900
Subject: [PATCH 188/453] fix: Update package version of codemirror/view to fix
 carret low contrast (#947)

Update package version of codemirror/view (#925)

* Update codemirror/view package version to fix low caret contrast on mobile safari
---
 packages/editor/package.json   |  2 +-
 packages/repl/package.json     |  2 +-
 packages/site-kit/package.json |  2 +-
 pnpm-lock.yaml                 | 86 +++++++++++++++++-----------------
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 57aa323ae3..00c9cc95b8 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -42,7 +42,7 @@
 		"@codemirror/lint": "^6.8.2",
 		"@codemirror/search": "^6.5.6",
 		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.34.1",
+		"@codemirror/view": "^6.35.1",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index e32aeeac1b..2959bd2f3d 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -71,7 +71,7 @@
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/lint": "^6.7.0",
 		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.3",
+		"@codemirror/view": "^6.35.1",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 84abf82b95..26b0817369 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -31,7 +31,7 @@
 		"@codemirror/lint": "^6.4.1",
 		"@codemirror/search": "^6.5.2",
 		"@codemirror/state": "^6.2.1",
-		"@codemirror/view": "^6.17.1",
+		"@codemirror/view": "^6.35.1",
 		"@fontsource/atkinson-hyperlegible": "^5.1.0",
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65b17938ae..63b89c9313 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,13 +213,13 @@ importers:
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.1)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -239,14 +239,14 @@ importers:
         specifier: ^6.4.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.34.1
-        version: 6.34.1
+        specifier: ^6.35.1
+        version: 6.35.1
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
         version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
@@ -294,13 +294,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.16.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.5.0
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.1)
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
@@ -320,17 +320,17 @@ importers:
         specifier: ^6.4.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.26.3
-        version: 6.34.1
+        specifier: ^6.35.1
+        version: 6.35.1
       '@jridgewell/sourcemap-codec':
         specifier: ^1.4.15
         version: 1.5.0
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
         version: 1.1.3(svelte@5.1.11)
@@ -412,13 +412,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.1)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -438,8 +438,8 @@ importers:
         specifier: ^6.2.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.17.1
-        version: 6.34.1
+        specifier: ^6.35.1
+        version: 6.35.1
       '@fontsource/atkinson-hyperlegible':
         specifier: ^5.1.0
         version: 5.1.0
@@ -460,7 +460,7 @@ importers:
         version: 1.2.2
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
@@ -629,8 +629,8 @@ packages:
   '@codemirror/state@6.4.1':
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
 
-  '@codemirror/view@6.34.1':
-    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
+  '@codemirror/view@6.35.1':
+    resolution: {integrity: sha512-OUs9Z2UabSfJxSoEnuHUzGF0wHpWiJ/3IW/cgrKBqbp5Yj7XTYXQAQaLHZUP48ctRMvxgarEXTginrocUG8J7A==}
 
   '@emnapi/runtime@1.2.0':
     resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
@@ -3455,23 +3455,23 @@ snapshots:
 
   '@cloudflare/workers-types@4.20241127.0': {}
 
-  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)':
+  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
 
   '@codemirror/commands@6.5.0':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1)':
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@lezer/common': 1.2.2
@@ -3481,23 +3481,23 @@ snapshots:
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1)
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
       '@lezer/css': 1.1.8
       '@lezer/html': 1.3.9
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
       '@lezer/javascript': 1.4.17
 
@@ -3508,18 +3508,18 @@ snapshots:
 
   '@codemirror/lang-markdown@6.2.5':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
       '@lezer/markdown': 1.3.0
 
   '@codemirror/language@6.10.3':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.1
@@ -3528,18 +3528,18 @@ snapshots:
   '@codemirror/lint@6.8.2':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       crelt: 1.0.6
 
   '@codemirror/search@6.5.6':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       crelt: 1.0.6
 
   '@codemirror/state@6.4.1': {}
 
-  '@codemirror/view@6.34.1':
+  '@codemirror/view@6.35.1':
     dependencies:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
@@ -4064,27 +4064,27 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
+  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/javascript': 1.4.17
       '@lezer/lr': 1.4.1
 
-  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)':
     dependencies:
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
 
   '@resvg/resvg-js-android-arm-eabi@2.6.2':
     optional: true
@@ -4732,13 +4732,13 @@ snapshots:
 
   codemirror@6.0.1(@lezer/common@1.2.2):
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.35.1
     transitivePeerDependencies:
       - '@lezer/common'
 

From 2f514738823b7359bff36ebadd0e440a227135d2 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:03:58 +0100
Subject: [PATCH 189/453] feat: add stable route for all warning/error codes
 (#965)

* feat: add stable route for all warning/error codes

This establishes a new route `e/[code]` which serves as a stable reference for all of our warning/error codes. All links to warnings/errors from the Svelte compiler/runtime should go through this route in order to have stable references. That way we can move codes between warnings/errors/different pages or even adjust codes without breaking links.

Part of https://github.com/sveltejs/svelte/issues/11305

* prerender entries

* work around Vercel's route limitation

* another workaround
---
 apps/svelte.dev/src/lib/server/content.ts     |  8 ++--
 .../src/routes/e/[code]/+page.server.ts       | 40 +++++++++++++++++++
 .../src/routes/e/tmp/codes.json/+server.ts    | 39 ++++++++++++++++++
 3 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/e/[code]/+page.server.ts
 create mode 100644 apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts

diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index faa960ec07..45f0d4b0b2 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -60,16 +60,16 @@ export const blog_posts = index.blog.children
 		return a.date < b.date ? 1 : -1;
 	});
 
+export function remove_section(slug: string) {
+	return slug.replace(/\/[^/]+(\/[^/]+)$/g, '$1');
+}
+
 /**
  * Create docs index, which is basically the same structure as the original index
  * but with adjusted slugs (the section part is omitted for cleaner URLs), separated
  * topics/pages and next/prev adjusted so that they don't point to different topics.
  */
 function create_docs() {
-	function remove_section(slug: string) {
-		return slug.replace(/\/[^/]+(\/[^/]+)$/g, '$1');
-	}
-
 	let docs: {
 		/** The top level entries/packages: svelte/kit/etc. Key is the topic */
 		topics: Record<string, Document>;
diff --git a/apps/svelte.dev/src/routes/e/[code]/+page.server.ts b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts
new file mode 100644
index 0000000000..a564c600f0
--- /dev/null
+++ b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts
@@ -0,0 +1,40 @@
+import { remove_section } from '$lib/server/content';
+import { error, redirect } from '@sveltejs/kit';
+
+// All links to warnings/errors from the Svelte compiler/runtime go through this page in order to have stable references
+// (i.e. we can move codes between warnings/errors/different pages or even adjust codes without breaking links).
+
+// Right now we can't prerender this because we would hit a "too many routes" error on Vercel,
+// for which we need to implement https://github.com/sveltejs/kit/issues/9032
+// const reference = index['docs/svelte/reference'].children.filter(
+// 	(child) => child.slug.endsWith('-errors') || child.slug.endsWith('-warnings')
+// );
+//
+// export const prerender = true;
+//
+// export function entries() {
+// 	return reference.flatMap((page) =>
+// 		[...page.body.matchAll(/(^|\n)### (\w+)/g)].map(([, , code]) => ({ code }))
+// 	);
+// }
+
+export async function load({ params, fetch }) {
+	const codes: Record<string, Record<string, string[]>> = await fetch('http://github.com/e/tmp/codes.json').then(
+		(r) => r.json()
+	);
+
+	for (const url of Object.keys(codes)) {
+		const page = codes[url];
+		for (const [h2, h3] of Object.entries(page)) {
+			if (h3.includes(params.code)) {
+				if (h2) {
+					redirect(307, `/${remove_section(url)}#${h2}-${params.code}`);
+				} else {
+					redirect(307, `/${remove_section(url)}#${params.code}`);
+				}
+			}
+		}
+	}
+
+	error(404, 'Not found');
+}
diff --git a/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts
new file mode 100644
index 0000000000..05685f33e0
--- /dev/null
+++ b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts
@@ -0,0 +1,39 @@
+import { index } from '$lib/server/content';
+import { json } from '@sveltejs/kit';
+
+// Temporary workaround for the problem described in [code]/+page.server.ts
+// In a nested folder because of https://github.com/sveltejs/kit/issues/12778
+
+const reference = index['docs/svelte/reference'].children.filter(
+	(child) => child.slug.endsWith('-errors') || child.slug.endsWith('-warnings')
+);
+
+// Since codes are not top level section we gotta jump through some hoops to get the right hash
+
+const codes: Record<string, Record<string, string[]>> = {};
+
+for (const page of reference) {
+	const grouped: Record<string, string[]> = {};
+	const sections = page.body.split(/(^|\n)## /g).slice(1);
+
+	for (const section of sections) {
+		const lines = section.slice(section.startsWith('\n') ? 1 : 0).split('\n');
+		const h2 = lines.shift()?.trim();
+
+		const h3_titles = lines
+			.filter((line) => line.startsWith('### '))
+			.map((line) => line.slice(4).trim());
+
+		if (h3_titles.length > 0) {
+			grouped[page.sections.find((s) => s.title === h2)?.slug ?? ''] = h3_titles;
+		}
+	}
+
+	codes[page.slug] = grouped;
+}
+
+export const prerender = true;
+
+export function GET() {
+	return json(codes);
+}

From a82171f533d76b202c65b47f1d734c7f414a015c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:41:33 -0500
Subject: [PATCH 190/453] Sync `svelte` docs (#968)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../.generated/client-warnings.md             |  84 +++++++++++++
 .../.generated/compile-warnings.md            | 117 ++++++++++++++++++
 .../98-reference/.generated/server-errors.md  |   2 +
 .../98-reference/.generated/shared-errors.md  |  42 +++++++
 .../.generated/shared-warnings.md             |   9 ++
 .../98-reference/30-compiler-warnings.md      | 117 ++++++++++++++++++
 .../svelte/98-reference/30-runtime-errors.md  |  44 +++++++
 .../98-reference/30-runtime-warnings.md       |  93 ++++++++++++++
 8 files changed, 508 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index ef19a28994..b0490b84ff 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -66,6 +66,31 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
 ```
 
+Certain attributes like `src` on an `<img>` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `<iframe>`, for the frame to be reloaded), even if they resolve to the same resource.
+
+To fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:
+
+```svelte
+<script>
+	let { src } = $props();
+
+	if (typeof window !== 'undefined') {
+		// stash the value...
+		const initial = src;
+
+		// unset it...
+		src = undefined;
+
+		$effect(() => {
+			// ...and reset after we've mounted
+			src = initial;
+		});
+	}
+</script>
+
+<img {src} />
+```
+
 ### hydration_html_changed
 
 ```
@@ -76,6 +101,31 @@ The value of an `{@html ...}` block changed between server and client renders. T
 The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
 ```
 
+If the `{@html ...}` value changes between the server and the client, it will not be repaired during hydration, i.e. the server value will be kept. That's because change detection during hydration is expensive and usually unnecessary.
+
+To fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:
+
+```svelte
+<script>
+	let { markup } = $props();
+
+	if (typeof window !== 'undefined') {
+		// stash the value...
+		const initial = markup;
+
+		// unset it...
+		markup = undefined;
+
+		$effect(() => {
+			// ...and reset after we've mounted
+			markup = initial;
+		});
+	}
+</script>
+
+{@html markup}
+```
+
 ### hydration_mismatch
 
 ```
@@ -86,6 +136,10 @@ Hydration failed because the initial UI does not match what was rendered on the
 Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 ```
 
+This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
+
+During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
+
 ### invalid_raw_snippet_render
 
 ```
@@ -110,6 +164,10 @@ Tried to unmount a component that was not mounted
 %parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
 ```
 
+Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
+
+To fix it, `bind:` to the value instead of just passing a property (i.e. in this example do `<Parent bind:value />`).
+
 ### ownership_invalid_mutation
 
 ```
@@ -120,6 +178,32 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
+Consider the following code:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+	let person = $state({ name: 'Florida', surname: 'Man' });
+</script>
+
+<Child {person} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { person } = $props();
+</script>
+
+<input bind:value={person.name}>
+<input bind:value={person.surname}>
+```
+
+`Child` is mutating `person` which is owned by `App` without being explicitly "allowed" to do so. This is strongly discouraged since it can create code that is hard to reason about at scale ("who mutated this value?"), hence the warning.
+
+To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
+
 ### reactive_declaration_non_reactive_property
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 481959ba3d..88b1f278a6 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -610,6 +610,20 @@ Empty block
 Unused CSS selector "%name%"
 ```
 
+Svelte traverses both the template and the `<style>` tag to find out which of the CSS selectors are not used within the template, so it can remove them.
+
+In some situations a selector may target an element that is not 'visible' to the compiler, for example because it is part of an `{@html ...}` tag or you're overriding styles in a child component. In these cases, use [`:global`](/docs/svelte/global-styles) to preserve the selector as-is:
+
+```svelte
+<div class="post">{@html content}</div>
+
+<style>
+  .post :global {
+    p {...}
+  }
+</style>
+```
+
 ### element_invalid_self_closing_tag
 
 ```
@@ -622,6 +636,8 @@ Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...>
 Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 ```
 
+See [the migration guide](v5-migration-guide#Event-changes) for more info.
+
 ### export_let_unused
 
 ```
@@ -640,6 +656,8 @@ Component has unused export property '%name%'. If it is for external reference o
 Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
 ```
 
+See the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.
+
 ### node_invalid_placement_ssr
 
 ```
@@ -660,6 +678,30 @@ This code will work when the component is rendered on the client (which is why t
 `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
 ```
 
+This warning is thrown when the compiler detects the following:
+- a variable was declared without `$state` or `$state.raw`
+- the variable is reassigned
+- the variable is read in a reactive context
+
+In this case, changing the value will not correctly trigger updates. Example:
+
+```svelte
+<script>
+	let reactive = $state('reactive');
+	let stale = 'stale';
+</script>
+
+<p>This value updates: {reactive}</p>
+<p>This value does not update: {stale}</p>
+
+<button onclick={() => {
+	stale = 'updated';
+	reactive = 'updated';
+}}>update</button>
+```
+
+To fix this, wrap your variable declaration with `$state`.
+
 ### options_deprecated_accessors
 
 ```
@@ -732,6 +774,12 @@ Reassignments of module-level declarations will not cause reactive statements to
 `context="module"` is deprecated, use the `module` attribute instead
 ```
 
+```svelte
+<script ---context="module"--- +++context+++>
+	let foo = 'bar';
+</script>
+```
+
 ### script_unknown_attribute
 
 ```
@@ -744,12 +792,79 @@ Unrecognized attribute — should be one of `generics`, `lang` or `module`. If t
 Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
 ```
 
+See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.
+
 ### state_referenced_locally
 
 ```
 State referenced in its own scope will never update. Did you mean to reference it inside a closure?
 ```
 
+This warning is thrown when the compiler detects the following:
+- A reactive variable is declared
+- the variable is reassigned
+- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+
+In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	let count = $state(0);
+
+	// warning: state_referenced_locally
+	setContext('count', count);
+</script>
+
+<button onclick={() => count++}>
+	increment
+</button>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	const count = getContext('count');
+</script>
+
+<!-- This will never update -->
+<p>The count is {count}</p>
+```
+
+To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	let count = $state(0);
+	setContext('count', +++() => count+++);
+</script>
+
+<button onclick={() => count++}>
+	increment
+</button>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	const count = getContext('count');
+</script>
+
+<!-- This will update -->
+<p>The count is {+++count()+++}</p>
+```
+
+For more info, see [Passing state into functions]($state#Passing-state-into-functions).
+
 ### store_rune_conflict
 
 ```
@@ -805,6 +920,8 @@ A derived value may be used in other contexts:
 `<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
 ```
 
+See [the note in the docs](legacy-svelte-self) for more info.
+
 ### unknown_code
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
index 8cf6727da9..c3e8b53c31 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/server-errors.md
@@ -5,3 +5,5 @@
 ```
 `%name%(...)` is not available on the server
 ```
+
+Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
index 52ef9d5f88..0102aafcbc 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
@@ -6,12 +6,54 @@
 Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
 ```
 
+This error would be thrown in a setup like this:
+
+```svelte
+<!--- file: Parent.svelte --->
+<List {items} let:entry>
+    <span>{entry}</span>
+</List>
+```
+
+```svelte
+<!--- file: List.svelte --->
+<script>
+    let { items, children } = $props();
+</script>
+
+<ul>
+    {#each items as item}
+        <li>{@render children(item)}</li>
+    {/each}
+</ul>
+```
+
+Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
+
 ### lifecycle_outside_component
 
 ```
 `%name%(...)` can only be used during component initialisation
 ```
 
+Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.
+
+```svelte
+<script>
+    import { onMount } from 'svelte';
+
+    function handleClick() {
+        // This is wrong
+        onMount(() => {})
+    }
+
+    // This is correct
+    onMount(() => {})
+</script>
+
+<button onclick={handleClick}>click me</button>
+```
+
 ### store_invalid_shape
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
index e9327e1e98..f449a4031e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-warnings.md
@@ -6,6 +6,8 @@
 `<svelte:element this="%tag%">` is a void element — it cannot have content
 ```
 
+Elements such as `<input>` cannot have content, any children passed to these elements will be ignored.
+
 ### state_snapshot_uncloneable
 
 ```
@@ -17,3 +19,10 @@ The following properties cannot be cloned with `$state.snapshot` — the return
 
 %properties%
 ```
+
+`$state.snapshot` tries to clone the given value in order to return a reference that no longer changes. Certain objects may not be cloneable, in which case the original value is returned. In the following example, `property` is cloned, but `window` is not, because DOM elements are uncloneable:
+
+```js
+const object = $state({ property: 'this is cloneable', window })
+const snapshot = $state.snapshot(object);
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 2121848c20..9c5e904022 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -630,6 +630,20 @@ Empty block
 Unused CSS selector "%name%"
 ```
 
+Svelte traverses both the template and the `<style>` tag to find out which of the CSS selectors are not used within the template, so it can remove them.
+
+In some situations a selector may target an element that is not 'visible' to the compiler, for example because it is part of an `{@html ...}` tag or you're overriding styles in a child component. In these cases, use [`:global`](/docs/svelte/global-styles) to preserve the selector as-is:
+
+```svelte
+<div class="post">{@html content}</div>
+
+<style>
+  .post :global {
+    p {...}
+  }
+</style>
+```
+
 ### element_invalid_self_closing_tag
 
 ```
@@ -642,6 +656,8 @@ Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...>
 Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 ```
 
+See [the migration guide](v5-migration-guide#Event-changes) for more info.
+
 ### export_let_unused
 
 ```
@@ -660,6 +676,8 @@ Component has unused export property '%name%'. If it is for external reference o
 Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
 ```
 
+See the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.
+
 ### node_invalid_placement_ssr
 
 ```
@@ -680,6 +698,30 @@ This code will work when the component is rendered on the client (which is why t
 `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
 ```
 
+This warning is thrown when the compiler detects the following:
+- a variable was declared without `$state` or `$state.raw`
+- the variable is reassigned
+- the variable is read in a reactive context
+
+In this case, changing the value will not correctly trigger updates. Example:
+
+```svelte
+<script>
+	let reactive = $state('reactive');
+	let stale = 'stale';
+</script>
+
+<p>This value updates: {reactive}</p>
+<p>This value does not update: {stale}</p>
+
+<button onclick={() => {
+	stale = 'updated';
+	reactive = 'updated';
+}}>update</button>
+```
+
+To fix this, wrap your variable declaration with `$state`.
+
 ### options_deprecated_accessors
 
 ```
@@ -752,6 +794,12 @@ Reassignments of module-level declarations will not cause reactive statements to
 `context="module"` is deprecated, use the `module` attribute instead
 ```
 
+```svelte
+<script ---context="module"--- +++context+++>
+	let foo = 'bar';
+</script>
+```
+
 ### script_unknown_attribute
 
 ```
@@ -764,12 +812,79 @@ Unrecognized attribute — should be one of `generics`, `lang` or `module`. If t
 Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
 ```
 
+See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.
+
 ### state_referenced_locally
 
 ```
 State referenced in its own scope will never update. Did you mean to reference it inside a closure?
 ```
 
+This warning is thrown when the compiler detects the following:
+- A reactive variable is declared
+- the variable is reassigned
+- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+
+In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	let count = $state(0);
+
+	// warning: state_referenced_locally
+	setContext('count', count);
+</script>
+
+<button onclick={() => count++}>
+	increment
+</button>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	const count = getContext('count');
+</script>
+
+<!-- This will never update -->
+<p>The count is {count}</p>
+```
+
+To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	let count = $state(0);
+	setContext('count', +++() => count+++);
+</script>
+
+<button onclick={() => count++}>
+	increment
+</button>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	const count = getContext('count');
+</script>
+
+<!-- This will update -->
+<p>The count is {+++count()+++}</p>
+```
+
+For more info, see [Passing state into functions]($state#Passing-state-into-functions).
+
 ### store_rune_conflict
 
 ```
@@ -825,6 +940,8 @@ A derived value may be used in other contexts:
 `<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
 ```
 
+See [the note in the docs](legacy-svelte-self) for more info.
+
 ### unknown_code
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index cecb8045ab..d31e61404c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -147,6 +147,8 @@ Updating state inside a derived or a template expression is forbidden. If the va
 `%name%(...)` is not available on the server
 ```
 
+Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
+
 
 ## Shared errors
 
@@ -158,12 +160,54 @@ Updating state inside a derived or a template expression is forbidden. If the va
 Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
 ```
 
+This error would be thrown in a setup like this:
+
+```svelte
+<!--- file: Parent.svelte --->
+<List {items} let:entry>
+    <span>{entry}</span>
+</List>
+```
+
+```svelte
+<!--- file: List.svelte --->
+<script>
+    let { items, children } = $props();
+</script>
+
+<ul>
+    {#each items as item}
+        <li>{@render children(item)}</li>
+    {/each}
+</ul>
+```
+
+Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
+
 ### lifecycle_outside_component
 
 ```
 `%name%(...)` can only be used during component initialisation
 ```
 
+Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.
+
+```svelte
+<script>
+    import { onMount } from 'svelte';
+
+    function handleClick() {
+        // This is wrong
+        onMount(() => {})
+    }
+
+    // This is correct
+    onMount(() => {})
+</script>
+
+<button onclick={handleClick}>click me</button>
+```
+
 ### store_invalid_shape
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 4bcc6019db..0df154e8b9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -72,6 +72,31 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
 ```
 
+Certain attributes like `src` on an `<img>` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `<iframe>`, for the frame to be reloaded), even if they resolve to the same resource.
+
+To fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:
+
+```svelte
+<script>
+	let { src } = $props();
+
+	if (typeof window !== 'undefined') {
+		// stash the value...
+		const initial = src;
+
+		// unset it...
+		src = undefined;
+
+		$effect(() => {
+			// ...and reset after we've mounted
+			src = initial;
+		});
+	}
+</script>
+
+<img {src} />
+```
+
 ### hydration_html_changed
 
 ```
@@ -82,6 +107,31 @@ The value of an `{@html ...}` block changed between server and client renders. T
 The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
 ```
 
+If the `{@html ...}` value changes between the server and the client, it will not be repaired during hydration, i.e. the server value will be kept. That's because change detection during hydration is expensive and usually unnecessary.
+
+To fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:
+
+```svelte
+<script>
+	let { markup } = $props();
+
+	if (typeof window !== 'undefined') {
+		// stash the value...
+		const initial = markup;
+
+		// unset it...
+		markup = undefined;
+
+		$effect(() => {
+			// ...and reset after we've mounted
+			markup = initial;
+		});
+	}
+</script>
+
+{@html markup}
+```
+
 ### hydration_mismatch
 
 ```
@@ -92,6 +142,10 @@ Hydration failed because the initial UI does not match what was rendered on the
 Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 ```
 
+This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
+
+During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
+
 ### invalid_raw_snippet_render
 
 ```
@@ -116,6 +170,10 @@ Tried to unmount a component that was not mounted
 %parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
 ```
 
+Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
+
+To fix it, `bind:` to the value instead of just passing a property (i.e. in this example do `<Parent bind:value />`).
+
 ### ownership_invalid_mutation
 
 ```
@@ -126,6 +184,32 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
+Consider the following code:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+	let person = $state({ name: 'Florida', surname: 'Man' });
+</script>
+
+<Child {person} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { person } = $props();
+</script>
+
+<input bind:value={person.name}>
+<input bind:value={person.surname}>
+```
+
+`Child` is mutating `person` which is owned by `App` without being explicitly "allowed" to do so. This is strongly discouraged since it can create code that is hard to reason about at scale ("who mutated this value?"), hence the warning.
+
+To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
+
 ### reactive_declaration_non_reactive_property
 
 ```
@@ -196,6 +280,8 @@ To resolve this, ensure you're comparing values where both values were created w
 `<svelte:element this="%tag%">` is a void element — it cannot have content
 ```
 
+Elements such as `<input>` cannot have content, any children passed to these elements will be ignored.
+
 ### state_snapshot_uncloneable
 
 ```
@@ -208,3 +294,10 @@ The following properties cannot be cloned with `$state.snapshot` — the return
 %properties%
 ```
 
+`$state.snapshot` tries to clone the given value in order to return a reference that no longer changes. Certain objects may not be cloneable, in which case the original value is returned. In the following example, `property` is cloned, but `window` is not, because DOM elements are uncloneable:
+
+```js
+const object = $state({ property: 'this is cloneable', window })
+const snapshot = $state.snapshot(object);
+```
+

From fd48fb17205e7b0e11b44f435a4280335c9fc2e0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 9 Dec 2024 13:41:46 -0500
Subject: [PATCH 191/453] add links to console output (#967)

---
 .../src/lib/Output/console/ConsoleLine.svelte | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index d5fe669cf5..b188d262f4 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -97,6 +97,23 @@
 
 		return formatted;
 	}
+
+	const chars: Record<string, string> = {
+		'&': '&amp;',
+		'<': '&lt;',
+		'>': '&gt;'
+	};
+
+	function escape_html(html: string) {
+		return html.replace(/[&<>]/g, (c) => chars[c]);
+	}
+
+	function link(str: string) {
+		return str.replace(
+			/(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g,
+			(m) => `<a target="_blank" href="http://github.com/$%7Bm%7D">${m}</a>`
+		);
+	}
 </script>
 
 {#if log.command === 'table'}
@@ -108,7 +125,7 @@
 	<div
 		role="button"
 		tabindex="0"
-		on:click={toggle_group_collapse}
+		onclick={toggle_group_collapse}
 		class="log"
 		class:expandable={log.stack || log.command === 'group'}
 	>
@@ -135,7 +152,10 @@
 					{/if}{#if part.type === 'value'}
 						<JSONNode value={part.value} defaultExpandedLevel={log.expanded ? 1 : 0} />
 					{:else}
-						<span class="styled" style={part.style}>{part.value}</span>
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<span class="styled" style={part.style} onclick={(e) => e.stopPropagation()}>
+							{@html link(escape_html(part.value))}
+						</span>
 					{/if}
 				{/each}
 			</span>

From 01a731d4108de9b8cb79cb00829b5376154e36bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 9 Dec 2024 15:58:21 -0500
Subject: [PATCH 192/453] docs: advent day 9 (#969)

---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 912cbdf9e9..8721af51bb 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -71,9 +71,11 @@ You can now do `bind:value={get, set}` to validate and transform bound values. T
 - [docs](/docs/svelte/bind#Function-bindings)
 - [demo](/playground/1ddd82f573b94201b3c8fcab33bf0a46?version=5.9.0)
 
-## Day 9
+## Day 9: error and warning documentation
 
-Coming soon!
+When Svelte emits a warning or error (whether at build time, when the compiler is running, or when the app is running on the server or in the browser) it will now be accompanied by a link to the corresponding entry in the documentation containing a description (which is omitted from production builds, to save bytes) and — in some cases, with more to come — more details on why it happened and what you can do to fix it.
+
+- [demo](/playground/8095884c1f5040ea846669b904083e25?version=5.10.0)
 
 ## Day 10
 

From 912e90741d2acc1ecc334977a8648583039e8dca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 10 Dec 2024 10:43:27 -0500
Subject: [PATCH 193/453] Sync `kit` docs (#972)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/30-advanced/20-hooks.md  | 19 ++++++++++
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 36 +++++++++++++++++++
 .../kit/98-reference/20-$app-navigation.md    |  2 +-
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 6decc1cbf4..9663d724fc 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -237,6 +237,25 @@ During development, if an error occurs because of a syntax error in your Svelte
 
 > [!NOTE] Make sure that `handleError` _never_ throws an error
 
+### init
+
+This function runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection.
+
+> [!NOTE] If your environment supports top-level await, the `init` function is really no different from writing your initialisation logic at the top level of the module, but some environments — most notably, Safari — don't.
+
+```js
+/// file: src/hooks.server.js
+import * as db from '$lib/server/database';
+
+/** @type {import('@sveltejs/kit').ServerInit} */
+export async function init() {
+	await db.connect();
+}
+```
+
+> [!NOTE]
+> In the browser, asynchronous work in `init` will delay hydration, so be mindful of what you put in there.
+
 ## Universal hooks
 
 The following can be added to `src/hooks.js`. Universal hooks run on both server and client (not to be confused with shared hooks, which are environment-specific).
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index afbf2ca54e..556736df0c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -851,6 +851,24 @@ Compress files in `directory` with gzip and brotli, where appropriate. Generates
 </div>
 </div></div>
 
+## ClientInit
+
+<blockquote class="since note">
+
+Available since 2.10.0
+
+</blockquote>
+
+The [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked once the app starts in the browser
+
+<div class="ts-block">
+
+```dts
+type ClientInit = () => MaybePromise<void>;
+```
+
+</div>
+
 ## Config
 
 See the [configuration reference](/docs/kit/configuration) for details.
@@ -2347,6 +2365,24 @@ A `[file]: size` map of all assets imported by server code
 </div>
 </div></div>
 
+## ServerInit
+
+<blockquote class="since note">
+
+Available since 2.10.0
+
+</blockquote>
+
+The [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked before the server responds to its first request
+
+<div class="ts-block">
+
+```dts
+type ServerInit = () => MaybePromise<void>;
+```
+
+</div>
+
 ## ServerInitOptions
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index eb6fae486a..545866b660 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -43,7 +43,7 @@ function afterNavigate(
 
 ## beforeNavigate
 
-A navigation interceptor that triggers before we navigate to a new URL, whether by clicking a link, calling `goto(...)`, or using the browser back/forward controls.
+A navigation interceptor that triggers before we navigate to a URL, whether by clicking a link, calling `goto(...)`, or using the browser back/forward controls.
 
 Calling `cancel()` will prevent the navigation from completing. If `navigation.type === 'leave'` — meaning the user is navigating away from the app (or closing the tab) — calling `cancel` will trigger the native browser unload confirmation dialog. In this case, the navigation may or may not be cancelled depending on the user's response.
 

From 4939db64dc5602ba89e17f8f23db7ad799df4732 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 10 Dec 2024 11:03:36 -0500
Subject: [PATCH 194/453] day 10 (#973)

---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 8721af51bb..205013078e 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -77,9 +77,11 @@ When Svelte emits a warning or error (whether at build time, when the compiler i
 
 - [demo](/playground/8095884c1f5040ea846669b904083e25?version=5.10.0)
 
-## Day 10
+## Day 10: SvelteKit `init` hooks
 
-Coming soon!
+A lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens.
+
+- [docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init)
 
 ## Day 11
 

From d6a64f82bef4e1fc6226390698d63722613e746c Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 10 Dec 2024 08:10:01 -0800
Subject: [PATCH 195/453] chore: upgrade enhanced-img and
 @vercel/speed-insights (#970)

---
 apps/svelte.dev/package.json |   5 +-
 pnpm-lock.yaml               | 388 +++++++++++++++++++----------------
 2 files changed, 211 insertions(+), 182 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 54a05f92d9..71cb2eb8cb 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -29,7 +29,7 @@
 		"@testing-library/user-event": "^14.5.2",
 		"@types/d3-geo": "^3.1.0",
 		"@vercel/analytics": "^1.3.2",
-		"@vercel/speed-insights": "^1.0.0",
+		"@vercel/speed-insights": "^1.1.0",
 		"@webcontainer/api": "^1.1.5",
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
@@ -52,13 +52,12 @@
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.4.7",
-		"@sveltejs/enhanced-img": "^0.3.4",
+		"@sveltejs/enhanced-img": "^0.4.3",
 		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
 		"@types/cookie": "^0.6.0",
 		"@types/node": "^20.14.2",
-		"@vercel/speed-insights": "^1.0.0",
 		"browserslist": "^4.23.1",
 		"chokidar": "^4.0.1",
 		"degit": "^2.8.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63b89c9313..c2e1d43dc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,8 @@ importers:
         specifier: ^1.3.2
         version: 1.3.2
       '@vercel/speed-insights':
-        specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
+        specifier: ^1.1.0
+        version: 1.1.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -118,8 +118,8 @@ importers:
         specifier: ^5.4.7
         version: 5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
-        specifier: ^0.3.4
-        version: 0.3.4(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^0.4.3
+        version: 0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.8.0
         version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -206,7 +206,7 @@ importers:
         version: 1.2.1
       esm-env:
         specifier: ^1.0.0
-        version: 1.0.0
+        version: 1.2.1
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -249,13 +249,13 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.3.0)(typescript@5.5.4)
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../repl
@@ -264,7 +264,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -273,16 +273,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.3.0)
       publint:
         specifier: ^0.2.0
         version: 0.2.11
       svelte:
         specifier: ^5.1.11
-        version: 5.1.11
+        version: 5.3.0
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
+        version: 4.0.1(svelte@5.3.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -345,16 +345,16 @@ importers:
         version: 2.2.0(svelte@5.1.11)
       acorn:
         specifier: ^8.11.3
-        version: 8.12.1
+        version: 8.14.0
       editor:
         specifier: workspace:*
         version: link:../editor
       esm-env:
         specifier: ^1.0.0
-        version: 1.0.0
+        version: 1.2.1
       esrap:
         specifier: ^1.2.2
-        version: 1.2.2
+        version: 1.2.3
       marked:
         specifier: ^14.1.2
         version: 14.1.2
@@ -466,7 +466,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       esm-env:
         specifier: ^1.0.0
-        version: 1.0.0
+        version: 1.2.1
       json5:
         specifier: ^2.2.3
         version: 2.2.3
@@ -932,116 +932,108 @@ packages:
   '@fontsource/fira-sans@5.1.0':
     resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==}
 
-  '@img/sharp-darwin-arm64@0.33.4':
-    resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.33.4':
-    resolution: {integrity: sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.0.2':
-    resolution: {integrity: sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==}
-    engines: {macos: '>=11', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.0.2':
-    resolution: {integrity: sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==}
-    engines: {macos: '>=10.13', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.0.2':
-    resolution: {integrity: sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==}
-    engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm@1.0.2':
-    resolution: {integrity: sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==}
-    engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-libvips-linux-s390x@1.0.2':
-    resolution: {integrity: sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==}
-    engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linux-x64@1.0.2':
-    resolution: {integrity: sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==}
-    engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.2':
-    resolution: {integrity: sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==}
-    engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.2':
-    resolution: {integrity: sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==}
-    engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-arm64@0.33.4':
-    resolution: {integrity: sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-arm@0.33.4':
-    resolution: {integrity: sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==}
-    engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-linux-s390x@0.33.4':
-    resolution: {integrity: sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==}
-    engines: {glibc: '>=2.31', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-linux-x64@0.33.4':
-    resolution: {integrity: sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-arm64@0.33.4':
-    resolution: {integrity: sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==}
-    engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-x64@0.33.4':
-    resolution: {integrity: sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==}
-    engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-wasm32@0.33.4':
-    resolution: {integrity: sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
-  '@img/sharp-win32-ia32@0.33.4':
-    resolution: {integrity: sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.33.4':
-    resolution: {integrity: sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
 
@@ -1457,10 +1449,10 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0 || ^2.0.0
 
-  '@sveltejs/enhanced-img@0.3.4':
-    resolution: {integrity: sha512-eX+ob5uWr0bTLMKeG9nhhM84aR88hqiLiyEfWZPX7ijhk/wlmYSUX9nOiaVHh2ct1U+Ju9Hhb90Copw+ZNOB8w==}
+  '@sveltejs/enhanced-img@0.4.3':
+    resolution: {integrity: sha512-hhuaZW2a+4p/niPpPnGEDWBbYy54rvvPlD3JArCyWYMbkdj825HkgyzvNZWbA0nrKDhdFNbbVVsVNBMDvPOLrQ==}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0
       vite: '>= 5.0.0'
 
   '@sveltejs/kit@2.8.0':
@@ -1604,13 +1596,13 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  '@vercel/speed-insights@1.0.11':
-    resolution: {integrity: sha512-l9hzSNmJvb2Yqpgd/BzpiT0J0aQDdtqxOf3Xm+iW4PICxVvhY1ef7Otdx4GXI+88dVkws57qMzXiShz19gXzSQ==}
+  '@vercel/speed-insights@1.1.0':
+    resolution: {integrity: sha512-rAXxuhhO4mlRGC9noa5F7HLMtGg8YF1zAN6Pjd1Ny4pII4cerhtwSG4vympbCl+pWkH7nBS9kVXRD4FAn54dlg==}
     peerDependencies:
       '@sveltejs/kit': ^1 || ^2
       next: '>= 13'
-      react: ^18 || ^19
-      svelte: ^4
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
       vue: ^3
       vue-router: ^4
     peerDependenciesMeta:
@@ -1673,11 +1665,6 @@ packages:
     peerDependencies:
       acorn: '>=8.9.0'
 
-  acorn@8.12.1:
-    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
@@ -2041,9 +2028,6 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
-  esm-env@1.0.0:
-    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
-
   esm-env@1.2.1:
     resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
 
@@ -2052,9 +2036,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esrap@1.2.2:
-    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
-
   esrap@1.2.3:
     resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
 
@@ -2271,9 +2252,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
-
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -2805,8 +2783,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -2819,9 +2797,9 @@ packages:
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
-  sharp@0.33.4:
-    resolution: {integrity: sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==}
-    engines: {libvips: '>=8.15.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
@@ -3312,7 +3290,7 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.6.2
+      semver: 7.6.3
 
   '@changesets/assemble-release-plan@6.0.2':
     dependencies:
@@ -3322,7 +3300,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.0
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.6.2
+      semver: 7.6.3
 
   '@changesets/changelog-git@0.2.0':
     dependencies:
@@ -3359,7 +3337,7 @@ snapshots:
       p-limit: 2.3.0
       preferred-pm: 3.1.3
       resolve-from: 5.0.0
-      semver: 7.6.2
+      semver: 7.6.3
       spawndamnit: 2.0.0
       term-size: 2.2.1
 
@@ -3383,7 +3361,7 @@ snapshots:
       '@manypkg/get-packages': 1.1.3
       chalk: 2.4.2
       fs-extra: 7.0.1
-      semver: 7.6.2
+      semver: 7.6.3
 
   '@changesets/get-release-plan@4.0.2':
     dependencies:
@@ -3701,79 +3679,79 @@ snapshots:
 
   '@fontsource/fira-sans@5.1.0': {}
 
-  '@img/sharp-darwin-arm64@0.33.4':
+  '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.0.2
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
     optional: true
 
-  '@img/sharp-darwin-x64@0.33.4':
+  '@img/sharp-darwin-x64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.0.2
+      '@img/sharp-libvips-darwin-x64': 1.0.4
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.0.2':
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.0.2':
+  '@img/sharp-libvips-darwin-x64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.0.2':
+  '@img/sharp-libvips-linux-arm64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.0.2':
+  '@img/sharp-libvips-linux-arm@1.0.5':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.0.2':
+  '@img/sharp-libvips-linux-s390x@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.0.2':
+  '@img/sharp-libvips-linux-x64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.2':
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.2':
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     optional: true
 
-  '@img/sharp-linux-arm64@0.33.4':
+  '@img/sharp-linux-arm64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.0.2
+      '@img/sharp-libvips-linux-arm64': 1.0.4
     optional: true
 
-  '@img/sharp-linux-arm@0.33.4':
+  '@img/sharp-linux-arm@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.0.2
+      '@img/sharp-libvips-linux-arm': 1.0.5
     optional: true
 
-  '@img/sharp-linux-s390x@0.33.4':
+  '@img/sharp-linux-s390x@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.0.2
+      '@img/sharp-libvips-linux-s390x': 1.0.4
     optional: true
 
-  '@img/sharp-linux-x64@0.33.4':
+  '@img/sharp-linux-x64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.0.2
+      '@img/sharp-libvips-linux-x64': 1.0.4
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.33.4':
+  '@img/sharp-linuxmusl-arm64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.33.4':
+  '@img/sharp-linuxmusl-x64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
     optional: true
 
-  '@img/sharp-wasm32@0.33.4':
+  '@img/sharp-wasm32@0.33.5':
     dependencies:
       '@emnapi/runtime': 1.2.0
     optional: true
 
-  '@img/sharp-win32-ia32@0.33.4':
+  '@img/sharp-win32-ia32@0.33.5':
     optional: true
 
-  '@img/sharp-win32-x64@0.33.4':
+  '@img/sharp-win32-x64@0.33.5':
     optional: true
 
   '@jimp/core@1.1.1':
@@ -4044,7 +4022,7 @@ snapshots:
       nopt: 5.0.0
       npmlog: 5.0.1
       rimraf: 3.0.2
-      semver: 7.6.2
+      semver: 7.6.3
       tar: 6.2.1
     transitivePeerDependencies:
       - encoding
@@ -4298,6 +4276,11 @@ snapshots:
       '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+    dependencies:
+      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      import-meta-resolve: 4.1.0
+
   '@sveltejs/adapter-vercel@5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
       '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -4311,13 +4294,15 @@ snapshots:
     dependencies:
       '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
+      sharp: 0.33.5
       svelte: 5.3.0
       svelte-parse-markup: 0.1.5(svelte@5.3.0)
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
+      zimmerframe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
@@ -4327,7 +4312,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.1
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4339,13 +4324,31 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
+  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@types/cookie': 0.6.0
+      cookie: 0.6.0
+      devalue: 5.1.1
+      esm-env: 1.2.1
+      import-meta-resolve: 4.1.0
+      kleur: 4.1.5
+      magic-string: 0.30.12
+      mrmime: 2.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.0
+      svelte: 5.3.0
+      tiny-glob: 0.2.9
+      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+
   '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.1
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4362,12 +4365,23 @@ snapshots:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
-      semver: 7.6.2
+      semver: 7.6.3
       svelte: 5.1.11
       svelte2tsx: 0.7.8(svelte@5.1.11)(typescript@5.5.4)
     transitivePeerDependencies:
       - typescript
 
+  '@sveltejs/package@2.3.1(svelte@5.3.0)(typescript@5.5.4)':
+    dependencies:
+      chokidar: 3.6.0
+      kleur: 4.1.5
+      sade: 1.8.1
+      semver: 7.6.3
+      svelte: 5.3.0
+      svelte2tsx: 0.7.8(svelte@5.3.0)(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
   '@sveltejs/svelte-json-tree@2.2.0(svelte@5.1.11)':
     dependencies:
       svelte: 5.1.11
@@ -4381,6 +4395,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      debug: 4.3.7
+      svelte: 5.3.0
+      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -4403,6 +4426,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      debug: 4.3.7
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.12
+      svelte: 5.3.0
+      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+    transitivePeerDependencies:
+      - supports-color
+
   '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -4500,8 +4536,8 @@ snapshots:
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11
       '@rollup/pluginutils': 4.2.1
-      acorn: 8.12.1
-      acorn-import-attributes: 1.9.5(acorn@8.12.1)
+      acorn: 8.14.0
+      acorn-import-attributes: 1.9.5(acorn@8.14.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
@@ -4514,7 +4550,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
     optionalDependencies:
       '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.3.0
@@ -4563,16 +4599,14 @@ snapshots:
 
   abbrev@1.1.1: {}
 
-  acorn-import-attributes@1.9.5(acorn@8.12.1):
+  acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.14.0
 
   acorn-typescript@1.4.13(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
 
-  acorn@8.12.1: {}
-
   acorn@8.14.0: {}
 
   adm-zip@0.5.14: {}
@@ -4924,17 +4958,10 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
-  esm-env@1.0.0: {}
-
   esm-env@1.2.1: {}
 
   esprima@4.0.1: {}
 
-  esrap@1.2.2:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-
   esrap@1.2.3:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -5165,10 +5192,6 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.6
-
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.6
@@ -5687,7 +5710,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.6.2: {}
+  semver@7.6.3: {}
 
   server-only@0.0.1: {}
 
@@ -5695,31 +5718,31 @@ snapshots:
 
   set-cookie-parser@2.7.1: {}
 
-  sharp@0.33.4:
+  sharp@0.33.5:
     dependencies:
       color: 4.2.3
       detect-libc: 2.0.3
-      semver: 7.6.2
+      semver: 7.6.3
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.33.4
-      '@img/sharp-darwin-x64': 0.33.4
-      '@img/sharp-libvips-darwin-arm64': 1.0.2
-      '@img/sharp-libvips-darwin-x64': 1.0.2
-      '@img/sharp-libvips-linux-arm': 1.0.2
-      '@img/sharp-libvips-linux-arm64': 1.0.2
-      '@img/sharp-libvips-linux-s390x': 1.0.2
-      '@img/sharp-libvips-linux-x64': 1.0.2
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.2
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.2
-      '@img/sharp-linux-arm': 0.33.4
-      '@img/sharp-linux-arm64': 0.33.4
-      '@img/sharp-linux-s390x': 0.33.4
-      '@img/sharp-linux-x64': 0.33.4
-      '@img/sharp-linuxmusl-arm64': 0.33.4
-      '@img/sharp-linuxmusl-x64': 0.33.4
-      '@img/sharp-wasm32': 0.33.4
-      '@img/sharp-win32-ia32': 0.33.4
-      '@img/sharp-win32-x64': 0.33.4
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
 
   shebang-command@1.2.0:
     dependencies:
@@ -5867,6 +5890,13 @@ snapshots:
       svelte: 5.1.11
       typescript: 5.5.4
 
+  svelte2tsx@0.7.8(svelte@5.3.0)(typescript@5.5.4):
+    dependencies:
+      dedent-js: 1.0.1
+      pascal-case: 3.1.2
+      svelte: 5.3.0
+      typescript: 5.5.4
+
   svelte@5.1.11:
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -5876,9 +5906,9 @@ snapshots:
       acorn-typescript: 1.4.13(acorn@8.14.0)
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      esm-env: 1.0.0
-      esrap: 1.2.2
-      is-reference: 3.0.2
+      esm-env: 1.2.1
+      esrap: 1.2.3
+      is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.12
       zimmerframe: 1.1.2
@@ -6035,7 +6065,7 @@ snapshots:
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
       imagetools-core: 7.0.1
-      sharp: 0.33.4
+      sharp: 0.33.5
     transitivePeerDependencies:
       - rollup
 

From a2ba79d094c87093bb7e89029d220e353477e7dc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 10 Dec 2024 11:28:27 -0500
Subject: [PATCH 196/453] add banner discouraging people from editing generated
 files (#966)

---
 .../content/docs/cli/10-introduction/10-overview.md          | 1 +
 apps/svelte.dev/content/docs/cli/10-introduction/index.md    | 1 +
 apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md | 1 +
 apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md    | 1 +
 apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md  | 1 +
 .../svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 1 +
 apps/svelte.dev/content/docs/cli/20-commands/index.md        | 1 +
 apps/svelte.dev/content/docs/cli/index.md                    | 1 +
 .../content/docs/kit/10-getting-started/10-introduction.md   | 1 +
 .../docs/kit/10-getting-started/20-creating-a-project.md     | 1 +
 .../docs/kit/10-getting-started/30-project-structure.md      | 1 +
 .../content/docs/kit/10-getting-started/40-web-standards.md  | 1 +
 apps/svelte.dev/content/docs/kit/10-getting-started/index.md | 1 +
 .../content/docs/kit/20-core-concepts/10-routing.md          | 3 ++-
 apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md | 1 +
 .../content/docs/kit/20-core-concepts/30-form-actions.md     | 1 +
 .../content/docs/kit/20-core-concepts/40-page-options.md     | 1 +
 .../content/docs/kit/20-core-concepts/50-state-management.md | 1 +
 apps/svelte.dev/content/docs/kit/20-core-concepts/index.md   | 1 +
 .../docs/kit/25-build-and-deploy/10-building-your-app.md     | 1 +
 .../content/docs/kit/25-build-and-deploy/20-adapters.md      | 1 +
 .../content/docs/kit/25-build-and-deploy/30-adapter-auto.md  | 1 +
 .../content/docs/kit/25-build-and-deploy/40-adapter-node.md  | 1 +
 .../docs/kit/25-build-and-deploy/50-adapter-static.md        | 1 +
 .../docs/kit/25-build-and-deploy/55-single-page-apps.md      | 1 +
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md    | 1 +
 .../kit/25-build-and-deploy/70-adapter-cloudflare-workers.md | 1 +
 .../docs/kit/25-build-and-deploy/80-adapter-netlify.md       | 1 +
 .../docs/kit/25-build-and-deploy/90-adapter-vercel.md        | 1 +
 .../docs/kit/25-build-and-deploy/99-writing-adapters.md      | 1 +
 .../svelte.dev/content/docs/kit/25-build-and-deploy/index.md | 1 +
 .../content/docs/kit/30-advanced/10-advanced-routing.md      | 1 +
 apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md     | 1 +
 apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md    | 1 +
 .../content/docs/kit/30-advanced/30-link-options.md          | 1 +
 .../content/docs/kit/30-advanced/40-service-workers.md       | 1 +
 .../content/docs/kit/30-advanced/50-server-only-modules.md   | 1 +
 apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md | 1 +
 .../content/docs/kit/30-advanced/67-shallow-routing.md       | 1 +
 apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md | 1 +
 apps/svelte.dev/content/docs/kit/30-advanced/index.md        | 1 +
 .../svelte.dev/content/docs/kit/40-best-practices/03-auth.md | 5 +++--
 .../content/docs/kit/40-best-practices/05-performance.md     | 1 +
 .../content/docs/kit/40-best-practices/07-images.md          | 1 +
 .../content/docs/kit/40-best-practices/10-accessibility.md   | 1 +
 apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md | 1 +
 apps/svelte.dev/content/docs/kit/40-best-practices/index.md  | 1 +
 apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md       | 1 +
 .../content/docs/kit/60-appendix/20-integrations.md          | 1 +
 apps/svelte.dev/content/docs/kit/60-appendix/25-debugging.md | 1 +
 .../docs/kit/60-appendix/30-migrating-to-sveltekit-2.md      | 1 +
 apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md | 1 +
 .../content/docs/kit/60-appendix/50-additional-resources.md  | 1 +
 apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md  | 1 +
 apps/svelte.dev/content/docs/kit/60-appendix/index.md        | 1 +
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md        | 5 ++++-
 .../content/docs/kit/98-reference/15-@sveltejs-kit-hooks.md  | 1 +
 .../docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md | 1 +
 .../content/docs/kit/98-reference/15-@sveltejs-kit-node.md   | 1 +
 .../content/docs/kit/98-reference/15-@sveltejs-kit-vite.md   | 1 +
 .../content/docs/kit/98-reference/20-$app-environment.md     | 1 +
 .../content/docs/kit/98-reference/20-$app-forms.md           | 1 +
 .../content/docs/kit/98-reference/20-$app-navigation.md      | 1 +
 .../content/docs/kit/98-reference/20-$app-paths.md           | 1 +
 .../content/docs/kit/98-reference/20-$app-server.md          | 1 +
 .../content/docs/kit/98-reference/20-$app-stores.md          | 1 +
 .../content/docs/kit/98-reference/25-$env-dynamic-private.md | 1 +
 .../content/docs/kit/98-reference/25-$env-dynamic-public.md  | 1 +
 .../content/docs/kit/98-reference/25-$env-static-private.md  | 1 +
 .../content/docs/kit/98-reference/25-$env-static-public.md   | 1 +
 apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md     | 1 +
 .../content/docs/kit/98-reference/27-$service-worker.md      | 1 +
 .../content/docs/kit/98-reference/50-configuration.md        | 1 +
 apps/svelte.dev/content/docs/kit/98-reference/52-cli.md      | 1 +
 apps/svelte.dev/content/docs/kit/98-reference/54-types.md    | 1 +
 apps/svelte.dev/content/docs/kit/98-reference/index.md       | 1 +
 apps/svelte.dev/content/docs/kit/index.md                    | 1 +
 .../content/docs/svelte/01-introduction/01-overview.md       | 1 +
 .../docs/svelte/01-introduction/02-getting-started.md        | 1 +
 .../content/docs/svelte/01-introduction/03-svelte-files.md   | 1 +
 .../docs/svelte/01-introduction/04-svelte-js-files.md        | 1 +
 apps/svelte.dev/content/docs/svelte/01-introduction/index.md | 1 +
 .../content/docs/svelte/01-introduction/xx-props.md          | 1 +
 .../svelte/01-introduction/xx-reactivity-fundamentals.md     | 1 +
 .../content/docs/svelte/02-runes/01-what-are-runes.md        | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md    | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md  | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md   | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md    | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md  | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md     | 1 +
 apps/svelte.dev/content/docs/svelte/02-runes/index.md        | 1 +
 .../docs/svelte/03-template-syntax/01-basic-markup.md        | 1 +
 .../content/docs/svelte/03-template-syntax/02-if.md          | 1 +
 .../content/docs/svelte/03-template-syntax/03-each.md        | 1 +
 .../content/docs/svelte/03-template-syntax/04-key.md         | 1 +
 .../content/docs/svelte/03-template-syntax/05-await.md       | 1 +
 .../content/docs/svelte/03-template-syntax/06-snippet.md     | 1 +
 .../content/docs/svelte/03-template-syntax/07-@render.md     | 1 +
 .../content/docs/svelte/03-template-syntax/08-@html.md       | 1 +
 .../content/docs/svelte/03-template-syntax/09-@const.md      | 1 +
 .../content/docs/svelte/03-template-syntax/10-@debug.md      | 1 +
 .../content/docs/svelte/03-template-syntax/11-bind.md        | 1 +
 .../content/docs/svelte/03-template-syntax/12-use.md         | 1 +
 .../content/docs/svelte/03-template-syntax/13-transition.md  | 1 +
 .../content/docs/svelte/03-template-syntax/14-in-and-out.md  | 1 +
 .../content/docs/svelte/03-template-syntax/15-animate.md     | 1 +
 .../content/docs/svelte/03-template-syntax/16-class.md       | 1 +
 .../content/docs/svelte/03-template-syntax/17-style.md       | 1 +
 .../content/docs/svelte/03-template-syntax/index.md          | 1 +
 .../docs/svelte/03-template-syntax/xx-control-flow.md        | 1 +
 .../docs/svelte/03-template-syntax/xx-data-fetching.md       | 1 +
 .../content/docs/svelte/04-styling/01-scoped-styles.md       | 1 +
 .../content/docs/svelte/04-styling/02-global-styles.md       | 1 +
 .../content/docs/svelte/04-styling/03-custom-properties.md   | 1 +
 .../docs/svelte/04-styling/04-nested-style-elements.md       | 1 +
 apps/svelte.dev/content/docs/svelte/04-styling/index.md      | 1 +
 .../docs/svelte/05-special-elements/01-svelte-boundary.md    | 1 +
 .../docs/svelte/05-special-elements/02-svelte-window.md      | 1 +
 .../docs/svelte/05-special-elements/03-svelte-document.md    | 1 +
 .../docs/svelte/05-special-elements/04-svelte-body.md        | 1 +
 .../docs/svelte/05-special-elements/05-svelte-head.md        | 1 +
 .../docs/svelte/05-special-elements/06-svelte-element.md     | 1 +
 .../docs/svelte/05-special-elements/07-svelte-options.md     | 1 +
 .../content/docs/svelte/05-special-elements/index.md         | 1 +
 apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md  | 1 +
 apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md | 1 +
 .../content/docs/svelte/06-runtime/03-lifecycle-hooks.md     | 1 +
 .../docs/svelte/06-runtime/04-imperative-component-api.md    | 1 +
 apps/svelte.dev/content/docs/svelte/06-runtime/index.md      | 1 +
 apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md    | 1 +
 apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md | 1 +
 .../content/docs/svelte/07-misc/04-custom-elements.md        | 1 +
 .../content/docs/svelte/07-misc/06-v4-migration-guide.md     | 1 +
 .../content/docs/svelte/07-misc/07-v5-migration-guide.md     | 1 +
 apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md        | 1 +
 apps/svelte.dev/content/docs/svelte/07-misc/index.md         | 1 +
 .../content/docs/svelte/07-misc/xx-reactivity-indepth.md     | 1 +
 .../svelte.dev/content/docs/svelte/98-reference/20-svelte.md | 1 +
 .../content/docs/svelte/98-reference/21-svelte-action.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-animate.md    | 1 +
 .../content/docs/svelte/98-reference/21-svelte-compiler.md   | 1 +
 .../content/docs/svelte/98-reference/21-svelte-easing.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-events.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-legacy.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-motion.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-reactivity.md | 1 +
 .../content/docs/svelte/98-reference/21-svelte-server.md     | 1 +
 .../content/docs/svelte/98-reference/21-svelte-store.md      | 1 +
 .../content/docs/svelte/98-reference/21-svelte-transition.md | 1 +
 .../content/docs/svelte/98-reference/30-compiler-errors.md   | 1 +
 .../content/docs/svelte/98-reference/30-compiler-warnings.md | 1 +
 .../content/docs/svelte/98-reference/30-runtime-errors.md    | 1 +
 .../content/docs/svelte/98-reference/30-runtime-warnings.md  | 1 +
 apps/svelte.dev/content/docs/svelte/98-reference/index.md    | 1 +
 .../content/docs/svelte/99-legacy/00-legacy-overview.md      | 1 +
 .../content/docs/svelte/99-legacy/01-legacy-let.md           | 1 +
 .../docs/svelte/99-legacy/02-legacy-reactive-assignments.md  | 1 +
 .../content/docs/svelte/99-legacy/03-legacy-export-let.md    | 1 +
 .../svelte/99-legacy/04-legacy-$$props-and-$$restProps.md    | 1 +
 .../svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md | 1 +
 .../content/docs/svelte/99-legacy/20-legacy-slots.md         | 1 +
 .../content/docs/svelte/99-legacy/21-legacy-$$slots.md       | 1 +
 .../docs/svelte/99-legacy/22-legacy-svelte-fragment.md       | 1 +
 .../docs/svelte/99-legacy/30-legacy-svelte-component.md      | 1 +
 .../content/docs/svelte/99-legacy/31-legacy-svelte-self.md   | 1 +
 .../content/docs/svelte/99-legacy/40-legacy-component-api.md | 1 +
 apps/svelte.dev/content/docs/svelte/99-legacy/index.md       | 1 +
 apps/svelte.dev/content/docs/svelte/index.md                 | 1 +
 apps/svelte.dev/scripts/sync-docs/index.ts                   | 5 ++++-
 171 files changed, 180 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md b/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
index 9e4b22233e..dcbaafe321 100644
--- a/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
+++ b/apps/svelte.dev/content/docs/cli/10-introduction/10-overview.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Overview
 ---
 
diff --git a/apps/svelte.dev/content/docs/cli/10-introduction/index.md b/apps/svelte.dev/content/docs/cli/10-introduction/index.md
index 8f14f7a7c9..ef4e6600ad 100644
--- a/apps/svelte.dev/content/docs/cli/10-introduction/index.md
+++ b/apps/svelte.dev/content/docs/cli/10-introduction/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Introduction
 ---
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
index 7425d3f3ce..ccfa2ab287 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: sv create
 ---
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
index 0df56f7ac0..bc9cad653a 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: sv add
 ---
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
index 4ad025e0a1..ef1c492fb8 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: sv check
 ---
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index f0cdf18380..fa69344751 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: sv migrate
 ---
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/index.md b/apps/svelte.dev/content/docs/cli/20-commands/index.md
index 877406c009..1b7ca43a67 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/index.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Commands
 ---
diff --git a/apps/svelte.dev/content/docs/cli/index.md b/apps/svelte.dev/content/docs/cli/index.md
index 5f81cc866a..70c014b2bd 100644
--- a/apps/svelte.dev/content/docs/cli/index.md
+++ b/apps/svelte.dev/content/docs/cli/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: CLI
 ---
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
index d1a5ca1695..c9d7fabb7b 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Introduction
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md b/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md
index 4219449d1f..f04ea25f83 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Creating a project
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md b/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
index 34b938c0a8..ded0561d33 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Project structure
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md b/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
index f31f4617fd..b0cad130cf 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Web standards
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/index.md b/apps/svelte.dev/content/docs/kit/10-getting-started/index.md
index 9518c9e224..cdecf3e95d 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/index.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Getting started
 ---
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index b54074cdd7..9fd11b6137 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Routing
 ---
 
@@ -169,7 +170,7 @@ To create a layout that applies to every page, make a file called `src/routes/+l
 ...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:
 
 ```svelte
-<!--- file: src/routes/+layout.svelte --->
+<!---- file: src/routes/+layout.svelte --->
 <script>
 	let { children } = $props();
 </script>
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index bba63fd2be..6e75739519 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Loading data
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index 74d08c9fdc..e1238d7bdd 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Form actions
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
index 030ccc5934..4f869bbda3 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Page options
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index be74d59535..b97b716cde 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: State management
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/index.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/index.md
index 46f1e3708c..2e9bc14720 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/index.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Core concepts
 ---
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
index e641b4cfea..9d4d9d7b8a 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Building your app
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
index c12df05964..44bd9347de 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Adapters
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
index be55193b0f..1c5156e436 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Zero-config deployments
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
index 0a7c553c4a..e2ff627da3 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Node servers
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
index c1d4845af1..2635e56185 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Static site generation
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md
index 9747c4288a..5e7efde092 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Single-page apps
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 9a4b2b7e71..9a7b9ba8a6 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Cloudflare Pages
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index bd53dd4d8e..45f0c4f239 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Cloudflare Workers
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
index 575a706ff1..1cc05fe42a 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Netlify
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index f8150c0fd7..32dea12c43 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Vercel
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
index c4092af15f..5b2172023f 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Writing adapters
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/index.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/index.md
index 2c342fe660..1d249a2bd2 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/index.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Build and deploy
 ---
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
index 06122648f1..57de1834ff 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Advanced routing
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 9663d724fc..bd793afd5b 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Hooks
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
index 5fd17455ad..7baa05fe7b 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Errors
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/30-link-options.md b/apps/svelte.dev/content/docs/kit/30-advanced/30-link-options.md
index bf368876ff..e29fd0ebe1 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/30-link-options.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/30-link-options.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Link options
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md b/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
index 7213f8d86d..df3106ea56 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Service workers
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md b/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
index 54a49a2a30..a96704f66c 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Server-only modules
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md b/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
index cc7477f0fe..966295b36f 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/65-snapshots.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Snapshots
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
index af7d389599..a4d55ea88c 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Shallow routing
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
index e0c17a311b..a7f6fae0c3 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Packaging
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/index.md b/apps/svelte.dev/content/docs/kit/30-advanced/index.md
index f8c158a040..fec48b8786 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/index.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Advanced
 ---
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
index a68197ef8b..abf7a3dfc8 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Auth
 ---
 
@@ -18,6 +19,6 @@ Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks
 
 ## Guides
 
-[Lucia](https://lucia-auth.com/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
+[Lucia](https://lucia-next.pages.dev/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
 
-An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.
+An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-next.pages.dev/) rather than having multiple web frameworks inside their project.
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md b/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
index 2e358921dc..6a6f2c2142 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/05-performance.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Performance
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index 5c7040b32b..ee357ef099 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Images
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md b/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md
index a432acbe66..655f9a82df 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Accessibility
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md b/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
index 232d2393fe..cc218f8cff 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: SEO
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/index.md b/apps/svelte.dev/content/docs/kit/40-best-practices/index.md
index 182d497f4c..cdd6dafb79 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/index.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Best practices
 ---
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index 89e3db4b14..87be647d41 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Frequently asked questions
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
index 63e3fa5ad5..c3cf2deacd 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Integrations
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/25-debugging.md b/apps/svelte.dev/content/docs/kit/60-appendix/25-debugging.md
index 68c3f055ee..1cc33fdda1 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/25-debugging.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/25-debugging.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Breakpoint Debugging
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
index 09252136e4..9359480766 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Migrating to SvelteKit v2
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
index 18c13db6b5..1ca6dda3a7 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Migrating from Sapper
 rank: 1
 ---
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md b/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
index f59f0faadf..6b83a8f309 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Additional resources
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md b/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
index 3a175ccb36..ab4ab91112 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Glossary
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/index.md b/apps/svelte.dev/content/docs/kit/60-appendix/index.md
index a8e02800ad..80bf00f099 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/index.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Appendix
 ---
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 556736df0c..88d8014a88 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: @sveltejs/kit
 ---
 
@@ -132,7 +133,9 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(e: unknown): e is ActionFailure;
+function isActionFailure(
+	e: unknown
+): e is ActionFailure<undefined>;
 ```
 
 </div>
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-hooks.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-hooks.md
index 96a725f3b5..e92bc1eaed 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-hooks.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: @sveltejs/kit/hooks
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md
index a1ae80005d..523543ae5c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: @sveltejs/kit/node/polyfills
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
index c96e57ee4c..750a9a4b9d 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title:  @sveltejs/kit/node
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-vite.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-vite.md
index 71ab49110e..1bbe616d49 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-vite.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-vite.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title:  @sveltejs/kit/vite
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-environment.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-environment.md
index 043d8c8cb7..825f7a9669 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-environment.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-environment.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/environment
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
index e024a0ba0a..04318944c6 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/forms
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index 545866b660..a738fff563 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/navigation
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
index eb2416e52c..b6740cb8ea 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/paths
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
index f3d534ea8e..ff1d26f383 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/server
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
index 2698387c39..608d5e5793 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $app/stores
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-private.md b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-private.md
index 8ac9dd33bb..88d57bc8a6 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-private.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-private.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $env/dynamic/private
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-public.md b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-public.md
index 8ae6bd4d89..36118b00af 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-public.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-dynamic-public.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $env/dynamic/public
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-private.md b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-private.md
index 43410b8052..87b6389f27 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-private.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-private.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $env/static/private
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-public.md b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-public.md
index 2597e6729c..e29cd387c4 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-public.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/25-$env-static-public.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $env/static/public
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md b/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
index d9262a2954..9b94d47138 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/26-$lib.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $lib
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md b/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
index 0fe6457a17..6245eea1b7 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/27-$service-worker.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $service-worker
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 4c316a3ed0..54e0b52f54 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Configuration
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/52-cli.md b/apps/svelte.dev/content/docs/kit/98-reference/52-cli.md
index d365c446f1..e10ff0e94f 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/52-cli.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/52-cli.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Command Line Interface
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index b8211dbc4e..dd89b82a3f 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Types
 ---
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/index.md b/apps/svelte.dev/content/docs/kit/98-reference/index.md
index b98302768e..62998f606c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/index.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reference
 ---
diff --git a/apps/svelte.dev/content/docs/kit/index.md b/apps/svelte.dev/content/docs/kit/index.md
index e653b7f063..9a01dc4cf0 100644
--- a/apps/svelte.dev/content/docs/kit/index.md
+++ b/apps/svelte.dev/content/docs/kit/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: SvelteKit
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md b/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
index 5acbe4897b..fa4ae00207 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Overview
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
index e035e6d6df..34ec87a291 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Getting started
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
index cd98652370..2519a5d9a3 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-svelte-files.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: .svelte files
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md b/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
index 0e05484299..d34bcc8528 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: .svelte.js and .svelte.ts files
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/index.md b/apps/svelte.dev/content/docs/svelte/01-introduction/index.md
index 8f14f7a7c9..ef4e6600ad 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/index.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Introduction
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
index cad854d878..58a3dd3177 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Public API of a component
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
index d5e67ada71..01af210c7b 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reactivity fundamentals
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md b/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
index dc163ebdf1..2bae4b3561 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: What are runes?
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index 77140dc690..5cccb2456f 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $state
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index 6b38f99746..cc126e08f2 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $derived
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index b338795220..41f0c96a7d 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $effect
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
index 58e9b36f8e..25bd0b3cb4 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $props
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md b/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
index 14bc8ddbec..a8b1edcee7 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $bindable
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
index 1afe25deca..3123e8285e 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $inspect
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md b/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
index 7b5e041e5e..0cc6e0074f 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $host
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/index.md b/apps/svelte.dev/content/docs/svelte/02-runes/index.md
index 8ade901351..c9b200c460 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/index.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Runes
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
index b41dc187c3..1d62973bfb 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Basic markup
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/02-if.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/02-if.md
index 1378733e6f..ba9e314737 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/02-if.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/02-if.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {#if ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
index 70666f6a57..99b7eaebb4 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {#each ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/04-key.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/04-key.md
index 10b6ab4358..44b873c890 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/04-key.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/04-key.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {#key ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
index 842b3c7e32..862afcf738 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {#await ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index f8148f3dc3..c97b726df8 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {#snippet ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/07-@render.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/07-@render.md
index ecdf5cc216..7c0597230c 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/07-@render.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/07-@render.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {@render ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/08-@html.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/08-@html.md
index 30456fa666..5a05d83261 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/08-@html.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/08-@html.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {@html ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
index f4bde77c23..17dff83eec 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {@const ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md
index 15e32dcae9..856e6558c2 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: {@debug ...}
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 90046c8c45..41c08d7ba4 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: bind:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
index f3db72a772..1c4452a65d 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: use:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
index 51c11e8b34..88776441c4 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: transition:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
index f4e37c845e..38829f841a 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: in: and out:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
index a54e37f0b1..3872b6f8d6 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: animate:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
index cecbc7cf20..cb23ea958a 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: class:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/17-style.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/17-style.md
index 749376c6e2..201869e075 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/17-style.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/17-style.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: style:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/index.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/index.md
index 3c4523cb92..b16431f452 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/index.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Template syntax
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
index b73917997b..4d163ea3f1 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Control flow
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
index 4526d51335..df860650a3 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Data fetching
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md b/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
index f870d0a5b8..681e908b81 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Scoped styles
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/02-global-styles.md b/apps/svelte.dev/content/docs/svelte/04-styling/02-global-styles.md
index 8e9cf8d0cb..72d64c8114 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/02-global-styles.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/02-global-styles.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Global styles
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/03-custom-properties.md b/apps/svelte.dev/content/docs/svelte/04-styling/03-custom-properties.md
index 49984c6ce4..ae99f6044d 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/03-custom-properties.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/03-custom-properties.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Custom properties
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md b/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
index 4fc5cfa521..a0450e3d81 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/04-nested-style-elements.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Nested <style> elements
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/index.md b/apps/svelte.dev/content/docs/svelte/04-styling/index.md
index 5245bd516b..83334f212a 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/index.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Styling
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
index 15f249a771..8723e3ca88 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:boundary>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md
index d4aab36f3b..44205a42e5 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:window>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md
index 43f02865e6..36105c30ed 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:document>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
index d6536b0b74..3bd960d450 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:body>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md
index f7cd7ca20a..45b338b176 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:head>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md
index ef7dc32066..84ce5760d8 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:element>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md
index d29042e278..b159ddd2e2 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:options>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/index.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/index.md
index 132a1e803b..c7ca13a604 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/index.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Special elements
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
index 12d5576b40..c4a430ddfc 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Stores
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 30799215b6..04d94b9da9 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Context
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index 912bb3b2ca..cba3893bf6 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Lifecycle hooks
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md b/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
index ffd03d85a6..bfad9dbd80 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Imperative component API
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/index.md b/apps/svelte.dev/content/docs/svelte/06-runtime/index.md
index 06240892bd..1a372a4db3 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/index.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Runtime
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
index c8774e341f..afbfc63aba 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Testing
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
index fbf8817069..65b8cc1839 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: TypeScript
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
index 71c66f7edc..70240067c0 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Custom elements
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md
index 484931f20a..40c72ff6b4 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Svelte 4 migration guide
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 09ea84f26c..24c01f2705 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Svelte 5 migration guide
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
index b56c27af86..911cb9ec85 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Frequently asked questions
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/index.md b/apps/svelte.dev/content/docs/svelte/07-misc/index.md
index d8c5963f7f..1538145ec4 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/index.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Misc
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md b/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md
index b40072552f..91cc35b5c7 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reactivity in depth
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 821571e059..3160df1cbb 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
index 5ec1ccf3b4..5015f3e6c3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/action
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-animate.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-animate.md
index 466f185778..82c4a56dff 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-animate.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-animate.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/animate
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 1b9c7714bc..b167cd07f3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/compiler
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-easing.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-easing.md
index 4454fd47aa..6d4406d006 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-easing.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-easing.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/easing
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-events.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-events.md
index cbb94e05fc..d1d2e67364 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-events.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-events.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/events
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
index 28f610991d..6ddd73b436 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/legacy
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
index d37c7bf8bd..59046d7797 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/motion
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index 233f7b75d2..4d405ff241 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/reactivity
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
index cb604efbd4..3be98b0abd 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/server
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-store.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-store.md
index 8d60fd7be6..9cc183a41e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-store.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-store.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/store
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
index 5a3848c8ac..2a37bb7632 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: svelte/transition
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index dad143bf75..f4e14d254e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: 'Compiler errors'
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 9c5e904022..e44d0ff6ec 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: 'Compiler warnings'
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index d31e61404c..d85866cf79 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: 'Runtime errors'
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 0df154e8b9..8c0c55f910 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: 'Runtime warnings'
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/index.md b/apps/svelte.dev/content/docs/svelte/98-reference/index.md
index b98302768e..62998f606c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/index.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reference
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md b/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
index 638a77ec1a..d69c6351b2 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/00-legacy-overview.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Overview
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/01-legacy-let.md b/apps/svelte.dev/content/docs/svelte/99-legacy/01-legacy-let.md
index 0d1a0a72bf..993b29237a 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/01-legacy-let.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/01-legacy-let.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reactive let/var declarations
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md b/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
index 5abd481bfc..494c632f1f 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Reactive $: statements
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/03-legacy-export-let.md b/apps/svelte.dev/content/docs/svelte/99-legacy/03-legacy-export-let.md
index 877e105b1f..40cf669e3f 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/03-legacy-export-let.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/03-legacy-export-let.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: export let
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md b/apps/svelte.dev/content/docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md
index 33cac97035..b55ffe396d 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $$props and $$restProps
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md b/apps/svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md
index f2ee694cc1..234feac490 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: on:
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md b/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
index 3474782e93..125296c7d8 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/20-legacy-slots.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <slot>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/21-legacy-$$slots.md b/apps/svelte.dev/content/docs/svelte/99-legacy/21-legacy-$$slots.md
index 7ca1cef844..d72eabd880 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/21-legacy-$$slots.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/21-legacy-$$slots.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: $$slots
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/22-legacy-svelte-fragment.md b/apps/svelte.dev/content/docs/svelte/99-legacy/22-legacy-svelte-fragment.md
index 779931f947..f566961769 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/22-legacy-svelte-fragment.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/22-legacy-svelte-fragment.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:fragment>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
index 5d385a9c02..350e0b2042 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:component>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/31-legacy-svelte-self.md b/apps/svelte.dev/content/docs/svelte/99-legacy/31-legacy-svelte-self.md
index bfd140ac49..ff62b94664 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/31-legacy-svelte-self.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/31-legacy-svelte-self.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: <svelte:self>
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md b/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
index a08f53951c..6e815cd7c3 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/40-legacy-component-api.md
@@ -1,4 +1,5 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Imperative component API
 ---
 
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/index.md b/apps/svelte.dev/content/docs/svelte/99-legacy/index.md
index ab5307df49..ef63e1d42b 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/index.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Legacy APIs
 ---
diff --git a/apps/svelte.dev/content/docs/svelte/index.md b/apps/svelte.dev/content/docs/svelte/index.md
index 6904b1a252..9fd6ddf055 100644
--- a/apps/svelte.dev/content/docs/svelte/index.md
+++ b/apps/svelte.dev/content/docs/svelte/index.md
@@ -1,3 +1,4 @@
 ---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
 title: Svelte
 ---
diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 66d399a4a3..4f0f86c231 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -181,6 +181,9 @@ if (parsed.values.pull) {
 	}
 }
 
+const banner =
+	'NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts';
+
 async function sync(pkg: Package) {
 	if (!fs.existsSync(`${REPOS}/${pkg.name}/${pkg.docs}`)) {
 		console.warn(`No linked repo found for ${pkg.name}`);
@@ -203,7 +206,7 @@ async function sync(pkg: Package) {
 	for (const file of glob(`${dest}/**/*.md`)) {
 		const content = await preprocess(file, modules);
 
-		fs.writeFileSync(file, content);
+		fs.writeFileSync(file, content.replace('---', '---\n' + banner));
 	}
 }
 

From 25ea0c8e637ef618a727398b6dcb3a73b7ad8505 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 10 Dec 2024 13:37:20 -0500
Subject: [PATCH 197/453] Revert "fix: Update package version of
 codemirror/view to fix carret low contrast" (#975)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Revert "fix: Update package version of codemirror/view to fix carret low cont…"

This reverts commit 337799e60429c391cbeff3b00e0820c80c86a584.
---
 packages/editor/package.json   |  2 +-
 packages/repl/package.json     |  2 +-
 packages/site-kit/package.json |  2 +-
 pnpm-lock.yaml                 | 86 +++++++++++++++++-----------------
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 00c9cc95b8..57aa323ae3 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -42,7 +42,7 @@
 		"@codemirror/lint": "^6.8.2",
 		"@codemirror/search": "^6.5.6",
 		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.35.1",
+		"@codemirror/view": "^6.34.1",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 2959bd2f3d..e32aeeac1b 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -71,7 +71,7 @@
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/lint": "^6.7.0",
 		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.35.1",
+		"@codemirror/view": "^6.26.3",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 26b0817369..84abf82b95 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -31,7 +31,7 @@
 		"@codemirror/lint": "^6.4.1",
 		"@codemirror/search": "^6.5.2",
 		"@codemirror/state": "^6.2.1",
-		"@codemirror/view": "^6.35.1",
+		"@codemirror/view": "^6.17.1",
 		"@fontsource/atkinson-hyperlegible": "^5.1.0",
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c2e1d43dc4..131453b95e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,13 +213,13 @@ importers:
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.35.1)
+        version: 6.2.1(@codemirror/view@6.34.1)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -239,14 +239,14 @@ importers:
         specifier: ^6.4.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.35.1
-        version: 6.35.1
+        specifier: ^6.34.1
+        version: 6.34.1
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
         version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
@@ -294,13 +294,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.16.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.5.0
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.35.1)
+        version: 6.2.1(@codemirror/view@6.34.1)
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
@@ -320,17 +320,17 @@ importers:
         specifier: ^6.4.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.35.1
-        version: 6.35.1
+        specifier: ^6.26.3
+        version: 6.34.1
       '@jridgewell/sourcemap-codec':
         specifier: ^1.4.15
         version: 1.5.0
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
         version: 1.1.3(svelte@5.1.11)
@@ -412,13 +412,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.35.1)
+        version: 6.2.1(@codemirror/view@6.34.1)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -438,8 +438,8 @@ importers:
         specifier: ^6.2.1
         version: 6.4.1
       '@codemirror/view':
-        specifier: ^6.35.1
-        version: 6.35.1
+        specifier: ^6.17.1
+        version: 6.34.1
       '@fontsource/atkinson-hyperlegible':
         specifier: ^5.1.0
         version: 5.1.0
@@ -460,7 +460,7 @@ importers:
         version: 1.2.2
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
@@ -629,8 +629,8 @@ packages:
   '@codemirror/state@6.4.1':
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
 
-  '@codemirror/view@6.35.1':
-    resolution: {integrity: sha512-OUs9Z2UabSfJxSoEnuHUzGF0wHpWiJ/3IW/cgrKBqbp5Yj7XTYXQAQaLHZUP48ctRMvxgarEXTginrocUG8J7A==}
+  '@codemirror/view@6.34.1':
+    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
 
   '@emnapi/runtime@1.2.0':
     resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
@@ -3433,23 +3433,23 @@ snapshots:
 
   '@cloudflare/workers-types@4.20241127.0': {}
 
-  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)':
+  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
 
   '@codemirror/commands@6.5.0':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1)':
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@lezer/common': 1.2.2
@@ -3459,23 +3459,23 @@ snapshots:
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/css': 1.1.8
       '@lezer/html': 1.3.9
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/javascript': 1.4.17
 
@@ -3486,18 +3486,18 @@ snapshots:
 
   '@codemirror/lang-markdown@6.2.5':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/markdown': 1.3.0
 
   '@codemirror/language@6.10.3':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.1
@@ -3506,18 +3506,18 @@ snapshots:
   '@codemirror/lint@6.8.2':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       crelt: 1.0.6
 
   '@codemirror/search@6.5.6':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       crelt: 1.0.6
 
   '@codemirror/state@6.4.1': {}
 
-  '@codemirror/view@6.35.1':
+  '@codemirror/view@6.34.1':
     dependencies:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
@@ -4042,27 +4042,27 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
+  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/javascript': 1.4.17
       '@lezer/lr': 1.4.1
 
-  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)':
+  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
     dependencies:
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
 
   '@resvg/resvg-js-android-arm-eabi@2.6.2':
     optional: true
@@ -4766,13 +4766,13 @@ snapshots:
 
   codemirror@6.0.1(@lezer/common@1.2.2):
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.35.1
+      '@codemirror/view': 6.34.1
     transitivePeerDependencies:
       - '@lezer/common'
 

From 03e306648ccb6ff53ec45059f03da032c3b0d026 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:40:54 -0800
Subject: [PATCH 198/453] chore: upgrade SvelteKit (#977)

---
 apps/svelte.dev/package.json   |   8 +-
 packages/editor/package.json   |   4 +-
 packages/repl/package.json     |   4 +-
 packages/site-kit/package.json |   4 +-
 pnpm-lock.yaml                 | 967 +++++++++++++++++++++------------
 5 files changed, 620 insertions(+), 367 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 71cb2eb8cb..2be61c447c 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -51,9 +51,9 @@
 		"@cloudflare/workers-types": "^4.20241127.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
-		"@sveltejs/adapter-vercel": "^5.4.7",
+		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/enhanced-img": "^0.4.3",
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.10.1",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
 		"@types/cookie": "^0.6.0",
@@ -72,8 +72,8 @@
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"svelte": "5.3.0",
-		"svelte-check": "^4.0.0",
-		"svelte-preprocess": "^5.1.4",
+		"svelte-check": "^4.1.1",
+		"svelte-preprocess": "^6.0.3",
 		"tiny-glob": "^0.2.9",
 		"tsx": "^4.19.0",
 		"typescript": "^5.5.4",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 57aa323ae3..bdc676d3e0 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -46,7 +46,7 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.10.1",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/repl": "workspace:*",
 		"@sveltejs/site-kit": "workspace:*",
@@ -56,7 +56,7 @@
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.2.0",
 		"svelte": "^5.1.11",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.1.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
 	},
diff --git a/packages/repl/package.json b/packages/repl/package.json
index e32aeeac1b..94513610e8 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -49,14 +49,14 @@
 	"devDependencies": {
 		"@lezer/common": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.10.1",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"publint": "^0.1.9",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
 	},
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 84abf82b95..af31fe95c2 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -46,7 +46,7 @@
 		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.10.1",
 		"@types/node": "^20.12.11",
 		"flexsearch": "^0.7.43",
 		"magic-string": "^0.30.11",
@@ -54,7 +54,7 @@
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"svelte": "5.1.11",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 131453b95e..185bb2e498 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
+        version: 1.1.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -115,14 +115,14 @@ importers:
         specifier: ^2.43.4
         version: 2.43.4
       '@sveltejs/adapter-vercel':
-        specifier: ^5.4.7
-        version: 5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        specifier: ^5.5.2
+        version: 5.5.2(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
         version: 0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.10.1
+        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
@@ -178,11 +178,11 @@ importers:
         specifier: 5.3.0
         version: 5.3.0
       svelte-check:
-        specifier: ^4.0.0
-        version: 4.0.1(svelte@5.3.0)(typescript@5.5.4)
+        specifier: ^4.1.1
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4)
       svelte-preprocess:
-        specifier: ^5.1.4
-        version: 5.1.4(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4)
+        specifier: ^6.0.3
+        version: 6.0.3(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -249,10 +249,10 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.10.1
+        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.3.0)(typescript@5.5.4)
@@ -281,8 +281,8 @@ importers:
         specifier: ^5.1.11
         version: 5.3.0
       svelte-check:
-        specifier: ^4.0.0
-        version: 4.0.1(svelte@5.3.0)(typescript@5.5.4)
+        specifier: ^4.1.1
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -376,10 +376,10 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.10.1
+        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
@@ -399,8 +399,8 @@ importers:
         specifier: ^0.1.9
         version: 0.1.16
       svelte-check:
-        specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
+        specifier: ^4.1.1
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -478,8 +478,8 @@ importers:
         version: 0.9.4(svelte@5.1.11)
     devDependencies:
       '@sveltejs/kit':
-        specifier: ^2.8.0
-        version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.10.1
+        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -502,8 +502,8 @@ importers:
         specifier: 5.1.11
         version: 5.1.11
       svelte-check:
-        specifier: ^4.0.0
-        version: 4.0.1(svelte@5.1.11)(typescript@5.5.4)
+        specifier: ^4.1.1
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -647,6 +647,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.24.0':
+    resolution: {integrity: sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.21.5':
     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
@@ -659,6 +665,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.24.0':
+    resolution: {integrity: sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.21.5':
     resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
@@ -671,6 +683,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.24.0':
+    resolution: {integrity: sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.21.5':
     resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
@@ -683,6 +701,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.24.0':
+    resolution: {integrity: sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.21.5':
     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
@@ -695,6 +719,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.24.0':
+    resolution: {integrity: sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.21.5':
     resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
@@ -707,6 +737,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.24.0':
+    resolution: {integrity: sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.21.5':
     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
@@ -719,6 +755,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.24.0':
+    resolution: {integrity: sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.21.5':
     resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
@@ -731,6 +773,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.24.0':
+    resolution: {integrity: sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.21.5':
     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
@@ -743,6 +791,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.24.0':
+    resolution: {integrity: sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.21.5':
     resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
@@ -755,6 +809,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.24.0':
+    resolution: {integrity: sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.21.5':
     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
@@ -767,6 +827,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.24.0':
+    resolution: {integrity: sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.21.5':
     resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
@@ -779,6 +845,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.24.0':
+    resolution: {integrity: sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.21.5':
     resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
@@ -791,6 +863,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.24.0':
+    resolution: {integrity: sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.21.5':
     resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
@@ -803,6 +881,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.24.0':
+    resolution: {integrity: sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.21.5':
     resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
@@ -815,6 +899,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.24.0':
+    resolution: {integrity: sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.21.5':
     resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
@@ -827,6 +917,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.24.0':
+    resolution: {integrity: sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.21.5':
     resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
@@ -839,6 +935,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.24.0':
+    resolution: {integrity: sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-x64@0.21.5':
     resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
@@ -851,12 +953,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.24.0':
+    resolution: {integrity: sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.23.1':
     resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.24.0':
+    resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.21.5':
     resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
@@ -869,6 +983,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.24.0':
+    resolution: {integrity: sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/sunos-x64@0.21.5':
     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
@@ -881,6 +1001,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.24.0':
+    resolution: {integrity: sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.21.5':
     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
@@ -893,6 +1019,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.24.0':
+    resolution: {integrity: sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.21.5':
     resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
@@ -905,6 +1037,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.24.0':
+    resolution: {integrity: sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.21.5':
     resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
@@ -917,6 +1055,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.24.0':
+    resolution: {integrity: sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@fontsource/atkinson-hyperlegible@5.1.0':
     resolution: {integrity: sha512-2qT7mpgHWYM0bB3+5zbcfy49PD5xil/8t3maXxdgFpJo2dFaD9qBgk5u72KgK7ZtmGOWbCjCoAk5e+vpOIqfvA==}
 
@@ -1037,6 +1181,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
   '@jimp/core@1.1.1':
     resolution: {integrity: sha512-u0AvrO45cfSeXyTpfj6s3mxDJGA5SlfEMdlvWLWi5aSm14/DRVd60exvt5vGrAHA+FALIEZ6R17341OHHy0tVg==}
 
@@ -1169,8 +1321,9 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@mapbox/node-pre-gyp@1.0.11':
-    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
+  '@mapbox/node-pre-gyp@2.0.0-rc.0':
+    resolution: {integrity: sha512-nhSMNprz3WmeRvd8iUs5JqkKr0Ncx46JtPxM3AhXes84XpSJfmIwKeWXRpsr53S7kqPkQfPhzrMFUxSNb23qSA==}
+    engines: {node: '>=18'}
     hasBin: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -1185,6 +1338,10 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -1296,12 +1453,8 @@ packages:
   '@rollup/browser@4.17.2':
     resolution: {integrity: sha512-a+efgpgQ7qODC0ltFcap0iPKT4hTmYUb6S7h8lXek2XVvfWJ5OmVI8FpbgZ5SJkTOk5G6lvP6vYC35xzhDy+ag==}
 
-  '@rollup/pluginutils@4.2.1':
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-
-  '@rollup/pluginutils@5.1.0':
-    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1439,8 +1592,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/adapter-vercel@5.4.7':
-    resolution: {integrity: sha512-yOKz0fO6G35UbTgEm8VWVeZqnOmMjhxANJt0hlsCo9OKcbLq2cTuh6AvVmcvhg8BzLEspiF4gv8ENtuJgHWvgA==}
+  '@sveltejs/adapter-vercel@5.5.2':
+    resolution: {integrity: sha512-6NpumKJ3m9Y6mkSFw4Z8YnaJZc42OWLkSFCk5hD6pLrS4f+b9JVBaXpKB/xkxf1Kf7JpzZtNZKbAaoRrTtJ+Hw==}
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
@@ -1455,14 +1608,14 @@ packages:
       svelte: ^5.0.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.8.0':
-    resolution: {integrity: sha512-HCiWupCuKJQ3aPaC4Xc6lpPdjOOnoGzEiYjOqMqppdtfGtY2ABrx932Vw66ZwS2RGXc0BmZvFvNq5SzqlmDVLg==}
+  '@sveltejs/kit@2.10.1':
+    resolution: {integrity: sha512-2aormKTn94aU8Lfxj4gcbRGh1Dyw0hCFlNo51+njdRDn9P2ERuWC4bOtTuoy5HJpPYR3AH8oaaEjKDWUHbi1OA==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1 || ^5.0.0
       svelte: ^4.0.0 || ^5.0.0-next.0
-      vite: ^5.0.3
+      vite: ^5.0.3 || ^6.0.0
 
   '@sveltejs/package@2.3.1':
     resolution: {integrity: sha512-JvR2J4ost1oCn1CSdqenYRwGX/1RX+7LN+VZ71aPnz3JAlIFaEKQd1pBxlb+OSQTfeugJO0W39gB9voAbBO5ow==}
@@ -1560,9 +1713,6 @@ packages:
   '@types/phoenix@1.6.4':
     resolution: {integrity: sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA==}
 
-  '@types/pug@2.0.10':
-    resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
-
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -1591,8 +1741,8 @@ packages:
       react:
         optional: true
 
-  '@vercel/nft@0.27.2':
-    resolution: {integrity: sha512-7LeioS1yE5hwPpQfD3DdH04tuugKjo5KrJk3yK5kAI3Lh76iSsK/ezoFQfzuT08X3ZASQOd1y9ePjLNI9+TxTQ==}
+  '@vercel/nft@0.27.9':
+    resolution: {integrity: sha512-pTs7OchHQmSYJPR0puVQCWw/NqzuvAtnAhBurz21lq4Y4KqWoMpYKqmikkETG5r1bHNCM/hQMZ5JiRr9mhOkyg==}
     engines: {node: '>=16'}
     hasBin: true
 
@@ -1652,8 +1802,9 @@ packages:
   '@webcontainer/api@1.1.9':
     resolution: {integrity: sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg==}
 
-  abbrev@1.1.1:
-    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
@@ -1674,9 +1825,9 @@ packages:
     resolution: {integrity: sha512-DnyqqifT4Jrcvb8USYjp6FHtBpEIz1mnXu6pTRHZ0RL69LbQYiO+0lDFg5+OKA7U29oWSs3a/i8fhn8ZcceIWg==}
     engines: {node: '>=12.0'}
 
-  agent-base@6.0.2:
-    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
-    engines: {node: '>= 6.0.0'}
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
 
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
@@ -1686,6 +1837,10 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -1698,6 +1853,10 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
   ansi-to-html@0.7.2:
     resolution: {integrity: sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==}
     engines: {node: '>=8.0.0'}
@@ -1710,14 +1869,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  aproba@2.0.0:
-    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
-
-  are-we-there-yet@2.0.0:
-    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
-    engines: {node: '>=10'}
-    deprecated: This package is no longer supported.
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -1786,9 +1937,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -1835,9 +1983,9 @@ packages:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
 
-  chownr@2.0.0:
-    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
-    engines: {node: '>=10'}
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
 
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
@@ -1862,10 +2010,6 @@ packages:
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
-  color-support@1.1.3:
-    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
-    hasBin: true
-
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -1883,8 +2027,9 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  console-control-strings@1.1.0:
-    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
 
   cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
@@ -1900,6 +2045,10 @@ packages:
   cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
 
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
   css-background-parser@0.1.0:
     resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
 
@@ -1926,8 +2075,8 @@ packages:
     resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
     engines: {node: '>=12'}
 
-  debug@4.3.7:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -1951,9 +2100,6 @@ packages:
     engines: {node: '>=8.0.0'}
     hasBin: true
 
-  delegates@1.0.0:
-    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -1988,6 +2134,9 @@ packages:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
     engines: {node: '>=12'}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
   electron-to-chromium@1.4.798:
     resolution: {integrity: sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==}
 
@@ -1997,6 +2146,9 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -2004,9 +2156,6 @@ packages:
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
-  es6-promise@3.3.1:
-    resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
-
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -2017,6 +2166,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.24.0:
+    resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.1.2:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
@@ -2062,8 +2216,8 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
-  fdir@6.3.0:
-    resolution: {integrity: sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==}
+  fdir@6.4.2:
+    resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -2102,6 +2256,10 @@ packages:
     resolution: {integrity: sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==}
     engines: {node: '>=6'}
 
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+    engines: {node: '>=14'}
+
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -2110,10 +2268,6 @@ packages:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
 
-  fs-minipass@2.1.0:
-    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
-    engines: {node: '>= 8'}
-
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -2122,11 +2276,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  gauge@3.0.2:
-    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
-    engines: {node: '>=10'}
-    deprecated: This package is no longer supported.
-
   get-func-name@2.0.2:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
 
@@ -2140,6 +2289,10 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -2170,9 +2323,6 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  has-unicode@2.0.1:
-    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
-
   hast-util-to-html@9.0.3:
     resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
 
@@ -2186,9 +2336,9 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  https-proxy-agent@5.0.1:
-    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
-    engines: {node: '>= 6'}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
 
   human-id@1.0.2:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
@@ -2266,6 +2416,9 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
   jimp@1.1.1:
     resolution: {integrity: sha512-ULh65TPCPxj9le8me4BM8pYOx6+6rn7wKXqlYU0iE5geCX4osXIv2Scr44DiNVTZhk+BlNsSr36tY23gBYjHow==}
 
@@ -2376,6 +2529,9 @@ packages:
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
 
@@ -2386,10 +2542,6 @@ packages:
   magic-string@0.30.12:
     resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
 
-  make-dir@3.1.0:
-    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
-    engines: {node: '>=8'}
-
   marked@14.1.2:
     resolution: {integrity: sha512-f3r0yqpz31VXiDB/wj9GaOB0a2PRLQl6vJmXiFrniNwjkKdvakqJRULhjFKJpxOchlCRiG5fcacoUZY5Xa6PEQ==}
     engines: {node: '>= 18'}
@@ -2426,10 +2578,6 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -2437,27 +2585,20 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  minipass@3.3.6:
-    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
-    engines: {node: '>=8'}
-
-  minipass@5.0.0:
-    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
-    engines: {node: '>=8'}
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  minizlib@2.1.2:
-    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
-    engines: {node: '>= 8'}
-
-  mkdirp@0.5.6:
-    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
-    hasBin: true
+  minizlib@3.0.1:
+    resolution: {integrity: sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==}
+    engines: {node: '>= 18'}
 
-  mkdirp@1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -2489,16 +2630,16 @@ packages:
       encoding:
         optional: true
 
-  node-gyp-build@4.8.1:
-    resolution: {integrity: sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==}
+  node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
     hasBin: true
 
   node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
 
-  nopt@5.0.0:
-    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
-    engines: {node: '>=6'}
+  nopt@8.0.0:
+    resolution: {integrity: sha512-1L/fTJ4UmV/lUxT2Uf006pfZKTvAgCF+chz+0OgBHO8u2Z67pE7AaAUUj7CJy0lXqHmymUvGFt6NE9R3HER0yw==}
+    engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
   normalize-path@3.0.0:
@@ -2518,14 +2659,6 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     hasBin: true
 
-  npmlog@5.0.1:
-    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
-    deprecated: This package is no longer supported.
-
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
   omggif@1.0.10:
     resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==}
 
@@ -2570,6 +2703,9 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
@@ -2599,6 +2735,14 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -2614,13 +2758,17 @@ packages:
     resolution: {integrity: sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==}
     engines: {node: '>=8'}
 
-  picocolors@1.1.0:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -2738,14 +2886,8 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@2.7.1:
-    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
+  rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
   rollup@4.21.2:
@@ -2766,9 +2908,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sander@0.5.1:
-    resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
-
   satori-html@0.3.2:
     resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==}
 
@@ -2779,10 +2918,6 @@ packages:
   sax@1.4.1:
     resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
   semver@7.6.3:
     resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
@@ -2791,9 +2926,6 @@ packages:
   server-only@0.0.1:
     resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
 
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
@@ -2805,10 +2937,18 @@ packages:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
 
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
   shebang-regex@1.0.0:
     resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
     engines: {node: '>=0.10.0'}
 
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
   shiki@1.22.0:
     resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==}
 
@@ -2818,6 +2958,10 @@ packages:
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -2829,10 +2973,6 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  sorcery@0.11.0:
-    resolution: {integrity: sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==}
-    hasBin: true
-
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -2856,6 +2996,10 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
   string.prototype.codepointat@0.2.1:
     resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
 
@@ -2869,14 +3013,14 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
   strtok3@6.3.0:
     resolution: {integrity: sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==}
     engines: {node: '>=10'}
@@ -2892,8 +3036,8 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  svelte-check@4.0.1:
-    resolution: {integrity: sha512-AuWnCZdREoOzMhoptHPUUPYUxLNdXSkoZnPnlv19SZJJimRzLmjjZLKsOiRB4AnhgX+56/WSEdvkWXI/q2BSsA==}
+  svelte-check@4.1.1:
+    resolution: {integrity: sha512-NfaX+6Qtc8W/CyVGS/F7/XdiSSyXz+WGYA9ZWV3z8tso14V2vzjfXviKaTFEzB7g8TqfgO2FOzP6XT4ApSTUTw==}
     engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
@@ -2911,21 +3055,21 @@ packages:
     peerDependencies:
       svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
 
-  svelte-preprocess@5.1.4:
-    resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
-    engines: {node: '>= 16.0.0'}
+  svelte-preprocess@6.0.3:
+    resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
+    engines: {node: '>= 18.0.0'}
     peerDependencies:
       '@babel/core': ^7.10.2
       coffeescript: ^2.5.1
       less: ^3.11.3 || ^4.0.0
       postcss: ^7 || ^8
-      postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      postcss-load-config: '>=3'
       pug: ^3.0.0
       sass: ^1.26.8
-      stylus: ^0.55.0
+      stylus: '>=0.55'
       sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-      svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-      typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
+      svelte: ^4.0.0 || ^5.0.0-next.100 || ^5.0.0
+      typescript: ^5.0.0
     peerDependenciesMeta:
       '@babel/core':
         optional: true
@@ -2962,9 +3106,9 @@ packages:
     resolution: {integrity: sha512-R9v8vAlW/bO94S7QdBJMYveMyI8gMqNnGOtEVLPveNVws+CEiQHn8BNWrtIIpkB28IXLnmjV2HaRTJz31XJmIw==}
     engines: {node: '>=18'}
 
-  tar@6.2.1:
-    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
-    engines: {node: '>=10'}
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
 
   tarparser@0.0.4:
     resolution: {integrity: sha512-H3+VR6ys/N4eRBYbcyKuy4i0lKAxW/tx+wZANTFPfXjHLkz7UDs7V9g0rdGJDsVWYyqnmvmLM7YqWZ7yrtoReA==}
@@ -3191,13 +3335,23 @@ packages:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
 
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
     hasBin: true
 
-  wide-align@1.1.5:
-    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
 
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -3228,8 +3382,9 @@ packages:
   yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
 
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
 
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
@@ -3260,7 +3415,7 @@ snapshots:
   '@babel/code-frame@7.25.7':
     dependencies:
       '@babel/highlight': 7.25.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   '@babel/helper-validator-identifier@7.25.7': {}
 
@@ -3269,7 +3424,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.25.7
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   '@babel/runtime@7.24.7':
     dependencies:
@@ -3534,141 +3689,213 @@ snapshots:
   '@esbuild/aix-ppc64@0.23.1':
     optional: true
 
+  '@esbuild/aix-ppc64@0.24.0':
+    optional: true
+
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
   '@esbuild/android-arm64@0.23.1':
     optional: true
 
+  '@esbuild/android-arm64@0.24.0':
+    optional: true
+
   '@esbuild/android-arm@0.21.5':
     optional: true
 
   '@esbuild/android-arm@0.23.1':
     optional: true
 
+  '@esbuild/android-arm@0.24.0':
+    optional: true
+
   '@esbuild/android-x64@0.21.5':
     optional: true
 
   '@esbuild/android-x64@0.23.1':
     optional: true
 
+  '@esbuild/android-x64@0.24.0':
+    optional: true
+
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
   '@esbuild/darwin-arm64@0.23.1':
     optional: true
 
+  '@esbuild/darwin-arm64@0.24.0':
+    optional: true
+
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
   '@esbuild/darwin-x64@0.23.1':
     optional: true
 
+  '@esbuild/darwin-x64@0.24.0':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-arm64@0.23.1':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.24.0':
+    optional: true
+
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-x64@0.23.1':
     optional: true
 
+  '@esbuild/freebsd-x64@0.24.0':
+    optional: true
+
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
   '@esbuild/linux-arm64@0.23.1':
     optional: true
 
+  '@esbuild/linux-arm64@0.24.0':
+    optional: true
+
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
   '@esbuild/linux-arm@0.23.1':
     optional: true
 
+  '@esbuild/linux-arm@0.24.0':
+    optional: true
+
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
   '@esbuild/linux-ia32@0.23.1':
     optional: true
 
+  '@esbuild/linux-ia32@0.24.0':
+    optional: true
+
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
   '@esbuild/linux-loong64@0.23.1':
     optional: true
 
+  '@esbuild/linux-loong64@0.24.0':
+    optional: true
+
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
   '@esbuild/linux-mips64el@0.23.1':
     optional: true
 
+  '@esbuild/linux-mips64el@0.24.0':
+    optional: true
+
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
   '@esbuild/linux-ppc64@0.23.1':
     optional: true
 
+  '@esbuild/linux-ppc64@0.24.0':
+    optional: true
+
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
   '@esbuild/linux-riscv64@0.23.1':
     optional: true
 
+  '@esbuild/linux-riscv64@0.24.0':
+    optional: true
+
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
   '@esbuild/linux-s390x@0.23.1':
     optional: true
 
+  '@esbuild/linux-s390x@0.24.0':
+    optional: true
+
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
   '@esbuild/linux-x64@0.23.1':
     optional: true
 
+  '@esbuild/linux-x64@0.24.0':
+    optional: true
+
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/netbsd-x64@0.23.1':
     optional: true
 
+  '@esbuild/netbsd-x64@0.24.0':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.23.1':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.24.0':
+    optional: true
+
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/openbsd-x64@0.23.1':
     optional: true
 
+  '@esbuild/openbsd-x64@0.24.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
   '@esbuild/sunos-x64@0.23.1':
     optional: true
 
+  '@esbuild/sunos-x64@0.24.0':
+    optional: true
+
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
   '@esbuild/win32-arm64@0.23.1':
     optional: true
 
+  '@esbuild/win32-arm64@0.24.0':
+    optional: true
+
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
   '@esbuild/win32-ia32@0.23.1':
     optional: true
 
+  '@esbuild/win32-ia32@0.24.0':
+    optional: true
+
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
   '@esbuild/win32-x64@0.23.1':
     optional: true
 
+  '@esbuild/win32-x64@0.24.0':
+    optional: true
+
   '@fontsource/atkinson-hyperlegible@5.1.0': {}
 
   '@fontsource/dm-serif-display@5.1.0': {}
@@ -3754,6 +3981,19 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
   '@jimp/core@1.1.1':
     dependencies:
       '@jimp/file-ops': 1.1.1
@@ -4013,17 +4253,15 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@mapbox/node-pre-gyp@1.0.11':
+  '@mapbox/node-pre-gyp@2.0.0-rc.0':
     dependencies:
+      consola: 3.2.3
       detect-libc: 2.0.3
-      https-proxy-agent: 5.0.1
-      make-dir: 3.1.0
+      https-proxy-agent: 7.0.6
       node-fetch: 2.7.0
-      nopt: 5.0.0
-      npmlog: 5.0.1
-      rimraf: 3.0.2
+      nopt: 8.0.0
       semver: 7.6.3
-      tar: 6.2.1
+      tar: 7.4.3
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4040,6 +4278,9 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@polka/url@1.0.0-next.28': {}
 
   '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
@@ -4127,16 +4368,11 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
 
-  '@rollup/pluginutils@4.2.1':
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-
-  '@rollup/pluginutils@5.1.0(rollup@4.21.2)':
+  '@rollup/pluginutils@5.1.3(rollup@4.21.2)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
       rollup: 4.21.2
 
@@ -4271,28 +4507,29 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.7(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@vercel/nft': 0.27.2
-      esbuild: 0.21.5
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@vercel/nft': 0.27.9(rollup@4.21.2)
+      esbuild: 0.24.0
     transitivePeerDependencies:
       - encoding
+      - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
   '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
@@ -4306,7 +4543,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4324,7 +4561,7 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4342,7 +4579,7 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4389,7 +4626,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       svelte: 5.1.11
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
@@ -4398,7 +4635,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       svelte: 5.3.0
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
@@ -4407,7 +4644,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       svelte: 5.3.0
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
@@ -4416,7 +4653,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4429,7 +4666,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4442,7 +4679,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.3.7
+      debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4509,8 +4746,6 @@ snapshots:
 
   '@types/phoenix@1.6.4': {}
 
-  '@types/pug@2.0.10': {}
-
   '@types/semver@7.5.8': {}
 
   '@types/unist@3.0.3': {}
@@ -4521,7 +4756,7 @@ snapshots:
 
   '@typescript/vfs@1.6.0(typescript@5.5.4)':
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
@@ -4532,10 +4767,10 @@ snapshots:
     dependencies:
       server-only: 0.0.1
 
-  '@vercel/nft@0.27.2':
+  '@vercel/nft@0.27.9(rollup@4.21.2)':
     dependencies:
-      '@mapbox/node-pre-gyp': 1.0.11
-      '@rollup/pluginutils': 4.2.1
+      '@mapbox/node-pre-gyp': 2.0.0-rc.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.21.2)
       acorn: 8.14.0
       acorn-import-attributes: 1.9.5(acorn@8.14.0)
       async-sema: 3.1.1
@@ -4543,16 +4778,17 @@ snapshots:
       estree-walker: 2.0.2
       glob: 7.2.3
       graceful-fs: 4.2.11
-      micromatch: 4.0.7
-      node-gyp-build: 4.8.1
+      node-gyp-build: 4.8.4
+      picomatch: 4.0.2
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
+      - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.3.0
 
   '@vitest/expect@2.1.2':
@@ -4597,7 +4833,7 @@ snapshots:
 
   '@webcontainer/api@1.1.9': {}
 
-  abbrev@1.1.1: {}
+  abbrev@2.0.0: {}
 
   acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
@@ -4611,16 +4847,14 @@ snapshots:
 
   adm-zip@0.5.14: {}
 
-  agent-base@6.0.2:
-    dependencies:
-      debug: 4.3.7
-    transitivePeerDependencies:
-      - supports-color
+  agent-base@7.1.3: {}
 
   ansi-colors@4.1.3: {}
 
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.1.0: {}
+
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
@@ -4631,6 +4865,8 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
+  ansi-styles@6.2.1: {}
+
   ansi-to-html@0.7.2:
     dependencies:
       entities: 2.2.0
@@ -4642,13 +4878,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  aproba@2.0.0: {}
-
-  are-we-there-yet@2.0.0:
-    dependencies:
-      delegates: 1.0.0
-      readable-stream: 3.6.2
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -4707,8 +4936,6 @@ snapshots:
       node-releases: 2.0.14
       update-browserslist-db: 1.0.16(browserslist@4.23.1)
 
-  buffer-crc32@0.2.13: {}
-
   cac@6.7.14: {}
 
   camelize@1.0.1: {}
@@ -4760,7 +4987,7 @@ snapshots:
     dependencies:
       readdirp: 4.0.2
 
-  chownr@2.0.0: {}
+  chownr@3.0.0: {}
 
   ci-info@3.9.0: {}
 
@@ -4793,8 +5020,6 @@ snapshots:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
 
-  color-support@1.1.3: {}
-
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
@@ -4808,7 +5033,7 @@ snapshots:
 
   concat-map@0.0.1: {}
 
-  console-control-strings@1.1.0: {}
+  consola@3.2.3: {}
 
   cookie@0.6.0: {}
 
@@ -4822,6 +5047,12 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
   css-background-parser@0.1.0: {}
 
   css-box-shadow@1.0.0-3: {}
@@ -4848,7 +5079,7 @@ snapshots:
     dependencies:
       d3-array: 3.2.4
 
-  debug@4.3.7:
+  debug@4.4.0:
     dependencies:
       ms: 2.1.3
 
@@ -4860,8 +5091,6 @@ snapshots:
 
   degit@2.8.4: {}
 
-  delegates@1.0.0: {}
-
   dequal@2.0.3: {}
 
   detect-indent@6.1.0: {}
@@ -4884,12 +5113,16 @@ snapshots:
 
   dotenv@16.4.5: {}
 
+  eastasianwidth@0.2.0: {}
+
   electron-to-chromium@1.4.798: {}
 
   emoji-regex@10.3.0: {}
 
   emoji-regex@8.0.0: {}
 
+  emoji-regex@9.2.2: {}
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -4897,8 +5130,6 @@ snapshots:
 
   entities@2.2.0: {}
 
-  es6-promise@3.3.1: {}
-
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -4952,6 +5183,33 @@ snapshots:
       '@esbuild/win32-ia32': 0.23.1
       '@esbuild/win32-x64': 0.23.1
 
+  esbuild@0.24.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.24.0
+      '@esbuild/android-arm': 0.24.0
+      '@esbuild/android-arm64': 0.24.0
+      '@esbuild/android-x64': 0.24.0
+      '@esbuild/darwin-arm64': 0.24.0
+      '@esbuild/darwin-x64': 0.24.0
+      '@esbuild/freebsd-arm64': 0.24.0
+      '@esbuild/freebsd-x64': 0.24.0
+      '@esbuild/linux-arm': 0.24.0
+      '@esbuild/linux-arm64': 0.24.0
+      '@esbuild/linux-ia32': 0.24.0
+      '@esbuild/linux-loong64': 0.24.0
+      '@esbuild/linux-mips64el': 0.24.0
+      '@esbuild/linux-ppc64': 0.24.0
+      '@esbuild/linux-riscv64': 0.24.0
+      '@esbuild/linux-s390x': 0.24.0
+      '@esbuild/linux-x64': 0.24.0
+      '@esbuild/netbsd-x64': 0.24.0
+      '@esbuild/openbsd-arm64': 0.24.0
+      '@esbuild/openbsd-x64': 0.24.0
+      '@esbuild/sunos-x64': 0.24.0
+      '@esbuild/win32-arm64': 0.24.0
+      '@esbuild/win32-ia32': 0.24.0
+      '@esbuild/win32-x64': 0.24.0
+
   escalade@3.1.2: {}
 
   escape-html@1.0.3: {}
@@ -4995,7 +5253,9 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fdir@6.3.0: {}
+  fdir@6.4.2(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
 
   fflate@0.7.4: {}
 
@@ -5030,6 +5290,11 @@ snapshots:
 
   flru@1.0.2: {}
 
+  foreground-child@3.3.0:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -5042,27 +5307,11 @@ snapshots:
       jsonfile: 4.0.0
       universalify: 0.1.2
 
-  fs-minipass@2.1.0:
-    dependencies:
-      minipass: 3.3.6
-
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
     optional: true
 
-  gauge@3.0.2:
-    dependencies:
-      aproba: 2.0.0
-      color-support: 1.1.3
-      console-control-strings: 1.1.0
-      has-unicode: 2.0.1
-      object-assign: 4.1.1
-      signal-exit: 3.0.7
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wide-align: 1.1.5
-
   get-func-name@2.0.2: {}
 
   get-tsconfig@4.8.0:
@@ -5078,6 +5327,15 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -5114,8 +5372,6 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  has-unicode@2.0.1: {}
-
   hast-util-to-html@9.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -5138,10 +5394,10 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  https-proxy-agent@5.0.1:
+  https-proxy-agent@7.0.6:
     dependencies:
-      agent-base: 6.0.2
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -5204,6 +5460,12 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jimp@1.1.1:
     dependencies:
       '@jimp/core': 1.1.1
@@ -5324,6 +5586,8 @@ snapshots:
     dependencies:
       tslib: 2.6.3
 
+  lru-cache@10.4.3: {}
+
   lru-cache@4.1.5:
     dependencies:
       pseudomap: 1.0.2
@@ -5335,10 +5599,6 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  make-dir@3.1.0:
-    dependencies:
-      semver: 6.3.1
-
   marked@14.1.2: {}
 
   mdast-util-to-hast@13.2.0:
@@ -5379,8 +5639,6 @@ snapshots:
 
   mime@3.0.0: {}
 
-  min-indent@1.0.1: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -5389,24 +5647,18 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimist@1.2.8: {}
-
-  minipass@3.3.6:
+  minimatch@9.0.5:
     dependencies:
-      yallist: 4.0.0
+      brace-expansion: 2.0.1
 
-  minipass@5.0.0: {}
+  minipass@7.1.2: {}
 
-  minizlib@2.1.2:
+  minizlib@3.0.1:
     dependencies:
-      minipass: 3.3.6
-      yallist: 4.0.0
+      minipass: 7.1.2
+      rimraf: 5.0.10
 
-  mkdirp@0.5.6:
-    dependencies:
-      minimist: 1.2.8
-
-  mkdirp@1.0.4: {}
+  mkdirp@3.0.1: {}
 
   mri@1.2.0: {}
 
@@ -5425,13 +5677,13 @@ snapshots:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-gyp-build@4.8.1: {}
+  node-gyp-build@4.8.4: {}
 
   node-releases@2.0.14: {}
 
-  nopt@5.0.0:
+  nopt@8.0.0:
     dependencies:
-      abbrev: 1.1.1
+      abbrev: 2.0.0
 
   normalize-path@3.0.0: {}
 
@@ -5448,15 +5700,6 @@ snapshots:
       npm-bundled: 2.0.1
       npm-normalize-package-bin: 2.0.0
 
-  npmlog@5.0.1:
-    dependencies:
-      are-we-there-yet: 2.0.0
-      console-control-strings: 1.1.0
-      gauge: 3.0.2
-      set-blocking: 2.0.0
-
-  object-assign@4.1.1: {}
-
   omggif@1.0.10: {}
 
   once@1.4.0:
@@ -5495,6 +5738,8 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  package-json-from-dist@1.0.1: {}
+
   pako@0.2.9: {}
 
   pako@1.0.11: {}
@@ -5522,6 +5767,13 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
+  path-key@3.1.1: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
@@ -5530,10 +5782,12 @@ snapshots:
 
   peek-readable@4.1.0: {}
 
-  picocolors@1.1.0: {}
+  picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
   pify@4.0.1: {}
 
   pixelmatch@5.3.0:
@@ -5555,7 +5809,7 @@ snapshots:
   postcss@8.4.45:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.0
 
   preferred-pm@3.1.3:
@@ -5592,13 +5846,13 @@ snapshots:
   publint@0.1.16:
     dependencies:
       npm-packlist: 5.1.3
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       sade: 1.8.1
 
   publint@0.2.11:
     dependencies:
       npm-packlist: 5.1.3
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       sade: 1.8.1
 
   queue-microtask@1.2.3: {}
@@ -5640,13 +5894,9 @@ snapshots:
 
   reusify@1.0.4: {}
 
-  rimraf@2.7.1:
+  rimraf@5.0.10:
     dependencies:
-      glob: 7.2.3
-
-  rimraf@3.0.2:
-    dependencies:
-      glob: 7.2.3
+      glob: 10.4.5
 
   rollup@4.21.2:
     dependencies:
@@ -5682,13 +5932,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sander@0.5.1:
-    dependencies:
-      es6-promise: 3.3.1
-      graceful-fs: 4.2.11
-      mkdirp: 0.5.6
-      rimraf: 2.7.1
-
   satori-html@0.3.2:
     dependencies:
       ultrahtml: 1.5.3
@@ -5708,14 +5951,10 @@ snapshots:
 
   sax@1.4.1: {}
 
-  semver@6.3.1: {}
-
   semver@7.6.3: {}
 
   server-only@0.0.1: {}
 
-  set-blocking@2.0.0: {}
-
   set-cookie-parser@2.7.1: {}
 
   sharp@0.33.5:
@@ -5748,8 +5987,14 @@ snapshots:
     dependencies:
       shebang-regex: 1.0.0
 
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
   shebang-regex@1.0.0: {}
 
+  shebang-regex@3.0.0: {}
+
   shiki@1.22.0:
     dependencies:
       '@shikijs/core': 1.22.0
@@ -5763,6 +6008,8 @@ snapshots:
 
   signal-exit@3.0.7: {}
 
+  signal-exit@4.1.0: {}
+
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
@@ -5775,13 +6022,6 @@ snapshots:
 
   slash@3.0.0: {}
 
-  sorcery@0.11.0:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      buffer-crc32: 0.2.13
-      minimist: 1.2.8
-      sander: 0.5.1
-
   source-map-js@1.2.0: {}
 
   space-separated-tokens@2.0.2: {}
@@ -5803,6 +6043,12 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
   string.prototype.codepointat@0.2.1: {}
 
   string_decoder@1.3.0:
@@ -5818,11 +6064,11 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-bom@3.0.0: {}
-
-  strip-indent@3.0.0:
+  strip-ansi@7.1.0:
     dependencies:
-      min-indent: 1.0.1
+      ansi-regex: 6.1.0
+
+  strip-bom@3.0.0: {}
 
   strtok3@6.3.0:
     dependencies:
@@ -5839,24 +6085,24 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  svelte-check@4.0.1(svelte@5.1.11)(typescript@5.5.4):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      fdir: 6.3.0
-      picocolors: 1.1.0
+      chokidar: 4.0.1
+      fdir: 6.4.2(picomatch@4.0.2)
+      picocolors: 1.1.1
       sade: 1.8.1
       svelte: 5.1.11
       typescript: 5.5.4
     transitivePeerDependencies:
       - picomatch
 
-  svelte-check@4.0.1(svelte@5.3.0)(typescript@5.5.4):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      fdir: 6.3.0
-      picocolors: 1.1.0
+      chokidar: 4.0.1
+      fdir: 6.4.2(picomatch@4.0.2)
+      picocolors: 1.1.1
       sade: 1.8.1
       svelte: 5.3.0
       typescript: 5.5.4
@@ -5871,13 +6117,8 @@ snapshots:
     dependencies:
       svelte: 5.1.11
 
-  svelte-preprocess@5.1.4(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4):
+  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4):
     dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.12
-      sorcery: 0.11.0
-      strip-indent: 3.0.0
       svelte: 5.3.0
     optionalDependencies:
       postcss: 8.4.45
@@ -5929,14 +6170,14 @@ snapshots:
       magic-string: 0.30.12
       zimmerframe: 1.1.2
 
-  tar@6.2.1:
+  tar@7.4.3:
     dependencies:
-      chownr: 2.0.0
-      fs-minipass: 2.1.0
-      minipass: 5.0.0
-      minizlib: 2.1.2
-      mkdirp: 1.0.4
-      yallist: 4.0.0
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.1
+      mkdirp: 3.0.1
+      yallist: 5.0.0
 
   tarparser@0.0.4: {}
 
@@ -6043,7 +6284,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.1
       escalade: 3.1.2
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   utif2@4.1.0:
     dependencies:
@@ -6063,7 +6304,7 @@ snapshots:
 
   vite-imagetools@7.0.4(rollup@4.21.2):
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
+      '@rollup/pluginutils': 5.1.3(rollup@4.21.2)
       imagetools-core: 7.0.1
       sharp: 0.33.5
     transitivePeerDependencies:
@@ -6072,7 +6313,7 @@ snapshots:
   vite-node@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
+      debug: 4.4.0
       pathe: 1.1.2
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
@@ -6114,7 +6355,7 @@ snapshots:
       '@vitest/spy': 2.1.2
       '@vitest/utils': 2.1.2
       chai: 5.1.1
-      debug: 4.3.7
+      debug: 4.4.0
       magic-string: 0.30.12
       pathe: 1.1.2
       std-env: 3.7.0
@@ -6156,14 +6397,26 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wide-align@1.1.5:
+  wrap-ansi@7.0.0:
     dependencies:
+      ansi-styles: 4.3.0
       string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
 
   wrappy@1.0.2: {}
 
@@ -6180,7 +6433,7 @@ snapshots:
 
   yallist@2.1.2: {}
 
-  yallist@4.0.0: {}
+  yallist@5.0.0: {}
 
   yocto-queue@0.1.0: {}
 

From e9565fe52a65d48e02bee76c92bf695d16941336 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 10 Dec 2024 17:49:26 -0800
Subject: [PATCH 199/453] chore: upgrade svelte-json-tree to fix peer dep
 warning (#980)

---
 packages/repl/package.json |  2 +-
 pnpm-lock.yaml             | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/repl/package.json b/packages/repl/package.json
index 94513610e8..6d6c4d191c 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -78,7 +78,7 @@
 		"@rich_harris/svelte-split-pane": "^1.1.3",
 		"@rollup/browser": "^4.17.2",
 		"@sveltejs/site-kit": "workspace:*",
-		"@sveltejs/svelte-json-tree": "^2.2.0",
+		"@sveltejs/svelte-json-tree": "^2.2.1",
 		"acorn": "^8.11.3",
 		"editor": "workspace:*",
 		"esm-env": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 185bb2e498..c3399ccfe5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -341,8 +341,8 @@ importers:
         specifier: workspace:*
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
-        specifier: ^2.2.0
-        version: 2.2.0(svelte@5.1.11)
+        specifier: ^2.2.1
+        version: 2.2.1(svelte@5.1.11)
       acorn:
         specifier: ^8.11.3
         version: 8.14.0
@@ -1624,10 +1624,11 @@ packages:
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@sveltejs/svelte-json-tree@2.2.0':
-    resolution: {integrity: sha512-Ohgv6m5d1M9xNbo2fVzYKtI0VzKA1DBh2isZ/NarEriNxICQNVVfJtNjUCryFNvcg1XsdrmfV4VGTzFWO57pCw==}
+  '@sveltejs/svelte-json-tree@2.2.1':
+    resolution: {integrity: sha512-M8l23/R3y1fI2+RaOzfUzmkysTWWsw/NClUgGpvydl9vXRonPN1/btQQievaNyeWNfUj12tjPfh5yTrXWpaKkg==}
+    engines: {pnpm: ^9.0.0}
     peerDependencies:
-      svelte: ^4.0.0
+      svelte: ^4.0.0 || ^5.0.0
 
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2':
     resolution: {integrity: sha512-Yl9BWvEj+1j+8mICIAA04/Sx0wEHNL0n9pSIZFM8n4NWgLFmR3v41qX2k54J/r4LWE2YHTeNNH2WJqEUb3geEA==}
@@ -4619,7 +4620,7 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/svelte-json-tree@2.2.0(svelte@5.1.11)':
+  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.1.11)':
     dependencies:
       svelte: 5.1.11
 

From fc61a8119dbb669bcaaf474bf742bd85f19d3944 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Dec 2024 09:49:20 -0500
Subject: [PATCH 200/453] Sync `kit` docs (#984)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/20-core-concepts/10-routing.md           | 2 +-
 apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md | 4 ++--
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md         | 4 +---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 9fd11b6137..7f84b0f7b4 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -170,7 +170,7 @@ To create a layout that applies to every page, make a file called `src/routes/+l
 ...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:
 
 ```svelte
-<!---- file: src/routes/+layout.svelte --->
+<!--- file: src/routes/+layout.svelte --->
 <script>
 	let { children } = $props();
 </script>
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
index abf7a3dfc8..daf6c48334 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
@@ -19,6 +19,6 @@ Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks
 
 ## Guides
 
-[Lucia](https://lucia-next.pages.dev/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
+[Lucia](https://lucia-auth.com/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
 
-An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-next.pages.dev/) rather than having multiple web frameworks inside their project.
+An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 88d8014a88..4704c8c675 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -133,9 +133,7 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(
-	e: unknown
-): e is ActionFailure<undefined>;
+function isActionFailure(e: unknown): e is ActionFailure;
 ```
 
 </div>

From 645ddef30e0f2a9e89f628f24f35d38c0ca15199 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:39:29 -0500
Subject: [PATCH 201/453] Sync `svelte` docs (#988)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../21-svelte-reactivity-window.md            | 238 ++++++++++++++++++
 .../98-reference/21-svelte-reactivity.md      |  24 +-
 2 files changed, 241 insertions(+), 21 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md
new file mode 100644
index 0000000000..521f21439f
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md
@@ -0,0 +1,238 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: svelte/reactivity/window
+---
+
+This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.
+
+```svelte
+<script>
+	import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+</script>
+
+<p>{innerWidth.current}x{innerHeight.current}</p>
+```
+
+
+
+```js
+// @noErrors
+import {
+	devicePixelRatio,
+	innerHeight,
+	innerWidth,
+	online,
+	outerHeight,
+	outerWidth,
+	screenLeft,
+	screenTop,
+	scrollX,
+	scrollY
+} from 'svelte/reactivity/window';
+```
+
+## devicePixelRatio
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
+Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
+on Firefox and Safari it won't.
+
+<div class="ts-block">
+
+```dts
+const devicePixelRatio: {
+	get current(): number;
+};
+```
+
+</div>
+
+
+
+## innerHeight
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const innerHeight: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## innerWidth
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const innerWidth: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## online
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const online: ReactiveValue<boolean | undefined>;
+```
+
+</div>
+
+
+
+## outerHeight
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const outerHeight: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## outerWidth
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const outerWidth: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## screenLeft
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const screenLeft: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## screenTop
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const screenTop: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## scrollX
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const scrollX: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+## scrollY
+
+<blockquote class="since note">
+
+Available since 5.11.0
+
+</blockquote>
+
+`scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
+
+<div class="ts-block">
+
+```dts
+const scrollY: ReactiveValue<number | undefined>;
+```
+
+</div>
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index 4d405ff241..b7f94e7d69 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
@@ -64,13 +64,13 @@ If you can use the media query in CSS to achieve the same effect, do that.
 <div class="ts-block">
 
 ```dts
-class MediaQuery {/*…*/}
+class MediaQuery extends ReactiveValue<boolean> {/*…*/}
 ```
 
 <div class="ts-block-property">
 
 ```dts
-constructor(query: string, matches?: boolean | undefined);
+constructor(query: string, fallback?: boolean | undefined);
 ```
 
 <div class="ts-block-property-details">
@@ -78,29 +78,11 @@ constructor(query: string, matches?: boolean | undefined);
 <div class="ts-block-property-bullets">
 
 - `query` A media query string
-- `matches` Fallback value for the server
+- `fallback` 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>
 
 

From 40e4152341985941b285daba7e37620fe7d1cc26 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 11 Dec 2024 11:51:02 -0500
Subject: [PATCH 202/453] day 11 (#989)

---
 .../svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 7 +++++--
 packages/site-kit/src/lib/codemirror/index.js              | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 205013078e..93e7034939 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -83,9 +83,12 @@ A lot of you wanted a place to put asynchronous setup work that happens before y
 
 - [docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init)
 
-## Day 11
+## Day 11: `svelte/reactivity/window`
 
-Coming soon!
+Today we added a whole new module. `svelte/reactivity/window` exports a variety of reactive values like `innerWidth`, `innerHeight`, `scrollX`, `scrollY` and so on. Like the `MediaQuery` introduced on day 5 and `Spring` and `Tween` from day 6, these are class instances with a reactive `current` property that you can use in your template and in deriveds/effects. Behind the scenes, Svelte handles all the event listener stuff.
+
+- [docs](/docs/svelte/svelte-reactivity-window)
+- [demo](/playground/8ac86e10fdce485a99c29c95e0092df4?version=5.11.0)
 
 ## Day 12
 
diff --git a/packages/site-kit/src/lib/codemirror/index.js b/packages/site-kit/src/lib/codemirror/index.js
index b3ccb00d7f..24152606a3 100644
--- a/packages/site-kit/src/lib/codemirror/index.js
+++ b/packages/site-kit/src/lib/codemirror/index.js
@@ -245,6 +245,7 @@ export function completion_for_javascript(context, selected, files) {
 			'svelte/legacy',
 			'svelte/motion',
 			'svelte/reactivity',
+			'svelte/reactivity/window',
 			'svelte/store',
 			'svelte/transition'
 		];

From 7487ef1299e69ee7d76e4b5a3efe51cf3005851c Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 11 Dec 2024 15:59:01 -0500
Subject: [PATCH 203/453] fix: correct GH issues link on 404 page (#986)

---
 apps/svelte.dev/src/routes/+error.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte
index 5ac6f770a7..06074f7879 100644
--- a/apps/svelte.dev/src/routes/+error.svelte
+++ b/apps/svelte.dev/src/routes/+error.svelte
@@ -21,7 +21,7 @@
 					If you were expecting to find something here, please drop by the
 					<a href="http://github.com/chat"> Discord chatroom </a>
 					and let us know, or raise an issue on
-					<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
+					<a href="https://github.com/sveltejs/svelte.dev/issues">GitHub</a>. Thanks!
 				</p>
 			{:else}
 				<h1>Yikes!</h1>

From b167c13ff39db7f070b2b908d1f3b57957ec172f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 11 Dec 2024 22:05:14 +0100
Subject: [PATCH 204/453] fix: account for section-less pages during code
 redirects (#990)

fixes #985
---
 apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts
index 05685f33e0..e277f5e51e 100644
--- a/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts
+++ b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts
@@ -14,7 +14,11 @@ const codes: Record<string, Record<string, string[]>> = {};
 
 for (const page of reference) {
 	const grouped: Record<string, string[]> = {};
-	const sections = page.body.split(/(^|\n)## /g).slice(1);
+	const sections = page.body.split(/(^|\n)## /g);
+
+	if (sections.length > 1) {
+		sections.shift();
+	}
 
 	for (const section of sections) {
 		const lines = section.slice(section.startsWith('\n') ? 1 : 0).split('\n');

From be6e3a6e044224368f863664d092fecee5daa655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Paquim?= <jpaquim@users.noreply.github.com>
Date: Wed, 11 Dec 2024 21:08:48 +0000
Subject: [PATCH 205/453] fix: include .env files in tutorial assets (#987)

fixes  #690
---
 apps/svelte.dev/src/lib/server/content.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index 45f0d4b0b2..01c84c2ad6 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -8,11 +8,14 @@ const documents = import.meta.glob<string>('../../../content/**/*.md', {
 	import: 'default'
 });
 
-const assets = import.meta.glob<string>('../../../content/**/+assets/**', {
-	eager: true,
-	query: '?url',
-	import: 'default'
-});
+const assets = import.meta.glob<string>(
+	['../../../content/**/+assets/**', '../../../content/**/+assets/**/.env'],
+	{
+		eager: true,
+		query: '?url',
+		import: 'default'
+	}
+);
 
 // https://github.com/vitejs/vite/issues/17453
 export const index = await create_index(documents, assets, '../../../content', read);

From 14edd76d01d6249bbee5dfe7cb3060767b83bc35 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 11 Dec 2024 16:47:25 -0500
Subject: [PATCH 206/453] support importing different versions of packages
 (#992)

---
 packages/repl/src/lib/workers/bundler/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index fbb7e9540f..119725d4f4 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -291,7 +291,7 @@ async function get_bundle(
 				const pkg_url =
 					pkg_name === 'svelte'
 						? `${svelte_url}/package.json`
-						: `${packages_url}/${pkg_name}/package.json`;
+						: `${packages_url}/${pkg_name}@${match[2] ?? 'latest'}/package.json`;
 				const subpath = `.${match[3] ?? ''}`;
 
 				// if this was imported by one of our files, add it to the `imports` set

From 0be535c4c5cd4157664e39317c1f35cdacde986f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:12:17 -0500
Subject: [PATCH 207/453] Sync `svelte` docs (#991)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../.generated/client-warnings.md             | 40 -------------------
 .../98-reference/30-runtime-warnings.md       | 40 -------------------
 2 files changed, 80 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index b0490b84ff..06ca578b76 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -204,46 +204,6 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
-### reactive_declaration_non_reactive_property
-
-```
-A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
-```
-
-In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
-
-In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
-
-Often, the result is the same — for example these can be considered equivalent:
-
-```js
-let a = 1, b = 2, sum = 3;
-// ---cut---
-$: sum = a + b;
-```
-
-```js
-let a = 1, b = 2;
-// ---cut---
-const sum = $derived(a + b);
-```
-
-In some cases — such as the one that triggered the above warning — they are _not_ the same:
-
-```js
-let a = 1, b = 2, sum = 3;
-// ---cut---
-const add = () => a + b;
-
-// the compiler can't 'see' that `sum` depends on `a` and `b`, but
-// they _would_ be read while executing the `$derived` version
-$: sum = add();
-```
-
-Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
-
-When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
-
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 8c0c55f910..cdff222ae3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -211,46 +211,6 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
-### reactive_declaration_non_reactive_property
-
-```
-A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
-```
-
-In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
-
-In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
-
-Often, the result is the same — for example these can be considered equivalent:
-
-```js
-let a = 1, b = 2, sum = 3;
-// ---cut---
-$: sum = a + b;
-```
-
-```js
-let a = 1, b = 2;
-// ---cut---
-const sum = $derived(a + b);
-```
-
-In some cases — such as the one that triggered the above warning — they are _not_ the same:
-
-```js
-let a = 1, b = 2, sum = 3;
-// ---cut---
-const add = () => a + b;
-
-// the compiler can't 'see' that `sum` depends on `a` and `b`, but
-// they _would_ be read while executing the `$derived` version
-$: sum = add();
-```
-
-Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
-
-When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
-
 ### state_proxy_equality_mismatch
 
 ```

From 65825d31c3fd299e9688b9cf63d4fd0e70816d2d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:29:46 -0500
Subject: [PATCH 208/453] Sync `svelte` docs (#994)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/98-reference/21-svelte-reactivity-window.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md
index 521f21439f..fe9555db1d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity-window.md
@@ -47,7 +47,7 @@ on Firefox and Safari it won't.
 
 ```dts
 const devicePixelRatio: {
-	get current(): number;
+	get current(): number | undefined;
 };
 ```
 

From a8cff165479af72b2b1fd93dddd7f1379fe8ac4c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:47:01 -0500
Subject: [PATCH 209/453] Sync `kit` docs (#998)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/10-routing.md   |  4 +-
 .../70-adapter-cloudflare-workers.md          |  4 +-
 .../25-build-and-deploy/80-adapter-netlify.md |  2 +-
 .../25-build-and-deploy/90-adapter-vercel.md  |  2 +-
 .../content/docs/kit/30-advanced/20-hooks.md  | 17 +++++
 .../kit/30-advanced/50-server-only-modules.md |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 72 +++++++++++++++++++
 7 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 7f84b0f7b4..12ab0f762f 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -54,7 +54,7 @@ Pages can receive data from `load` functions via the `data` prop.
 > [!LEGACY]
 > In Svelte 4, you'd use `export let data` instead
 
-> [!NOTE] Note that SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
+> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
 
 ### +page.js
 
@@ -303,6 +303,8 @@ If an error is thrown (either `error(...)` or an unexpected error), the response
 
 > [!NOTE] When creating an `OPTIONS` handler, note that Vite will inject `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` headers — these will not be present in production unless you add them.
 
+> [!NOTE] `+layout` files have no effect on `+server.js` files. If you want to run some logic before each request, add it to the server [`handle`](hooks#Server-hooks-handle) hook.
+
 ### Receiving data
 
 By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API:
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index 45f0c4f239..339177c06e 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -35,7 +35,7 @@ export default {
 
 ### config
 
-Path to your custom `wrangler.toml` config file.
+Path to your custom `wrangler.toml` or `wrangler.json` config file.
 
 ### platformProxy
 
@@ -43,7 +43,7 @@ Preferences for the emulated `platform.env` local bindings. See the [getPlatform
 
 ## Basic Configuration
 
-This adapter expects to find a [wrangler.toml](https://developers.cloudflare.com/workers/platform/sites/configuration) file in the project root. It should look something like this:
+This adapter expects to find a [wrangler.toml/wrangler.json](https://developers.cloudflare.com/workers/platform/sites/configuration) file in the project root. It should look something like this:
 
 ```toml
 /// file: wrangler.toml
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
index 1cc05fe42a..854da44960 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
@@ -114,6 +114,6 @@ Additionally, you can add your own Netlify functions by creating a directory for
 
 You can't use `fs` in edge deployments.
 
-You _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the `read` function from `$app/server` to access your files. `read` does not work inside edge deployments (this may change in future).
+You _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. `read` does not work inside edge deployments (this may change in future).
 
 Alternatively, you can [prerender](page-options#prerender) the routes in question.
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index 32dea12c43..5c3324f0b4 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -174,6 +174,6 @@ Projects created before a certain date may default to using an older Node versio
 
 You can't use `fs` in edge functions.
 
-You _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the `read` function from `$app/server` to access your files. `read` does not work inside routes deployed as edge functions (this may change in future).
+You _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. `read` does not work inside routes deployed as edge functions (this may change in future).
 
 Alternatively, you can [prerender](page-options#prerender) the routes in question.
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index bd793afd5b..f0afa6e41c 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -291,6 +291,23 @@ The `lang` parameter will be correctly derived from the returned pathname.
 
 Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.
 
+### transport
+
+This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns `false` for anything that isn't an instance of the type) and a corresponding `decode` function:
+
+```js
+/// file: src/hooks.js
+import { Vector } from '$lib/math';
+
+/** @type {import('@sveltejs/kit').Transport} */
+export const transport = {
+	Vector: {
+		encode: (value) => value instanceof Vector && [value.x, value.y],
+		decode: ([x, y]) => new Vector(x, y)
+	}
+};
+```
+
 
 ## Further reading
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md b/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
index a96704f66c..70c4c53c8f 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/50-server-only-modules.md
@@ -11,7 +11,7 @@ The [`$env/static/private`]($env-static-private) and [`$env/dynamic/private`]($e
 
 ## Server-only utilities
 
-The [`$app/server`]($app-server) module, which contains a `read` function for reading assets from the filesystem, can likewise only be imported by code that runs on the server.
+The [`$app/server`]($app-server) module, which contains a [`read`]($app-server#read) function for reading assets from the filesystem, can likewise only be imported by code that runs on the server.
 
 ## Your modules
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 4704c8c675..a9f652c60f 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -2619,6 +2619,78 @@ type SubmitFunction<
 
 </div>
 
+## Transport
+
+<blockquote class="since note">
+
+Available since 2.11.0
+
+</blockquote>
+
+The [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary.
+
+Each transporter has a pair of `encode` and `decode` functions. On the server, `encode` determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or `false` otherwise).
+
+In the browser, `decode` turns the encoding back into an instance of the custom type.
+
+```ts
+import type { Transport } from '@sveltejs/kit';
+
+declare class MyCustomType {
+	data: any
+}
+
+// hooks.js
+export const transport: Transport = {
+	MyCustomType: {
+		encode: (value) => value instanceof MyCustomType && [value.data],
+		decode: ([data]) => new MyCustomType(data)
+	}
+};
+```
+
+<div class="ts-block">
+
+```dts
+type Transport = Record<string, Transporter>;
+```
+
+</div>
+
+## Transporter
+
+A member of the [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook.
+
+<div class="ts-block">
+
+```dts
+interface Transporter<
+	T = any,
+	U = Exclude<
+		any,
+		false | 0 | '' | null | undefined | typeof NaN
+	>
+> {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+encode: (value: T) => false | U;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+decode: (data: U) => T;
+```
+
+<div class="ts-block-property-details"></div>
+</div></div>
+
 
 
 ## Private types

From 14871fcfbb3216a8f268e25cdc852499780d085f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 12 Dec 2024 10:59:40 -0500
Subject: [PATCH 210/453] day 12 (#1001)

---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 93e7034939..5a81ef26a5 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -90,9 +90,14 @@ Today we added a whole new module. `svelte/reactivity/window` exports a variety
 - [docs](/docs/svelte/svelte-reactivity-window)
 - [demo](/playground/8ac86e10fdce485a99c29c95e0092df4?version=5.11.0)
 
-## Day 12
+## Day 12: custom type transport in SvelteKit
 
-Coming soon!
+A `load` function that runs on the server in your SvelteKit app isn't restricted to returning things that can be serialized as JSON. You can return Maps, Sets, Dates, objects with cyclical references, even Promises, and SvelteKit will handle the serialization on the server and deserialization in the browser.
+
+As of today, you can also return things that _aren't_ built in to the language, such as [classes containing state](/docs/svelte/$state#Classes), or classes returned by your database ORM library, or whatever — just export a `transport` object from your `hooks.js` that provides an `encode` and `decode` function.
+
+- [docs](/docs/kit/hooks#Universal-hooks-transport)
+- [demo](https://stackblitz.com/edit/sveltejs-kit-template-default-b5zbxomg?file=src%2Fhooks.js)
 
 ## Day 13
 

From 24bb28818b82fd292df871bcaef433c7b631973b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 12 Dec 2024 17:17:13 -0500
Subject: [PATCH 211/453] import correct version, as determined by package.json
 (#1006)

* import correct version, as determined by package.json

* more

* fix
---
 .../repl/src/lib/workers/bundler/index.ts     | 41 +++++++++++++++++-
 .../repl/src/lib/workers/bundler/semver.ts    | 43 +++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 packages/repl/src/lib/workers/bundler/semver.ts

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 119725d4f4..38e7c8ac59 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -18,6 +18,7 @@ import type { Warning } from '../../types';
 import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
 import type { File } from 'editor';
 import { parseTar, type FileDescription } from 'tarparser';
+import { max } from './semver';
 
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -230,6 +231,8 @@ async function resolve_from_pkg(
 	return subpath;
 }
 
+const versions = Object.create(null);
+
 async function get_bundle(
 	uid: number,
 	mode: 'client' | 'server',
@@ -288,10 +291,46 @@ async function get_bundle(
 				}
 
 				const pkg_name = match[1];
+
+				let default_version = 'latest';
+
+				if (importer?.startsWith(packages_url)) {
+					const path = importer.slice(packages_url.length + 1);
+					const parts = path.split('/').slice(0, 2);
+					if (!parts[0].startsWith('@')) parts.pop();
+
+					const importer_name_and_version = parts.join('/');
+					const importer_name = importer_name_and_version.slice(
+						0,
+						importer_name_and_version.indexOf('@', 1)
+					);
+
+					const default_versions = (versions[importer_name_and_version] ??= Object.create(null));
+
+					if (!default_versions[pkg_name]) {
+						const pkg_json_url = `${packages_url}/${importer_name_and_version}/package.json`;
+						const pkg_json = (await fetch_if_uncached(pkg_json_url, uid))?.body;
+						const pkg = JSON.parse(pkg_json ?? '""');
+
+						if (importer_name === pkg_name) {
+							default_versions[pkg_name] = pkg.version;
+						} else {
+							const version =
+								pkg.devDependencies?.[pkg_name] ??
+								pkg.peerDependencies?.[pkg_name] ??
+								pkg.dependencies?.[pkg_name];
+
+							default_versions[pkg_name] = max(version);
+						}
+					}
+
+					default_version = default_versions[pkg_name];
+				}
+
 				const pkg_url =
 					pkg_name === 'svelte'
 						? `${svelte_url}/package.json`
-						: `${packages_url}/${pkg_name}@${match[2] ?? 'latest'}/package.json`;
+						: `${packages_url}/${pkg_name}@${match[2] ?? default_version}/package.json`;
 				const subpath = `.${match[3] ?? ''}`;
 
 				// if this was imported by one of our files, add it to the `imports` set
diff --git a/packages/repl/src/lib/workers/bundler/semver.ts b/packages/repl/src/lib/workers/bundler/semver.ts
new file mode 100644
index 0000000000..945b56541e
--- /dev/null
+++ b/packages/repl/src/lib/workers/bundler/semver.ts
@@ -0,0 +1,43 @@
+// https://devhints.io/semver
+export function max(version: string) {
+	if (!version || version === '*' || version === 'x') {
+		return 'latest';
+	}
+
+	// strip any * parts, e.g. 1.2.x becomes 1.2
+	version = version.replace(/\.[x*].+/, '');
+
+	const match = /^([~^])?(\d+|[*x])(?:\.(\d+|[*x])(?:\.(\d+|[*x]))?)?(?:-.+)?$/.exec(version);
+
+	if (!match) {
+		// bail
+		console.warn(`Could not resolve version from ${version}`);
+		return 'latest';
+	}
+
+	const [_, qualifier, major, minor] = match;
+
+	// ^ means 'same major', unless 0.x
+	if (qualifier === '^') {
+		if (major === '0') {
+			if (minor === '0') {
+				return version.slice(1);
+			}
+
+			return `${major}.${minor}`;
+		}
+
+		return major;
+	}
+
+	// ~ means 'same minor'
+	if (qualifier === '~') {
+		if (minor !== undefined) {
+			return `${major}.${minor}`;
+		}
+
+		return major;
+	}
+
+	return version;
+}

From 36211f3ea64489c56432027e324b5956b20dbaa2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 12 Dec 2024 17:28:19 -0500
Subject: [PATCH 212/453] better commonjs support (#1007)

---
 .../lib/workers/bundler/plugins/commonjs.ts   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/plugins/commonjs.ts b/packages/repl/src/lib/workers/bundler/plugins/commonjs.ts
index a72dea0990..fff3ca40a2 100644
--- a/packages/repl/src/lib/workers/bundler/plugins/commonjs.ts
+++ b/packages/repl/src/lib/workers/bundler/plugins/commonjs.ts
@@ -20,9 +20,10 @@ const plugin: Plugin = {
 			});
 
 			const requires: string[] = [];
+			const exports: string[] = [];
 
 			walk(ast as Node, null, {
-				CallExpression: (node) => {
+				CallExpression: (node, context) => {
 					if (node.callee.type === 'Identifier' && node.callee.name === 'require') {
 						if (node.arguments.length !== 1) return;
 						const arg = node.arguments[0];
@@ -30,6 +31,20 @@ const plugin: Plugin = {
 
 						requires.push(arg.value);
 					}
+
+					context.next();
+				},
+				AssignmentExpression: (node, context) => {
+					if (node.operator !== '=') return;
+					if (node.left.type !== 'MemberExpression') return;
+					if (node.left.object.type !== 'Identifier' || node.left.object.name !== 'exports') return;
+					if (node.left.computed || node.left.property.type !== 'Identifier') return;
+
+					exports.push(
+						`export const ${node.left.property.name} = module.exports.${node.left.property.name};`
+					);
+
+					context.next();
 				}
 			});
 
@@ -44,7 +59,8 @@ const plugin: Plugin = {
 				require,
 				`const exports = {}; const module = { exports };`,
 				code,
-				`export default module.exports;`
+				`export default module.exports;`,
+				exports.join('\n')
 			].join('\n\n');
 
 			return {

From 5e1deac1e6dbe05f057c4a2ce9c04394b5f4d86b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:30:49 -0500
Subject: [PATCH 213/453] Sync `svelte` docs (#1005)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/03-template-syntax/06-snippet.md   |  6 +-
 .../.generated/compile-warnings.md            |  2 +-
 .../svelte/98-reference/21-svelte-compiler.md | 67 ++++++++++++++++++-
 .../98-reference/30-compiler-warnings.md      |  2 +-
 4 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index c97b726df8..b58995b84a 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -113,7 +113,7 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
 
 ## Passing snippets to components
 
-Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE41SwY6bMBD9lRGplKQlYRMpF5ZF7T_0ttmDwSZYJbZrT9pGlv-9g4Fkk-xhxYV5vHlvhjc-aWQnXJK_-kSxo0jy5IcxSZrg2fSF-yM6FFQ7fbJ1jxSuttJguVd7lEejLcJPVnUCGquPMF9nsVoPjfNnohGx1sohMU4SHbzAa4_t0UNvmcOcGUNDzFP4jeccdikYK2v6sIWQ3lErpui5cDdPF_LmkVy3wlp5Vd5e2U_rHYSe_kYjFtl1KeVnTkljBEIrGBd2sYy8AtsyLlBk9DYhJHtTR_UbBDWybkR8NkqHWyOr_y74ZMNLz9f9AoG6ePkOJLMHLBp-xISvcPf11r0YUuMM2Ysfkgngh5XphUYKkJWU_FFz2UjBkxztSYT0cihR4LOn0tGaPrql439N-7Uh0Dl8MVYbt1jeJ1Fg7xDb_Uw2Y18YQqZ_S2U5FH1pS__dCkWMa3C0uR0pfQRTg89kE4bLLLDS_Dxy_Eywuo1TAnPAw4fqY1rvtH3W9w35ZZMgvU3jq8LhedwkguCHRhT_cMU6eVA5dKLB5wGutCWjlTOslupAxxrxceKoD2hzhe2qbmXHF1v1bbOcNCtW_zpYfVI8h5kQ4qY3mueHTlesW2C7TOEO4hcdwzgf3Nc7cZxUKKC4yuNhvIX_MlV_Xk0EAAA=)):
+Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
 
 ```svelte
 <script>
@@ -145,7 +145,7 @@ Within the template, snippets are values just like any other. As such, they can
 
 Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
 
-As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE41Sy27bMBD8lYVcwHYrW4kBXxRFaP-htzgHSqQsojLJkuu2BqF_74qUrfhxCHQRh7MzO9z1SSM74ZL8zSeKHUSSJz-MSdIET2Y4uD-iQ0Fnp4-2HpDC1VYaLHdqh_JgtEX4yapOQGP1AebrLJzWsXD-QjQi1lo5JMZRooNXeBuwHXoYLHOYM2OoiXkKv_GUwzYFY2VNFxvo0xtqxRR9F-7z04X8fE-uW2GtnJQ3E_tpvYV-oL9Ti0U2hVJFjMMZslcfW-5DWj9zShojEFrBuLCLZR_9CmzLQCwy-psw8rxBgvkNhhpZd8F8NppE7Stbq_8u-GTKS8_XQ9Keqnl5BZP1AzTYP2bDV7i7_9hLEeda0iocNJeNFDzJ0R5Fn142JzA-uzsdBfLhldPxPdMhIPS0H1-M1cYtlnejwdBDfBXZjHXTFOg4BhuOtvTfrVDEmAZG2ew5ezYV-Ew2fVzVAivNTyPHzwSr29AlMAe8f6g-zuWDts-GusAmdBSkv3P7qnB4GpMEEHwsRPEPV6yTe5VDJxp8iXClLRmtnGG1VHva3oCPHQd9QJsrbFd1Kzu-2Khvz8uzZsXqX3urj4rnMBNCXNUG83zf6Yp1C2yXKdxA_KJjGOfRfb0Vh7MKDShEuV-M9_4_nq6svF4EAAA=)):
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
 
 ```svelte
 <!-- this is semantically the same as the above -->
@@ -166,7 +166,7 @@ As an authoring convenience, snippets declared directly _inside_ a component imp
 </Table>
 ```
 
-Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE41S247aMBD9lVFYCegGsiDxks1G7T_0bdkHJ3aI1cR27aEtsvzvtZ0LZeGhiiJ5js-cmTMemzS8YybJ320iSM-SPPmmVJImeFEhML9Yh8zHRp51HZDC1JorLI_iiLxXUiN8J1XHoNGyh-U2i9F2SFy-epon1lIY9IwzRwNv8B6wI1oIJXNYEqV8E8sUfuIlh0MKSvPaX-zBpZ-oFRH-m7m7l5m8uyfXLdOaX5X3V_bL9gAu0D98i0V2NSWKwQ4lSN7s0LKLbgtsyxgXmT9NiBe-iaP-DYISSTcj4bcLI7hSDEHL3yu6dkPfBdLS0m1o3nk-LW9gX-gBGss9ZsMXuLu32VjZBdfRaelft5eUN5zRJEd9Zi6dlyEy_ncdOm_IxsGlULe8o5qJNFgE5x_9SWmpzGp9N2-MXQxz4c2cOQ-lZWQyF0Jd2q_-mjI9U1fr4FBPE8iuKTbjjRt2sMBK0svIsQtG6jb2CsQAdQ_1x9f5R9tmIS-yPToK-tNkQRQGL6ObCIIdEpH9wQ3p-Enk0LEGXwe4ktoX2hhFai5Ofi0jPnYc9QF1LrDdRK-rvXjerSfNitQ_TlqeBc1hwRi7yY3F81MnK9KtsF2n8Amis44ilA7VtwfWTyr-kaKV-_X4cH8BTOhfRzcEAAA=)):
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
 
 ```svelte
 <!--- file: App.svelte --->
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 88b1f278a6..f6f2585df2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -775,7 +775,7 @@ Reassignments of module-level declarations will not cause reactive statements to
 ```
 
 ```svelte
-<script ---context="module"--- +++context+++>
+<script ---context="module"--- +++module+++>
 	let foo = 'bar';
 </script>
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index b167cd07f3..728cc5181a 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -203,7 +203,7 @@ namespace AST {
 		options: SvelteOptions | null;
 		fragment: Fragment;
 		/** The parsed `<style>` element, if exists */
-		css: Css.StyleSheet | null;
+		css: AST.CSS.StyleSheet | null;
 		/** The parsed `<script>` element, if exists */
 		instance: Script | null;
 		/** The parsed `<script module>` element, if exists */
@@ -546,6 +546,71 @@ namespace AST {
 		content: Program;
 		attributes: Attribute[];
 	}
+
+	export type AttributeLike =
+		| Attribute
+		| SpreadAttribute
+		| Directive;
+
+	export type Directive =
+		| AST.AnimateDirective
+		| AST.BindDirective
+		| AST.ClassDirective
+		| AST.LetDirective
+		| AST.OnDirective
+		| AST.StyleDirective
+		| AST.TransitionDirective
+		| AST.UseDirective;
+
+	export type Block =
+		| AST.EachBlock
+		| AST.IfBlock
+		| AST.AwaitBlock
+		| AST.KeyBlock
+		| AST.SnippetBlock;
+
+	export type ElementLike =
+		| AST.Component
+		| AST.TitleElement
+		| AST.SlotElement
+		| AST.RegularElement
+		| AST.SvelteBody
+		| AST.SvelteBoundary
+		| AST.SvelteComponent
+		| AST.SvelteDocument
+		| AST.SvelteElement
+		| AST.SvelteFragment
+		| AST.SvelteHead
+		| AST.SvelteOptionsRaw
+		| AST.SvelteSelf
+		| AST.SvelteWindow
+		| AST.SvelteBoundary;
+
+	export type Tag =
+		| AST.ExpressionTag
+		| AST.HtmlTag
+		| AST.ConstTag
+		| AST.DebugTag
+		| AST.RenderTag;
+
+	export type TemplateNode =
+		| AST.Root
+		| AST.Text
+		| Tag
+		| ElementLike
+		| AST.Attribute
+		| AST.SpreadAttribute
+		| Directive
+		| AST.Comment
+		| Block;
+
+	export type SvelteNode =
+		| Node
+		| TemplateNode
+		| AST.Fragment
+		| _CSS.Node;
+
+	export type { _CSS as CSS };
 }
 ```
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index e44d0ff6ec..b0522ef817 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -796,7 +796,7 @@ Reassignments of module-level declarations will not cause reactive statements to
 ```
 
 ```svelte
-<script ---context="module"--- +++context+++>
+<script ---context="module"--- +++module+++>
 	let foo = 'bar';
 </script>
 ```

From 5bf008e663bb88c97c8a73db67bf1ee4a2064255 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 12 Dec 2024 14:31:33 -0800
Subject: [PATCH 214/453] chore: fix some dependabot security warnings (#1002)

---
 apps/svelte.dev/package.json |  14 +-
 package.json                 |   2 +-
 packages/editor/package.json |   2 +-
 packages/repl/package.json   |   2 +-
 pnpm-lock.yaml               | 605 +++++++++++++----------------------
 5 files changed, 224 insertions(+), 401 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 2be61c447c..62625303a4 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -22,7 +22,7 @@
 		"@lezer/lr": "^1.3.10",
 		"@rich_harris/svelte-split-pane": "^1.1.3",
 		"@shikijs/twoslash": "^1.22.0",
-		"@sveltejs/amp": "^1.1.3",
+		"@sveltejs/amp": "^1.1.4",
 		"@sveltejs/repl": "workspace:*",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/svelte": "^5.2.3",
@@ -44,7 +44,7 @@
 		"shiki": "^1.22.0",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.2",
-		"ws": "^8.13.0",
+		"ws": "^8.18.0",
 		"yootils": "^0.3.1"
 	},
 	"devDependencies": {
@@ -53,15 +53,15 @@
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/enhanced-img": "^0.4.3",
-		"@sveltejs/kit": "^2.10.1",
+		"@sveltejs/kit": "^2.11.0",
 		"@sveltejs/site-kit": "workspace:*",
-		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
+		"@sveltejs/vite-plugin-svelte": "4.0.3",
 		"@types/cookie": "^0.6.0",
 		"@types/node": "^20.14.2",
-		"browserslist": "^4.23.1",
+		"browserslist": "^4.24.2",
 		"chokidar": "^4.0.1",
 		"degit": "^2.8.4",
-		"dotenv": "^16.4.5",
+		"dotenv": "^16.4.7",
 		"esbuild": "^0.21.5",
 		"jimp": "^1.1.1",
 		"lightningcss": "^1.25.1",
@@ -77,7 +77,7 @@
 		"tiny-glob": "^0.2.9",
 		"tsx": "^4.19.0",
 		"typescript": "^5.5.4",
-		"vite": "^5.4.7",
+		"vite": "^5.4.11",
 		"vite-imagetools": "^7.0.4"
 	}
 }
diff --git a/package.json b/package.json
index bbf221c8a2..d45538f4f5 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,6 @@
 		"changeset:publish": "changeset publish"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.27.6"
+		"@changesets/cli": "^2.27.10"
 	}
 }
diff --git a/packages/editor/package.json b/packages/editor/package.json
index bdc676d3e0..ba78bf8d93 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -54,7 +54,7 @@
 		"codemirror": "^6.0.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
-		"publint": "^0.2.0",
+		"publint": "^0.2.12",
 		"svelte": "^5.1.11",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.0.0",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 6d6c4d191c..d4e2099a13 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -55,7 +55,7 @@
 		"@types/estree": "^1.0.5",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
-		"publint": "^0.1.9",
+		"publint": "^0.2.12",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3399ccfe5..f943c9e96f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     devDependencies:
       '@changesets/cli':
-        specifier: ^2.27.6
-        version: 2.27.6
+        specifier: ^2.27.10
+        version: 2.27.10
 
   apps/svelte.dev:
     dependencies:
@@ -33,8 +33,8 @@ importers:
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
-        specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        specifier: ^1.1.4
+        version: 1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
+        version: 1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -99,8 +99,8 @@ importers:
         specifier: ^2.1.2
         version: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
       ws:
-        specifier: ^8.13.0
-        version: 8.17.0
+        specifier: ^8.18.0
+        version: 8.18.0
       yootils:
         specifier: ^0.3.1
         version: 0.3.1
@@ -116,19 +116,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
-        version: 0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.10.1
-        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.11.0
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
-        specifier: 4.0.0-next.6
-        version: 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: 4.0.3
+        version: 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -136,8 +136,8 @@ importers:
         specifier: ^20.14.2
         version: 20.14.2
       browserslist:
-        specifier: ^4.23.1
-        version: 4.23.1
+        specifier: ^4.24.2
+        version: 4.24.2
       chokidar:
         specifier: ^4.0.1
         version: 4.0.1
@@ -145,8 +145,8 @@ importers:
         specifier: ^2.8.4
         version: 2.8.4
       dotenv:
-        specifier: ^16.4.5
-        version: 16.4.5
+        specifier: ^16.4.7
+        version: 16.4.7
       esbuild:
         specifier: ^0.21.5
         version: 0.21.5
@@ -193,8 +193,8 @@ importers:
         specifier: ^5.5.4
         version: 5.5.4
       vite:
-        specifier: ^5.4.7
-        version: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+        specifier: ^5.4.11
+        version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools:
         specifier: ^7.0.4
         version: 7.0.4(rollup@4.21.2)
@@ -249,10 +249,10 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.3.0)(typescript@5.5.4)
@@ -264,7 +264,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -275,8 +275,8 @@ importers:
         specifier: ^3.1.2
         version: 3.2.4(prettier@3.3.2)(svelte@5.3.0)
       publint:
-        specifier: ^0.2.0
-        version: 0.2.11
+        specifier: ^0.2.12
+        version: 0.2.12
       svelte:
         specifier: ^5.1.11
         version: 5.3.0
@@ -288,7 +288,7 @@ importers:
         version: 5.5.4
       vite:
         specifier: ^5.0.11
-        version: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+        version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   packages/repl:
     dependencies:
@@ -376,16 +376,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -396,8 +396,8 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
       publint:
-        specifier: ^0.1.9
-        version: 0.1.16
+        specifier: ^0.2.12
+        version: 0.2.12
       svelte-check:
         specifier: ^4.1.1
         version: 4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4)
@@ -406,7 +406,7 @@ importers:
         version: 5.5.4
       vite:
         specifier: ^5.4.3
-        version: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+        version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   packages/site-kit:
     dependencies:
@@ -479,7 +479,7 @@ importers:
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -509,7 +509,7 @@ importers:
         version: 5.5.4
       vite:
         specifier: ^5.4.3
-        version: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+        version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
 packages:
 
@@ -533,51 +533,51 @@ packages:
     resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
     engines: {node: '>=6.9.0'}
 
-  '@changesets/apply-release-plan@7.0.3':
-    resolution: {integrity: sha512-klL6LCdmfbEe9oyfLxnidIf/stFXmrbFO/3gT5LU5pcyoZytzJe4gWpTBx3BPmyNPl16dZ1xrkcW7b98e3tYkA==}
+  '@changesets/apply-release-plan@7.0.6':
+    resolution: {integrity: sha512-TKhVLtiwtQOgMAC0fCJfmv93faiViKSDqr8oMEqrnNs99gtSC1sZh/aEMS9a+dseU1ESZRCK+ofLgGY7o0fw/Q==}
 
-  '@changesets/assemble-release-plan@6.0.2':
-    resolution: {integrity: sha512-n9/Tdq+ze+iUtjmq0mZO3pEhJTKkku9hUxtUadW30jlN7kONqJG3O6ALeXrmc6gsi/nvoCuKjqEJ68Hk8RbMTQ==}
+  '@changesets/assemble-release-plan@6.0.5':
+    resolution: {integrity: sha512-IgvBWLNKZd6k4t72MBTBK3nkygi0j3t3zdC1zrfusYo0KpdsvnDjrMM9vPnTCLCMlfNs55jRL4gIMybxa64FCQ==}
 
   '@changesets/changelog-git@0.2.0':
     resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==}
 
-  '@changesets/cli@2.27.6':
-    resolution: {integrity: sha512-PB7KS5JkCQ4WSXlnfThn8CXAHVwYxFdZvYTimhi12fls/tzj9iimUhKsYwkrKSbw1AiVlGCZtihj5Wkt6siIjA==}
+  '@changesets/cli@2.27.10':
+    resolution: {integrity: sha512-PfeXjvs9OfQJV8QSFFHjwHX3QnUL9elPEQ47SgkiwzLgtKGyuikWjrdM+lO9MXzOE22FO9jEGkcs4b+B6D6X0Q==}
     hasBin: true
 
-  '@changesets/config@3.0.1':
-    resolution: {integrity: sha512-nCr8pOemUjvGJ8aUu8TYVjqnUL+++bFOQHBVmtNbLvKzIDkN/uiP/Z4RKmr7NNaiujIURHySDEGFPftR4GbTUA==}
+  '@changesets/config@3.0.4':
+    resolution: {integrity: sha512-+DiIwtEBpvvv1z30f8bbOsUQGuccnZl9KRKMM/LxUHuDu5oEjmN+bJQ1RIBKNJjfYMQn8RZzoPiX0UgPaLQyXw==}
 
   '@changesets/errors@0.2.0':
     resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
 
-  '@changesets/get-dependents-graph@2.1.0':
-    resolution: {integrity: sha512-QOt6pQq9RVXKGHPVvyKimJDYJumx7p4DO5MO9AhRJYgAPgv0emhNqAqqysSVKHBm4sxKlGN4S1zXOIb5yCFuhQ==}
+  '@changesets/get-dependents-graph@2.1.2':
+    resolution: {integrity: sha512-sgcHRkiBY9i4zWYBwlVyAjEM9sAzs4wYVwJUdnbDLnVG3QwAaia1Mk5P8M7kraTOZN+vBET7n8KyB0YXCbFRLQ==}
 
-  '@changesets/get-release-plan@4.0.2':
-    resolution: {integrity: sha512-rOalz7nMuMV2vyeP7KBeAhqEB7FM2GFPO5RQSoOoUKKH9L6wW3QyPA2K+/rG9kBrWl2HckPVES73/AuwPvbH3w==}
+  '@changesets/get-release-plan@4.0.5':
+    resolution: {integrity: sha512-E6wW7JoSMcctdVakut0UB76FrrN3KIeJSXvB+DHMFo99CnC3ZVnNYDCVNClMlqAhYGmLmAj77QfApaI3ca4Fkw==}
 
   '@changesets/get-version-range-type@0.4.0':
     resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
 
-  '@changesets/git@3.0.0':
-    resolution: {integrity: sha512-vvhnZDHe2eiBNRFHEgMiGd2CT+164dfYyrJDhwwxTVD/OW0FUD6G7+4DIx1dNwkwjHyzisxGAU96q0sVNBns0w==}
+  '@changesets/git@3.0.2':
+    resolution: {integrity: sha512-r1/Kju9Y8OxRRdvna+nxpQIsMsRQn9dhhAZt94FLDeu0Hij2hnOozW8iqnHBgvu+KdnJppCveQwK4odwfw/aWQ==}
 
-  '@changesets/logger@0.1.0':
-    resolution: {integrity: sha512-pBrJm4CQm9VqFVwWnSqKEfsS2ESnwqwH+xR7jETxIErZcfd1u2zBSqrHbRHR7xjhSgep9x2PSKFKY//FAshA3g==}
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
 
   '@changesets/parse@0.4.0':
     resolution: {integrity: sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==}
 
-  '@changesets/pre@2.0.0':
-    resolution: {integrity: sha512-HLTNYX/A4jZxc+Sq8D1AMBsv+1qD6rmmJtjsCJa/9MSRybdxh0mjbTvE6JYZQ/ZiQ0mMlDOlGPXTm9KLTU3jyw==}
+  '@changesets/pre@2.0.1':
+    resolution: {integrity: sha512-vvBJ/If4jKM4tPz9JdY2kGOgWmCowUYOi5Ycv8dyLnEE8FgpYYUo1mgJZxcdtGGP3aG8rAQulGLyyXGSLkIMTQ==}
 
-  '@changesets/read@0.6.0':
-    resolution: {integrity: sha512-ZypqX8+/im1Fm98K4YcZtmLKgjs1kDQ5zHpc2U1qdtNBmZZfo/IBiG162RoP0CUF05tvp2y4IspH11PLnPxuuw==}
+  '@changesets/read@0.6.2':
+    resolution: {integrity: sha512-wjfQpJvryY3zD61p8jR87mJdyx2FIhEcdXhKUqkja87toMrP/3jtg/Yg29upN+N4Ckf525/uvV7a4tzBlpk6gg==}
 
-  '@changesets/should-skip-package@0.1.0':
-    resolution: {integrity: sha512-FxG6Mhjw7yFStlSM7Z0Gmg3RiyQ98d/9VpQAZ3Fzr59dCOM9G6ZdYbjiSAt0XtFr9JR5U2tBaJWPjrkGGc618g==}
+  '@changesets/should-skip-package@0.1.1':
+    resolution: {integrity: sha512-H9LjLbF6mMHLtJIc/eHR9Na+MifJ3VxtgP/Y+XLn4BF7tDTEN1HNYtH6QMcjP1uxp9sjaFYmW8xqloaCi/ckTg==}
 
   '@changesets/types@4.1.0':
     resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
@@ -585,8 +585,8 @@ packages:
   '@changesets/types@6.0.0':
     resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==}
 
-  '@changesets/write@0.3.1':
-    resolution: {integrity: sha512-SyGtMXzH3qFqlHKcvFY2eX+6b0NGiFcNav8AFsYwy5l8hejOeoeTDemu5Yjmke2V5jpzY+pBvM0vCCQ3gdZpfw==}
+  '@changesets/write@0.3.2':
+    resolution: {integrity: sha512-kDxDrPNpUgsjDbWBvUo27PzKX4gqeKOlhibaOXDJA6kuBisGqNHv/HwGJrAu8U/dSf8ZEFIeHIPtvSlZI1kULw==}
 
   '@cloudflare/workers-types@4.20241127.0':
     resolution: {integrity: sha512-UqlvtqV8eI0CdPR7nxlbVlE52+lcjHvGdbYXEPwisy23+39RsFV7OOy0da0moJAhqnL2OhDmWTOaKdsVcPHiJQ==}
@@ -1597,8 +1597,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
-  '@sveltejs/amp@1.1.3':
-    resolution: {integrity: sha512-C1NcbQa5JG1lyJLNkRjKI4Yvxek6EqtRL5jKqpVKI7mCzSbJ2CoHPbUnAazEG/TYu0pJhyCCLKvDCqE39gIJlg==}
+  '@sveltejs/amp@1.1.4':
+    resolution: {integrity: sha512-krWC1QXzTUGj+QpAbkACJmOeRx2f3AHGwNip9eY7px1FFb0rHi5zdjAd2IJKYwLgX3xh462nr0kOtrZUv2EX6Q==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0 || ^2.0.0
 
@@ -1608,8 +1608,8 @@ packages:
       svelte: ^5.0.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.10.1':
-    resolution: {integrity: sha512-2aormKTn94aU8Lfxj4gcbRGh1Dyw0hCFlNo51+njdRDn9P2ERuWC4bOtTuoy5HJpPYR3AH8oaaEjKDWUHbi1OA==}
+  '@sveltejs/kit@2.11.0':
+    resolution: {integrity: sha512-VtHkM5i4qAIeO9hfYwKD6Hxn7Ik+RkYam9842RXw6YdtzuI+gsA8XepZs7FB/o7hjQBJCDmvXahiGAnff1QU6w==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1645,8 +1645,8 @@ packages:
       svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6':
-    resolution: {integrity: sha512-7+bEFN5F9pthG6nOEHNz9yioHxNXK6yl+0GnTy9WOfxN/SvPykkH/Hs6MqTGjo47a9G2q3QXQnzuxG5WXNX4Tg==}
+  '@sveltejs/vite-plugin-svelte@4.0.3':
+    resolution: {integrity: sha512-J7nC5gT5qpmvyD2pmzPUntLUgoinyEaNy9sTpGGE6N7pblggO0A1NyneJJvR2ELlzK6ti28aF2SLXG1yJdnJeA==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
       svelte: ^5.0.0-next.96 || ^5.0.0
@@ -1714,9 +1714,6 @@ packages:
   '@types/phoenix@1.6.4':
     resolution: {integrity: sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA==}
 
-  '@types/semver@7.5.8':
-    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
-
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -1933,8 +1930,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -1945,8 +1942,8 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001632:
-    resolution: {integrity: sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==}
+  caniuse-lite@1.0.30001688:
+    resolution: {integrity: sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -2043,9 +2040,6 @@ packages:
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
-  cross-spawn@5.1.0:
-    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2131,15 +2125,15 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
-  dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.4.798:
-    resolution: {integrity: sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==}
+  electron-to-chromium@1.5.73:
+    resolution: {integrity: sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==}
 
   emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
@@ -2172,8 +2166,8 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
   escape-html@1.0.3:
@@ -2243,13 +2237,6 @@ packages:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-
-  find-yarn-workspace-root2@1.2.16:
-    resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
-
   flexsearch@0.7.43:
     resolution: {integrity: sha512-c5o/+Um8aqCSOXGcZoqZOm+NqtVwNsvVpWv6lfmSclU954O3wvQKxxK8zj74fPaSJbXpSLTs4PRhh+wnoCXnKg==}
 
@@ -2506,10 +2493,6 @@ packages:
   linebreak@1.1.0:
     resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
 
-  load-yaml-file@0.2.0:
-    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
-    engines: {node: '>=6'}
-
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -2517,10 +2500,6 @@ packages:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
 
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
@@ -2533,9 +2512,6 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@4.1.5:
-    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -2570,8 +2546,8 @@ packages:
   micromark-util-types@2.0.0:
     resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
 
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
   mime@3.0.0:
@@ -2635,8 +2611,8 @@ packages:
     resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
     hasBin: true
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
   nopt@8.0.0:
     resolution: {integrity: sha512-1L/fTJ4UmV/lUxT2Uf006pfZKTvAgCF+chz+0OgBHO8u2Z67pE7AaAUUj7CJy0lXqHmymUvGFt6NE9R3HER0yw==}
@@ -2684,18 +2660,10 @@ packages:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
 
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
 
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-
   p-map@2.1.0:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
     engines: {node: '>=6'}
@@ -2707,6 +2675,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@0.2.7:
+    resolution: {integrity: sha512-g4+387DXDKlZzHkP+9FLt8yKj8+/3tOkPv7DVTJGGRm00RkEWgqbFstX1mXJ4M0VDYhUqsTOiISqNOJnhAu3PQ==}
+
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
@@ -2778,10 +2749,6 @@ packages:
     resolution: {integrity: sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==}
     hasBin: true
 
-  pkg-dir@4.2.0:
-    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
-    engines: {node: '>=8'}
-
   pngjs@6.0.0:
     resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==}
     engines: {node: '>=12.13.0'}
@@ -2800,10 +2767,6 @@ packages:
     resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preferred-pm@3.1.3:
-    resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==}
-    engines: {node: '>=10'}
-
   prettier-plugin-svelte@3.2.4:
     resolution: {integrity: sha512-tZv+ADfeOWFNQkXkRh6zUXE16w3Vla8x2Ug0B/EnSmjR4EnwdwZbGgL/liSwR1kcEALU5mAAyua98HBxheCxgg==}
     peerDependencies:
@@ -2827,16 +2790,8 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
-  pseudomap@1.0.2:
-    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
-
-  publint@0.1.16:
-    resolution: {integrity: sha512-wJgk7HnXDT5Ap0DjFYbGz78kPkN44iQvDiaq8P63IEEyNU9mYXvaMd2cAyIM6OgqXM/IA3CK6XWIsRq+wjNpgw==}
-    engines: {node: '>=16'}
-    hasBin: true
-
-  publint@0.2.11:
-    resolution: {integrity: sha512-/kxbd+sD/uEG515N/ZYpC6gYs8h89cQ4UIsAq1y6VT4qlNh8xmiSwcP2xU2MbzXFl8J0l2IdONKFweLfYoqhcA==}
+  publint@0.2.12:
+    resolution: {integrity: sha512-YNeUtCVeM4j9nDiTT2OPczmlyzOkIXNtdDZnSuajAxS/nZ6j3t7Vs9SUB4euQNddiltIwu7Tdd3s+hr08fAsMw==}
     engines: {node: '>=16'}
     hasBin: true
 
@@ -2934,18 +2889,10 @@ packages:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shebang-command@1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
 
-  shebang-regex@1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-
   shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
@@ -2956,9 +2903,6 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2981,8 +2925,8 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spawndamnit@2.0.0:
-    resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -3220,8 +3164,8 @@ packages:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -3247,8 +3191,8 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
-  vite@5.4.7:
-    resolution: {integrity: sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==}
+  vite@5.4.11:
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -3278,14 +3222,6 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
-    peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
   vitefu@1.0.3:
     resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
@@ -3328,14 +3264,6 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which-pm@2.0.0:
-    resolution: {integrity: sha512-Lhs9Pmyph0p5n5Z3mVnN0yWcbQYUAD7rbQUiMsQxOJ3T57k7RFe35SUwWMf7dsbDZks1uOmw4AecB/JMDj3v/w==}
-    engines: {node: '>=8.15'}
-
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -3357,8 +3285,8 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  ws@8.17.0:
-    resolution: {integrity: sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==}
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -3380,17 +3308,10 @@ packages:
     resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==}
     engines: {node: '>=4.0'}
 
-  yallist@2.1.2:
-    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
   yallist@5.0.0:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
 
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-
   yoga-wasm-web@0.3.3:
     resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
 
@@ -3431,13 +3352,12 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@changesets/apply-release-plan@7.0.3':
+  '@changesets/apply-release-plan@7.0.6':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@changesets/config': 3.0.1
+      '@changesets/config': 3.0.4
       '@changesets/get-version-range-type': 0.4.0
-      '@changesets/git': 3.0.0
-      '@changesets/should-skip-package': 0.1.0
+      '@changesets/git': 3.0.2
+      '@changesets/should-skip-package': 0.1.1
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
@@ -3448,12 +3368,11 @@ snapshots:
       resolve-from: 5.0.0
       semver: 7.6.3
 
-  '@changesets/assemble-release-plan@6.0.2':
+  '@changesets/assemble-release-plan@6.0.5':
     dependencies:
-      '@babel/runtime': 7.24.7
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.0
-      '@changesets/should-skip-package': 0.1.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/should-skip-package': 0.1.1
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       semver: 7.6.3
@@ -3462,116 +3381,105 @@ snapshots:
     dependencies:
       '@changesets/types': 6.0.0
 
-  '@changesets/cli@2.27.6':
+  '@changesets/cli@2.27.10':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@changesets/apply-release-plan': 7.0.3
-      '@changesets/assemble-release-plan': 6.0.2
+      '@changesets/apply-release-plan': 7.0.6
+      '@changesets/assemble-release-plan': 6.0.5
       '@changesets/changelog-git': 0.2.0
-      '@changesets/config': 3.0.1
+      '@changesets/config': 3.0.4
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.0
-      '@changesets/get-release-plan': 4.0.2
-      '@changesets/git': 3.0.0
-      '@changesets/logger': 0.1.0
-      '@changesets/pre': 2.0.0
-      '@changesets/read': 0.6.0
-      '@changesets/should-skip-package': 0.1.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/get-release-plan': 4.0.5
+      '@changesets/git': 3.0.2
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.1
+      '@changesets/read': 0.6.2
+      '@changesets/should-skip-package': 0.1.1
       '@changesets/types': 6.0.0
-      '@changesets/write': 0.3.1
+      '@changesets/write': 0.3.2
       '@manypkg/get-packages': 1.1.3
-      '@types/semver': 7.5.8
       ansi-colors: 4.1.3
-      chalk: 2.4.2
       ci-info: 3.9.0
       enquirer: 2.4.1
       external-editor: 3.1.0
       fs-extra: 7.0.1
-      human-id: 1.0.2
       mri: 1.2.0
-      outdent: 0.5.0
       p-limit: 2.3.0
-      preferred-pm: 3.1.3
+      package-manager-detector: 0.2.7
+      picocolors: 1.1.1
       resolve-from: 5.0.0
       semver: 7.6.3
-      spawndamnit: 2.0.0
+      spawndamnit: 3.0.1
       term-size: 2.2.1
 
-  '@changesets/config@3.0.1':
+  '@changesets/config@3.0.4':
     dependencies:
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.0
-      '@changesets/logger': 0.1.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/logger': 0.1.1
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
   '@changesets/errors@0.2.0':
     dependencies:
       extendable-error: 0.1.7
 
-  '@changesets/get-dependents-graph@2.1.0':
+  '@changesets/get-dependents-graph@2.1.2':
     dependencies:
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
-      chalk: 2.4.2
-      fs-extra: 7.0.1
+      picocolors: 1.1.1
       semver: 7.6.3
 
-  '@changesets/get-release-plan@4.0.2':
+  '@changesets/get-release-plan@4.0.5':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@changesets/assemble-release-plan': 6.0.2
-      '@changesets/config': 3.0.1
-      '@changesets/pre': 2.0.0
-      '@changesets/read': 0.6.0
+      '@changesets/assemble-release-plan': 6.0.5
+      '@changesets/config': 3.0.4
+      '@changesets/pre': 2.0.1
+      '@changesets/read': 0.6.2
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
 
   '@changesets/get-version-range-type@0.4.0': {}
 
-  '@changesets/git@3.0.0':
+  '@changesets/git@3.0.2':
     dependencies:
-      '@babel/runtime': 7.24.7
       '@changesets/errors': 0.2.0
-      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
-      micromatch: 4.0.7
-      spawndamnit: 2.0.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
 
-  '@changesets/logger@0.1.0':
+  '@changesets/logger@0.1.1':
     dependencies:
-      chalk: 2.4.2
+      picocolors: 1.1.1
 
   '@changesets/parse@0.4.0':
     dependencies:
       '@changesets/types': 6.0.0
       js-yaml: 3.14.1
 
-  '@changesets/pre@2.0.0':
+  '@changesets/pre@2.0.1':
     dependencies:
-      '@babel/runtime': 7.24.7
       '@changesets/errors': 0.2.0
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
 
-  '@changesets/read@0.6.0':
+  '@changesets/read@0.6.2':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@changesets/git': 3.0.0
-      '@changesets/logger': 0.1.0
+      '@changesets/git': 3.0.2
+      '@changesets/logger': 0.1.1
       '@changesets/parse': 0.4.0
       '@changesets/types': 6.0.0
-      chalk: 2.4.2
       fs-extra: 7.0.1
       p-filter: 2.1.0
+      picocolors: 1.1.1
 
-  '@changesets/should-skip-package@0.1.0':
+  '@changesets/should-skip-package@0.1.1':
     dependencies:
-      '@babel/runtime': 7.24.7
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
 
@@ -3579,9 +3487,8 @@ snapshots:
 
   '@changesets/types@6.0.0': {}
 
-  '@changesets/write@0.3.1':
+  '@changesets/write@0.3.2':
     dependencies:
-      '@babel/runtime': 7.24.7
       '@changesets/types': 6.0.0
       fs-extra: 7.0.1
       human-id: 1.0.2
@@ -4487,7 +4394,7 @@ snapshots:
       '@supabase/node-fetch': 2.6.15
       '@types/phoenix': 1.6.4
       '@types/ws': 8.5.10
-      ws: 8.17.0
+      ws: 8.18.0
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -4508,19 +4415,19 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.9(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4528,25 +4435,25 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
       sharp: 0.33.5
       svelte: 5.3.0
       svelte-parse-markup: 0.1.5(svelte@5.3.0)
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
       zimmerframe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4560,11 +4467,11 @@ snapshots:
       sirv: 3.0.0
       svelte: 5.1.11
       tiny-glob: 0.2.9
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4576,13 +4483,13 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.3.0
+      svelte: 5.1.11
       tiny-glob: 0.2.9
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4596,7 +4503,7 @@ snapshots:
       sirv: 3.0.0
       svelte: 5.3.0
       tiny-glob: 0.2.9
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   '@sveltejs/package@2.3.1(svelte@5.1.11)(typescript@5.5.4)':
     dependencies:
@@ -4624,69 +4531,69 @@ snapshots:
     dependencies:
       svelte: 5.1.11
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       svelte: 5.1.11
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.3.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      svelte: 5.1.11
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       svelte: 5.3.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
       svelte: 5.1.11
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
+      vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.3.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitefu: 1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.1.11
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
+      vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
       svelte: 5.3.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
+      vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -4701,12 +4608,12 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
       svelte: 5.3.0
     optionalDependencies:
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
@@ -4747,8 +4654,6 @@ snapshots:
 
   '@types/phoenix@1.6.4': {}
 
-  '@types/semver@7.5.8': {}
-
   '@types/unist@3.0.3': {}
 
   '@types/ws@8.5.10':
@@ -4787,9 +4692,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.3.0
 
   '@vitest/expect@2.1.2':
@@ -4799,13 +4704,13 @@ snapshots:
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@vitest/spy': 2.1.2
       estree-walker: 3.0.3
       magic-string: 0.30.12
     optionalDependencies:
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   '@vitest/pretty-format@2.1.2':
     dependencies:
@@ -4930,18 +4835,18 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.23.1:
+  browserslist@4.24.2:
     dependencies:
-      caniuse-lite: 1.0.30001632
-      electron-to-chromium: 1.4.798
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
+      caniuse-lite: 1.0.30001688
+      electron-to-chromium: 1.5.73
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
   cac@6.7.14: {}
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001632: {}
+  caniuse-lite@1.0.30001688: {}
 
   ccount@2.0.1: {}
 
@@ -5042,12 +4947,6 @@ snapshots:
 
   crelt@1.0.6: {}
 
-  cross-spawn@5.1.0:
-    dependencies:
-      lru-cache: 4.1.5
-      shebang-command: 1.2.0
-      which: 1.3.1
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -5112,11 +5011,11 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
-  dotenv@16.4.5: {}
+  dotenv@16.4.7: {}
 
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.4.798: {}
+  electron-to-chromium@1.5.73: {}
 
   emoji-regex@10.3.0: {}
 
@@ -5211,7 +5110,7 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.0
       '@esbuild/win32-x64': 0.24.0
 
-  escalade@3.1.2: {}
+  escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
 
@@ -5248,7 +5147,7 @@ snapshots:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
   fastq@1.17.1:
     dependencies:
@@ -5277,16 +5176,6 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
-  find-yarn-workspace-root2@1.2.16:
-    dependencies:
-      micromatch: 4.0.7
-      pkg-dir: 4.2.0
-
   flexsearch@0.7.43: {}
 
   flru@1.0.2: {}
@@ -5560,23 +5449,12 @@ snapshots:
       base64-js: 0.0.8
       unicode-trie: 2.0.0
 
-  load-yaml-file@0.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
-
   locate-character@3.0.0: {}
 
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
 
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
   lodash.startcase@4.4.0: {}
 
   loupe@3.1.1:
@@ -5589,11 +5467,6 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@4.1.5:
-    dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.12:
@@ -5633,7 +5506,7 @@ snapshots:
 
   micromark-util-types@2.0.0: {}
 
-  micromatch@4.0.7:
+  micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
@@ -5680,7 +5553,7 @@ snapshots:
 
   node-gyp-build@4.8.4: {}
 
-  node-releases@2.0.14: {}
+  node-releases@2.0.19: {}
 
   nopt@8.0.0:
     dependencies:
@@ -5723,24 +5596,18 @@ snapshots:
     dependencies:
       p-try: 2.2.0
 
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
-
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
 
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
   p-map@2.1.0: {}
 
   p-try@2.2.0: {}
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@0.2.7: {}
+
   pako@0.2.9: {}
 
   pako@1.0.11: {}
@@ -5795,10 +5662,6 @@ snapshots:
     dependencies:
       pngjs: 6.0.0
 
-  pkg-dir@4.2.0:
-    dependencies:
-      find-up: 4.1.0
-
   pngjs@6.0.0: {}
 
   pngjs@7.0.0: {}
@@ -5813,13 +5676,6 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  preferred-pm@3.1.3:
-    dependencies:
-      find-up: 5.0.0
-      find-yarn-workspace-root2: 1.2.16
-      path-exists: 4.0.0
-      which-pm: 2.0.0
-
   prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.11):
     dependencies:
       prettier: 3.3.2
@@ -5842,15 +5698,7 @@ snapshots:
 
   property-information@6.5.0: {}
 
-  pseudomap@1.0.2: {}
-
-  publint@0.1.16:
-    dependencies:
-      npm-packlist: 5.1.3
-      picocolors: 1.1.1
-      sade: 1.8.1
-
-  publint@0.2.11:
+  publint@0.2.12:
     dependencies:
       npm-packlist: 5.1.3
       picocolors: 1.1.1
@@ -5984,16 +5832,10 @@ snapshots:
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
 
-  shebang-command@1.2.0:
-    dependencies:
-      shebang-regex: 1.0.0
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
-  shebang-regex@1.0.0: {}
-
   shebang-regex@3.0.0: {}
 
   shiki@1.22.0:
@@ -6007,8 +5849,6 @@ snapshots:
 
   siginfo@2.0.0: {}
 
-  signal-exit@3.0.7: {}
-
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
@@ -6027,10 +5867,10 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  spawndamnit@2.0.0:
+  spawndamnit@3.0.1:
     dependencies:
-      cross-spawn: 5.1.0
-      signal-exit: 3.0.7
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
 
   sprintf-js@1.0.3: {}
 
@@ -6281,10 +6121,10 @@ snapshots:
 
   universalify@0.1.2: {}
 
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
-      browserslist: 4.23.1
-      escalade: 3.1.2
+      browserslist: 4.24.2
+      escalade: 3.2.0
       picocolors: 1.1.1
 
   utif2@4.1.0:
@@ -6316,7 +6156,7 @@ snapshots:
       cac: 6.7.14
       debug: 4.4.0
       pathe: 1.1.2
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -6328,7 +6168,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1):
+  vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.45
@@ -6338,18 +6178,14 @@ snapshots:
       fsevents: 2.3.3
       lightningcss: 1.25.1
 
-  vitefu@0.2.5(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)):
+  vitefu@1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)):
     optionalDependencies:
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
-
-  vitefu@1.0.3(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)):
-    optionalDependencies:
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1):
     dependencies:
       '@vitest/expect': 2.1.2
-      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vitest/pretty-format': 2.1.2
       '@vitest/runner': 2.1.2
       '@vitest/snapshot': 2.1.2
@@ -6364,7 +6200,7 @@ snapshots:
       tinyexec: 0.3.0
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
-      vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-node: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
@@ -6389,15 +6225,6 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which-pm@2.0.0:
-    dependencies:
-      load-yaml-file: 0.2.0
-      path-exists: 4.0.0
-
-  which@1.3.1:
-    dependencies:
-      isexe: 2.0.0
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -6421,7 +6248,7 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  ws@8.17.0: {}
+  ws@8.18.0: {}
 
   xml-parse-from-string@1.0.1: {}
 
@@ -6432,12 +6259,8 @@ snapshots:
 
   xmlbuilder@11.0.1: {}
 
-  yallist@2.1.2: {}
-
   yallist@5.0.0: {}
 
-  yocto-queue@0.1.0: {}
-
   yoga-wasm-web@0.3.3: {}
 
   yootils@0.3.1: {}

From ad86cb3dfb5032ffc62cc9a0cf1050d735103fc2 Mon Sep 17 00:00:00 2001
From: Kresna Satya <kresnasatya72@gmail.com>
Date: Fri, 13 Dec 2024 05:41:45 +0700
Subject: [PATCH 215/453] Fix Responsive Issue in svelte.dev Homepage (#997)

* fix: set width and height in svelte-pronounciation in order to remove responsive issue

* avoid hardcoded dimensions

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/src/routes/_home/Testimonials.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 79855f0038..8968ea0c2b 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -71,6 +71,7 @@
 		position: relative;
 		aspect-ratio: 457.4 / 138.8;
 		height: var(--sk-font-size-h1);
+		width: auto;
 		bottom: -0.3em;
 	}
 

From 1cb496946c82ab32a6b528d96c52535080ee1b16 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 12 Dec 2024 17:43:33 -0500
Subject: [PATCH 216/453] chore: Upgrade CodeMirror (#978)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "Revert "fix: Update package version of codemirror/view to fix carret …"

This reverts commit 25ea0c8e637ef618a727398b6dcb3a73b7ad8505.

* chore: update codemirror
---
 packages/editor/package.json   |   4 +-
 packages/repl/package.json     |   4 +-
 packages/site-kit/package.json |   4 +-
 pnpm-lock.yaml                 | 137 +++++++++++++++++----------------
 4 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index ba78bf8d93..b617d2b847 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -41,8 +41,8 @@
 		"@codemirror/language": "^6.10.3",
 		"@codemirror/lint": "^6.8.2",
 		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.34.1",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index d4e2099a13..dced93bc06 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -70,8 +70,8 @@
 		"@codemirror/lang-markdown": "^6.2.5",
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/lint": "^6.7.0",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.3",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index af31fe95c2..4a744c1553 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -30,8 +30,8 @@
 		"@codemirror/language": "^6.9.0",
 		"@codemirror/lint": "^6.4.1",
 		"@codemirror/search": "^6.5.2",
-		"@codemirror/state": "^6.2.1",
-		"@codemirror/view": "^6.17.1",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@fontsource/atkinson-hyperlegible": "^5.1.0",
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f943c9e96f..e6aaa965d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,13 +213,13 @@ importers:
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.3)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -236,17 +236,17 @@ importers:
         specifier: ^6.5.6
         version: 6.5.6
       '@codemirror/state':
-        specifier: ^6.4.1
-        version: 6.4.1
+        specifier: ^6.5.0
+        version: 6.5.0
       '@codemirror/view':
-        specifier: ^6.34.1
-        version: 6.34.1
+        specifier: ^6.35.3
+        version: 6.35.3
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
         version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
@@ -294,13 +294,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.16.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.5.0
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.3)
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
@@ -317,20 +317,20 @@ importers:
         specifier: ^6.7.0
         version: 6.8.2
       '@codemirror/state':
-        specifier: ^6.4.1
-        version: 6.4.1
+        specifier: ^6.5.0
+        version: 6.5.0
       '@codemirror/view':
-        specifier: ^6.26.3
-        version: 6.34.1
+        specifier: ^6.35.3
+        version: 6.35.3
       '@jridgewell/sourcemap-codec':
         specifier: ^1.4.15
         version: 1.5.0
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@replit/codemirror-vim':
         specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
         version: 1.1.3(svelte@5.1.11)
@@ -412,13 +412,13 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/commands':
         specifier: ^6.2.5
         version: 6.5.0
       '@codemirror/lang-css':
         specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.34.1)
+        version: 6.2.1(@codemirror/view@6.35.3)
       '@codemirror/lang-html':
         specifier: ^6.4.6
         version: 6.4.9
@@ -435,11 +435,11 @@ importers:
         specifier: ^6.5.2
         version: 6.5.6
       '@codemirror/state':
-        specifier: ^6.2.1
-        version: 6.4.1
+        specifier: ^6.5.0
+        version: 6.5.0
       '@codemirror/view':
-        specifier: ^6.17.1
-        version: 6.34.1
+        specifier: ^6.35.3
+        version: 6.35.3
       '@fontsource/atkinson-hyperlegible':
         specifier: ^5.1.0
         version: 5.1.0
@@ -460,7 +460,7 @@ importers:
         version: 1.2.2
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
@@ -626,11 +626,11 @@ packages:
   '@codemirror/search@6.5.6':
     resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
 
-  '@codemirror/state@6.4.1':
-    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+  '@codemirror/state@6.5.0':
+    resolution: {integrity: sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==}
 
-  '@codemirror/view@6.34.1':
-    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
+  '@codemirror/view@6.35.3':
+    resolution: {integrity: sha512-ScY7L8+EGdPl4QtoBiOzE4FELp7JmNUsBvgBcCakXWM2uiv/K89VAzU3BMDscf0DsACLvTKePbd5+cFDTcei6g==}
 
   '@emnapi/runtime@1.2.0':
     resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
@@ -1326,6 +1326,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3496,25 +3499,25 @@ snapshots:
 
   '@cloudflare/workers-types@4.20241127.0': {}
 
-  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)':
+  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)':
     dependencies:
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
 
   '@codemirror/commands@6.5.0':
     dependencies:
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1)':
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
+      '@codemirror/state': 6.5.0
       '@lezer/common': 1.2.2
       '@lezer/css': 1.1.8
     transitivePeerDependencies:
@@ -3522,23 +3525,23 @@ snapshots:
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.3)
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
       '@lezer/css': 1.1.8
       '@lezer/html': 1.3.9
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
       '@lezer/javascript': 1.4.17
 
@@ -3549,18 +3552,18 @@ snapshots:
 
   '@codemirror/lang-markdown@6.2.5':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
       '@lezer/markdown': 1.3.0
 
   '@codemirror/language@6.10.3':
     dependencies:
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.1
@@ -3568,21 +3571,23 @@ snapshots:
 
   '@codemirror/lint@6.8.2':
     dependencies:
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       crelt: 1.0.6
 
   '@codemirror/search@6.5.6':
     dependencies:
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       crelt: 1.0.6
 
-  '@codemirror/state@6.4.1': {}
+  '@codemirror/state@6.5.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
 
-  '@codemirror/view@6.34.1':
+  '@codemirror/view@6.35.3':
     dependencies:
-      '@codemirror/state': 6.4.1
+      '@codemirror/state': 6.5.0
       style-mod: 4.1.2
       w3c-keyname: 2.2.8
 
@@ -4174,6 +4179,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4191,27 +4198,27 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
+  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.3)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/javascript': 1.4.17
       '@lezer/lr': 1.4.1
 
-  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+  '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)':
     dependencies:
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/search': 6.5.6
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
 
   '@resvg/resvg-js-android-arm-eabi@2.6.2':
     optional: true
@@ -4899,13 +4906,13 @@ snapshots:
 
   codemirror@6.0.1(@lezer/common@1.2.2):
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
       '@codemirror/commands': 6.5.0
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
       '@codemirror/search': 6.5.6
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
     transitivePeerDependencies:
       - '@lezer/common'
 

From 6c7779bb60b9298053e5ab11433e3d132ec2b9dd Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 12 Dec 2024 14:52:06 -0800
Subject: [PATCH 217/453] chore: remove use of deprecated `xlink` attribute
 (#996)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/site-kit/src/lib/components/Icon.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/components/Icon.svelte b/packages/site-kit/src/lib/components/Icon.svelte
index da6e477b78..5cfba2a9bb 100644
--- a/packages/site-kit/src/lib/components/Icon.svelte
+++ b/packages/site-kit/src/lib/components/Icon.svelte
@@ -14,7 +14,7 @@ use an svg icon that was provided through `Icons.svelte` from
 </script>
 
 <svg width={size} height={size}>
-	<use xlink:href="#{name}" />
+	<use href="#{name}" />
 </svg>
 
 <style>

From ba1163feb7cc8a838cc24e1228888e26d57ab5bc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 12 Dec 2024 22:50:22 -0500
Subject: [PATCH 218/453] trim ts snippets (#945)

* trim ts snippets

* fix
---
 packages/site-kit/src/lib/markdown/renderer.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index bd79475332..6b304a797f 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -541,7 +541,8 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 		}
 	}
 
-	let transformed = code.toString();
+	// remove leading/trailing newlines (not any whitespace, because that can signify diffs)
+	let transformed = code.toString().replace(/^\n+/, '').replace(/\n+$/, '');
 
 	return transformed === js_code ? undefined : transformed;
 

From 7416468fc3fb0c82b449744d56f7ffe001c3b9b5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 13 Dec 2024 07:49:58 -0500
Subject: [PATCH 219/453] use local version of svelte (#1009)

---
 apps/svelte.dev/static/svelte                    | 1 +
 packages/editor/src/lib/compile-worker/worker.ts | 2 +-
 packages/repl/src/lib/workers/bundler/index.ts   | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 120000 apps/svelte.dev/static/svelte

diff --git a/apps/svelte.dev/static/svelte b/apps/svelte.dev/static/svelte
new file mode 120000
index 0000000000..eb3b338d0b
--- /dev/null
+++ b/apps/svelte.dev/static/svelte
@@ -0,0 +1 @@
+../node_modules/svelte
\ No newline at end of file
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index 9ea49a6b5f..b2c6053518 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -13,7 +13,7 @@ declare var self: Window & typeof globalThis & { svelte: typeof import('svelte/c
 let inited: PromiseWithResolvers<typeof self.svelte>;
 
 async function init(v: string) {
-	const svelte_url = `https://unpkg.com/svelte@${v}`;
+	const svelte_url = v === 'local' ? '/svelte' : `https://unpkg.com/svelte@${v}`;
 	const match = /^(?:pr|commit)-(.+)/.exec(v);
 
 	let tarball: FileDescription[] | undefined;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 38e7c8ac59..b65147fbec 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -56,6 +56,9 @@ async function init(v: string, packages_url: string) {
 			const url = `${svelte_url}/${file.name.slice('package/'.length)}`;
 			FETCH_CACHE.set(url, Promise.resolve({ url, body: file.text }));
 		}
+	} else if (v === 'local') {
+		version = v;
+		svelte_url = `/svelte`;
 	} else {
 		const response = await fetch(`${packages_url}/svelte@${v}/package.json`);
 		const pkg = await response.json();

From d2c90f6f34df0c0a30d3c5ee43cc0f172ac3bffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B1=B1=E5=90=B9=E8=89=B2=E5=BE=A1=E5=AE=88?=
 <85992002+KazariEX@users.noreply.github.com>
Date: Sat, 14 Dec 2024 00:36:20 +0800
Subject: [PATCH 220/453] fix: restore surrounding newlines with `lang="ts"`
 (#1011)

---
 packages/site-kit/src/lib/markdown/renderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 6b304a797f..23487fb216 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -369,7 +369,7 @@ async function generate_ts_from_js(
 
 		if (!ts) return;
 
-		return code.replace(outer, `<script lang="ts">${ts}</script>`);
+		return code.replace(outer, `<script lang="ts">\n${ts}\n</script>`);
 	}
 
 	return await convert_to_ts(code);

From 99b16ef82f779e06861d1caf6752f08bcd170ea9 Mon Sep 17 00:00:00 2001
From: Stanislav Khromov <stanislav.khromov+github@gmail.com>
Date: Fri, 13 Dec 2024 18:13:22 +0100
Subject: [PATCH 221/453] feat: llms.txt (#979)

* wip

* Update +server.ts

* Update +server.ts

* wip

* wip

* Update +server.ts

* Update +server.ts

* wip

* cleanup

* wip

* refactor

* cleanupo

* Update +server.ts

* Update content.ts

* wip

* Create +server.ts

* minimize llms.txt

* Filter llms.txt

* clean up

* package

* chore: naming

* Update +server.ts

* Dynamic path names

* clean up

* fix

* under_score

* code style

* use real document titles, filter out empty files

* move llms.txt to llms-small.txt

* llms.txt index

* Update +server.ts

* Update +server.ts

* Fix index

* fix

* revert VERCEL_URL usage

* Update apps/svelte.dev/src/lib/server/content.ts

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* move llm stuff into its own module

* revert whitespace changes

* snake_case

* tweak

* snake_case etc

* make ignores work

* simplify

* unused

* reduce indirection

* more

* move template into separate .md file

* add a section to /docs

* advent of svelte

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../blog/2024-12-01-advent-of-svelte.md       |   8 +-
 apps/svelte.dev/package.json                  |   1 +
 apps/svelte.dev/src/lib/server/llms.ts        | 134 ++++++++++++++++++
 apps/svelte.dev/src/routes/docs/+page.svelte  |   8 ++
 .../routes/docs/[...path]/llms.txt/+server.ts |  29 ++++
 .../src/routes/docs/llms/+page.svelte         |  46 ++++++
 .../src/routes/llms-full.txt/+server.ts       |  15 ++
 .../src/routes/llms-small.txt/+server.ts      |  47 ++++++
 .../svelte.dev/src/routes/llms.txt/+server.ts |  22 +++
 .../src/routes/llms.txt/template.md           |  19 +++
 pnpm-lock.yaml                                |  11 ++
 11 files changed, 338 insertions(+), 2 deletions(-)
 create mode 100644 apps/svelte.dev/src/lib/server/llms.ts
 create mode 100644 apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/docs/llms/+page.svelte
 create mode 100644 apps/svelte.dev/src/routes/llms-full.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/llms-small.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/llms.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/llms.txt/template.md

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 5a81ef26a5..f569196f7e 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -99,9 +99,13 @@ As of today, you can also return things that _aren't_ built in to the language,
 - [docs](/docs/kit/hooks#Universal-hooks-transport)
 - [demo](https://stackblitz.com/edit/sveltejs-kit-template-default-b5zbxomg?file=src%2Fhooks.js)
 
-## Day 13
+## Day 13: rise of the robots
 
-Coming soon!
+For those of you using LLMs to help you write code — via Cursor or Copilot or Claude or Bolt or v0 or some other interface — we now publish the documentation in a selection of robot-friendly `llms.txt` files. This is experimental and will evolve over time, but by way of example here's a [snake game](/playground/0de3c1c1a31d47bdbb7c4aa3477a6b46) built by Sonnet 3.5 with no additional prompting.
+
+Thanks to [Didier Catz](https://x.com/didiercatz) and [Stanislav Khromov](https://bsky.app/profile/khromov.se) for building this!
+
+- [docs](/docs/llms)
 
 ## Day 14
 
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 62625303a4..c158effcd5 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -67,6 +67,7 @@
 		"lightningcss": "^1.25.1",
 		"magic-string": "^0.30.11",
 		"marked": "^14.1.2",
+		"minimatch": "^10.0.1",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
diff --git a/apps/svelte.dev/src/lib/server/llms.ts b/apps/svelte.dev/src/lib/server/llms.ts
new file mode 100644
index 0000000000..3008cff916
--- /dev/null
+++ b/apps/svelte.dev/src/lib/server/llms.ts
@@ -0,0 +1,134 @@
+import { minimatch } from 'minimatch';
+import { dev } from '$app/environment';
+import { index } from './content';
+
+interface GenerateLlmContentOptions {
+	ignore?: string[];
+	minimize?: Partial<MinimizeOptions>;
+	sections: Section[];
+}
+
+interface MinimizeOptions {
+	remove_legacy: boolean;
+	remove_note_blocks: boolean;
+	remove_details_blocks: boolean;
+	remove_playground_links: boolean;
+	remove_prettier_ignore: boolean;
+	normalize_whitespace: boolean;
+}
+
+interface Section {
+	slug: string;
+	title: string;
+}
+
+const defaults: MinimizeOptions = {
+	remove_legacy: false,
+	remove_note_blocks: false,
+	remove_details_blocks: false,
+	remove_playground_links: false,
+	remove_prettier_ignore: false,
+	normalize_whitespace: false
+};
+
+export function generate_llm_content(options: GenerateLlmContentOptions): string {
+	let content = '';
+
+	for (const section of options.sections) {
+		if (options.sections.length > 1) {
+			content += `# Start of ${section.title} documentation\n\n`;
+		}
+
+		for (const [path, document] of Object.entries(index)) {
+			if (!path.startsWith(`docs/${section.slug}`)) continue;
+
+			if (options.ignore?.some((pattern) => minimatch(path, pattern))) {
+				if (dev) console.log(`❌ Ignored by pattern: ${path}`);
+				continue;
+			}
+
+			const doc_content = options.minimize
+				? minimize_content(document.body, options.minimize)
+				: document.body;
+			if (doc_content.trim() === '') continue;
+
+			content += `\n# ${document.metadata.title}\n\n`;
+			content += doc_content;
+			content += '\n';
+		}
+	}
+
+	return content;
+}
+
+export const sections: Section[] = [
+	{ slug: 'svelte', title: 'Svelte' },
+	{ slug: 'kit', title: 'SvelteKit' },
+	{ slug: 'cli', title: 'the Svelte CLI' }
+];
+
+export function get_documentation_title(section: Section): string {
+	return `This is the developer documentation for ${section.title}.`;
+}
+
+function minimize_content(content: string, options?: Partial<MinimizeOptions>): string {
+	// Merge with defaults, but only for properties that are defined
+	const settings: MinimizeOptions = { ...defaults, ...options };
+
+	let minimized = content;
+
+	if (settings.remove_legacy) {
+		minimized = remove_quote_blocks(minimized, 'LEGACY');
+	}
+
+	if (settings.remove_note_blocks) {
+		minimized = remove_quote_blocks(minimized, 'NOTE');
+	}
+
+	if (settings.remove_details_blocks) {
+		minimized = remove_quote_blocks(minimized, 'DETAILS');
+	}
+
+	if (settings.remove_playground_links) {
+		// Replace playground URLs with /[link] but keep the original link text
+		minimized = minimized.replace(/\[([^\]]+)\]\(\/playground[^)]+\)/g, '[$1](/REMOVED)');
+	}
+
+	if (settings.remove_prettier_ignore) {
+		minimized = minimized
+			.split('\n')
+			.filter((line) => line.trim() !== '<!-- prettier-ignore -->')
+			.join('\n');
+	}
+
+	if (settings.normalize_whitespace) {
+		minimized = minimized.replace(/\s+/g, ' ');
+	}
+
+	minimized = minimized.trim();
+
+	return minimized;
+}
+
+function remove_quote_blocks(content: string, blockType: string): string {
+	return content
+		.split('\n')
+		.reduce((acc: string[], line: string, index: number, lines: string[]) => {
+			// If we find a block (with or without additional text), skip it and all subsequent blockquote lines
+			if (line.trim().startsWith(`> [!${blockType}]`)) {
+				// Skip all subsequent lines that are part of the blockquote
+				let i = index;
+				while (i < lines.length && (lines[i].startsWith('>') || lines[i].trim() === '')) {
+					i++;
+				}
+				// Update the index to skip all these lines
+				index = i - 1;
+				return acc;
+			}
+
+			// Only add the line if it's not being skipped
+			acc.push(line);
+			return acc;
+		}, [])
+		.join('\n');
+}
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 06929a50e5..6691bf3986 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -90,6 +90,14 @@
 			</p>
 		</a>
 
+		<a href="http://github.com/docs/llms">
+			<h2>I'm a Large Language Model (LLM)</h2>
+			<p>
+				If you're an artificial intelligence, or trying to teach one how to use Svelte, we offer the
+				documentation in plaintext format. Beep boop.
+			</p>
+		</a>
+
 		<a href="http://github.com/chat" class="external">
 			<h2>Help! I'm stuck</h2>
 			<p>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts b/apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts
new file mode 100644
index 0000000000..d757e502e0
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts
@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit';
+import { generate_llm_content, get_documentation_title, sections } from '$lib/server/llms';
+
+export const prerender = true;
+
+export function entries() {
+	return sections.map((section) => ({ path: section.slug }));
+}
+
+export function GET({ params }) {
+	const pkg = params.path;
+
+	const section = sections.find((s) => s.slug === pkg);
+
+	if (!section) {
+		error(404, 'Not Found');
+	}
+
+	const prefix = `<SYSTEM>${get_documentation_title(section)}</SYSTEM>`;
+	const content = `${prefix}\n\n${generate_llm_content({ sections: [section] })}`;
+
+	return new Response(content, {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
diff --git a/apps/svelte.dev/src/routes/docs/llms/+page.svelte b/apps/svelte.dev/src/routes/docs/llms/+page.svelte
new file mode 100644
index 0000000000..2d07e49cf2
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/llms/+page.svelte
@@ -0,0 +1,46 @@
+<script>
+	import { Text } from '@sveltejs/site-kit/components';
+</script>
+
+<div class="page">
+	<Text>
+		<h1>Docs for LLMs</h1>
+
+		<p>
+			We support the <a href="https://llmstxt.org/">llms.txt</a> convention for making documentation
+			available to large language models and the applications that make use of them.
+		</p>
+
+		<p>Currently, we have the following root-level files...</p>
+
+		<ul>
+			<li><a href="http://github.com/llms.txt">/llms.txt</a> — a listing of the available files</li>
+			<li>
+				<a href="http://github.com/llms-full.txt">/llms-full.txt</a> — complete documentation for Svelte, SvelteKit and
+				the CLI
+			</li>
+			<li>
+				<a href="http://github.com/llms-small.txt">/llms-small.txt</a> — compressed documentation for use with smaller
+				context windows
+			</li>
+		</ul>
+
+		<p>...and package-level documentation:</p>
+
+		<ul>
+			<li><a href="http://github.com/docs/svelte/llms.txt">/docs/svelte/llms.txt</a></li>
+			<li><a href="http://github.com/docs/kit/llms.txt">/docs/kit/llms.txt</a></li>
+			<li><a href="http://github.com/docs/cli/llms.txt">/docs/cli/llms.txt</a></li>
+		</ul>
+	</Text>
+</div>
+
+<style>
+	.page {
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
+		max-width: var(--sk-page-content-width);
+		box-sizing: content-box;
+		margin: auto;
+		text-wrap: balance;
+	}
+</style>
diff --git a/apps/svelte.dev/src/routes/llms-full.txt/+server.ts b/apps/svelte.dev/src/routes/llms-full.txt/+server.ts
new file mode 100644
index 0000000000..18f2518797
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms-full.txt/+server.ts
@@ -0,0 +1,15 @@
+import { generate_llm_content, sections } from '$lib/server/llms';
+
+export const prerender = true;
+
+export function GET() {
+	const content = `<SYSTEM>This is the full developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${generate_llm_content({ sections })}`;
+
+	return new Response(content, {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
diff --git a/apps/svelte.dev/src/routes/llms-small.txt/+server.ts b/apps/svelte.dev/src/routes/llms-small.txt/+server.ts
new file mode 100644
index 0000000000..63eb51f77e
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms-small.txt/+server.ts
@@ -0,0 +1,47 @@
+import { generate_llm_content, sections } from '$lib/server/llms';
+
+export function GET() {
+	const main_content = generate_llm_content({
+		sections,
+		ignore: [
+			// Svelte ignores
+			'docs/svelte/legacy/**/*',
+			'docs/svelte/misc/custom-elements',
+			'docs/svelte/misc/v4-migration-guide',
+			'docs/svelte/misc/v5-migration-guide',
+			'docs/svelte/misc/faq',
+			'docs/svelte/reference/compiler-errors',
+			'docs/svelte/reference/compiler-warnings',
+			'docs/svelte/reference/runtime-errors',
+			'docs/svelte/reference/runtime-warnings',
+			'docs/svelte/reference/svelte-legacy',
+			'**/xx-*',
+
+			// SvelteKit ignores
+			'docs/kit/advanced/packaging',
+			'docs/kit/appendix/**/*',
+			'docs/kit/best-practices/performance',
+			'docs/kit/build-and-deploy/*adapter-*',
+			'docs/kit/build-and-deploy/writing-adapters'
+		],
+		minimize: {
+			remove_legacy: true,
+			remove_note_blocks: true,
+			remove_details_blocks: true,
+			remove_playground_links: true,
+			remove_prettier_ignore: true,
+			normalize_whitespace: true
+		}
+	});
+	const content = `<SYSTEM>This is the abridged developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${main_content}`;
+
+	return new Response(content, {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
+
+export const prerender = true;
diff --git a/apps/svelte.dev/src/routes/llms.txt/+server.ts b/apps/svelte.dev/src/routes/llms.txt/+server.ts
new file mode 100644
index 0000000000..9a961557c2
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms.txt/+server.ts
@@ -0,0 +1,22 @@
+import { get_documentation_title, sections } from '$lib/server/llms';
+import template from './template.md?raw';
+
+const DOMAIN = `https://svelte.dev`;
+
+export const prerender = true;
+
+export function GET() {
+	const package_docs = sections.map(
+		(section) =>
+			`- [${section.title} documentation](${DOMAIN}/docs/${section.slug}/llms.txt): ${get_documentation_title(section)}`
+	);
+
+	const content = template.replace('%PACKAGE_DOCS%', package_docs.join('\n'));
+
+	return new Response(content, {
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
diff --git a/apps/svelte.dev/src/routes/llms.txt/template.md b/apps/svelte.dev/src/routes/llms.txt/template.md
new file mode 100644
index 0000000000..aa4b32e1ac
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms.txt/template.md
@@ -0,0 +1,19 @@
+# Svelte Documentation for LLMs
+
+> Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript.
+
+## Documentation Sets
+
+- [Abridged documentation](https://svelte.dev/llms-small.txt): A minimal version of the Svelte and SvelteKit documentation, with examples and non-essential content removed
+- [Complete documentation](https://svelte.dev/llms-full.txt): The complete Svelte and SvelteKit documentation including all examples and additional content
+
+## Individual Package Documentation
+
+%PACKAGE_DOCS%
+
+## Notes
+
+- The abridged documentation excludes legacy compatibility notes, detailed examples, and supplementary information
+- The complete documentation includes all content from the official documentation
+- Package-specific documentation files contain only the content relevant to that package
+- The content is automatically generated from the same source as the official documentation
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6aaa965d7..8b52930155 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,6 +162,9 @@ importers:
       marked:
         specifier: ^14.1.2
         version: 14.1.2
+      minimatch:
+        specifier: ^10.0.1
+        version: 10.0.1
       prettier:
         specifier: ^3.3.2
         version: 3.3.2
@@ -2558,6 +2561,10 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -5520,6 +5527,10 @@ snapshots:
 
   mime@3.0.0: {}
 
+  minimatch@10.0.1:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11

From 9d38b38576c37388166c4c001bea4c0f5f9ebe6b Mon Sep 17 00:00:00 2001
From: Thiago Lino Gomes <thiagolinog8@gmail.com>
Date: Fri, 13 Dec 2024 16:52:11 -0300
Subject: [PATCH 222/453] fix: state_proxy_equality_mismatch error in
 deferred-transitions example (#890)

fix state_proxy_equality_mismatch error
---
 .../09-transitions/06-deferred-transitions/+assets/App.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte
index 8135dbe920..d5e4836c37 100644
--- a/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte
+++ b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte
@@ -7,8 +7,8 @@
 		fallback: scale
 	});
 
-	let selected = $state(null);
-	let loading = $state(null);
+	let selected = $state.raw(null);
+	let loading = $state.raw(null);
 
 	const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
 

From 09b9b2c7ce6ab5d5daa830ba77fc8367cdaefda1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Dec 2024 09:06:49 -0500
Subject: [PATCH 223/453] Sync `cli` docs (#1013)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index fa69344751..b311564764 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -19,6 +19,10 @@ npx sv migrate [migration]
 
 Upgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).
 
+### `self-closing-tags`
+
+Replaces all the self-closing non-void elements in your `.svelte` files. See the [pull request](https://github.com/sveltejs/kit/pull/12128) for more details.
+
 ### `svelte-4`
 
 Upgrades a Svelte 3 app to use Svelte 4 ([see migration guide](../svelte/v4-migration-guide)).

From 8b63b6e7fe890e37722435c9b842c1191e54c5c9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Dec 2024 09:19:14 -0500
Subject: [PATCH 224/453] Sync `svelte` docs (#1014)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../06-runtime/04-imperative-component-api.md | 11 +++++----
 .../docs/svelte/98-reference/20-svelte.md     | 24 ++++++++++++++++++-
 .../svelte/98-reference/21-svelte-compiler.md |  2 ++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md b/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
index bfad9dbd80..faa6ce82cc 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/04-imperative-component-api.md
@@ -34,19 +34,22 @@ Note that unlike calling `new App(...)` in Svelte 4, things like effects (includ
 
 ## `unmount`
 
-Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
+Unmounts a component that was previously created with [`mount`](#mount) or [`hydrate`](#hydrate).
+
+If `options.outro` is `true`, [transitions](transition) will play before the component is removed from the DOM:
 
 ```js
-// @errors: 1109
 import { mount, unmount } from 'svelte';
 import App from './App.svelte';
 
-const app = mount(App, {...});
+const app = mount(App, { target: document.body });
 
 // later
-unmount(app);
+unmount(app, { outro: true });
 ```
 
+Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.
+
 ## `render`
 
 Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 3160df1cbb..babf83961d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -477,10 +477,32 @@ function tick(): Promise<void>;
 
 Unmounts a component that was previously mounted using `mount` or `hydrate`.
 
+Since 5.13.0, if `options.outro` is `true`, [transitions](/docs/svelte/transition) will play before the component is removed from the DOM.
+
+Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`).
+
+```js
+// @errors: 7031
+import { mount, unmount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, { target: document.body });
+
+// later...
+unmount(app, { outro: true });
+```
+
 <div class="ts-block">
 
 ```dts
-function unmount(component: Record<string, any>): void;
+function unmount(
+	component: Record<string, any>,
+	options?:
+		| {
+				outro?: boolean;
+		  }
+		| undefined
+): Promise<void>;
 ```
 
 </div>
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 728cc5181a..3667577c3e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -111,6 +111,7 @@ function parse(
 	options: {
 		filename?: string;
 		modern: true;
+		loose?: boolean;
 	}
 ): AST.Root;
 ```
@@ -126,6 +127,7 @@ function parse(
 		| {
 				filename?: string;
 				modern?: false;
+				loose?: boolean;
 		  }
 		| undefined
 ): Record<string, any>;

From a39bd447c8d61f439f54eb59ce065b0cb7545beb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Dec 2024 23:29:37 -0500
Subject: [PATCH 225/453] Sync `svelte` docs (#1015)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>

From 68718e31fe575e81994c0d8178de6b3d7403e5dc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 15 Dec 2024 09:21:34 -0500
Subject: [PATCH 226/453] Sync `kit` docs (#1017)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/20-core-concepts/50-state-management.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index b97b716cde..e5b9be92fb 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -154,7 +154,7 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
 	/** @type {{ data: import('./$types').PageData }} */
 	let { data } = $props();
 
-+++	let wordCount = $state(data.content.split(' ').length);
++++	let wordCount = $derived(data.content.split(' ').length);
 	let estimatedReadingTime = $derived(wordCount / 250);+++
 </script>
 ```

From 44f55ea8c4b3944104043a6b928ccf999c0c14ea Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 15 Dec 2024 09:24:45 -0500
Subject: [PATCH 227/453] Sync `svelte` docs (#1019)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/07-$inspect.md | 17 +++++++++++++++++
 .../98-reference/.generated/compile-errors.md   | 12 ++++++++++++
 .../svelte/98-reference/30-compiler-errors.md   | 12 ++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
index 3123e8285e..f2998f949d 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
@@ -43,3 +43,20 @@ A convenient way to find the origin of some change is to pass `console.trace` to
 // @errors: 2304
 $inspect(stuff).with(console.trace);
 ```
+
+## $inspect.trace(...)
+
+This rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.
+
+```svelte
+<script>
+	import { doSomeWork } from './elsewhere';
+
+	$effect(() => {
+		+++$inspect.trace();+++
+		doSomeWork();
+	});
+</script>
+```
+
+`$inspect.trace` takes an optional first argument which will be used as the label.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index d726d25fa1..298363f78d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -442,6 +442,18 @@ Expected whitespace
 Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 ```
 
+### inspect_trace_generator
+
+```
+`$inspect.trace(...)` cannot be used inside a generator function
+```
+
+### inspect_trace_invalid_placement
+
+```
+`$inspect.trace(...)` must be the first statement of a function body
+```
+
 ### invalid_arguments_usage
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index f4e14d254e..2ea1e6e57e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -447,6 +447,18 @@ Expected whitespace
 Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 ```
 
+### inspect_trace_generator
+
+```
+`$inspect.trace(...)` cannot be used inside a generator function
+```
+
+### inspect_trace_invalid_placement
+
+```
+`$inspect.trace(...)` must be the first statement of a function body
+```
+
 ### invalid_arguments_usage
 
 ```

From f3dbf96158fc1fa4beb15158f63576b454ea29dd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 15 Dec 2024 10:19:39 -0500
Subject: [PATCH 228/453] bump svelte, transfer errors (#1020)

* bump svelte

* bump svelte, transfer error names etc
---
 apps/svelte.dev/package.json                  |   2 +-
 packages/editor/package.json                  |   2 +-
 packages/repl/package.json                    |   2 +-
 packages/repl/src/lib/Output/ReplProxy.ts     |   8 +
 .../src/lib/Output/console/ConsoleLine.svelte |   6 +-
 .../repl/src/lib/Output/srcdoc/index.html     |  15 +
 packages/site-kit/package.json                |   2 +-
 pnpm-lock.yaml                                | 293 ++++++------------
 8 files changed, 129 insertions(+), 201 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index c158effcd5..5b50ce832b 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -72,7 +72,7 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "5.3.0",
+		"svelte": "5.14.0",
 		"svelte-check": "^4.1.1",
 		"svelte-preprocess": "^6.0.3",
 		"tiny-glob": "^0.2.9",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index b617d2b847..d11f0e97da 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -55,7 +55,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.2.12",
-		"svelte": "^5.1.11",
+		"svelte": "^5.14.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
diff --git a/packages/repl/package.json b/packages/repl/package.json
index dced93bc06..bdedeb44b2 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -85,7 +85,7 @@
 		"esrap": "^1.2.2",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.1.11",
+		"svelte": "5.14.0",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/repl/src/lib/Output/ReplProxy.ts b/packages/repl/src/lib/Output/ReplProxy.ts
index 0523345aef..19c7700171 100644
--- a/packages/repl/src/lib/Output/ReplProxy.ts
+++ b/packages/repl/src/lib/Output/ReplProxy.ts
@@ -24,6 +24,14 @@ export default class ReplProxy {
 			case 'unhandledrejection':
 				return this.handlers.on_unhandled_rejection(event.data);
 			case 'console':
+				if (event.data.command === 'info' && event.data.args[0]?.type === '__error') {
+					const data = event.data.args[0];
+					const e = new Error(data.message);
+					e.name = data.name;
+					e.stack = data.stack;
+					event.data.args[0] = e;
+				}
+
 				return this.handlers.on_console(event.data);
 		}
 	};
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index b188d262f4..07273506a0 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -150,7 +150,11 @@
 					{#if !part.formatted}
 						{' '}
 					{/if}{#if part.type === 'value'}
-						<JSONNode value={part.value} defaultExpandedLevel={log.expanded ? 1 : 0} />
+						{#if part.value instanceof Error}
+							<pre>{part.value.name + '\n' + part.value.stack.replace(/^\n+/, '')}</pre>
+						{:else}
+							<JSONNode value={part.value} defaultExpandedLevel={log.expanded ? 1 : 0} />
+						{/if}
 					{:else}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<span class="styled" style={part.style} onclick={(e) => e.stopPropagation()}>
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index d93691525b..9e56bf30db 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -68,6 +68,21 @@
 		<script>
 			(function () {
 				function send(payload, origin = '*') {
+					if (payload.command === 'info' && payload.args[0] instanceof Error) {
+						const error = payload.args[0];
+
+						if (/^(CreatedAt|UpdatedAt|TracedAt)Error$/.test(error.name)) {
+							// structuredClone obliterates useful info
+							// TODO do this for all errors?
+							payload.args[0] = {
+								type: '__error',
+								name: error.name,
+								message: error.message,
+								stack: error.stack
+							};
+						}
+					}
+
 					parent.postMessage(payload, origin);
 				}
 
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 4a744c1553..6c58743e89 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -53,7 +53,7 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
-		"svelte": "5.1.11",
+		"svelte": "5.14.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8b52930155..a39472a80a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.3.0)
+        version: 1.1.3(svelte@5.14.0)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.4
-        version: 1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)
+        version: 1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -116,19 +116,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
-        version: 0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.11.0
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.3
-        version: 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -170,7 +170,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.3.0)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -178,14 +178,14 @@ importers:
         specifier: ^0.3.2
         version: 0.3.2
       svelte:
-        specifier: 5.3.0
-        version: 5.3.0
+        specifier: 5.14.0
+        version: 5.14.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4)
+        version: 6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -252,13 +252,13 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.3.0)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../repl
@@ -267,7 +267,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -276,16 +276,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.2.4(prettier@3.3.2)(svelte@5.3.0)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
       svelte:
-        specifier: ^5.1.11
-        version: 5.3.0
+        specifier: ^5.14.0
+        version: 5.14.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -336,7 +336,7 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
-        version: 1.1.3(svelte@5.1.11)
+        version: 1.1.3(svelte@5.14.0)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -345,7 +345,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
         specifier: ^2.2.1
-        version: 2.2.1(svelte@5.1.11)
+        version: 2.2.1(svelte@5.14.0)
       acorn:
         specifier: ^8.11.3
         version: 8.14.0
@@ -365,8 +365,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: 5.1.11
-        version: 5.1.11
+        specifier: 5.14.0
+        version: 5.14.0
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -379,16 +379,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.1.11)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -397,13 +397,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -478,11 +478,11 @@ importers:
         version: 1.22.0
       svelte-persisted-store:
         specifier: ^0.9.2
-        version: 0.9.4(svelte@5.1.11)
+        version: 0.9.4(svelte@5.14.0)
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -500,13 +500,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.1.11)
+        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
       svelte:
-        specifier: 5.1.11
-        version: 5.1.11
+        specifier: 5.14.0
+        version: 5.14.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -1276,8 +1276,8 @@ packages:
   '@jimp/utils@1.1.1':
     resolution: {integrity: sha512-GbVZM2Zug5W884EOMN7vBuMyMBRj5jfi6/EjTzTiF3CFWU8AZvu/HZEJV02ivR8d0dzjNIHb4XQke8t8iVNk+Q==}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/resolve-uri@3.1.2':
@@ -3053,12 +3053,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.1.11:
-    resolution: {integrity: sha512-XpPcUBKCg2c+L0nDTkv0ekc8LOHMzN328MNOeAHt4sRcX5AROU9tkqwL35VvE6srt8RpmnzsXBGDwyRB5TSbuw==}
-    engines: {node: '>=18'}
-
-  svelte@5.3.0:
-    resolution: {integrity: sha512-R9v8vAlW/bO94S7QdBJMYveMyI8gMqNnGOtEVLPveNVws+CEiQHn8BNWrtIIpkB28IXLnmjV2HaRTJz31XJmIw==}
+  svelte@5.14.0:
+    resolution: {integrity: sha512-xHrS9dd2Ci9GJd2sReNFqJztoe515wB4OzsPw4A8L2M6lddLFkREkWDJnM5DAND30Zyvjwc1icQVzH0F+Sdx5A==}
     engines: {node: '>=18'}
 
   tar@7.4.3:
@@ -3341,7 +3337,7 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
   '@babel/code-frame@7.25.7':
@@ -4101,7 +4097,7 @@ snapshots:
       '@jimp/types': 1.1.1
       tinycolor2: 1.6.0
 
-  '@jridgewell/gen-mapping@0.3.5':
+  '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4278,13 +4274,9 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.1.11)':
+  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.14.0)':
     dependencies:
-      svelte: 5.1.11
-
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.3.0)':
-    dependencies:
-      svelte: 5.3.0
+      svelte: 5.14.0
 
   '@rollup/browser@4.17.2':
     dependencies:
@@ -4429,19 +4421,19 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.9(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4449,43 +4441,25 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
       sharp: 0.33.5
-      svelte: 5.3.0
-      svelte-parse-markup: 0.1.5(svelte@5.3.0)
+      svelte: 5.14.0
+      svelte-parse-markup: 0.1.5(svelte@5.14.0)
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
       zimmerframe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@types/cookie': 0.6.0
-      cookie: 0.6.0
-      devalue: 5.1.1
-      esm-env: 1.2.1
-      import-meta-resolve: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      mrmime: 2.0.0
-      sade: 1.8.1
-      set-cookie-parser: 2.7.1
-      sirv: 3.0.0
-      svelte: 5.1.11
-      tiny-glob: 0.2.9
-      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-
-  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4497,13 +4471,13 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.1.11
+      svelte: 5.14.0
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4515,97 +4489,64 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.3.0
+      svelte: 5.14.0
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/package@2.3.1(svelte@5.1.11)(typescript@5.5.4)':
+  '@sveltejs/package@2.3.1(svelte@5.14.0)(typescript@5.5.4)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 5.1.11
-      svelte2tsx: 0.7.8(svelte@5.1.11)(typescript@5.5.4)
+      svelte: 5.14.0
+      svelte2tsx: 0.7.8(svelte@5.14.0)(typescript@5.5.4)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/package@2.3.1(svelte@5.3.0)(typescript@5.5.4)':
+  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.14.0)':
     dependencies:
-      chokidar: 3.6.0
-      kleur: 4.1.5
-      sade: 1.8.1
-      semver: 7.6.3
-      svelte: 5.3.0
-      svelte2tsx: 0.7.8(svelte@5.3.0)(typescript@5.5.4)
-    transitivePeerDependencies:
-      - typescript
-
-  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.1.11)':
-    dependencies:
-      svelte: 5.1.11
-
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.4.0
-      svelte: 5.1.11
-      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      debug: 4.4.0
-      svelte: 5.1.11
-      vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-    transitivePeerDependencies:
-      - supports-color
+      svelte: 5.14.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.3.0
+      svelte: 5.14.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      deepmerge: 4.3.1
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      svelte: 5.1.11
+      svelte: 5.14.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.1.11
+      svelte: 5.14.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.3.0
+      svelte: 5.14.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4622,10 +4563,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.3.0
+      svelte: 5.14.0
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4706,10 +4647,10 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.3.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.3.0
+      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.14.0
 
   '@vitest/expect@2.1.2':
     dependencies:
@@ -5694,15 +5635,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.1.11):
+  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.14.0):
     dependencies:
       prettier: 3.3.2
-      svelte: 5.1.11
-
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.3.0):
-    dependencies:
-      prettier: 3.3.2
-      svelte: 5.3.0
+      svelte: 5.14.0
 
   prettier@2.8.8: {}
 
@@ -5944,76 +5880,41 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.1.11)(typescript@5.5.4):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.1.11
+      svelte: 5.14.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - picomatch
 
-  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.3.0)(typescript@5.5.4):
+  svelte-parse-markup@0.1.5(svelte@5.14.0):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 4.0.1
-      fdir: 6.4.2(picomatch@4.0.2)
-      picocolors: 1.1.1
-      sade: 1.8.1
-      svelte: 5.3.0
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - picomatch
-
-  svelte-parse-markup@0.1.5(svelte@5.3.0):
-    dependencies:
-      svelte: 5.3.0
+      svelte: 5.14.0
 
-  svelte-persisted-store@0.9.4(svelte@5.1.11):
+  svelte-persisted-store@0.9.4(svelte@5.14.0):
     dependencies:
-      svelte: 5.1.11
+      svelte: 5.14.0
 
-  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.3.0)(typescript@5.5.4):
+  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
-      svelte: 5.3.0
+      svelte: 5.14.0
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
 
-  svelte2tsx@0.7.8(svelte@5.1.11)(typescript@5.5.4):
-    dependencies:
-      dedent-js: 1.0.1
-      pascal-case: 3.1.2
-      svelte: 5.1.11
-      typescript: 5.5.4
-
-  svelte2tsx@0.7.8(svelte@5.3.0)(typescript@5.5.4):
+  svelte2tsx@0.7.8(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.3.0
+      svelte: 5.14.0
       typescript: 5.5.4
 
-  svelte@5.1.11:
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.14.0
-      acorn-typescript: 1.4.13(acorn@8.14.0)
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      esm-env: 1.2.1
-      esrap: 1.2.3
-      is-reference: 3.0.3
-      locate-character: 3.0.0
-      magic-string: 0.30.12
-      zimmerframe: 1.1.2
-
-  svelte@5.3.0:
+  svelte@5.14.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0

From 81f813067840bb4abdffd9597a5cab89581391f1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 15 Dec 2024 10:41:37 -0500
Subject: [PATCH 229/453] day 15 (#1021)

---
 .../content/blog/2024-12-01-advent-of-svelte.md    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index f569196f7e..0482dee6f0 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -107,13 +107,19 @@ Thanks to [Didier Catz](https://x.com/didiercatz) and [Stanislav Khromov](https:
 
 - [docs](/docs/llms)
 
-## Day 14
+## Day 14: unmount with outros
 
-Coming soon!
+Now, if you need to programmatically mount and unmount a component, you can now pass an `outro: true` option to `unmount` to play transitions before it is removed from the DOM.
 
-## Day 15
+- [docs](/docs/svelte/imperative-component-api#unmount)
+- [demo](/playground/a4ca332691204ccd887ec7b1df818182?version=5.13.0)
 
-Coming soon!
+## Day 15: debugging superpowers
+
+The new `$inspect.trace(...)` rune gives you detailed information about which state changes caused a derived or effect to re-run.
+
+- [docs](</docs/svelte/$inspect#$inspect.trace()>)
+- [demo](/playground/d135c6f00beb4fa391725e59d8061604?version=5.14.0)
 
 ## Day 16
 

From 198e9f1a6be855f4c0e1279a9b26628e1ad26cb1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 08:18:51 -0500
Subject: [PATCH 230/453] Sync `kit` docs (#1022)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/20-core-concepts/30-form-actions.md     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index e1238d7bdd..a0559f5c7a 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -431,8 +431,9 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	/** @type {{ form: import('./$types').ActionData }} */
 	let { form } = $props();
 
-	/** @param {{ currentTarget: EventTarget & HTMLFormElement}} event */
+	/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */
 	async function handleSubmit(event) {
+		event.preventDefault();
 		const data = new FormData(event.currentTarget);
 
 		const response = await fetch(event.currentTarget.action, {
@@ -452,7 +453,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	}
 </script>
 
-<form method="POST" onsubmit|preventDefault={handleSubmit}>
+<form method="POST" onsubmit={handleSubmit}>
 	<!-- content -->
 </form>
 ```

From c415524625666be4d5cfa2fc8512539a020d78a5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:05:36 -0500
Subject: [PATCH 231/453] Sync `kit` docs (#1025)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../10-getting-started/40-web-standards.md    |  2 +-
 .../docs/kit/20-core-concepts/10-routing.md   |  7 +-
 .../docs/kit/20-core-concepts/20-load.md      | 18 ++--
 .../kit/20-core-concepts/30-form-actions.md   |  8 +-
 .../20-core-concepts/50-state-management.md   | 37 ++++----
 .../content/docs/kit/30-advanced/25-errors.md |  9 +-
 .../kit/30-advanced/67-shallow-routing.md     | 19 ++--
 .../docs/kit/30-advanced/70-packaging.md      |  2 +-
 .../docs/kit/40-best-practices/20-seo.md      |  2 +-
 .../30-migrating-to-sveltekit-2.md            | 18 ++++
 .../docs/kit/60-appendix/40-migrating.md      |  4 +-
 .../docs/kit/98-reference/20-$app-forms.md    |  4 +-
 .../kit/98-reference/20-$app-navigation.md    |  6 +-
 .../docs/kit/98-reference/20-$app-state.md    | 90 +++++++++++++++++++
 .../docs/kit/98-reference/20-$app-stores.md   | 20 +++++
 .../docs/kit/98-reference/50-configuration.md |  6 +-
 .../content/docs/kit/98-reference/54-types.md |  4 +-
 17 files changed, 201 insertions(+), 55 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md

diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md b/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
index b0cad130cf..7c36b806ce 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/40-web-standards.md
@@ -79,7 +79,7 @@ Most of the time, your endpoints will return complete data, as in the `userAgent
 
 ## URL APIs
 
-URLs are represented by the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface, which includes useful properties like `origin` and `pathname` (and, in the browser, `hash`). This interface shows up in various places — `event.url` in [hooks](hooks) and [server routes](routing#server), [`$page.url`]($app-stores) in [pages](routing#page), `from` and `to` in [`beforeNavigate` and `afterNavigate`]($app-navigation) and so on.
+URLs are represented by the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface, which includes useful properties like `origin` and `pathname` (and, in the browser, `hash`). This interface shows up in various places — `event.url` in [hooks](hooks) and [server routes](routing#server), [`page.url`]($app-state) in [pages](routing#page), `from` and `to` in [`beforeNavigate` and `afterNavigate`]($app-navigation) and so on.
 
 ### URLSearchParams
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 12ab0f762f..29e99b7394 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -133,12 +133,15 @@ If an error occurs during `load`, SvelteKit will render a default error page. Yo
 ```svelte
 <!--- file: src/routes/blog/[slug]/+error.svelte --->
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<h1>{$page.status}: {$page.error.message}</h1>
+<h1>{page.status}: {page.error.message}</h1>
 ```
 
+> [!LEGACY]
+> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.
+
 SvelteKit will 'walk up the tree' looking for the closest error boundary — if the file above didn't exist it would try `src/routes/blog/+error.svelte` and then `src/routes/+error.svelte` before rendering the default error page. If _that_ fails (or if the error was thrown from the `load` function of the root `+layout`, which sits 'above' the root `+error`), SvelteKit will bail out and render a static fallback error page, which you can customise by creating a `src/error.html` file.
 
 If the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it).
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index 6e75739519..ab4d0eda73 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -117,14 +117,14 @@ Data returned from layout `load` functions is available to child `+layout.svelte
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
-	+++import { page } from '$app/stores';+++
+	+++import { page } from '$app/state';+++
 
 	/** @type {{ data: import('./$types').PageData }} */
 	let { data } = $props();
 
 +++	// we can access `data.posts` because it's returned from
 	// the parent layout `load` function
-	let index = $derived(data.posts.findIndex(post => post.slug === $page.params.slug));
+	let index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));
 	let next = $derived(data.posts[index + 1]);+++
 </script>
 
@@ -138,24 +138,28 @@ Data returned from layout `load` functions is available to child `+layout.svelte
 
 > [!NOTE] If multiple `load` functions return data with the same key, the last one 'wins' — the result of a layout `load` returning `{ a: 1, b: 2 }` and a page `load` returning `{ b: 3, c: 4 }` would be `{ a: 1, b: 3, c: 4 }`.
 
-## $page.data
+## page.data
 
 The `+page.svelte` component, and each `+layout.svelte` component above it, has access to its own data plus all the data from its parents.
 
-In some cases, we might need the opposite — a parent layout might need to access page data or data from a child layout. For example, the root layout might want to access a `title` property returned from a `load` function in `+page.js` or `+page.server.js`. This can be done with `$page.data`:
+In some cases, we might need the opposite — a parent layout might need to access page data or data from a child layout. For example, the root layout might want to access a `title` property returned from a `load` function in `+page.js` or `+page.server.js`. This can be done with `page.data`:
 
 ```svelte
 <!--- file: src/routes/+layout.svelte --->
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
 <svelte:head>
-	<title>{$page.data.title}</title>
+	<title>{page.data.title}</title>
 </svelte:head>
 ```
 
-Type information for `$page.data` is provided by `App.PageData`.
+Type information for `page.data` is provided by `App.PageData`.
+
+> [!LEGACY]
+> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.
+> It provides a `page` store with the same interface that you can subscribe to, e.g. `$page.data.title`.
 
 ## Universal vs server
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index a0559f5c7a..39072aa94f 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -103,7 +103,7 @@ As well as the `action` attribute, we can use the `formaction` attribute on a bu
 
 ## Anatomy of an action
 
-Each action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `$page.form` app-wide until the next update.
+Each action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `page.form` app-wide until the next update.
 
 ```js
 /// file: src/routes/login/+page.server.js
@@ -157,7 +157,7 @@ export const actions = {
 
 ### Validation errors
 
-If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
+If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `page.status` and the data through `form`:
 
 ```js
 /// file: src/routes/login/+page.server.js
@@ -353,7 +353,7 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti
 
 Without an argument, `use:enhance` will emulate the browser-native behaviour, just without the full-page reloads. It will:
 
-- update the `form` property, `$page.form` and `$page.status` on a successful or invalid response, but only if the action is on the same page you're submitting from. For example, if your form looks like `<form action="http://github.com/somewhere/else" ..>`, `form` and `$page` will _not_ be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use [`applyAction`](#Progressive-enhancement-Customising-use:enhance)
+- update the `form` property, `page.form` and `page.status` on a successful or invalid response, but only if the action is on the same page you're submitting from. For example, if your form looks like `<form action="http://github.com/somewhere/else" ..>`, the `form` prop and the `page.form` state will _not_ be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use [`applyAction`](#Progressive-enhancement-Customising-use:enhance)
 - reset the `<form>` element
 - invalidate all data using `invalidateAll` on a successful response
 - call `goto` on a redirect response
@@ -412,7 +412,7 @@ If you return a callback, you may need to reproduce part of the default `use:enh
 
 The behaviour of `applyAction(result)` depends on `result.type`:
 
-- `success`, `failure` — sets `$page.status` to `result.status` and updates `form` and `$page.form` to `result.data` (regardless of where you are submitting from, in contrast to `update` from `enhance`)
+- `success`, `failure` — sets `page.status` to `result.status` and updates `form` and `page.form` to `result.data` (regardless of where you are submitting from, in contrast to `update` from `enhance`)
 - `redirect` — calls `goto(result.location, { invalidateAll: true })`
 - `error` — renders the nearest `+error` boundary with `result.error`
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index e5b9be92fb..53315fd93d 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -41,7 +41,7 @@ Instead, you should _authenticate_ the user using [`cookies`](load#Cookies) and
 
 ## No side-effects in load
 
-For the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store inside a `load` function so that you can use the store value in your components:
+For the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store or global state inside a `load` function so that you can use the value in your components:
 
 ```js
 /// file: +page.js
@@ -77,31 +77,25 @@ export async function load({ fetch }) {
 }
 ```
 
-...and pass it around to the components that need it, or use [`$page.data`](load#$page.data).
+...and pass it around to the components that need it, or use [`page.data`](load#page.data).
 
 If you're not using SSR, then there's no risk of accidentally exposing one user's data to another. But you should still avoid side-effects in your `load` functions — your application will be much easier to reason about without them.
 
-## Using stores with context
+## Using state and stores with context
 
-You might wonder how we're able to use `$page.data` and other [app stores]($app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
+You might wonder how we're able to use `page.data` and other [app state]($app-state) (or [app stores]($app-stores)) if we can't use global state. The answer is that app state and app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the state (or store) is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own state:
 
 ```svelte
 <!--- file: src/routes/+layout.svelte --->
 <script>
 	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
 
 	/** @type {{ data: import('./$types').LayoutData }} */
 	let { data } = $props();
 
-	// Create a store and update it when necessary...
-	const user = writable(data.user);
-	$effect.pre(() => {
-		user.set(data.user);
-	});
-
-	// ...and add it to the context for child components to access
-	setContext('user', user);
+	// Pass a function referencing our state
+	// to the context for child components to access
+	setContext('user', () => data.user);
 </script>
 ```
 
@@ -114,10 +108,15 @@ You might wonder how we're able to use `$page.data` and other [app stores]($app-
 	const user = getContext('user');
 </script>
 
-<p>Welcome {$user.name}</p>
+<p>Welcome {user().name}</p>
 ```
 
-Updating the value of a context-based store in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the store value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.
+> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](https://svelte.dev/docs/svelte/$state#Passing-state-into-functions)
+
+> [!LEGACY]
+> You also use stores from `svelte/store` for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead.
+
+Updating the value of context-based state in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the state value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.
 
 If you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API.
 
@@ -164,14 +163,18 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
 Reusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. In the case that you do need to completely destroy and remount a component on navigation, you can use this pattern:
 
 ```svelte
-{#key $page.url.pathname}
+<script>
+	import { page } from '$app/state';
+</script>
+
+{#key page.url.pathname}
 	<BlogPost title={data.title} content={data.title} />
 {/key}
 ```
 
 ## Storing state in the URL
 
-If you have state that should survive a reload and/or affect SSR, such as filters or sorting rules on a table, URL search parameters (like `?sort=price&order=ascending`) are a good place to put them. You can put them in `<a href="http://github.com/...">` or `<form action="http://github.com/...">` attributes, or set them programmatically via `goto('?key=value')`. They can be accessed inside `load` functions via the `url` parameter, and inside components via `$page.url.searchParams`.
+If you have state that should survive a reload and/or affect SSR, such as filters or sorting rules on a table, URL search parameters (like `?sort=price&order=ascending`) are a good place to put them. You can put them in `<a href="http://github.com/...">` or `<form action="http://github.com/...">` attributes, or set them programmatically via `goto('?key=value')`. They can be accessed inside `load` functions via the `url` parameter, and inside components via `page.url.searchParams`.
 
 ## Storing ephemeral state in snapshots
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
index 7baa05fe7b..e2472b0f90 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
@@ -41,17 +41,20 @@ export async function load({ params }) {
 }
 ```
 
-This throws an exception that SvelteKit catches, causing it to set the response status code to 404 and render an [`+error.svelte`](routing#error) component, where `$page.error` is the object provided as the second argument to `error(...)`.
+This throws an exception that SvelteKit catches, causing it to set the response status code to 404 and render an [`+error.svelte`](routing#error) component, where `page.error` is the object provided as the second argument to `error(...)`.
 
 ```svelte
 <!--- file: src/routes/+error.svelte --->
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<h1>{$page.error.message}</h1>
+<h1>{page.error.message}</h1>
 ```
 
+> [!LEGACY]
+> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.
+
 You can add extra properties to the error object if needed...
 
 ```js
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
index a4d55ea88c..c7e2cae59f 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md
@@ -13,7 +13,7 @@ SvelteKit makes this possible with the [`pushState`]($app-navigation#pushState)
 <!--- file: +page.svelte --->
 <script>
 	import { pushState } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Modal from './Modal.svelte';
 
 	function showModal() {
@@ -23,21 +23,24 @@ SvelteKit makes this possible with the [`pushState`]($app-navigation#pushState)
 	}
 </script>
 
-{#if $page.state.showModal}
+{#if page.state.showModal}
 	<Modal close={() => history.back()} />
 {/if}
 ```
 
-The modal can be dismissed by navigating back (unsetting `$page.state.showModal`) or by interacting with it in a way that causes the `close` callback to run, which will navigate back programmatically.
+The modal can be dismissed by navigating back (unsetting `page.state.showModal`) or by interacting with it in a way that causes the `close` callback to run, which will navigate back programmatically.
 
 ## API
 
 The first argument to `pushState` is the URL, relative to the current URL. To stay on the current URL, use `''`.
 
-The second argument is the new page state, which can be accessed via the [page store]($app-stores#page) as `$page.state`. You can make page state type-safe by declaring an [`App.PageState`](types#PageState) interface (usually in `src/app.d.ts`).
+The second argument is the new page state, which can be accessed via the [page object]($app-state#page) as `page.state`. You can make page state type-safe by declaring an [`App.PageState`](types#PageState) interface (usually in `src/app.d.ts`).
 
 To set page state without creating a new history entry, use `replaceState` instead of `pushState`.
 
+> [!LEGACY]
+> `page.state` from `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$page.state` from `$app/stores` instead.
+
 ## Loading data for a route
 
 When shallow routing, you may want to render another `+page.svelte` inside the current page. For example, clicking on a photo thumbnail could pop up the detail view without navigating to the photo page.
@@ -48,7 +51,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 <!--- file: src/routes/photos/+page.svelte --->
 <script>
 	import { preloadData, pushState, goto } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Modal from './Modal.svelte';
 	import PhotoPage from './[id]/+page.svelte';
 
@@ -86,17 +89,17 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 	</a>
 {/each}
 
-{#if $page.state.selected}
+{#if page.state.selected}
 	<Modal onclose={() => history.back()}>
 		<!-- pass page data to the +page.svelte component,
 		     just like SvelteKit would on navigation -->
-		<PhotoPage data={$page.state.selected} />
+		<PhotoPage data={page.state.selected} />
 	</Modal>
 {/if}
 ```
 
 ## Caveats
 
-During server-side rendering, `$page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate.
+During server-side rendering, `page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate.
 
 Shallow routing is a feature that requires JavaScript to work. Be mindful when using it and try to think of sensible fallback behavior in case JavaScript isn't available.
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
index a7f6fae0c3..78f656119e 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
@@ -188,7 +188,7 @@ You can read more about that feature [here](https://www.typescriptlang.org/docs/
 
 ## Best practices
 
-You should avoid using SvelteKit-specific modules like `$app/environment` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/stores`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.
+You should avoid using SvelteKit-specific modules like `$app/environment` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/state`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.
 
 Ensure that you add [aliases](configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`.
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md b/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
index cc218f8cff..56afab3be5 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
@@ -27,7 +27,7 @@ SvelteKit redirects pathnames with trailing slashes to ones without (or vice ver
 
 Every page should have well-written and unique `<title>` and `<meta name="description">` elements inside a [`<svelte:head>`](../svelte/svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation.
 
-> [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`$page.data`]($app-stores)) in a `<svelte:head>` in your root [layout](routing#layout).
+> [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`page.data`]($app-state)) in a `<svelte:head>` in your root [layout](routing#layout).
 
 ### Sitemaps
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
index 9359480766..bc1e6e59a0 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
@@ -174,3 +174,21 @@ SvelteKit 2 requires Node `18.13` or higher, and the following minimum dependenc
 `svelte-migrate` will update your `package.json` for you.
 
 As part of the TypeScript upgrade, the generated `tsconfig.json` (the one your `tsconfig.json` extends from) now uses `"moduleResolution": "bundler"` (which is recommended by the TypeScript team, as it properly resolves types from packages with an `exports` map in package.json) and `verbatimModuleSyntax` (which replaces the existing `importsNotUsedAsValues ` and `preserveValueImports` flags — if you have those in your `tsconfig.json`, remove them. `svelte-migrate` will do this for you).
+
+## SvelteKit 2.12: $app/stores deprecated
+
+SvelteKit 2.12 introduced `$app/state` based on the [Svelte 5 runes API](/docs/svelte/what-are-runes). `$app/state` provides everything that `$app/stores` provides but with more flexibility as to where and how you use it. Most importantly, the `page` object is now fine-grained, e.g. updates to `page.state` will not invalidate `page.data` and vice-versa.
+
+As a consequence, `$app/stores` is deprecated and subject to be removed in SvelteKit 3. We recommend [upgrading to Svelte 5](/docs/svelte/v5-migration-guide), if you haven't already, and then migrate away from `$app/stores`. Most of the replacements should be pretty simple: Replace the `$app/stores` import with `$app/state` and remove the `$` prefixes from the usage sites.
+
+```svelte
+<script>
+	---import { page } from '$app/stores';---
+	+++import { page } from '$app/state';+++
+</script>
+
+---{$page.data}---
++++{page.data}+++
+```
+
+Use `npx sv migrate app-state` to auto-migrate most of your `$app/stores` usages inside `.svelte` components.
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
index 1ca6dda3a7..48e2eae42c 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
@@ -116,7 +116,7 @@ const { preloading, page, session } = stores();
 
 The `page` store still exists; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. `page` now has `url` and `params` properties, but no `path` or `query`.
 
-You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, and `page` directly from [`$app/stores`]($app-stores).
+You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, and `page` directly from [`$app/stores`]($app-stores). If you're on Svelte 5 and SvelteKit 2.12 or higher, consider using [`$app/state`]($app-state) instead.
 
 ### Routing
 
@@ -124,7 +124,7 @@ Regex routes are no longer supported. Instead, use [advanced route matching](adv
 
 ### Segments
 
-Previously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` value to derive the segment you're interested in.
+Previously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` (or `page.url.pathname`) value to derive the segment you're interested in.
 
 ### URLs
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
index 04318944c6..4caad2b1af 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
@@ -12,7 +12,7 @@ import { applyAction, deserialize, enhance } from '$app/forms';
 
 ## applyAction
 
-This action updates the `form` property of the current page with the given data and updates `$page.status`.
+This action updates the `form` property of the current page with the given data and updates `page.status`.
 In case of an error, it redirects to the nearest error page.
 
 <div class="ts-block">
@@ -80,7 +80,7 @@ If nothing is returned, the fallback will be used.
 
 If this function or its return value isn't set, it
 - falls back to updating the `form` prop with the returned data if the action is on the same page as the form
-- updates `$page.status`
+- updates `page.status`
 - resets the `<form>` element and invalidates all data in case of successful submission with no redirect response
 - redirects in case of a redirect response
 - redirects to the nearest error page in case of an unexpected error
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index a738fff563..f7dad8742d 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -85,7 +85,9 @@ function disableScrollHandling(): void;
 
 ## goto
 
+Allows you to navigate programmatically to a given route, with options such as keeping the current element focused.
 Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified `url`.
+
 For external URLs, use `window.location = url` instead of calling `goto(url)`.
 
 <div class="ts-block">
@@ -228,7 +230,7 @@ function preloadData(href: string): Promise<
 
 ## pushState
 
-Programmatically create a new history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
+Programmatically create a new history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
 
 <div class="ts-block">
 
@@ -245,7 +247,7 @@ function pushState(
 
 ## replaceState
 
-Programmatically replace the current history entry with the given `$page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
+Programmatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
new file mode 100644
index 0000000000..da06ad4f27
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
@@ -0,0 +1,90 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: $app/state
+---
+
+SvelteKit makes three readonly state objects available via the `$app/state` module — `page`, `navigating` and `updated`.
+
+> [!NOTE]
+> This module was added in 2.12. If you're using an earlier version of SvelteKit, use [`$app/stores`]($app-stores) instead.
+
+
+
+```js
+// @noErrors
+import { navigating, page, updated } from '$app/state';
+```
+
+## navigating
+
+An object with a reactive `current` property.
+When navigation starts, `current` is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+When navigation finishes, `current` reverts to `null`.
+
+On the server, this value can only be read during rendering. In the browser, it can be read at any time.
+
+<div class="ts-block">
+
+```dts
+const navigating: {
+	get current(): import('@sveltejs/kit').Navigation | null;
+};
+```
+
+</div>
+
+
+
+## page
+
+A reactive object with information about the current page, serving several use cases:
+- retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](/docs/kit/load))
+- retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](/docs/kit/form-actions))
+- retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](/docs/kit/$app-navigation#goto) and [shallow routing](/docs/kit/shallow-routing))
+- retrieving metadata such as the URL you're on, the current route and its parameters, and whether or not there was an error
+
+```svelte
+<!--- file: +layout.svelte --->
+<script>
+	import { page } from '$app/state';
+</script>
+
+<p>Currently at {page.url.pathname}</p>
+
+{#if page.error}
+	<span class="red">Problem detected</span>
+{:else}
+	<span class="small">All systems operational</span>
+{/if}
+```
+
+On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
+
+<div class="ts-block">
+
+```dts
+const page: import('@sveltejs/kit').Page;
+```
+
+</div>
+
+
+
+## updated
+
+A reactive value that's initially `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
+
+<div class="ts-block">
+
+```dts
+const updated: {
+	get current(): boolean;
+	check(): Promise<boolean>;
+};
+```
+
+</div>
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
index 608d5e5793..c6d0cfe469 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-stores.md
@@ -3,6 +3,8 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: $app/stores
 ---
 
+This module contains store-based equivalents of the exports from [`$app/state`]($app-state). If you're using SvelteKit 2.12 or later, use that module instead.
+
 
 
 ```js
@@ -30,6 +32,12 @@ function getStores(): {
 
 ## navigating
 
+<blockquote class="tag deprecated note">
+
+Use `navigating` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
+
+</blockquote>
+
 A readable store.
 When navigating starts, its value is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
 When navigating finishes, its value reverts to `null`.
@@ -50,6 +58,12 @@ const navigating: import('svelte/store').Readable<
 
 ## page
 
+<blockquote class="tag deprecated note">
+
+Use `page` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
+
+</blockquote>
+
 A readable store whose value contains page data.
 
 On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
@@ -68,6 +82,12 @@ const page: import('svelte/store').Readable<
 
 ## updated
 
+<blockquote class="tag deprecated note">
+
+Use `updated` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
+
+</blockquote>
+
 A readable store whose initial value is `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
 
 On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 54e0b52f54..77440a6f5a 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -1102,17 +1102,17 @@ Not all navigations will result in an error though, for example if the JavaScrip
 /// file: +layout.svelte
 <script>
 	import { beforeNavigate } from '$app/navigation';
-	import { updated } from '$app/stores';
+	import { updated } from '$app/state';
 
 	beforeNavigate(({ willUnload, to }) => {
-		if ($updated && !willUnload && to?.url) {
+		if (updated.current && !willUnload && to?.url) {
 			location.href = to.url.href;
 		}
 	});
 </script>
 ```
 
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://svelte.dev/docs/kit/$app-stores#updated) store to `true` when it detects one.
+If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of [`updated.current`](https://svelte.dev/docs/kit/$app-state#updated) `true` when it detects one.
 
 <div class="ts-block-property-children">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index dd89b82a3f..0e2c95ba28 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -188,7 +188,7 @@ interface Locals {}
 
 ## PageData
 
-Defines the common shape of the [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
+Defines the common shape of the [page.data state](/docs/kit/$app-state#page) and [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
 The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
 Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
 
@@ -202,7 +202,7 @@ interface PageData {}
 
 ## PageState
 
-The shape of the `$page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
+The shape of the `page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
 
 <div class="ts-block">
 

From 45a18abacb6e23b50cc30593fbe1bb1628a3d15f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 16 Dec 2024 12:27:48 -0500
Subject: [PATCH 232/453] autocomplete `$inspect.trace()` (#1023)

---
 .../site-kit/src/lib/codemirror/autocompletionDataProvider.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index 8da28bb39d..e6891efff5 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -590,5 +590,6 @@ export const runes = [
 	{ snippet: '$state.snapshot(${})' },
 	{ snippet: '$effect.tracking()' },
 	{ snippet: '$inspect(${});', test: is_statement },
+	{ snippet: '$inspect.trace(${});', test: is_statement },
 	{ snippet: '$host()' }
 ];

From 7be3ae371fd3cb7836d400b7241106e0e92c34eb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:22:38 -0500
Subject: [PATCH 233/453] Sync `kit` docs (#1026)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/98-reference/20-$app-state.md    | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
index da06ad4f27..31ce1793c7 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
@@ -17,18 +17,22 @@ import { navigating, page, updated } from '$app/state';
 
 ## navigating
 
-An object with a reactive `current` property.
-When navigation starts, `current` is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
-When navigation finishes, `current` reverts to `null`.
-
-On the server, this value can only be read during rendering. In the browser, it can be read at any time.
+An object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+Values are `null` when no navigation is occurring, or during server rendering.
 
 <div class="ts-block">
 
 ```dts
-const navigating: {
-	get current(): import('@sveltejs/kit').Navigation | null;
-};
+const navigating:
+	| import('@sveltejs/kit').Navigation
+	| {
+			from: null;
+			to: null;
+			type: null;
+			willUnload: null;
+			delta: null;
+			complete: null;
+	  };
 ```
 
 </div>

From 989d67f86b5ff5da222bc9762f11f92e4eb39eca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:22:57 -0500
Subject: [PATCH 234/453] Sync `cli` docs (#1027)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
index bc9cad653a..4963f5f171 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -29,6 +29,7 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 
 - `drizzle`
 - `eslint`
+- `sveltekit-adapter`
 - `lucia`
 - `mdsvex`
 - `paraglide`

From ad223f320627efe2abf2736d54c8c7d924e9941c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:23:42 +0100
Subject: [PATCH 235/453] App state tutorial (#1016)

* migrate everything but the page stores section to $app/state

* move redirects from tutorial into handle hooks: keeps all redirects on one place, less prerendered pages for stuff that's increasingly rotten, fixes a bug with the specific redirects not working currently (they were missing from entries)

* replace $app/stores tutorial with $app/state

* bump kit

* small tweaks

* update

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md

Co-authored-by: Conduitry <git@chor.date>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md

Co-authored-by: Conduitry <git@chor.date>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md

Co-authored-by: Conduitry <git@chor.date>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md

* Apply suggestions from code review

* bump, use <page.data.component> directly

* update

* revert

* only update kit

* get the damn thing working

* sure, prettier, let's suddenly start complaining about these files for some reason

* undo some other upgrade that fucked up syntax highlighting for some insane reason. fuck me i fucking hate computers

* i don't fucking believe this

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Conduitry <git@chor.date>
---
 .../content/tutorial/+assets/package.json     |   2 +-
 .../+assets/src/routes/+error.svelte          |   8 +-
 .../+assets/src/routes/+error.svelte          |  10 +-
 .../+assets/app-a/src/routes/+layout.svelte   |   0
 .../+assets/app-a/src/routes/+page.svelte     |   0
 .../app-a/src/routes/about/+page.svelte       |   0
 .../+assets/app-b/src/routes/+layout.svelte   |  16 +
 .../01-page-state}/index.md                   |  16 +-
 .../+assets/app-a/src/routes/+layout.svelte   |  16 +
 .../+assets/app-a/src/routes/+page.server.js  |   0
 .../+assets/app-a/src/routes/+page.svelte     |   0
 .../app-a/src/routes/about/+page.server.js    |   0
 .../app-a/src/routes/about/+page.svelte       |   0
 .../+assets/app-b/src/routes/+layout.svelte   |  20 +
 .../08-app-state/02-navigating-state/index.md |  39 +
 .../+assets/app-a/src/routes/+layout.svelte   |  10 +-
 .../+assets/app-a/src/routes/+page.server.js  |   0
 .../+assets/app-a/src/routes/+page.svelte     |   0
 .../app-a/src/routes/about/+page.server.js    |   0
 .../app-a/src/routes/about/+page.svelte       |   0
 .../+assets/app-a/svelte.config.js            |   0
 .../+assets/app-b/src/routes/+layout.svelte   |  13 +-
 .../03-updated-state}/index.md                |  10 +-
 .../03-sveltekit/08-app-state/index.md        |   3 +
 .../+assets/app-b/src/routes/+layout.svelte   |  16 -
 .../+assets/app-a/src/routes/+layout.svelte   |  16 -
 .../+assets/app-b/src/routes/+layout.svelte   |  20 -
 .../08-stores/02-navigating-store/index.md    |  37 -
 .../tutorial/03-sveltekit/08-stores/index.md  |   3 -
 .../+assets/app-b/src/routes/+error.svelte    |   6 +-
 .../02-error-pages/index.md                   |   6 +-
 .../+assets/app-b/src/routes/+error.svelte    |   6 +-
 .../xx-custom-error-messages/index.md         |  12 +-
 .../+assets/app-b/src/routes/+error.svelte    |   8 +-
 .../01-hooks/04-handleerror/index.md          |  10 +-
 .../+assets/app-a/src/routes/+layout.svelte   |   6 +-
 .../+assets/app-b/src/routes/+layout.svelte   |   6 +-
 .../app-a/src/routes/[path]/+page.svelte      |   4 +-
 .../app-b/src/routes/[...path]/+page.svelte   |   4 +-
 .../src/routes/colors/[color]/+page.svelte    |   6 +-
 .../routes/colors/[color=hex]/+page.svelte    |   6 +-
 .../+assets/app-a/src/routes/+layout.svelte   |   6 +-
 .../+assets/app-b/src/routes/+layout.svelte   |  13 +-
 .../01-universal-load-functions/index.md      |   9 +-
 apps/svelte.dev/package.json                  |   2 +-
 .../common/package-lock.json                  | 737 ++++++++++--------
 .../create-tutorial-zip/common/package.json   |   4 +-
 .../create-tutorial-zip/common/src/error.html |  80 ++
 apps/svelte.dev/src/hooks.server.js           |  20 +-
 .../src/lib/components/ModalDropdown.svelte   |  11 +-
 .../src/routes/(authed)/apps/+page.svelte     |   2 +-
 .../routes/tutorial/[...slug]/+page.server.ts |  38 +-
 .../tutorial/[...slug]/OutputRollup.svelte    |   2 +-
 .../[...slug]/filetree/Filetree.svelte        |   2 +-
 packages/editor/package.json                  |   2 +-
 packages/repl/package.json                    |   2 +-
 packages/site-kit/package.json                |   4 +-
 pnpm-lock.yaml                                |  54 +-
 58 files changed, 759 insertions(+), 564 deletions(-)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/01-page-store => 08-app-state/01-page-state}/+assets/app-a/src/routes/+layout.svelte (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/01-page-store => 08-app-state/01-page-state}/+assets/app-a/src/routes/+page.svelte (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/01-page-store => 08-app-state/01-page-state}/+assets/app-a/src/routes/about/+page.svelte (100%)
 create mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-b/src/routes/+layout.svelte
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/01-page-store => 08-app-state/01-page-state}/index.md (50%)
 create mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+layout.svelte
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/02-navigating-store => 08-app-state/02-navigating-state}/+assets/app-a/src/routes/+page.server.js (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/02-navigating-store => 08-app-state/02-navigating-state}/+assets/app-a/src/routes/+page.svelte (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/02-navigating-store => 08-app-state/02-navigating-state}/+assets/app-a/src/routes/about/+page.server.js (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/02-navigating-store => 08-app-state/02-navigating-state}/+assets/app-a/src/routes/about/+page.svelte (100%)
 create mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-b/src/routes/+layout.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/src/routes/+layout.svelte (71%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/src/routes/+page.server.js (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/src/routes/+page.svelte (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/src/routes/about/+page.server.js (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/src/routes/about/+page.svelte (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-a/svelte.config.js (100%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/+assets/app-b/src/routes/+layout.svelte (69%)
 rename apps/svelte.dev/content/tutorial/03-sveltekit/{08-stores/03-updated-store => 08-app-state/03-updated-state}/index.md (57%)
 create mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/index.md
 delete mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
 delete mode 100644 apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/index.md
 create mode 100644 apps/svelte.dev/scripts/create-tutorial-zip/common/src/error.html

diff --git a/apps/svelte.dev/content/tutorial/+assets/package.json b/apps/svelte.dev/content/tutorial/+assets/package.json
index 5b2f9d11bc..a585b2ecfe 100644
--- a/apps/svelte.dev/content/tutorial/+assets/package.json
+++ b/apps/svelte.dev/content/tutorial/+assets/package.json
@@ -8,7 +8,7 @@
 	},
 	"devDependencies": {
 		"@rollup/wasm-node": "^4.25.0",
-		"@sveltejs/kit": "^2.5",
+		"@sveltejs/kit": "^2.12.1",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
 		"vite": "^5.4"
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/+assets/src/routes/+error.svelte b/apps/svelte.dev/content/tutorial/01-svelte/+assets/src/routes/+error.svelte
index 7e25aa26ec..1b4c6ee00e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/+assets/src/routes/+error.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/+assets/src/routes/+error.svelte
@@ -1,8 +1,8 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-{#if $page.status === 404}
+{#if page.status === 404}
 	<h1>Not found</h1>
 	<p><a href="http://github.com/">Go to /</a></p>
 {:else}
@@ -11,8 +11,8 @@
 		code
 		<a
 			target="_blank"
-			href="https://http.dog/%7B$page.status%7D"
-			>{$page.status}</a
+			href="https://http.dog/%7Bpage.status%7D"
+			>{page.status}</a
 		>
 	</p>
 {/if}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/+assets/src/routes/+error.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/+assets/src/routes/+error.svelte
index fb55510522..7ada808259 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/+assets/src/routes/+error.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/+assets/src/routes/+error.svelte
@@ -1,8 +1,8 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-{#if $page.status === 404}
+{#if page.status === 404}
 	<h1>Not found</h1>
 	<p><a href="http://github.com/">Go to /</a></p>
 {:else}
@@ -11,12 +11,12 @@
 		code
 		<a
 			target="_blank"
-			href="https://http.dog/%7B$page.status%7D"
-			>{$page.status}</a
+			href="https://http.dog/%7Bpage.status%7D"
+			>{page.status}</a
 		>
 	</p>
 
-	<pre>{$page.error?.stack || ''}</pre>
+	<pre>{page.error?.stack || ''}</pre>
 {/if}
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+layout.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+layout.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/about/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/about/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/about/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/about/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-b/src/routes/+layout.svelte
new file mode 100644
index 0000000000..78936190af
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-b/src/routes/+layout.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/state';
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+</nav>
+
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md
similarity index 50%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md
index 2c6e37af88..b9e6f5673f 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md
@@ -2,11 +2,7 @@
 title: page
 ---
 
-> TODO link to stores exercise
-
-As we learned earlier, Svelte stores are a place to put data that doesn't belong to an individual component.
-
-SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](/docs/kit/@sveltejs-kit#Page), which provides information about the current page:
+SvelteKit makes three readonly state objects available via the `$app/state` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](/docs/kit/@sveltejs-kit#Page), which provides information about the current page:
 
 - `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
 - `params` — the current page's [parameters](params)
@@ -16,25 +12,27 @@ SvelteKit makes three readonly stores available via the `$app/stores` module —
 - `data` — the data for the current page, combining the return values of all `load` functions
 - `form` — the data returned from a [form action](the-form-element)
 
-As with any other store, you can reference its value in a component by prefixing its name with the `$` symbol. For example, we can access the current pathname as `$page.url.pathname`:
+Each of these properties is reactive, using `$state.raw` under the hood. Here's an example using `page.url.pathname`:
 
 ```svelte
 /// file: src/routes/+layout.svelte
 <script>
-	+++import { page } from '$app/stores';+++
+	+++import { page } from '$app/state';+++
 
 	let { children } = $props();
 </script>
 
 <nav>
-	<a href="http://github.com/" +++aria-current={$page.url.pathname === '/'}+++>
+	<a href="http://github.com/" +++aria-current={page.url.pathname === '/'}+++>
 		home
 	</a>
 
-	<a href="http://github.com/about" +++aria-current={$page.url.pathname === '/about'}+++>
+	<a href="http://github.com/about" +++aria-current={page.url.pathname === '/about'}+++>
 		about
 	</a>
 </nav>
 
 {@render children()}
 ```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides a `$page` store with the same information. If you're currently using `$app/stores`, we advise you to migrate towards `$app/state` (requires Svelte 5).
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+layout.svelte
new file mode 100644
index 0000000000..78936190af
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+layout.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/state';
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+</nav>
+
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+page.server.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+page.server.js
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+page.server.js
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/about/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/about/+page.server.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/about/+page.server.js
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/about/+page.server.js
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/about/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/about/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/about/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-a/src/routes/about/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-b/src/routes/+layout.svelte
new file mode 100644
index 0000000000..d0df220078
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/+assets/app-b/src/routes/+layout.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { page, navigating } from '$app/state';
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
+	{/if}
+</nav>
+
+{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md
new file mode 100644
index 0000000000..43c94f9ed3
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md
@@ -0,0 +1,39 @@
+---
+title: navigating
+---
+
+The `navigating` object represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
+
+- `from` and `to` — objects with `params`, `route` and `url` properties
+- `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
+
+> [!NOTE] For complete type information visit the [`Navigation`](/docs/kit/@sveltejs-kit#Navigation) documentation.
+
+It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` object and add a message to the nav bar:
+
+```svelte
+/// file: src/routes/+layout.svelte
+<script>
+	import { page, +++navigating+++ } from '$app/state';
+
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+
++++	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
+	{/if}+++
+</nav>
+
+{@render children()}
+```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides a `$navigating` store with the same information. If you're currently using `$app/stores`, we advise you to migrate towards `$app/state` (requires Svelte 5).
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+layout.svelte
similarity index 71%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+layout.svelte
index bfceacd616..7c243e4288 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+layout.svelte
@@ -1,19 +1,19 @@
 <script>
-	import { page, navigating } from '$app/stores';
+	import { page, navigating } from '$app/state';
 	let { children } = $props();
 </script>
 
 <nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
 		home
 	</a>
 
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
 		about
 	</a>
 
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
 	{/if}
 </nav>
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+page.server.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+page.server.js
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+page.server.js
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/about/+page.server.js b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/about/+page.server.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/about/+page.server.js
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/about/+page.server.js
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/about/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/about/+page.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/src/routes/about/+page.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/about/+page.svelte
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/svelte.config.js b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/svelte.config.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-a/svelte.config.js
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/svelte.config.js
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-b/src/routes/+layout.svelte
similarity index 69%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-b/src/routes/+layout.svelte
index 5cae6c8c82..532e4b3720 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-b/src/routes/+layout.svelte
@@ -1,25 +1,25 @@
 <script>
-	import { page, navigating, updated } from '$app/stores';
+	import { page, navigating, updated } from '$app/state';
 	let { children } = $props();
 </script>
 
 <nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
+	<a href="http://github.com/" aria-current={page.url.pathname === '/'}>
 		home
 	</a>
 
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
+	<a href="http://github.com/about" aria-current={page.url.pathname === '/about'}>
 		about
 	</a>
 
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
 	{/if}
 </nav>
 
 {@render children()}
 
-{#if $updated}
+{#if updated.current}
 	<div class="toast">
 		<p>
 			A new version of the app is available
@@ -52,4 +52,3 @@
 		border-radius: 4px;
 	}
 </style>
-
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md
similarity index 57%
rename from apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md
rename to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md
index 19ce190fb8..e111ecc4ea 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md
@@ -2,23 +2,23 @@
 title: updated
 ---
 
-The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
+The `updated` state contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
 
 ```svelte
 /// file: src/routes/+layout.svelte
 <script>
-	import { page, navigating, +++updated+++ } from '$app/stores';
+	import { page, navigating, +++updated+++ } from '$app/state';
 </script>
 ```
 
-Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
+Version changes only happen in production, not during development. For that reason, `updated.current` will always be `false` in this tutorial.
 
 You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
 
 ```svelte
 /// file: src/routes/+layout.svelte
 
-+++{#if $updated}+++
++++{#if updated.current}+++
 	<div class="toast">
 		<p>
 			A new version of the app is available
@@ -30,3 +30,5 @@ You can manually check for new versions, regardless of `pollInterval`, by callin
 	</div>
 +++{/if}+++
 ```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides an `$updated` store with the same information. If you're currently using `$app/stores`, we advise you to migrate towards `$app/state` (requires Svelte 5).
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/index.md
new file mode 100644
index 0000000000..b81f739ca5
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/index.md
@@ -0,0 +1,3 @@
+---
+title: $app/state
+---
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
deleted file mode 100644
index 838ab60041..0000000000
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-b/src/routes/+layout.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-	let { children } = $props();
-</script>
-
-<nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
-		home
-	</a>
-
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
-		about
-	</a>
-</nav>
-
-{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
deleted file mode 100644
index 838ab60041..0000000000
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-a/src/routes/+layout.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-	let { children } = $props();
-</script>
-
-<nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
-		home
-	</a>
-
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
-		about
-	</a>
-</nav>
-
-{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
deleted file mode 100644
index 0965c80ed5..0000000000
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/+assets/app-b/src/routes/+layout.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	import { page, navigating } from '$app/stores';
-	let { children } = $props();
-</script>
-
-<nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
-		home
-	</a>
-
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
-		about
-	</a>
-
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
-	{/if}
-</nav>
-
-{@render children()}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
deleted file mode 100644
index e2826055be..0000000000
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: navigating
----
-
-The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
-
-- `from` and `to` — objects with `params`, `route` and `url` properties
-- `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
-
-> [!NOTE] For complete type information visit the [`Navigation`](/docs/kit/@sveltejs-kit#Navigation) documentation.
-
-It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` store and add a message to the nav bar:
-
-```svelte
-/// file: src/routes/+layout.svelte
-<script>
-	import { page, +++navigating+++ } from '$app/stores';
-
-	let { children } = $props();
-</script>
-
-<nav>
-	<a href="http://github.com/" aria-current={$page.url.pathname === '/'}>
-		home
-	</a>
-
-	<a href="http://github.com/about" aria-current={$page.url.pathname === '/about'}>
-		about
-	</a>
-
-+++	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
-	{/if}+++
-</nav>
-
-{@render children()}
-```
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/index.md
deleted file mode 100644
index 01b4dc5a4f..0000000000
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Stores
----
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/+assets/app-b/src/routes/+error.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/+assets/app-b/src/routes/+error.svelte
index 9c71b83da4..2765de66fd 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/+assets/app-b/src/routes/+error.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/+assets/app-b/src/routes/+error.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { emojis } from './emojis.js';
 </script>
 
-<h1>{$page.status} {$page.error.message}</h1>
+<h1>{page.status} {page.error.message}</h1>
 <span style="font-size: 10em">
-	{emojis[$page.status] ?? emojis[500]}
+	{emojis[page.status] ?? emojis[500]}
 </span>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/index.md
index 7465985cd5..f4a2952b60 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/index.md
@@ -9,13 +9,13 @@ The default error page is somewhat bland. We can customize it by creating a `src
 ```svelte
 /// file: src/routes/+error.svelte
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { emojis } from './emojis.js';
 </script>
 
-<h1>{$page.status} {$page.error.message}</h1>
+<h1>{page.status} {page.error.message}</h1>
 <span style="font-size: 10em">
-	{emojis[$page.status] ?? emojis[500]}
+	{emojis[page.status] ?? emojis[500]}
 </span>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-b/src/routes/+error.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-b/src/routes/+error.svelte
index f92d0b2a12..a6cf14f8f7 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-b/src/routes/+error.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/+assets/app-b/src/routes/+error.svelte
@@ -1,15 +1,15 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let online =
 		typeof navigator !== 'undefined' ? navigator.onLine : true;
 </script>
 
-{#if $page.status === 404}
+{#if page.status === 404}
 	<h1>Not found</h1>
 {:else if !online}
 	<h1>You're offline</h1>
 {:else}
 	<h1>Oops!</h1>
-	<p>{$page.error.message}</p>
+	<p>{page.error.message}</p>
 {/if}
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
index e9eb9efb65..426844df5d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
@@ -4,30 +4,30 @@ title: Customizing the error message
 
 The error page in the previous exercise is rather static. Maybe you want to show the error message so you can help people turning up in your support channels faster.
 
-For this, SvelteKit provides you with `$page.error` and `$page.status`, which contain information about the error and the status code. Let's add it to `+error.svelte`:
+For this, SvelteKit provides you with `page.error` and `page.status`, which contain information about the error and the status code. Let's add it to `+error.svelte`:
 
 ```svelte
 /// file: src/routes/+error.svelte
 <script>
-	+++import { page } from '$app/stores';+++
+	+++import { page } from '$app/state';+++
 
 	let online = typeof navigator !== 'undefined'
 		? navigator.onLine
 		: true;
 </script>
 
-+++{#if $page.status === 404}
++++{#if page.status === 404}
 	<h1>Not found</h1>
 {:else +++if !online}
 	<h1>You're offline</h1>
 {:else}
 	<h1>Oops!</h1>
 	---<p>Something went wrong</p>---
-	+++<p>{$page.error.message}</p>+++
+	+++<p>{page.error.message}</p>+++
 {/if}
 ```
 
-That's better, but `$page.error.message` always contains "Internal Error" - how so? This is because SvelteKit plays it safe and prevents you from accidentally showing sensitive information as part of the error message.
+That's better, but `page.error.message` always contains "Internal Error" - how so? This is because SvelteKit plays it safe and prevents you from accidentally showing sensitive information as part of the error message.
 
 To customize it, implement the `handleError` hook in `hooks.server.js` and `hooks.client.js` which run when an unexpected error is thrown during data loads on the server or client respectively.
 
@@ -49,6 +49,6 @@ export function handleError(+++{ error }+++) {
 
 You could also call your error reporting service in these hooks.
 
-Note that you can return more than an error message if you like. Whatever object shape you return will be available in `$page.error`, the only requirement is a `message` property. You can read more about this (and how to make it type-safe!) in the [error docs](/docs/kit/errors).
+Note that you can return more than an error message if you like. Whatever object shape you return will be available in `page.error`, the only requirement is a `message` property. You can read more about this (and how to make it type-safe!) in the [error docs](/docs/kit/errors).
 
 > [!NOTE] When handling errors, be careful to not assume it's an `Error` object, anything could be thrown. Also make sure not to expose senstive data by forwarding too much information
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-b/src/routes/+error.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-b/src/routes/+error.svelte
index 1416577b96..8ec3a57e03 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-b/src/routes/+error.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/+assets/app-b/src/routes/+error.svelte
@@ -1,7 +1,7 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<h1>{$page.status}</h1>
-<p>{$page.error.message}</p>
-<p>error code: {$page.error.code}</p>
\ No newline at end of file
+<h1>{page.status}</h1>
+<p>{page.error.message}</p>
+<p>error code: {page.error.code}</p>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
index 4883c38b1b..f61b512f6e 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/index.md
@@ -15,7 +15,7 @@ export function handleError({ event, error }) {
 
 If you navigate to `/the-bad-place`, you'll see this in action — the error page is shown, and if you open the terminal (using the button to the right of the URL bar), you'll see the message from `src/routes/the-bad-place/+page.server.js`.
 
-Notice that we're _not_ showing the error message to the user. That's because error messages can include sensitive information that at best will confuse your users, and at worst could benefit evildoers. Instead, the error object available to your application — represented as `$page.error` in your `+error.svelte` pages, or `%sveltekit.error%` in your `src/error.html` fallback — is just this:
+Notice that we're _not_ showing the error message to the user. That's because error messages can include sensitive information that at best will confuse your users, and at worst could benefit evildoers. Instead, the error object available to your application — represented as `page.error` in your `+error.svelte` pages, or `%sveltekit.error%` in your `src/error.html` fallback — is just this:
 
 <!-- prettier-ignore-start -->
 ```js
@@ -44,10 +44,10 @@ You can now reference properties other than `message` in a custom error page. Cr
 ```svelte
 /// file: src/routes/+error.svelte
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<h1>{$page.status}</h1>
-<p>{$page.error.message}</p>
-<p>error code: {$page.error.code}</p>
+<h1>{page.status}</h1>
+<p>{page.error.message}</p>
+<p>error code: {page.error.code}</p>
 ```
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
index 1a419507b1..ea968e6658 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { navigating } from '$app/stores';
+	import { navigating } from '$app/state';
 
 	let { children } = $props();
 
@@ -8,10 +8,10 @@
 	let end = $state();
 
 	$effect(() => {
-		if ($navigating) {
+		if (navigating.to) {
 			start = Date.now();
 			end = null;
-			previous = $navigating;
+			previous = navigating;
 		} else {
 			end = Date.now();
 		}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
index a20c670f1f..5acef701c7 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { navigating } from '$app/stores';
+	import { navigating } from '$app/state';
 
 	let { children } = $props();
 
@@ -8,10 +8,10 @@
 	let end = $state();
 
 	$effect(() => {
-		if ($navigating) {
+		if (navigating.to) {
 			start = Date.now();
 			end = null;
-			previous = $navigating;
+			previous = navigating;
 		} else {
 			end = Date.now();
 		}
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
index ffc3424fc0..4e12c58f32 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-a/src/routes/[path]/+page.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
-	let depth = $derived($page.params.path.split('/').filter(Boolean).length);
+	let depth = $derived(page.params.path.split('/').filter(Boolean).length);
 	let next = $derived(depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`);
 </script>
 
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
index ffc3424fc0..4e12c58f32 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/+assets/app-b/src/routes/[...path]/+page.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
-	let depth = $derived($page.params.path.split('/').filter(Boolean).length);
+	let depth = $derived(page.params.path.split('/').filter(Boolean).length);
 	let next = $derived(depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`);
 </script>
 
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/colors/[color]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/colors/[color]/+page.svelte
index 6a6c4d6b92..0c5a798353 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/colors/[color]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-a/src/routes/colors/[color]/+page.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<div class="color" style="--color: #{$page.params.color}">
-	<span>#{$page.params.color}</span>
+<div class="color" style="--color: #{page.params.color}">
+	<span>#{page.params.color}</span>
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-b/src/routes/colors/[color=hex]/+page.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-b/src/routes/colors/[color=hex]/+page.svelte
index 6a6c4d6b92..0c5a798353 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-b/src/routes/colors/[color=hex]/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/+assets/app-b/src/routes/colors/[color=hex]/+page.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-<div class="color" style="--color: #{$page.params.color}">
-	<span>#{$page.params.color}</span>
+<div class="color" style="--color: #{page.params.color}">
+	<span>#{page.params.color}</span>
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
index 302d4f9f2d..f12a97415b 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
@@ -1,12 +1,12 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let { children } = $props();
 </script>
 
 <nav
-	class:has-color={!!$page.data.color}
-	style:background={$page.data.color ?? 'var(--bg-2)'}
+	class:has-color={!!page.data.color}
+	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>
 	<a href="http://github.com/red">red</a>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
index 9ac49389ed..45d876bb40 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
@@ -1,21 +1,20 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let { children } = $props();
 </script>
 
 <nav
-	class:has-color={!!$page.data.color}
-	style:background={$page.data.color ?? 'var(--bg-2)'}
+	class:has-color={!!page.data.color}
+	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>
 	<a href="http://github.com/red">red</a>
 	<a href="http://github.com/green">green</a>
 	<a href="http://github.com/blue">blue</a>
 
-	{#if $page.data.component}
-		{@const Component = $page.data.component}
-		<Component />
+	{#if page.data.component}
+		<page.data.component />
 	{/if}
 </nav>
 
@@ -26,4 +25,4 @@
 	nav.has-color a {
 		color: white;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
index 6118fb88ed..b4c2473686 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
@@ -20,17 +20,16 @@ We can now use the `component` returned from these `load` functions like any oth
 ```svelte
 /// file: src/routes/+layout.svelte
 <nav
-	class:has-color={!!$page.data.color}
-	style:background={$page.data.color ?? 'var(--bg-2)'}
+	class:has-color={!!page.data.color}
+	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>
 	<a href="http://github.com/red">red</a>
 	<a href="http://github.com/green">green</a>
 	<a href="http://github.com/blue">blue</a>
 
-+++	{#if $page.data.component}
-		{@const Component = $page.data.component}
-		<Component />
++++	{#if page.data.component}
+		<page.data.component />
 	{/if}+++
 </nav>
 ```
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 5b50ce832b..2ca1ad0e5a 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -53,7 +53,7 @@
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/enhanced-img": "^0.4.3",
-		"@sveltejs/kit": "^2.11.0",
+		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.3",
 		"@types/cookie": "^0.6.0",
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json b/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
index b844eb71c3..9673a0bb84 100644
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
@@ -9,10 +9,10 @@
 			"version": "0.0.1",
 			"devDependencies": {
 				"@rollup/wasm-node": "^4.21.0",
-				"@sveltejs/kit": "^2.5",
+				"@sveltejs/kit": "^2.12.1",
 				"esbuild-wasm": "^0.21.5",
 				"svelte": "^5.0.0",
-				"vite": "^5.4"
+				"vite": "^6"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -30,377 +30,417 @@
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+			"integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
 			"cpu": [
 				"ppc64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"aix"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-			"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+			"integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-			"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+			"integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-			"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+			"integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-			"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+			"integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-			"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+			"integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-			"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+			"integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-			"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+			"integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-			"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+			"integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-			"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+			"integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-			"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+			"integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
 			"cpu": [
 				"ia32"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-			"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+			"integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
 			"cpu": [
 				"loong64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-			"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+			"integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
 			"cpu": [
 				"mips64el"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+			"integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
 			"cpu": [
 				"ppc64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-			"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+			"integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
 			"cpu": [
 				"riscv64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-			"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+			"integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
 			"cpu": [
 				"s390x"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-			"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+			"integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+			"integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"netbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+			"integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+			"integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"openbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-			"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+			"integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"sunos"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-			"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+			"integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-			"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+			"integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
 			"cpu": [
 				"ia32"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-			"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+			"integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.5",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+			"version": "0.3.8",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -436,7 +476,8 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
@@ -450,227 +491,286 @@
 			}
 		},
 		"node_modules/@polka/url": {
-			"version": "1.0.0-next.25",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+			"version": "1.0.0-next.28",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+			"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
-			"integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz",
+			"integrity": "sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			]
 		},
 		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
-			"integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz",
+			"integrity": "sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
-			"integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz",
+			"integrity": "sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
-			"integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz",
+			"integrity": "sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			]
 		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz",
+			"integrity": "sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz",
+			"integrity": "sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
 		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
-			"integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz",
+			"integrity": "sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
-			"integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz",
+			"integrity": "sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
-			"integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz",
+			"integrity": "sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
-			"integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz",
+			"integrity": "sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz",
+			"integrity": "sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
-			"integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz",
+			"integrity": "sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==",
 			"cpu": [
 				"ppc64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
-			"integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz",
+			"integrity": "sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==",
 			"cpu": [
 				"riscv64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-s390x-gnu": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
-			"integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz",
+			"integrity": "sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==",
 			"cpu": [
 				"s390x"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
-			"integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
+			"integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
-			"integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz",
+			"integrity": "sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
-			"integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz",
+			"integrity": "sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
-			"integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz",
+			"integrity": "sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==",
 			"cpu": [
 				"ia32"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
-			"integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz",
+			"integrity": "sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
 		"node_modules/@rollup/wasm-node": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/@rollup/wasm-node/-/wasm-node-4.21.2.tgz",
-			"integrity": "sha512-AJCfdXkpe5EX+jfWOMYuFl3ZomTQyfx4V4geRmChdTwAo05FdpnobwqtYn0mo7Mf1qVN7mniI7kdG98vKDVd2g==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/@rollup/wasm-node/-/wasm-node-4.28.1.tgz",
+			"integrity": "sha512-t4ckEC09V3wbe0r6T4fGjq85lEbvGcGxn7QYYgjHyKNzZaQU5kFqr4FsavXYHRiVNYq8m+dRhdGjpfcC9UzzPg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "1.0.5"
+				"@types/estree": "1.0.6"
 			},
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -684,24 +784,24 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.5.10",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.10.tgz",
-			"integrity": "sha512-OqoyTmFG2cYmCFAdBfW+Qxbg8m23H4dv6KqwEt7ofr/ROcfcIl3Z/VT56L22H9f0uNZyr+9Bs1eh2gedOCK9kA==",
+			"version": "2.12.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.12.1.tgz",
+			"integrity": "sha512-M3rPijGImeOkI0DBJSwjqz+YFX2DyOf6NzWgHVk3mqpT06dlYCpcv5xh1q4rYEqB58yQlk4QA1Y35PUqnUiFKw==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",
-				"devalue": "^5.0.0",
-				"esm-env": "^1.0.0",
+				"devalue": "^5.1.0",
+				"esm-env": "^1.2.1",
 				"import-meta-resolve": "^4.1.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.4",
+				"sirv": "^3.0.0",
 				"tiny-glob": "^0.2.9"
 			},
 			"bin": {
@@ -711,66 +811,51 @@
 				"node": ">=18.13"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3"
+				"vite": "^5.0.3 || ^6.0.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.1.tgz",
-			"integrity": "sha512-rimpFEAboBBHIlzISibg94iP09k/KYdHgVhJlcsTfn7KMBhc70jFX/GRWkRdFCc2fdnk+4+Bdfej23cMDnJS6A==",
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.2.tgz",
+			"integrity": "sha512-GElAxQMlznx1pRdodtkmiyBZcjlaJntJ8APa2hBhnbUAJqKAFGdmwjRPJhh+2DMxwARRLBzQIs/iZ5EbR4X/og==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-				"debug": "^4.3.4",
+				"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+				"debug": "^4.4.0",
 				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
-				"magic-string": "^0.30.10",
-				"svelte-hmr": "^0.16.0",
-				"vitefu": "^0.2.5"
+				"magic-string": "^0.30.15",
+				"vitefu": "^1.0.4"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-			"integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+			"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.0.0 || >=20"
+				"debug": "^4.3.7"
 			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte/node_modules/svelte-hmr": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-			"integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-			"dev": true,
-			"license": "ISC",
-			"peer": true,
 			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0"
+				"@sveltejs/vite-plugin-svelte": "^5.0.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
 			}
 		},
 		"node_modules/@types/cookie": {
@@ -781,17 +866,18 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/acorn": {
-			"version": "8.12.1",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+			"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
 			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -824,6 +910,7 @@
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -839,14 +926,14 @@
 			}
 		},
 		"node_modules/debug": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-			"integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+			"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -869,48 +956,50 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
+			"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esbuild": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+			"version": "0.24.0",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+			"integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
 			"dev": true,
 			"hasInstallScript": true,
+			"license": "MIT",
 			"bin": {
 				"esbuild": "bin/esbuild"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			},
 			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.21.5",
-				"@esbuild/android-arm": "0.21.5",
-				"@esbuild/android-arm64": "0.21.5",
-				"@esbuild/android-x64": "0.21.5",
-				"@esbuild/darwin-arm64": "0.21.5",
-				"@esbuild/darwin-x64": "0.21.5",
-				"@esbuild/freebsd-arm64": "0.21.5",
-				"@esbuild/freebsd-x64": "0.21.5",
-				"@esbuild/linux-arm": "0.21.5",
-				"@esbuild/linux-arm64": "0.21.5",
-				"@esbuild/linux-ia32": "0.21.5",
-				"@esbuild/linux-loong64": "0.21.5",
-				"@esbuild/linux-mips64el": "0.21.5",
-				"@esbuild/linux-ppc64": "0.21.5",
-				"@esbuild/linux-riscv64": "0.21.5",
-				"@esbuild/linux-s390x": "0.21.5",
-				"@esbuild/linux-x64": "0.21.5",
-				"@esbuild/netbsd-x64": "0.21.5",
-				"@esbuild/openbsd-x64": "0.21.5",
-				"@esbuild/sunos-x64": "0.21.5",
-				"@esbuild/win32-arm64": "0.21.5",
-				"@esbuild/win32-ia32": "0.21.5",
-				"@esbuild/win32-x64": "0.21.5"
+				"@esbuild/aix-ppc64": "0.24.0",
+				"@esbuild/android-arm": "0.24.0",
+				"@esbuild/android-arm64": "0.24.0",
+				"@esbuild/android-x64": "0.24.0",
+				"@esbuild/darwin-arm64": "0.24.0",
+				"@esbuild/darwin-x64": "0.24.0",
+				"@esbuild/freebsd-arm64": "0.24.0",
+				"@esbuild/freebsd-x64": "0.24.0",
+				"@esbuild/linux-arm": "0.24.0",
+				"@esbuild/linux-arm64": "0.24.0",
+				"@esbuild/linux-ia32": "0.24.0",
+				"@esbuild/linux-loong64": "0.24.0",
+				"@esbuild/linux-mips64el": "0.24.0",
+				"@esbuild/linux-ppc64": "0.24.0",
+				"@esbuild/linux-riscv64": "0.24.0",
+				"@esbuild/linux-s390x": "0.24.0",
+				"@esbuild/linux-x64": "0.24.0",
+				"@esbuild/netbsd-x64": "0.24.0",
+				"@esbuild/openbsd-arm64": "0.24.0",
+				"@esbuild/openbsd-x64": "0.24.0",
+				"@esbuild/sunos-x64": "0.24.0",
+				"@esbuild/win32-arm64": "0.24.0",
+				"@esbuild/win32-ia32": "0.24.0",
+				"@esbuild/win32-x64": "0.24.0"
 			}
 		},
 		"node_modules/esbuild-wasm": {
@@ -927,16 +1016,16 @@
 			}
 		},
 		"node_modules/esm-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
+			"integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
-			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.3.tgz",
+			"integrity": "sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -985,13 +1074,13 @@
 			}
 		},
 		"node_modules/is-reference": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "*"
+				"@types/estree": "^1.0.6"
 			}
 		},
 		"node_modules/kleur": {
@@ -1012,10 +1101,11 @@
 			"license": "MIT"
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.11",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-			"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+			"version": "0.30.17",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
@@ -1041,17 +1131,17 @@
 			}
 		},
 		"node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"version": "3.3.8",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+			"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
 			"dev": true,
 			"funding": [
 				{
@@ -1059,6 +1149,7 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
@@ -1067,15 +1158,16 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
-			"dev": true
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/postcss": {
-			"version": "8.4.45",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-			"integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+			"version": "8.4.49",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
 			"dev": true,
 			"funding": [
 				{
@@ -1091,22 +1183,24 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.1",
-				"source-map-js": "^1.2.0"
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
 			}
 		},
 		"node_modules/rollup": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
-			"integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.1.tgz",
+			"integrity": "sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "1.0.5"
+				"@types/estree": "1.0.6"
 			},
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -1116,22 +1210,25 @@
 				"npm": ">=8.0.0"
 			},
 			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.21.2",
-				"@rollup/rollup-android-arm64": "4.21.2",
-				"@rollup/rollup-darwin-arm64": "4.21.2",
-				"@rollup/rollup-darwin-x64": "4.21.2",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
-				"@rollup/rollup-linux-arm-musleabihf": "4.21.2",
-				"@rollup/rollup-linux-arm64-gnu": "4.21.2",
-				"@rollup/rollup-linux-arm64-musl": "4.21.2",
-				"@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
-				"@rollup/rollup-linux-riscv64-gnu": "4.21.2",
-				"@rollup/rollup-linux-s390x-gnu": "4.21.2",
-				"@rollup/rollup-linux-x64-gnu": "4.21.2",
-				"@rollup/rollup-linux-x64-musl": "4.21.2",
-				"@rollup/rollup-win32-arm64-msvc": "4.21.2",
-				"@rollup/rollup-win32-ia32-msvc": "4.21.2",
-				"@rollup/rollup-win32-x64-msvc": "4.21.2",
+				"@rollup/rollup-android-arm-eabi": "4.28.1",
+				"@rollup/rollup-android-arm64": "4.28.1",
+				"@rollup/rollup-darwin-arm64": "4.28.1",
+				"@rollup/rollup-darwin-x64": "4.28.1",
+				"@rollup/rollup-freebsd-arm64": "4.28.1",
+				"@rollup/rollup-freebsd-x64": "4.28.1",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.28.1",
+				"@rollup/rollup-linux-arm-musleabihf": "4.28.1",
+				"@rollup/rollup-linux-arm64-gnu": "4.28.1",
+				"@rollup/rollup-linux-arm64-musl": "4.28.1",
+				"@rollup/rollup-linux-loongarch64-gnu": "4.28.1",
+				"@rollup/rollup-linux-powerpc64le-gnu": "4.28.1",
+				"@rollup/rollup-linux-riscv64-gnu": "4.28.1",
+				"@rollup/rollup-linux-s390x-gnu": "4.28.1",
+				"@rollup/rollup-linux-x64-gnu": "4.28.1",
+				"@rollup/rollup-linux-x64-musl": "4.28.1",
+				"@rollup/rollup-win32-arm64-msvc": "4.28.1",
+				"@rollup/rollup-win32-ia32-msvc": "4.28.1",
+				"@rollup/rollup-win32-x64-msvc": "4.28.1",
 				"fsevents": "~2.3.2"
 			}
 		},
@@ -1149,16 +1246,16 @@
 			}
 		},
 		"node_modules/set-cookie-parser": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/sirv": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
+			"integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1167,22 +1264,23 @@
 				"totalist": "^3.0.0"
 			},
 			"engines": {
-				"node": ">= 10"
+				"node": ">=18"
 			}
 		},
 		"node_modules/source-map-js": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
 			"dev": true,
+			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.1.tgz",
-			"integrity": "sha512-tt8fZwbpZ7mgoXvjJLu7dObOPb7Jhj241NxkVD18wyVprhtkjzWerBc+dFMSRHqeoQYByOW4iFI7fXe6TBMj2w==",
+			"version": "5.14.0",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.14.0.tgz",
+			"integrity": "sha512-xHrS9dd2Ci9GJd2sReNFqJztoe515wB4OzsPw4A8L2M6lddLFkREkWDJnM5DAND30Zyvjwc1icQVzH0F+Sdx5A==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1193,9 +1291,9 @@
 				"acorn-typescript": "^1.4.13",
 				"aria-query": "^5.3.1",
 				"axobject-query": "^4.1.0",
-				"esm-env": "^1.0.0",
-				"esrap": "^1.2.2",
-				"is-reference": "^3.0.2",
+				"esm-env": "^1.2.1",
+				"esrap": "^1.2.3",
+				"is-reference": "^3.0.3",
 				"locate-character": "^3.0.0",
 				"magic-string": "^0.30.11",
 				"zimmerframe": "^1.1.2"
@@ -1226,20 +1324,21 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.4.3",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
-			"integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
+			"integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"esbuild": "^0.21.3",
-				"postcss": "^8.4.43",
-				"rollup": "^4.20.0"
+				"esbuild": "^0.24.0",
+				"postcss": "^8.4.49",
+				"rollup": "^4.23.0"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20.0.0"
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
@@ -1248,19 +1347,25 @@
 				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": "^18.0.0 || >=20.0.0",
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
 				"sass-embedded": "*",
 				"stylus": "*",
 				"sugarss": "*",
-				"terser": "^5.4.0"
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
 			},
 			"peerDependenciesMeta": {
 				"@types/node": {
 					"optional": true
 				},
+				"jiti": {
+					"optional": true
+				},
 				"less": {
 					"optional": true
 				},
@@ -1281,18 +1386,28 @@
 				},
 				"terser": {
 					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
 				}
 			}
 		},
 		"node_modules/vitefu": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.4.tgz",
+			"integrity": "sha512-y6zEE3PQf6uu/Mt6DTJ9ih+kyJLr4XcSgHR2zUkM8SWDhuixEJxfJ6CZGMHh1Ec3vPLoEA0IHU5oWzVqw8ulow==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*"
+			],
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
 			},
 			"peerDependenciesMeta": {
 				"vite": {
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json b/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
index 3d5b2605fb..22cd91a771 100644
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
@@ -8,10 +8,10 @@
 	},
 	"devDependencies": {
 		"@rollup/wasm-node": "^4.21.0",
-		"@sveltejs/kit": "^2.5",
+		"@sveltejs/kit": "^2.12.1",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
-		"vite": "^5.4"
+		"vite": "^6"
 	},
 	"type": "module"
 }
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/src/error.html b/apps/svelte.dev/scripts/create-tutorial-zip/common/src/error.html
new file mode 100644
index 0000000000..c322e16824
--- /dev/null
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/src/error.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>%sveltekit.error.message%</title>
+
+		<style>
+			body {
+				--bg: white;
+				--fg: #222;
+				--divider: #ccc;
+				background: var(--bg);
+				color: var(--fg);
+				font-family:
+					system-ui,
+					-apple-system,
+					BlinkMacSystemFont,
+					'Segoe UI',
+					Roboto,
+					Oxygen,
+					Ubuntu,
+					Cantarell,
+					'Open Sans',
+					'Helvetica Neue',
+					sans-serif;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100vh;
+				margin: 0;
+			}
+
+			.error {
+				display: flex;
+				align-items: center;
+				max-width: 32rem;
+				margin: 0 1rem;
+			}
+
+			.status {
+				font-weight: 200;
+				font-size: 3rem;
+				line-height: 1;
+				position: relative;
+				top: -0.05rem;
+			}
+
+			.message {
+				border-left: 1px solid var(--divider);
+				padding: 0 0 0 1rem;
+				margin: 0 0 0 1rem;
+				min-height: 2.5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.message h1 {
+				font-weight: 400;
+				font-size: 1em;
+				margin: 0;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					--bg: #222;
+					--fg: #ddd;
+					--divider: #666;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="error">
+			<span class="status">%sveltekit.status%</span>
+			<div class="message">
+				<h1>%sveltekit.error.message%</h1>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js
index 872800ea1b..d95a800f56 100644
--- a/apps/svelte.dev/src/hooks.server.js
+++ b/apps/svelte.dev/src/hooks.server.js
@@ -1,6 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 
 const mappings = new Map([
+	// docs
 	['/docs/accessibility-warnings', '/docs/svelte/compiler-warnings'],
 	['/docs/basic-markup', '/docs/svelte/basic-markup'],
 	['/docs/client-side-component-api', '/docs/svelte/legacy-component-api'],
@@ -23,7 +24,18 @@ const mappings = new Map([
 	['/docs/svelte-transition', '/docs/svelte/svelte-transition'],
 	['/docs/typescript', '/docs/svelte/typescript'],
 	['/docs/v4-migration-guide', '/docs/svelte/v4-migration-guide'],
-	['/faq', '/docs/svelte/faq']
+	['/faq', '/docs/svelte/faq'],
+	// tutorial
+	['/tutorial/reactive-assignments', '/tutorial/svelte/state'],
+	['/tutorial/reactive-declarations', '/tutorial/svelte/derived-state'],
+	['/tutorial/reactive-statements', '/tutorial/svelte/effects'],
+	['/tutorial/updating-arrays-and-objects', '/tutorial/svelte/deep-state'],
+	['/tutorial/event-modifiers', '/tutorial/svelte/capturing'],
+	['/tutorial/dom-event-forwarding', '/tutorial/svelte/spreading-events'],
+	['/tutorial/svelte/introducing-stores', '/tutorial/svelte/stores'],
+	['/tutorial/kit/app-store', '/tutorial/kit/app-state'],
+	['/tutorial/kit/navigating-store', '/tutorial/kit/navigating-state'],
+	['/tutorial/kit/updated-store', '/tutorial/kit/updated-state']
 ]);
 
 // selectively preload fonts
@@ -39,9 +51,15 @@ export async function handle({ event, resolve }) {
 	const destination = mappings.get(event.url.pathname);
 	if (destination) {
 		// TODO: change to `dev ? 307 : 308` if no reports of incorrect redirects
+		// (update: should we ever? We would prohibit us from ever changing that structure later on)
 		redirect(307, destination);
 	}
 
+	// Best effort to redirect from Svelte 3 tutorial to new tutorial
+	if (event.url.pathname.startsWith('/tutorial/') && event.url.pathname.split('/').length === 2) {
+		redirect(307, event.url.pathname.replace('/tutorial/', '/tutorial/svelte/'));
+	}
+
 	const response = await resolve(event, {
 		preload: ({ type, path }) => {
 			if (type === 'font') {
diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 7a8f1b4cea..0846af232b 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -45,12 +45,14 @@
 		}
 
 		// except parents of the current one
-		const current = details.querySelector(`[href="http://github.com/$%7B$page.url.pathname%7D"]`) as HTMLAnchorElement | null;
+		const current = details.querySelector(
+			`[href="http://github.com/$%7B$page.url.pathname%7D"]`
+		) as HTMLAnchorElement | null;
 		if (!current) return;
 
 		let node = current as Element;
 
-		while ((node = (node.parentNode) as Element) && node !== details) {
+		while ((node = node.parentNode as Element) && node !== details) {
 			if (node.nodeName === 'DETAILS') {
 				(node as HTMLDetailsElement).open = true;
 			}
@@ -70,7 +72,10 @@
 			}
 		}
 
-		if (document.activeElement?.nodeName === 'SUMMARY' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+		if (
+			document.activeElement?.nodeName === 'SUMMARY' &&
+			(e.key === 'ArrowLeft' || e.key === 'ArrowRight')
+		) {
 			(document.activeElement.parentNode as HTMLDetailsElement).open = e.key === 'ArrowRight';
 		}
 	}}
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index e48dd1fb5c..fb9a3ec416 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -82,7 +82,7 @@
 			{:else}
 				<form
 					onsubmit={(e) => {
-						e.preventDefault()
+						e.preventDefault();
 						const search = new FormData(e.target as HTMLFormElement).get('search');
 						goto(search ? `/apps?search=${encodeURIComponent(search.toString())}` : '/apps');
 					}}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
index 62c15ca1bd..2b664114bd 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
@@ -1,24 +1,11 @@
 import { redirect } from '@sveltejs/kit';
-import { load_exercise, parts } from './content.server';
+import { load_exercise } from './content.server';
 
 export const prerender = true;
 
-const redirects = new Map([
-	['reactive-assignments', 'svelte/state'],
-	['reactive-declarations', 'svelte/derived-state'],
-	['reactive-statements', 'svelte/effects'],
-	['updating-arrays-and-objects', 'svelte/deep-state'],
-	['event-modifiers', 'svelte/capturing'],
-	['dom-event-forwarding', 'svelte/spreading-events'],
-	['svelte/introducing-stores', 'stores']
-]);
-
 export async function load({ params }) {
 	if (!params.slug || params.slug === 'svelte') redirect(307, '/tutorial/svelte/welcome-to-svelte');
 	if (params.slug === 'kit') redirect(307, '/tutorial/kit/introducing-sveltekit');
-
-	const r = redirects.get(params.slug);
-	if (r) redirect(307, r);
 	if (!params.slug.includes('/')) redirect(307, `/tutorial/svelte/${params.slug}`);
 
 	return {
@@ -28,20 +15,11 @@ export async function load({ params }) {
 
 export function entries() {
 	// These are not findable by the router, but we need to know about them for redirects
-
-	// So that old tutorial/... routes can redirect to new tutorial/svelte/...
-	const entries = parts
-		.filter((part) => !part.slug.includes('sveltekit'))
-		.flatMap((part) => part.chapters)
-		.flatMap((chapter) =>
-			chapter.exercises.map((exercise) => ({ slug: exercise.slug.split('/').pop()! }))
-		);
-
-	// So that redirects from these URLs to /tutorial/<svelte/kit>/... work
-	entries.push({ slug: 'svelte' }, { slug: 'kit' });
-
-	// So that /tutorial/ redirects to /tutorial
-	entries.push({ slug: '' });
-
-	return entries;
+	return [
+		// So that redirects from these URLs to /tutorial/<svelte/kit>/... work
+		{ slug: 'svelte' },
+		{ slug: 'kit' },
+		// So that /tutorial/ redirects to /tutorial
+		{ slug: '' }
+	];
 }
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 44e03789ae..345cb39d9a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -35,7 +35,7 @@
 		<Viewer
 			relaxed
 			can_escape
-			onLog={(l: Log[]) => logs = l}
+			onLog={(l: Log[]) => (logs = l)}
 			{bundle}
 			theme={$theme.current}
 			injectedCSS="@import 'http://github.com/tutorial/shared.css';"
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index 6925730db9..a82ff49a99 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -120,7 +120,7 @@
 		if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
 			e.preventDefault();
 			const lis = Array.from(e.currentTarget.querySelectorAll('li'));
-			const focused = lis.findIndex((li) => li.contains( (e.target as HTMLElement)));
+			const focused = lis.findIndex((li) => li.contains(e.target as HTMLElement));
 
 			const d = e.key === 'ArrowUp' ? -1 : +1;
 
diff --git a/packages/editor/package.json b/packages/editor/package.json
index d11f0e97da..3111f75cc0 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -46,7 +46,7 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.10.1",
+		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/repl": "workspace:*",
 		"@sveltejs/site-kit": "workspace:*",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index bdedeb44b2..82480d76cd 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -49,7 +49,7 @@
 	"devDependencies": {
 		"@lezer/common": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.10.1",
+		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 6c58743e89..965ea1086d 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -46,7 +46,7 @@
 		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.10.1",
+		"@sveltejs/kit": "^2.12.1",
 		"@types/node": "^20.12.11",
 		"flexsearch": "^0.7.43",
 		"magic-string": "^0.30.11",
@@ -62,7 +62,7 @@
 		"access": "public"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.12.1",
 		"svelte": "^4.0.0 || ^5.0.0-next.1"
 	},
 	"types": "./dist/types.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a39472a80a..ecdf0397cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.4
-        version: 1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)
+        version: 1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -116,13 +116,13 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
         version: 0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.11.0
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.12.1
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
@@ -252,10 +252,10 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.12.1
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
@@ -379,10 +379,10 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.12.1
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
@@ -481,8 +481,8 @@ importers:
         version: 0.9.4(svelte@5.14.0)
     devDependencies:
       '@sveltejs/kit':
-        specifier: ^2.10.1
-        version: 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.12.1
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -1614,8 +1614,8 @@ packages:
       svelte: ^5.0.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.11.0':
-    resolution: {integrity: sha512-VtHkM5i4qAIeO9hfYwKD6Hxn7Ik+RkYam9842RXw6YdtzuI+gsA8XepZs7FB/o7hjQBJCDmvXahiGAnff1QU6w==}
+  '@sveltejs/kit@2.12.1':
+    resolution: {integrity: sha512-M3rPijGImeOkI0DBJSwjqz+YFX2DyOf6NzWgHVk3mqpT06dlYCpcv5xh1q4rYEqB58yQlk4QA1Y35PUqnUiFKw==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -4421,19 +4421,19 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.9(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4441,9 +4441,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
   '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
@@ -4457,7 +4457,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4475,7 +4475,7 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4647,9 +4647,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.11.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.14.0
 
   '@vitest/expect@2.1.2':

From 5d6586b2b4261f972c83c934470fc2c31d58d15d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 16 Dec 2024 16:57:02 -0500
Subject: [PATCH 236/453] day 16 (#1029)

* day 16

* missing title
---
 .../content/blog/2024-12-01-advent-of-svelte.md     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 0482dee6f0..55ab771174 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -121,9 +121,18 @@ The new `$inspect.trace(...)` rune gives you detailed information about which st
 - [docs](</docs/svelte/$inspect#$inspect.trace()>)
 - [demo](/playground/d135c6f00beb4fa391725e59d8061604?version=5.14.0)
 
-## Day 16
+## Day 16: `$app/state`
 
-Coming soon!
+SvelteKit's `$app/stores` module, which gives you a way to access information about (for example) the current page, now has a modern Svelte 5 state-based counterpart: `$app/state`. It exposes all the same information, but using fine-grained state, and without the clunky `$` prefix. `$app/stores` is now deprecated, and will be removed in SvelteKit 3 next year.
+
+You can migrate automatically by running the following command in your SvelteKit app:
+
+```bash
+npx sv migrate app-state
+```
+
+- [docs](/docs/kit/$app-state)
+- [tutorial](/tutorial/kit/page-state)
 
 ## Day 17
 

From 058089ffe818eee32026de42ad9baa390af9b41e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 16 Dec 2024 17:07:31 -0500
Subject: [PATCH 237/453] run app-state migration (#1030)

---
 apps/svelte.dev/src/lib/components/ModalDropdown.svelte     | 4 ++--
 .../src/routes/(authed)/playground/[id]/+page.svelte        | 6 +++---
 .../src/routes/(authed)/playground/[id]/AppControls.svelte  | 4 ++--
 .../src/routes/(authed)/playground/[id]/embed/+page.svelte  | 5 ++---
 apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte  | 4 ++--
 .../src/routes/tutorial/[...slug]/Controls.svelte           | 4 ++--
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 0846af232b..2c6d454adf 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { focusable_children, trap } from '@sveltejs/site-kit/actions';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import type { Snippet } from 'svelte';
@@ -46,7 +46,7 @@
 
 		// except parents of the current one
 		const current = details.querySelector(
-			`[href="http://github.com/$%7B$page.url.pathname%7D"]`
+			`[href="http://github.com/$%7Bpage.url.pathname%7D"]`
 		) as HTMLAnchorElement | null;
 		if (!current) return;
 
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index f5181943ce..f883a1ec62 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -7,7 +7,7 @@
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import type { File } from 'editor';
 
 	let { data } = $props();
@@ -20,12 +20,12 @@
 	let setting_hash: any = null;
 
 	// svelte-ignore non_reactive_update
-	let version = $page.url.searchParams.get('version') || 'latest';
+	let version = page.url.searchParams.get('version') || 'latest';
 	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
 
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
-	const can_escape = browser && !$page.url.hash;
+	const can_escape = browser && !page.url.hash;
 
 	if (version !== 'local' && !is_pr_or_commit_version) {
 		$effect(() => {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index a1b6917141..a4f096234f 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { isMac } from '$lib/utils/compat.js';
@@ -193,7 +193,7 @@
 							<li>
 								<a
 									href="http://github.com/playground/%7Bexample.slug%7D"
-									aria-current={$page.params.id === example.slug ? 'page' : undefined}
+									aria-current={page.params.id === example.slug ? 'page' : undefined}
 								>
 									{example.title}
 								</a>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index e67c9e5285..4bc1be3e77 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -4,14 +4,13 @@
 	import { theme } from '@sveltejs/site-kit/stores';
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let { data } = $props();
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
-	// svelte-ignore non_reactive_update
-	let version = $page.url.searchParams.get('version') || 'latest';
+	let version = page.url.searchParams.get('version') || 'latest';
 	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
 
 	if (version !== 'local' && !is_pr_or_commit_version) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 9539e5f3ec..2e8332ef6c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -12,7 +12,7 @@
 	import { solution } from './state.svelte';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Controls from './Controls.svelte';
 	import type { Item } from 'editor';
 	import type { Snapshot } from './$types.js';
@@ -319,7 +319,7 @@
 					</section>
 
 					<section slot="b" class="preview">
-						{#if needs_webcontainers($page.data.exercise)}
+						{#if needs_webcontainers(page.data.exercise)}
 							<Output exercise={data.exercise} {paused} {workspace} />
 						{:else}
 							<OutputRollup />
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 17e04eb2f3..31c5011b3b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
@@ -30,7 +30,7 @@
 								{#each chapter.exercises as exercise}
 									<li value={exercise.slug}>
 										<a
-											aria-current={$page.url.pathname === `/tutorial/${exercise.slug}`
+											aria-current={page.url.pathname === `/tutorial/${exercise.slug}`
 												? 'page'
 												: undefined}
 											href="http://github.com/tutorial/%7Bexercise.slug%7D">{exercise.title}</a

From db2cbee989711bd8927a79a0554e477d6a993d78 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:07:53 -0500
Subject: [PATCH 238/453] Sync `cli` docs (#1028)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index b311564764..422d49308e 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -15,6 +15,10 @@ npx sv migrate [migration]
 
 ## Migrations
 
+### `app-state`
+
+Migrates `$app/store` usage to `$app/state` in `.svelte` files. See the [migration guide](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) for more details.
+
 ### `svelte-5`
 
 Upgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).

From 45926ccc97ccfb6eb01fe51946d6776df8c765a1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 16 Dec 2024 19:40:30 -0500
Subject: [PATCH 239/453] bump svelte-split-pane (#1031)

* bump svelte-split-pane

* fix
---
 apps/svelte.dev/package.json                  |   2 +-
 .../routes/tutorial/[...slug]/+page.svelte    | 120 ++++++++++--------
 packages/repl/package.json                    |   2 +-
 packages/repl/src/lib/Output/Output.svelte    |   2 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte  |  43 ++++---
 packages/repl/src/lib/Output/Viewer.svelte    |   2 +-
 packages/repl/src/lib/Repl.svelte             |  46 ++++---
 .../src/lib/styles/utils/dividers.css         |   2 +-
 pnpm-lock.yaml                                |  16 +--
 9 files changed, 125 insertions(+), 110 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 2ca1ad0e5a..963eb36f93 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -20,7 +20,7 @@
 		"@lezer/common": "^1.0.4",
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
-		"@rich_harris/svelte-split-pane": "^1.1.3",
+		"@rich_harris/svelte-split-pane": "^2.0.0",
 		"@shikijs/twoslash": "^1.22.0",
 		"@sveltejs/amp": "^1.1.4",
 		"@sveltejs/repl": "workspace:*",
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 2e8332ef6c..571b9e30d8 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -262,19 +262,21 @@
 
 	<div class="top" class:offset={show_editor}>
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
-			<section slot="a" class="content">
-				<Sidebar
-					bind:sidebar
-					exercise={data.exercise}
-					on:select={(e) => {
-						navigate_to_file(e.detail.file);
-					}}
-				/>
-			</section>
-
-			<section slot="b">
+			{#snippet a()}
+				<section class="content">
+					<Sidebar
+						bind:sidebar
+						exercise={data.exercise}
+						on:select={(e) => {
+							navigate_to_file(e.detail.file);
+						}}
+					/>
+				</section>
+			{/snippet}
+
+			{#snippet b()}
 				<SplitPane type="vertical" min="100px" max="-4.1rem" pos="50%">
-					<section slot="a">
+					{#snippet a()}
 						<SplitPane
 							id="editor"
 							type={mobile ? 'vertical' : 'horizontal'}
@@ -282,51 +284,57 @@
 							max="300px"
 							pos="200px"
 						>
-							<section slot="a" class="navigator">
-								{#if mobile}
-									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
-										{workspace.current.name.replace(
-											data.exercise.scope.prefix,
-											data.exercise.scope.name + '/'
-										) ?? 'Files'}
-									</button>
-								{:else}
-									<Filetree exercise={data.exercise} {workspace} />
-								{/if}
-							</section>
-
-							<section slot="b" class="editor-container">
-								<Editor
-									{workspace}
-									autocomplete_filter={(file) => {
-										return (
-											file.name.startsWith('/src') &&
-											file.name.startsWith(data.exercise.scope.prefix) &&
-											file.name !== '/src/__client.js' &&
-											file.name !== '/src/app.html'
-										);
-									}}
-								/>
-								<ImageViewer selected={workspace.current} />
-
-								{#if mobile && show_filetree}
-									<div class="mobile-filetree">
-										<Filetree mobile exercise={data.exercise} {workspace} />
-									</div>
-								{/if}
-							</section>
+							{#snippet a()}
+								<section class="navigator">
+									{#if mobile}
+										<button class="file" onclick={() => (show_filetree = !show_filetree)}>
+											{workspace.current.name.replace(
+												data.exercise.scope.prefix,
+												data.exercise.scope.name + '/'
+											) ?? 'Files'}
+										</button>
+									{:else}
+										<Filetree exercise={data.exercise} {workspace} />
+									{/if}
+								</section>
+							{/snippet}
+
+							{#snippet b()}
+								<section class="editor-container">
+									<Editor
+										{workspace}
+										autocomplete_filter={(file) => {
+											return (
+												file.name.startsWith('/src') &&
+												file.name.startsWith(data.exercise.scope.prefix) &&
+												file.name !== '/src/__client.js' &&
+												file.name !== '/src/app.html'
+											);
+										}}
+									/>
+									<ImageViewer selected={workspace.current} />
+
+									{#if mobile && show_filetree}
+										<div class="mobile-filetree">
+											<Filetree mobile exercise={data.exercise} {workspace} />
+										</div>
+									{/if}
+								</section>
+							{/snippet}
 						</SplitPane>
-					</section>
-
-					<section slot="b" class="preview">
-						{#if needs_webcontainers(page.data.exercise)}
-							<Output exercise={data.exercise} {paused} {workspace} />
-						{:else}
-							<OutputRollup />
-						{/if}
-					</section>
+					{/snippet}
+
+					{#snippet b()}
+						<section class="preview">
+							{#if needs_webcontainers(page.data.exercise)}
+								<Output exercise={data.exercise} {paused} {workspace} />
+							{:else}
+								<OutputRollup />
+							{/if}
+						</section>
+					{/snippet}
 				</SplitPane>
-			</section>
+			{/snippet}
 		</SplitPane>
 	</div>
 
@@ -446,7 +454,7 @@
 			--pos: 5.4rem !important;
 		}
 
-		:global([data-pane]) :global(.divider) {
+		:global([data-pane]) :global(svelte-split-pane-divider) {
 			cursor: default;
 		}
 	}
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 82480d76cd..99d8b8185d 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -75,7 +75,7 @@
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
-		"@rich_harris/svelte-split-pane": "^1.1.3",
+		"@rich_harris/svelte-split-pane": "^2.0.0",
 		"@rollup/browser": "^4.17.2",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/svelte-json-tree": "^2.2.1",
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 1340f0340f..61a8694d03 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -112,7 +112,7 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel pos="50%" panel="Compiler options">
+		<PaneWithPanel pos="50%" max="-4.2rem" panel="Compiler options">
 			<div slot="main">
 				<Editor workspace={js_workspace} />
 			</div>
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index f4831419d9..a5cd9cc634 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion';
-	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import type { ComponentProps } from 'svelte';
+	import { SplitPane, type Length } from '@rich_harris/svelte-split-pane';
 
 	const UNIT_REGEX = /(\d+)(?:(px|rem|%|em))/i;
 
 	export let panel: string;
 
-	export let pos: Exclude<ComponentProps<SplitPane>['pos'], undefined> = '90%';
+	export let pos: Length = '90%';
 
 	$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
 
-	let max: Exclude<ComponentProps<SplitPane>['max'], undefined> = '90%';
+	export let max: Length = '90%';
 
 	// we can't bind to the spring itself, but we
 	// can still use the spring to drive `pos`
@@ -32,26 +31,30 @@
 			driver.set(previous_pos);
 		} else {
 			previous_pos = numeric_pos;
-			driver.set(+max.replace(UNIT_REGEX, '$1'));
+			driver.set(100);
 		}
 	};
 </script>
 
-<SplitPane {max} min="10%" type="vertical" bind:pos priority="max">
-	<section slot="a">
-		<slot name="main" />
-	</section>
-
-	<section slot="b">
-		<div class="panel-header">
-			<button class="panel-heading" on:click={toggle}>{panel}</button>
-			<slot name="panel-header" />
-		</div>
-
-		<div class="panel-body">
-			<slot name="panel-body" />
-		</div>
-	</section>
+<SplitPane {max} min="10%" type="vertical" bind:pos>
+	{#snippet a()}
+		<section>
+			<slot name="main" />
+		</section>
+	{/snippet}
+
+	{#snippet b()}
+		<section>
+			<div class="panel-header">
+				<button class="panel-heading" on:click={toggle}>{panel}</button>
+				<slot name="panel-header" />
+			</div>
+
+			<div class="panel-body">
+				<slot name="panel-body" />
+			</div>
+		</section>
+	{/snippet}
 </SplitPane>
 
 <style>
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 9b7ad4c321..a55d3e77b7 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -295,7 +295,7 @@
 
 <div class="iframe-container">
 	{#if !onLog}
-		<PaneWithPanel pos="90%" panel="Console">
+		<PaneWithPanel pos="100%" max="-4.2rem" panel="Console">
 			<div slot="main">
 				{@render main()}
 			</div>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 65619ad316..b290af60a4 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -175,25 +175,29 @@
 			min="100px"
 			max="-4.1rem"
 		>
-			<section slot="a">
-				<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
-
-				<Editor {workspace} />
-			</section>
-
-			<section slot="b" style="height: 100%;">
-				<Output
-					status={status_visible ? status : null}
-					{embedded}
-					{relaxed}
-					{can_escape}
-					{injectedJS}
-					{injectedCSS}
-					{previewTheme}
-					{workspace}
-					runtimeError={status_visible ? runtime_error : null}
-				/>
-			</section>
+			{#snippet a()}
+				<section>
+					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
+
+					<Editor {workspace} />
+				</section>
+			{/snippet}
+
+			{#snippet b()}
+				<section>
+					<Output
+						status={status_visible ? status : null}
+						{embedded}
+						{relaxed}
+						{can_escape}
+						{injectedJS}
+						{injectedCSS}
+						{previewTheme}
+						{workspace}
+						runtimeError={status_visible ? runtime_error : null}
+					/>
+				</section>
+			{/snippet}
 		</SplitPane>
 	</div>
 
@@ -237,7 +241,7 @@
 				}
 			}
 
-			[data-pane='main'] > .divider::after {
+			[data-pane='main'] > svelte-split-pane-divider::after {
 				height: calc(100% - var(--sk-pane-controls-height));
 				top: var(--sk-pane-controls-height);
 			}
@@ -269,7 +273,7 @@
 				--pos: 5.4rem !important;
 			}
 
-			[data-pane] .divider {
+			[data-pane] svelte-split-pane-divider {
 				cursor: default;
 			}
 		}
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
index d080d2158c..fbcfa5e0cb 100644
--- a/packages/site-kit/src/lib/styles/utils/dividers.css
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -1,4 +1,4 @@
-.divider {
+svelte-split-pane-divider {
 	z-index: 2;
 	&::after {
 		background-color: var(--sk-border) !important;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecdf0397cf..bc127e1957 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ importers:
         specifier: ^1.3.10
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
-        specifier: ^1.1.3
-        version: 1.1.3(svelte@5.14.0)
+        specifier: ^2.0.0
+        version: 2.0.0(svelte@5.14.0)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
@@ -335,8 +335,8 @@ importers:
         specifier: ^6.0.14
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
-        specifier: ^1.1.3
-        version: 1.1.3(svelte@5.14.0)
+        specifier: ^2.0.0
+        version: 2.0.0(svelte@5.14.0)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -1451,10 +1451,10 @@ packages:
     resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
     engines: {node: '>= 10'}
 
-  '@rich_harris/svelte-split-pane@1.1.3':
-    resolution: {integrity: sha512-eziKez1ncDfLqJQsViwLG2rYNfMEa3pYBKFUBfNTChgT5lUnofm5IDHxupAKklKvRpTXCVhQXb1MxLUfj5UgFQ==}
+  '@rich_harris/svelte-split-pane@2.0.0':
+    resolution: {integrity: sha512-mwdBUw59nlozluhoU3fbMO11YZlJ6IM48ZT6jxen8hAJbGbjTZMDKpMwD1neuK8gxgBM1QKAHJLZN7DpSY+hjA==}
     peerDependencies:
-      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5
 
   '@rollup/browser@4.17.2':
     resolution: {integrity: sha512-a+efgpgQ7qODC0ltFcap0iPKT4hTmYUb6S7h8lXek2XVvfWJ5OmVI8FpbgZ5SJkTOk5G6lvP6vYC35xzhDy+ag==}
@@ -4274,7 +4274,7 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.14.0)':
+  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.14.0)':
     dependencies:
       svelte: 5.14.0
 

From 9985efaf7cab9d5d39eb1e30ad09b47ea94b01e2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 16 Dec 2024 23:24:57 -0500
Subject: [PATCH 240/453] Panel UI (#1032)

* better panel UI

* rename slots

* convert to svelte 5

* tweaks

* lint

* use modern spring
---
 packages/repl/src/lib/Output/Output.svelte    |  10 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte  | 129 +++++++++++++-----
 packages/repl/src/lib/Output/Viewer.svelte    |  14 +-
 3 files changed, 104 insertions(+), 49 deletions(-)

diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 61a8694d03..ad2cd0e00d 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -112,14 +112,14 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel pos="50%" max="-4.2rem" panel="Compiler options">
-			<div slot="main">
+		<PaneWithPanel min="-18rem" pos="-18rem" panel="Compiler options">
+			{#snippet main()}
 				<Editor workspace={js_workspace} />
-			</div>
+			{/snippet}
 
-			<div slot="panel-body">
+			{#snippet body()}
 				<CompilerOptions {workspace} />
-			</div>
+			{/snippet}
 		</PaneWithPanel>
 	{/if}
 </div>
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index a5cd9cc634..06820ac20c 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -1,63 +1,117 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 	import { SplitPane, type Length } from '@rich_harris/svelte-split-pane';
 
 	const UNIT_REGEX = /(\d+)(?:(px|rem|%|em))/i;
 
-	export let panel: string;
+	interface Props {
+		panel: string;
+		pos?: Length;
+		min?: Length;
+		max?: Length;
+		main?: import('svelte').Snippet;
+		header?: import('svelte').Snippet;
+		body?: import('svelte').Snippet;
+	}
 
-	export let pos: Length = '90%';
+	let {
+		panel,
+		pos = $bindable('90%'),
+		min = '4.2rem',
+		max = '-4.2rem',
+		main,
+		header,
+		body
+	}: Props = $props();
 
-	$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
+	let previous_pos = Math.min(normalize(pos), 70);
 
-	export let max: Length = '90%';
+	let container: HTMLElement;
 
 	// we can't bind to the spring itself, but we
 	// can still use the spring to drive `pos`
-	const driver = spring(+pos.replace(UNIT_REGEX, '$1'), {
+	const driver = new Spring(normalize(pos), {
 		stiffness: 0.2,
 		damping: 0.5
 	});
 
-	// @ts-ignore
-	$: pos = $driver + '%';
+	$effect(() => {
+		pos = driver.current + '%';
+	});
 
 	const toggle = () => {
-		const numeric_pos = +pos.replace(UNIT_REGEX, '$1');
+		const pc = normalize(pos);
+		const px = pc * 0.01 * container.clientHeight;
 
-		driver.set(numeric_pos, { hard: true });
+		const open = container.clientHeight - px > 42;
 
-		if (numeric_pos > 80) {
-			driver.set(previous_pos);
-		} else {
-			previous_pos = numeric_pos;
+		driver.set(pc, { hard: true });
+
+		if (open) {
+			previous_pos = pc;
 			driver.set(100);
+		} else {
+			driver.set(previous_pos);
 		}
 	};
+
+	function normalize(pos: string) {
+		let normalized = +pos.replace(UNIT_REGEX, '$1');
+
+		if (normalized < 0) {
+			normalized += 100;
+		}
+
+		return normalized;
+	}
 </script>
 
-<SplitPane {max} min="10%" type="vertical" bind:pos>
-	{#snippet a()}
-		<section>
-			<slot name="main" />
-		</section>
-	{/snippet}
-
-	{#snippet b()}
-		<section>
-			<div class="panel-header">
-				<button class="panel-heading" on:click={toggle}>{panel}</button>
-				<slot name="panel-header" />
-			</div>
-
-			<div class="panel-body">
-				<slot name="panel-body" />
-			</div>
-		</section>
-	{/snippet}
-</SplitPane>
+<div class="container" bind:this={container}>
+	<SplitPane {min} {max} type="vertical" bind:pos>
+		{#snippet a()}
+			<section>
+				{@render main?.()}
+			</section>
+		{/snippet}
+
+		{#snippet b()}
+			<section>
+				<div class="panel-header">
+					<button class="panel-heading raised" onclick={toggle}>
+						<svg
+							width="1.8rem"
+							height="1.8rem"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="m7 15 5 5 5-5" />
+							<path d="m7 9 5-5 5 5" />
+						</svg>
+
+						{panel}
+					</button>
+
+					{@render header?.()}
+				</div>
+
+				<div class="panel-body">
+					{@render body?.()}
+				</div>
+			</section>
+		{/snippet}
+	</SplitPane>
+</div>
 
 <style>
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+
 	.panel-header {
 		height: var(--sk-pane-controls-height);
 		display: flex;
@@ -74,8 +128,13 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		flex: 1;
+		height: 3.2rem;
+		padding: 0 0.8rem;
+		/* flex: 1; */
 		text-align: left;
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
 	}
 
 	section {
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index a55d3e77b7..3931e79a1f 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -295,23 +295,19 @@
 
 <div class="iframe-container">
 	{#if !onLog}
-		<PaneWithPanel pos="100%" max="-4.2rem" panel="Console">
-			<div slot="main">
-				{@render main()}
-			</div>
-
-			<div slot="panel-header">
+		<PaneWithPanel pos="100%" panel="Console" {main}>
+			{#snippet header()}
 				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
 					Clear
 				</button>
-			</div>
+			{/snippet}
 
-			<section slot="panel-body">
+			{#snippet body()}
 				<Console {logs} />
-			</section>
+			{/snippet}
 		</PaneWithPanel>
 	{:else}
 		{@render main()}

From aa7e00e432831204c981ba886a05c47580be5336 Mon Sep 17 00:00:00 2001
From: Ollie <dannyworks102@gmail.com>
Date: Tue, 17 Dec 2024 23:20:09 +0900
Subject: [PATCH 241/453] fix: replace incorrect jsdoc typeExpression in AST
 traversal (#1018)

* fix: replace incorrect jsdoc typeExpression in AST traversal

- the typeExpression of a JSDocTypeTag is truncated due to comment syntax.

* snake_case

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../site-kit/src/lib/markdown/renderer.ts     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 23487fb216..74117ca5ef 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -420,13 +420,13 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 
 			for (const tag of tags) {
 				if (ts.isJSDocTypeTag(tag)) {
-					type = get_type_info(tag.typeExpression);
+					type = get_type_info(get_jsdoc_type_expression_text(tag.getText()));
 				} else if (ts.isJSDocParameterTag(tag)) {
-					params.push(get_type_info(tag.typeExpression!));
+					params.push(get_type_info(tag.typeExpression?.getText()!));
 				} else if (ts.isJSDocReturnTag(tag)) {
-					returns = get_type_info(tag.typeExpression!);
+					returns = get_type_info(tag.typeExpression?.getText()!);
 				} else if (ts.isJSDocSatisfiesTag(tag)) {
-					satisfies = get_type_info(tag.typeExpression!);
+					satisfies = get_type_info(tag.typeExpression?.getText()!);
 				} else {
 					throw new Error('Unhandled tag');
 				}
@@ -546,10 +546,9 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 
 	return transformed === js_code ? undefined : transformed;
 
-	function get_type_info(expression: ts.JSDocTypeExpression) {
-		const type = expression
-			?.getText()!
-			.slice(1, -1) // remove surrounding `{` and `}`
+	function get_type_info(text: string) {
+		const type = text
+			.replace(/^\{|\}$/g, '') // remove surrounding `{` and `}`
 			.replace(/ \* ?/gm, '')
 			.replace(/import\('(.+?)'\)\.(\w+)(?:(<.+>))?/gms, (_, source, name, args = '') => {
 				const existing = imports.get(source);
@@ -564,6 +563,10 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 
 		return type;
 	}
+
+	function get_jsdoc_type_expression_text(text: string): string {
+		return text.replace(/^@type\s*/, '').trim();
+	}
 }
 
 function find_nearest_node_modules(file: string): string | null {

From bddf9f63685335d55ba1567bd5b5aa0dc9e3cd1b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 17 Dec 2024 11:25:20 -0500
Subject: [PATCH 242/453] day 17 (#1033)

---
 .../content/blog/2024-12-01-advent-of-svelte.md           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 55ab771174..ec60a01f51 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -134,9 +134,13 @@ npx sv migrate app-state
 - [docs](/docs/kit/$app-state)
 - [tutorial](/tutorial/kit/page-state)
 
-## Day 17
+## Day 17: better IntelliSense
 
-Coming soon!
+The parser used by the language tools that power things like the [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension is the same one used by the Svelte compiler. Until today, it would fail if it encountered a syntax error, making it hard to provide things like autocomplete while you were in the middle of writing code.
+
+We just fixed that. Install the latest version of Svelte in your project, make sure your extensions are up to date, and feel the wind in your hair as you write your components.
+
+- [demo video](https://bsky.app/profile/svelte.dev/post/3ldjajjbkwc2n)
 
 ## Day 18
 

From 2f8b59ddd87fa4e77927f7dbc5234371bd969104 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:56:50 -0500
Subject: [PATCH 243/453] Sync `svelte` docs (#1034)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/99-legacy/30-legacy-svelte-component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
index 350e0b2042..1ba1629069 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: <svelte:component>
 ---
 
-In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes.
+In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary) for an example.
 
 In legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:
 

From 59ff6252237b1e34e04f3575f062be766decd8a2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 17 Dec 2024 20:21:40 -0500
Subject: [PATCH 244/453] fix cursor position on state changes (#1035)

fix cursor position on state changes - fixes #935
---
 packages/editor/src/lib/Workspace.svelte.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index d73f4f65ea..9bfa1e908a 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -556,7 +556,10 @@ export class Workspace {
 		const existing = state.doc.toString();
 
 		if (file.contents !== existing) {
-			const current_cursor_position = this.#view?.state.selection.ranges[0].from!;
+			const current_cursor_position = Math.min(
+				this.#view?.state.selection.ranges[0].from!,
+				file.contents.length
+			);
 
 			const transaction = state.update({
 				changes: {

From ca13b3947bf817793f2b7ba13616936ad09e3e68 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 18 Dec 2024 09:05:11 -0500
Subject: [PATCH 245/453] feat: highlight hovered nodes (#902)

* WIP

* fix

* bidirectional marking, expand on click

* WIP sourcemap stuff

* lint

* highlight JS output on editor hover

* bidirectional mapping

* make it work for CSS too

* lint

* fix dark mode

* only scroll to leaves

* highlight on select, scroll into view

* better implementation

* legacy mode fix

* unused

* better bidirectional highlighting on AST

* typecheck

* ignore toggle events when AST output tab is hidden
---
 packages/editor/src/lib/Workspace.svelte.ts   | 101 ++++++++++++++-
 packages/editor/src/lib/codemirror.css        |   5 +
 packages/repl/package.json                    |   1 +
 packages/repl/src/lib/Output/AstNode.svelte   | 116 +++++++++---------
 packages/repl/src/lib/Output/AstView.svelte   |  53 +++++---
 packages/repl/src/lib/Output/Output.svelte    | 103 +++++++++++++++-
 .../src/lib/styles/tokens/colours.css         |   2 +
 pnpm-lock.yaml                                |   3 +
 8 files changed, 304 insertions(+), 80 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 9bfa1e908a..03b85fb401 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -1,5 +1,5 @@
 import type { CompileError, CompileResult } from 'svelte/compiler';
-import { Compartment, EditorState } from '@codemirror/state';
+import { Compartment, EditorState, StateEffect, StateField } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
 import { basicSetup, EditorView } from 'codemirror';
@@ -7,7 +7,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { html } from '@codemirror/lang-html';
 import { svelte } from '@replit/codemirror-lang-svelte';
 import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
-import { keymap } from '@codemirror/view';
+import { Decoration, keymap, type DecorationSet } from '@codemirror/view';
 import { acceptCompletion } from '@codemirror/autocomplete';
 import { indentWithTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
@@ -51,6 +51,32 @@ function file_type(file: Item) {
 	return file.name.split('.').pop();
 }
 
+const set_highlight = StateEffect.define<{ start: number; end: number } | null>();
+
+const highlight_field = StateField.define<DecorationSet>({
+	create() {
+		return Decoration.none;
+	},
+	update(highlights, tr) {
+		// Apply the effect
+		for (let effect of tr.effects) {
+			if (effect.is(set_highlight)) {
+				if (effect.value) {
+					const { start, end } = effect.value;
+					const deco = Decoration.mark({ class: 'highlight' }).range(start, end);
+					return Decoration.set([deco]);
+				} else {
+					// Clear highlight
+					return Decoration.none;
+				}
+			}
+		}
+		// Map decorations for document changes
+		return highlights.map(tr.changes);
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+
 const tab_behaviour = new Compartment();
 const vim_mode = new Compartment();
 
@@ -60,7 +86,8 @@ const default_extensions = [
 	tab_behaviour.of(keymap.of([{ key: 'Tab', run: acceptCompletion }])),
 	indentUnit.of('\t'),
 	theme,
-	vim_mode.of([])
+	vim_mode.of([]),
+	highlight_field
 ];
 
 export interface ExposedCompilerOptions {
@@ -86,6 +113,11 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 
+	#handlers = {
+		hover: new Set<(pos: number | null) => void>(),
+		select: new Set<(from: number, to: number) => void>()
+	};
+
 	#onupdate: (file: File) => void;
 	#onreset: (items: Item[]) => void;
 
@@ -225,6 +257,20 @@ export class Workspace {
 		});
 	}
 
+	highlight_range(node: { start: number; end: number } | null, scroll = false) {
+		if (!this.#view) return;
+
+		const effects: StateEffect<any>[] = [set_highlight.of(node)];
+
+		if (scroll && node) {
+			effects.push(EditorView.scrollIntoView(node.start, { y: 'center' }));
+		}
+
+		this.#view.dispatch({
+			effects
+		});
+	}
+
 	mark_saved() {
 		this.modified = {};
 	}
@@ -261,6 +307,26 @@ export class Workspace {
 		this.#files = this.#files.slice(0, to_index).concat(from).concat(this.#files.slice(to_index));
 	}
 
+	onhover(fn: (pos: number | null) => void) {
+		$effect(() => {
+			this.#handlers.hover.add(fn);
+
+			return () => {
+				this.#handlers.hover.delete(fn);
+			};
+		});
+	}
+
+	onselect(fn: (from: number, to: number) => void) {
+		$effect(() => {
+			this.#handlers.select.add(fn);
+
+			return () => {
+				this.#handlers.select.delete(fn);
+			};
+		});
+	}
+
 	remove(item: Item) {
 		const index = this.#files.indexOf(item);
 
@@ -439,9 +505,9 @@ export class Workspace {
 			EditorState.readOnly.of(this.#readonly),
 			EditorView.editable.of(!this.#readonly),
 			EditorView.updateListener.of((update) => {
-				if (update.docChanged) {
-					const state = this.#view!.state!;
+				const state = this.#view!.state!;
 
+				if (update.docChanged) {
 					this.#update_file({
 						...this.#current,
 						contents: state.doc.toString()
@@ -450,6 +516,31 @@ export class Workspace {
 					// preserve undo/redo across files
 					this.states.set(this.#current.name, state);
 				}
+
+				if (update.selectionSet) {
+					if (state.selection.ranges.length === 1) {
+						for (const handler of this.#handlers.select) {
+							const { from, to } = state.selection.ranges[0];
+							handler(from, to);
+						}
+					}
+				}
+			}),
+			EditorView.domEventObservers({
+				mousemove: (event, view) => {
+					const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+
+					if (pos !== null) {
+						for (const handler of this.#handlers.hover) {
+							handler(pos);
+						}
+					}
+				},
+				mouseleave: (event, view) => {
+					for (const handler of this.#handlers.hover) {
+						handler(null);
+					}
+				}
 			})
 		];
 
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 32d00e83e0..847197aaa9 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -304,4 +304,9 @@
 			}
 		}
 	}
+
+	.highlight {
+		background: var(--sk-bg-highlight);
+		padding: 4px 0;
+	}
 }
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 99d8b8185d..f7a2297bd6 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -83,6 +83,7 @@
 		"editor": "workspace:*",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",
+		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.14.0",
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 381f19625e..ae1b53ec07 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -10,78 +10,59 @@
 		key?: string;
 		value: Ast;
 		path_nodes?: Ast[];
-		autoscroll?: boolean;
+		active?: boolean;
 		depth?: number;
+		onhover: (node: { type: string; start: number; end: number } | null) => void;
 	}
 
-	let { key = '', value, path_nodes = [], autoscroll = true, depth = 0 }: Props = $props();
+	let { key = '', value, path_nodes = [], active = true, onhover, depth = 0 }: Props = $props();
 
-	const { toggleable } = get_repl_context();
+	const { workspace } = get_repl_context();
 
 	let root = depth === 0;
 	let open = $state(root);
 
-	let list_item_el = $state() as HTMLLIElement;
+	let li: HTMLLIElement;
 
 	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
+	let is_marked = $derived(!root && path_nodes.includes(value));
+
 	let is_array = $derived(Array.isArray(value));
 	let is_primitive = $derived(value === null || typeof value !== 'object');
-	let is_markable = $derived(
-		!is_primitive &&
-			'start' in value &&
-			'end' in value &&
-			typeof value.start === 'number' &&
-			typeof value.end === 'number'
-	);
 	let key_text = $derived(key ? `${key}:` : '');
 
 	$effect(() => {
-		open = path_nodes.includes(value);
-	});
+		if (active && typeof value === 'object' && value !== null) {
+			workspace.onselect((from, to) => {
+				// legacy fragments have `children`
+				const nodes =
+					value.type === 'Fragment' ? value.nodes ?? value.children : is_array ? value : [value];
 
-	$effect(() => {
-		if (autoscroll && is_leaf && !$toggleable) {
-			// wait for all nodes to render before scroll
-			tick().then(() => {
-				if (list_item_el) {
-					list_item_el.scrollIntoView();
+				const start = nodes[0]?.start;
+				const end = nodes[nodes.length - 1]?.end;
+
+				if (typeof start !== 'number' || typeof end !== 'number') {
+					return;
+				}
+
+				// if node contains the current selection, open
+				if (start <= from && end >= to) {
+					open = true;
+
+					if (is_leaf) {
+						tick().then(() => {
+							li.scrollIntoView({
+								block: 'center'
+							});
+						});
+					}
 				}
 			});
 		}
 	});
-
-	function handle_mark_text(e: MouseEvent | FocusEvent) {
-		if (is_markable) {
-			e.stopPropagation();
-
-			if (
-				'start' in value &&
-				'end' in value &&
-				typeof value.start === 'number' &&
-				typeof value.end === 'number'
-			) {
-				// TODO
-				// $module_editor?.markText({ from: value.start ?? 0, to: value.end ?? 0 });
-			}
-		}
-	}
-
-	function handle_unmark_text(e: MouseEvent) {
-		if (is_markable) {
-			e.stopPropagation();
-			// TODO
-			// $module_editor?.unmarkText();
-		}
-	}
 </script>
 
-<li
-	bind:this={list_item_el}
-	class:marked={!root && is_leaf}
-	onmouseover={handle_mark_text}
-	onfocus={handle_mark_text}
-	onmouseleave={handle_unmark_text}
->
+<li bind:this={li} data-marked={is_marked} data-leaf={is_leaf}>
 	{#if is_primitive || (is_array && value.length === 0)}
 		<span class="value">
 			{#if key_text}
@@ -97,7 +78,22 @@
 			{/if}
 		</span>
 	{:else}
-		<details bind:open>
+		<!-- svelte-ignore a11y_mouse_events_have_key_events (seems like a false positive) -->
+		<details
+			bind:open
+			onfocusin={(e) => (e.stopPropagation(), onhover(value))}
+			onfocusout={() => onhover(null)}
+			onmouseover={(e) => (e.stopPropagation(), onhover(value))}
+			onmouseleave={() => onhover(null)}
+			ontoggle={(e) => {
+				// toggle events can fire even when the AST output tab is hidden
+				if (!active) return;
+
+				if (e.currentTarget.open && value && typeof value.start === 'number') {
+					workspace.highlight_range(value, true);
+				}
+			}}
+		>
 			<summary>
 				{#if key}
 					<span class="key">{key}</span>:
@@ -116,13 +112,22 @@
 				{/if}
 			</summary>
 
-			<ul>
+			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+			<ul
+				onclick={(e) => {
+					if (value && typeof value.start === 'number') {
+						workspace.highlight_range(value, true);
+						e.stopPropagation();
+					}
+				}}
+			>
 				{#each Object.entries(value) as [k, v]}
 					<AstNode
 						key={is_array ? undefined : k}
 						value={v}
 						{path_nodes}
-						{autoscroll}
+						{active}
+						{onhover}
 						depth={depth + 1}
 					/>
 				{/each}
@@ -144,8 +149,9 @@
 		list-style-type: none;
 	}
 
-	.marked {
-		background-color: var(--sk-highlight-color);
+	[data-marked='true']:not(:has(> [open])),
+	[data-leaf='true'] {
+		background-color: var(--sk-bg-highlight);
 	}
 
 	summary {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 70540f2cf2..b14d998c6f 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -10,20 +10,17 @@
 	interface Props {
 		workspace: Workspace;
 		ast: Ast;
-		autoscroll?: boolean;
+		active?: boolean;
 	}
 
-	let { workspace, ast, autoscroll = true }: Props = $props();
+	let { workspace, ast, active = true }: Props = $props();
 
-	// $cursor_index may go over the max since ast computation is usually slower.
-	// clamping this helps prevent the collapse view flashing
-	// TODO reimplement
-	let max_cursor_index = 0;
-	// $: max_cursor_index = !ast ? $cursorIndex : Math.min($cursorIndex, get_ast_max_end(ast));
+	let cursor = $state<number | null>(0);
 
-	let path_nodes = $derived(find_deepest_path(max_cursor_index, [ast]) || []);
+	let path_nodes = $derived(find_deepest_path(cursor, [ast]) || []);
 
-	function find_deepest_path(cursor: number, paths: Ast[]): Ast[] | undefined {
+	function find_deepest_path(cursor: number | null, paths: Ast[]): Ast[] | undefined {
+		if (cursor === null) return;
 		const value = paths[paths.length - 1];
 
 		if (!value) return;
@@ -47,17 +44,24 @@
 		}
 	}
 
-	function get_ast_max_end(ast: Ast) {
-		let max_end = 0;
+	$effect(() => {
+		if (active) {
+			workspace.onhover((pos) => {
+				cursor = pos;
+			});
+		}
+	});
 
-		for (const node of Object.values(ast) as any[]) {
-			if (node && typeof node.end === 'number' && node.end > max_end) {
-				max_end = node.end;
-			}
+	$effect(() => {
+		if (active) {
+			const leaf = path_nodes.at(-1) ?? null;
+			workspace.highlight_range(leaf);
 		}
 
-		return max_end;
-	}
+		return () => {
+			workspace.highlight_range(null);
+		};
+	});
 </script>
 
 <div class="ast-view">
@@ -65,7 +69,20 @@
 		<code>
 			{#if typeof ast === 'object'}
 				<ul>
-					<AstNode value={ast} {path_nodes} {autoscroll} />
+					<AstNode
+						value={ast}
+						{path_nodes}
+						{active}
+						onhover={(node) => {
+							if (
+								node === null ||
+								(node.type !== undefined && node.start !== undefined && node.end !== undefined)
+							) {
+								cursor = node && node.start + 1;
+								workspace.highlight_range(node);
+							}
+						}}
+					/>
 				</ul>
 			{:else}
 				<p>No AST available</p>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index ad2cd0e00d..9d29e4c73a 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { marked } from 'marked';
+	import { locate } from 'locate-character';
 	import AstView from './AstView.svelte';
 	import CompilerOptions from './CompilerOptions.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import Viewer from './Viewer.svelte';
 	import { Editor, Workspace, type File } from 'editor';
-	import { untrack } from 'svelte';
+	import { tick, untrack } from 'svelte';
+	import { decode, type SourceMapSegment } from '@jridgewell/sourcemap-codec';
 
 	interface Props {
 		status: string | null;
@@ -81,6 +83,103 @@
 			css_workspace.update_file(css);
 		});
 	});
+
+	$effect(() => {
+		if (markdown) return;
+
+		if (view === 'js' || view === 'css') {
+			const v = view; // so that TS doesn't think it could become something different
+			const output = v === 'js' ? js_workspace : css_workspace;
+
+			const highlight = (
+				line: number,
+				a: SourceMapSegment,
+				b: SourceMapSegment,
+				scroll_input: boolean,
+				scroll_output: boolean
+			) => {
+				const split = {
+					original: workspace.current!.contents.split('\n'),
+					generated: current!.result![v]!.code.split('\n')
+				};
+
+				const original = {
+					start: split.original.slice(0, a[2]).join('\n').length + 1 + a[3]!,
+					end: split.original.slice(0, b[2]).join('\n').length + 1 + b[3]!
+				};
+
+				const generated = {
+					start: split.generated.slice(0, line).join('\n').length + 1 + a[0],
+					end: split.generated.slice(0, line).join('\n').length + 1 + b[0]
+				};
+
+				workspace.highlight_range(original, scroll_input);
+				output.highlight_range(generated, scroll_output);
+			};
+
+			const clear = () => {
+				workspace.highlight_range(null);
+				output.highlight_range(null);
+			};
+
+			const from_input = (pos: number, should_scroll: boolean) => {
+				if (!current?.result?.[v]?.map) return;
+
+				const mappings = decode(current.result[v].map.mappings);
+
+				const { line, column } = locate(workspace.current.contents, pos)!;
+
+				for (let i = 0; i < mappings.length; i += 1) {
+					const segments = mappings[i];
+					for (let j = 0; j < segments.length - 1; j += 1) {
+						// segment is [generated_column, source_index, original_line, original_column]
+						const a = segments[j];
+						const b = segments[j + 1];
+
+						if (a[2]! > line) continue;
+						if (b[2]! < line) continue;
+
+						if (a[2]! === line && a[3]! > column) continue;
+						if (b[2]! === line && b[3]! < column) continue;
+
+						// if we're still here, we have a match
+						highlight(i, a, b, false, should_scroll);
+						return;
+					}
+
+					clear();
+				}
+			};
+
+			const from_output = (pos: number, should_scroll: boolean) => {
+				if (!current?.result?.[v]?.map) return;
+
+				const mappings = decode(current.result[v].map.mappings);
+
+				const { line, column } = locate(current.result[v].code, pos)!;
+
+				const segments = mappings[line];
+
+				for (let i = 0; i < segments.length - 1; i += 1) {
+					const a = segments[i];
+					const b = segments[i + 1];
+
+					if (a[0] <= column && b[0] >= column) {
+						highlight(line, a, b, should_scroll, false);
+						return;
+					}
+
+					clear();
+				}
+			};
+
+			workspace.onhover((pos) => (pos === null ? clear() : from_input(pos, false)));
+			workspace.onselect((from, to) => from === to && from_input(from, true));
+
+			output.onhover((pos) => (pos === null ? clear() : from_output(pos, false)));
+			output.onselect((from, to) => from === to && from_output(from, true));
+		}
+	});
 </script>
 
 <div class="view-toggle">
@@ -132,7 +231,7 @@
 <!-- ast output -->
 {#if current?.result}
 	<div class="tab-content" class:visible={!is_markdown && view === 'ast'}>
-		<AstView {workspace} ast={current.result.ast} autoscroll={!is_markdown && view === 'ast'} />
+		<AstView {workspace} ast={current.result.ast} active={!is_markdown && view === 'ast'} />
 	</div>
 {/if}
 
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index bfabccf0f3..c4b0d3ebe3 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -22,6 +22,7 @@
 	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+	--sk-bg-highlight: hsl(60, 100%, 80%);
 
 	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */
 	--sk-border: hsl(0, 0%, 92%);
@@ -62,6 +63,7 @@
 	--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
 	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
+	--sk-bg-highlight: hsl(60, 100%, 15%);
 
 	/* Border colour */
 	--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc127e1957..4e2bcc7489 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -358,6 +358,9 @@ importers:
       esrap:
         specifier: ^1.2.2
         version: 1.2.3
+      locate-character:
+        specifier: ^3.0.0
+        version: 3.0.0
       marked:
         specifier: ^14.1.2
         version: 14.1.2

From 2ed7da6da3c9c3e5a6ded25036b2b8ede7338d3a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 18 Dec 2024 09:32:43 -0500
Subject: [PATCH 246/453] day 18 (#1038)

---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index ec60a01f51..fcf554c293 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -142,9 +142,14 @@ We just fixed that. Install the latest version of Svelte in your project, make s
 
 - [demo video](https://bsky.app/profile/svelte.dev/post/3ldjajjbkwc2n)
 
-## Day 18
+## Day 18: playground hovers
 
-Coming soon!
+If you've ever wondered how the Svelte compiler works, today's update is for you. If you go to the [playground](/playground) and open the AST output tab, you'll see the abstract syntax tree that the compiler operates on. As of today, hovering over code in the editor will highlight the corresponding section of the AST and vice versa. Clicking on a piece of code will expand the tree and scroll to the AST.
+
+The JS and CSS output tabs have also been upgraded — they now use sourcemaps to highlight the output code that corresponds to a given piece input, where applicable, and vice versa. We plan to use this to improve the sourcemaps themselves, which over time will result in smoother debugging when you're building Svelte apps.
+
+- [playground](/playground)
+- [demo video](https://bsky.app/profile/svelte.dev/post/3ldlkmce6oc2j)
 
 ## Day 19
 

From db463c2cc772240377bb5d00e17b853158d560d3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:14:16 -0500
Subject: [PATCH 247/453] Sync `svelte` docs (#1041)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../.generated/compile-warnings.md            | 26 +++++++++++++++++++
 .../98-reference/30-compiler-warnings.md      | 26 +++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index f6f2585df2..3d515305fe 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -630,6 +630,32 @@ In some situations a selector may target an element that is not 'visible' to the
 Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 ```
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```bash
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ### event_directive_deprecated
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index b0522ef817..d14e7d9526 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -651,6 +651,32 @@ In some situations a selector may target an element that is not 'visible' to the
 Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 ```
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```bash
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ### event_directive_deprecated
 
 ```

From ee4395cdf5c6b226b7d5c089705434ccc4ed77dd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:06:08 -0500
Subject: [PATCH 248/453] Sync `kit` docs (#1044)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/98-reference/50-configuration.md | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 77440a6f5a..22477284f1 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -723,6 +723,29 @@ are three strategies with different trade-offs:
 - `preload-js` - uses `<link rel="preload">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.
 - `preload-mjs` - uses `<link rel="preload">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.
 
+</div>
+</div>
+<div class="ts-block-property">
+
+```ts
+// @noErrors
+bundleStrategy?: 'split' | 'single';
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag">default</span> `'split'`
+- <span class="tag since">available since</span> v2.13.0
+
+</div>
+
+If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.
+If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.
+
+When using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks)inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).
+
 </div>
 </div>
 

From d88895c478625b28d5d436185d3c39c4bdde0adc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 19 Dec 2024 11:09:29 -0500
Subject: [PATCH 249/453] day 19 (#1045)

* day 19

* merge main, use root-relative url
---
 .../content/blog/2024-12-01-advent-of-svelte.md       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index fcf554c293..65ecf76c90 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -81,7 +81,7 @@ When Svelte emits a warning or error (whether at build time, when the compiler i
 
 A lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens.
 
-- [docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init)
+- [docs](/docs/kit/hooks#Shared-hooks-init)
 
 ## Day 11: `svelte/reactivity/window`
 
@@ -151,9 +151,14 @@ The JS and CSS output tabs have also been upgraded — they now use sourcemaps t
 - [playground](/playground)
 - [demo video](https://bsky.app/profile/svelte.dev/post/3ldlkmce6oc2j)
 
-## Day 19
+## Day 19: single-file SvelteKit bundles
 
-Coming soon!
+By default, SvelteKit uses a technique called _code-splitting_ so that you only load the JavaScript and CSS you need for the page you're currently on. This helps make sure your app loads fast even if it grows very large.
+
+In [some situations](https://github.com/sveltejs/kit/issues/3882), code-splitting is unhelpful — what you really want is a single .js file and a single .css file for your entire app. SvelteKit now supports this with the `output.bundleStrategy` option.
+
+- [docs](/docs/kit/configuration#output)
+- [example](https://bsky.app/profile/svelte.dev/post/3ldo633ht222p)
 
 ## Day 20
 

From cdcdea62c3d84a9801739eadf82b344db9993b93 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 19 Dec 2024 19:07:06 -0500
Subject: [PATCH 250/453] bump prettier-plugin-svelte (#1048)

* bump prettier-plugin-svelte

* format

* another
---
 apps/svelte.dev/package.json                  |  2 +-
 packages/editor/package.json                  |  2 +-
 packages/editor/src/lib/Editor.svelte         |  2 +-
 packages/repl/package.json                    |  2 +-
 packages/site-kit/package.json                |  2 +-
 .../site-kit/src/lib/nav/MobileMenu.svelte    | 50 +++++++++----------
 packages/site-kit/src/lib/nav/Nav.svelte      |  7 +--
 .../site-kit/src/lib/search/SearchBox.svelte  | 10 ++--
 pnpm-lock.yaml                                | 22 ++++----
 9 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 963eb36f93..64a7ab86f5 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -69,7 +69,7 @@
 		"marked": "^14.1.2",
 		"minimatch": "^10.0.1",
 		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.4",
+		"prettier-plugin-svelte": "^3.3.2",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"svelte": "5.14.0",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 3111f75cc0..2ca77bbc6d 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -53,7 +53,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"codemirror": "^6.0.1",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
 		"svelte": "^5.14.0",
 		"svelte-check": "^4.1.1",
diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 20ad089fd6..a017f9e8c5 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -41,7 +41,7 @@
 
 <svelte:window
 	onpointerdown={(e) => {
-		if (!container.contains((e.target as HTMLElement))) {
+		if (!container.contains(e.target as HTMLElement)) {
 			preserve_editor_focus = false;
 		}
 	}}
diff --git a/packages/repl/package.json b/packages/repl/package.json
index f7a2297bd6..a16b7e1df6 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -54,7 +54,7 @@
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
 		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.4",
+		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 965ea1086d..fcf674226e 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -52,7 +52,7 @@
 		"magic-string": "^0.30.11",
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.4",
+		"prettier-plugin-svelte": "^3.3.2",
 		"svelte": "5.14.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index abfda674c2..715596bb02 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -66,41 +66,41 @@
 			class="clip"
 			style:--height-difference="{menu_height - universal_menu_inner_height}px"
 			ontransitionstart={(e) => {
-					const target = e.target as HTMLElement;
+				const target = e.target as HTMLElement;
 
-					if (!target?.classList.contains('viewport')) return;
-					if (e.propertyName !== 'transform') return;
+				if (!target?.classList.contains('viewport')) return;
+				if (e.propertyName !== 'transform') return;
 
-					// we need to apply a clip-path during the transition so that the contents
-					// are constrained to the menu background, but only while the transition
-					// is running, otherwise it prevents the contents from being scrolled
-					const a = 'calc(var(--height-difference) + 1px)';
-					const b = '1px';
+				// we need to apply a clip-path during the transition so that the contents
+				// are constrained to the menu background, but only while the transition
+				// is running, otherwise it prevents the contents from being scrolled
+				const a = 'calc(var(--height-difference) + 1px)';
+				const b = '1px';
 
-					const start = show_context_menu ? a : b;
-					const end = show_context_menu ? b : a;
+				const start = show_context_menu ? a : b;
+				const end = show_context_menu ? b : a;
 
-					const container = e.currentTarget;
+				const container = e.currentTarget;
 
-					container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`;
+				container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`;
 
-					setTimeout(() => {
-						container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`;
-					}, 0);
-				}}
+				setTimeout(() => {
+					container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`;
+				}, 0);
+			}}
 			ontransitionend={(e) => {
-					const target = e.target as HTMLElement;
+				const target = e.target as HTMLElement;
 
-					if (!target?.classList.contains('viewport')) return;
-					if (e.propertyName !== 'transform') return;
+				if (!target?.classList.contains('viewport')) return;
+				if (e.propertyName !== 'transform') return;
 
-					e.currentTarget.style.clipPath = '';
+				e.currentTarget.style.clipPath = '';
 
-					// whenever we transition from one menu to the other, we need to move focus to the first item in the new menu
-					if (!show_context_menu) {
-						universal_menu?.querySelector('a')?.focus();
-					}
-				}}
+				// whenever we transition from one menu to the other, we need to move focus to the first item in the new menu
+				if (!show_context_menu) {
+					universal_menu?.querySelector('a')?.focus();
+				}
+			}}
 		>
 			<div
 				class="viewport"
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c1d1d321d6..17485f1c29 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -98,9 +98,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 									<a
 										class="secondary"
 										href={section.path}
-										aria-current={$page.url.pathname === section.path || $page.url.pathname.startsWith(section.path!)
-									? 'page'
-									: undefined}
+										aria-current={$page.url.pathname === section.path ||
+										$page.url.pathname.startsWith(section.path!)
+											? 'page'
+											: undefined}
 									>
 										{section.title}
 									</a>
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 75b5fdda5c..f56af88da6 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -172,11 +172,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 					<input
 						use:forcefocus
 						onkeydown={(e) => {
-					if (e.key === 'Enter' && !e.isComposing) {
-						const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
-						element?.click();
-					}
-				}}
+							if (e.key === 'Enter' && !e.isComposing) {
+								const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
+								element?.click();
+							}
+						}}
 						oninput={(e) => {
 							$search_query = e.currentTarget.value;
 						}}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e2bcc7489..a5ee117b10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -169,8 +169,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.2
       prettier-plugin-svelte:
-        specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
+        specifier: ^3.3.2
+        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -275,8 +275,8 @@ importers:
         specifier: ^3.1.1
         version: 3.3.2
       prettier-plugin-svelte:
-        specifier: ^3.1.2
-        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
+        specifier: ^3.3.2
+        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
@@ -399,8 +399,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.2
       prettier-plugin-svelte:
-        specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
+        specifier: ^3.3.2
+        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
@@ -502,8 +502,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.2
       prettier-plugin-svelte:
-        specifier: ^3.2.4
-        version: 3.2.4(prettier@3.3.2)(svelte@5.14.0)
+        specifier: ^3.3.2
+        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
       svelte:
         specifier: 5.14.0
         version: 5.14.0
@@ -2780,8 +2780,8 @@ packages:
     resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prettier-plugin-svelte@3.2.4:
-    resolution: {integrity: sha512-tZv+ADfeOWFNQkXkRh6zUXE16w3Vla8x2Ug0B/EnSmjR4EnwdwZbGgL/liSwR1kcEALU5mAAyua98HBxheCxgg==}
+  prettier-plugin-svelte@3.3.2:
+    resolution: {integrity: sha512-kRPjH8wSj2iu+dO+XaUv4vD8qr5mdDmlak3IT/7AOgGIMRG86z/EHOLauFcClKEnOUf4A4nOA7sre5KrJD4Raw==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
@@ -5638,7 +5638,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  prettier-plugin-svelte@3.2.4(prettier@3.3.2)(svelte@5.14.0):
+  prettier-plugin-svelte@3.3.2(prettier@3.3.2)(svelte@5.14.0):
     dependencies:
       prettier: 3.3.2
       svelte: 5.14.0

From 1a008bd64b3edc8d2e92d76ca9158be3b66567a9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 19 Dec 2024 21:30:46 -0500
Subject: [PATCH 251/453] make prerender configurable (#1050)

* make prerender configurable

* fix a slew of broken links

* add contributor note
---
 apps/svelte.dev/.env                          |  3 +++
 apps/svelte.dev/README.md                     |  8 ++++++
 .../src/routes/(authed)/+layout.server.js     |  2 ++
 apps/svelte.dev/src/routes/+layout.server.ts  |  4 +++
 apps/svelte.dev/src/routes/+page.server.js    |  1 -
 .../src/routes/blog/+page.server.js           |  2 --
 .../src/routes/blog/[slug]/+page.server.js    |  2 --
 apps/svelte.dev/src/routes/chat/+server.js    |  2 ++
 .../src/routes/docs/+page.server.js           |  1 -
 .../routes/docs/[...path]/+layout.server.ts   |  2 --
 .../src/routes/docs/kit/modules/+page.svelte  | 26 ++++++++++++-------
 .../src/routes/e/[code]/+page.server.ts       |  1 +
 .../routes/tutorial/[...slug]/+page.server.ts |  2 --
 13 files changed, 36 insertions(+), 20 deletions(-)
 delete mode 100644 apps/svelte.dev/src/routes/+page.server.js
 delete mode 100644 apps/svelte.dev/src/routes/docs/+page.server.js

diff --git a/apps/svelte.dev/.env b/apps/svelte.dev/.env
index 9b1319a6f1..43b6ea5cb7 100644
--- a/apps/svelte.dev/.env
+++ b/apps/svelte.dev/.env
@@ -3,3 +3,6 @@ SUPABASE_KEY=
 
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
+
+# disable prerendering with `PRERENDER=false pnpm build` — this is useful for speeding up builds when previewing locally
+PRERENDER=true
diff --git a/apps/svelte.dev/README.md b/apps/svelte.dev/README.md
index eab3acafcd..9658426470 100644
--- a/apps/svelte.dev/README.md
+++ b/apps/svelte.dev/README.md
@@ -35,3 +35,11 @@ When writing content for the tutorial, you need to be aware of the differences o
 ### Dependencies
 
 If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.
+
+### Prerendering
+
+Most of the site is prerendered. Since that involves some fairly expensive work, it can take a while. To build the site _without_ prerendering — for example, because you need to debug an issue that's affecting production builds — set the `PRERENDER` environment variable to `false`:
+
+```bash
+PRERENDER=false pnpm build
+```
diff --git a/apps/svelte.dev/src/routes/(authed)/+layout.server.js b/apps/svelte.dev/src/routes/(authed)/+layout.server.js
index 0ef4588346..30d4222299 100644
--- a/apps/svelte.dev/src/routes/(authed)/+layout.server.js
+++ b/apps/svelte.dev/src/routes/(authed)/+layout.server.js
@@ -1,5 +1,7 @@
 import * as session from '$lib/db/session';
 
+export const prerender = false;
+
 /** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
 	runtime: 'nodejs20.x' // see https://github.com/sveltejs/svelte/pull/9136
diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index 0e93e4fb32..9145c88a40 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -1,6 +1,10 @@
+import { PRERENDER } from '$env/static/private';
 import { docs, index } from '$lib/server/content';
 import type { BannerData, NavigationLink } from '@sveltejs/site-kit';
 
+// by default, all pages are prerendered
+export const prerender = PRERENDER !== 'false';
+
 const nav_links: NavigationLink[] = [
 	{
 		title: 'Docs',
diff --git a/apps/svelte.dev/src/routes/+page.server.js b/apps/svelte.dev/src/routes/+page.server.js
deleted file mode 100644
index 189f71e2e1..0000000000
--- a/apps/svelte.dev/src/routes/+page.server.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js
index a6b721c5de..ac550d69d0 100644
--- a/apps/svelte.dev/src/routes/blog/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/+page.server.js
@@ -1,7 +1,5 @@
 import { blog_posts } from '$lib/server/content';
 
-export const prerender = true;
-
 export async function load() {
 	const posts = blog_posts
 		.map((document) => ({
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
index 661cc1d995..e8bd136d61 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
@@ -2,8 +2,6 @@ import { error } from '@sveltejs/kit';
 import { blog_posts } from '$lib/server/content';
 import { render_content } from '$lib/server/renderer';
 
-export const prerender = true;
-
 export async function load({ params }) {
 	const document = blog_posts.find((document) => document.slug === `blog/${params.slug}`);
 
diff --git a/apps/svelte.dev/src/routes/chat/+server.js b/apps/svelte.dev/src/routes/chat/+server.js
index 0cb184d932..96c00cb352 100644
--- a/apps/svelte.dev/src/routes/chat/+server.js
+++ b/apps/svelte.dev/src/routes/chat/+server.js
@@ -1,3 +1,5 @@
+export const prerender = true;
+
 export function GET() {
 	return new Response(undefined, {
 		status: 302,
diff --git a/apps/svelte.dev/src/routes/docs/+page.server.js b/apps/svelte.dev/src/routes/docs/+page.server.js
deleted file mode 100644
index 189f71e2e1..0000000000
--- a/apps/svelte.dev/src/routes/docs/+page.server.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts b/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
index 944232c32e..5ff346304f 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
@@ -2,8 +2,6 @@ import { docs } from '$lib/server/content';
 import { redirect } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
 
-export const prerender = true;
-
 export async function load({ params }) {
 	const topic = params.path.split('/')[0];
 	const document = docs.topics[`docs/${topic}`];
diff --git a/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte b/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte
index 81eb6358b7..cabb898251 100644
--- a/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/kit/modules/+page.svelte
@@ -62,9 +62,9 @@
 		['$app-paths-assets', ['`$app/paths#assets`', '/docs/kit/$app-paths#assets']],
 		['$app-paths-base', ['`$app/paths#base`', '/docs/kit/$app-paths#base']],
 		['$app-paths-resolveroute', ['`$app-paths#resolveRoute`', '/docs/kit/$app-paths#resolveRoute']],
-		['$app-server-read', ['`$app/paths#read`', '/docs/kit/$app-paths#read']],
+		['$app-server-read', ['`$app/server#read`', '/docs/kit/$app-server#read']],
 		['$app-stores-getstores', ['`$app/stores#getStores`', '/docs/kit/$app-stores#getStores']],
-		['$app-stores-navigating', ['`$app/stores#assets`', '/docs/kit/$app-stores#assets']],
+		['$app-stores-navigating', ['`$app/stores#navigating`', '/docs/kit/$app-stores#navigating']],
 		['$app-stores-page', ['`$app/stores#page`', '/docs/kit/$app-stores#page']],
 		['$app-stores-updated', ['`$app/stores#updated`', '/docs/kit/$app-stores#updated']],
 		['$lib-$lib-server', ['`$lib`', '/docs/kit/$lib']],
@@ -76,14 +76,20 @@
 			['`$service-worker#prerendered`', '/docs/kit/$service-worker#prerendered']
 		],
 		['$service-worker-version', ['`$service-worker#version`', '/docs/kit/$service-worker#version']],
-		['sveltejs-kit-version', ['`@sveltejs/kit#VERSION`', '/@sveltejs-kit#VERSION']],
-		['sveltejs-kit-error', ['`@sveltejs/kit#error`', '/@sveltejs-kit#error']],
-		['sveltejs-kit-fail', ['`@sveltejs/kit#fail`', '/@sveltejs-kit#fail']],
-		['sveltejs-kit-ishttperror', ['`@sveltejs/kit#isHttpError`', '/@sveltejs-kit#isHttpError']],
-		['sveltejs-kit-isredirect', ['`@sveltejs/kit#isRedirect`', '/@sveltejs-kit#isRedirect']],
-		['sveltejs-kit-json', ['`@sveltejs/kit#json`', '/@sveltejs-kit#json']],
-		['sveltejs-kit-redirect', ['`@sveltejs/kit#redirect`', '/@sveltejs-kit#redirect']],
-		['sveltejs-kit-text', ['`@sveltejs/kit#text`', '/@sveltejs-kit#text']],
+		['sveltejs-kit-version', ['`@sveltejs/kit#VERSION`', '/docs/kit/@sveltejs-kit#VERSION']],
+		['sveltejs-kit-error', ['`@sveltejs/kit#error`', '/docs/kit/@sveltejs-kit#error']],
+		['sveltejs-kit-fail', ['`@sveltejs/kit#fail`', '/docs/kit/@sveltejs-kit#fail']],
+		[
+			'sveltejs-kit-ishttperror',
+			['`@sveltejs/kit#isHttpError`', '/docs/kit/@sveltejs-kit#isHttpError']
+		],
+		[
+			'sveltejs-kit-isredirect',
+			['`@sveltejs/kit#isRedirect`', '/docs/kit/@sveltejs-kit#isRedirect']
+		],
+		['sveltejs-kit-json', ['`@sveltejs/kit#json`', '/docs/kit/@sveltejs-kit#json']],
+		['sveltejs-kit-redirect', ['`@sveltejs/kit#redirect`', '/docs/kit/@sveltejs-kit#redirect']],
+		['sveltejs-kit-text', ['`@sveltejs/kit#text`', '/docs/kit/@sveltejs-kit#text']],
 		[
 			'sveltejs-kit-hooks-sequence',
 			['`@sveltejs/kit/hooks#sequence`', '/docs/kit/@sveltejs-kit-hooks#sequence']
diff --git a/apps/svelte.dev/src/routes/e/[code]/+page.server.ts b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts
index a564c600f0..f06b8be771 100644
--- a/apps/svelte.dev/src/routes/e/[code]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts
@@ -17,6 +17,7 @@ import { error, redirect } from '@sveltejs/kit';
 // 		[...page.body.matchAll(/(^|\n)### (\w+)/g)].map(([, , code]) => ({ code }))
 // 	);
 // }
+export const prerender = false;
 
 export async function load({ params, fetch }) {
 	const codes: Record<string, Record<string, string[]>> = await fetch('http://github.com/e/tmp/codes.json').then(
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
index 2b664114bd..a208bbf888 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts
@@ -1,8 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 import { load_exercise } from './content.server';
 
-export const prerender = true;
-
 export async function load({ params }) {
 	if (!params.slug || params.slug === 'svelte') redirect(307, '/tutorial/svelte/welcome-to-svelte');
 	if (params.slug === 'kit') redirect(307, '/tutorial/kit/introducing-sveltekit');

From 1e037e2af30567d767210a9fc1bb3127033a6de1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 20 Dec 2024 09:10:49 -0500
Subject: [PATCH 252/453] Vim UI (#1049)

* add UI for vim mode

* oops

* fix

* man codemirror is confusing

* fix

* refactor

* move stuff

* add UI to tutorial as well

* drive-by fixes

* fix
---
 .../src/lib/components/ModalDropdown.svelte   |  4 +-
 .../playground/[id]/AppControls.svelte        | 16 +----
 .../routes/tutorial/[...slug]/+page.svelte    |  1 +
 .../routes/tutorial/[...slug]/Controls.svelte | 13 +++-
 packages/editor/src/lib/Workspace.svelte.ts   | 67 +++++++++++++------
 .../src/lib/Input/ComponentSelector.svelte    | 14 +++-
 packages/repl/src/lib/Input/Migrate.svelte    | 28 --------
 packages/repl/src/lib/Input/RunesInfo.svelte  | 11 +--
 packages/repl/src/lib/Repl.svelte             |  5 +-
 packages/repl/src/lib/types.d.ts              |  4 --
 .../src/lib/components/HoverMenu.svelte       | 20 ++++--
 .../src/lib/components/Toolbox.svelte         | 49 ++++++++++++++
 packages/site-kit/src/lib/components/index.ts |  1 +
 .../site-kit/src/lib/icons/wrench-dark.svg    | 13 ++++
 .../site-kit/src/lib/icons/wrench-light.svg   | 13 ++++
 15 files changed, 167 insertions(+), 92 deletions(-)
 delete mode 100644 packages/repl/src/lib/Input/Migrate.svelte
 create mode 100644 packages/site-kit/src/lib/components/Toolbox.svelte
 create mode 100644 packages/site-kit/src/lib/icons/wrench-dark.svg
 create mode 100644 packages/site-kit/src/lib/icons/wrench-light.svg

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 2c6d454adf..0284f4e88e 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -45,9 +45,7 @@
 		}
 
 		// except parents of the current one
-		const current = details.querySelector(
-			`[href="http://github.com/$%7Bpage.url.pathname%7D"]`
-		) as HTMLAnchorElement | null;
+		const current = details.querySelector(`[aria-current="page"]`) as HTMLAnchorElement | null;
 		if (!current) return;
 
 		let node = current as Element;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index a4f096234f..2e3af6c7a7 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -161,20 +161,6 @@
 
 		saving = false;
 	}
-
-	// modifying an app should reset the `<select>`, so that
-	// the example can be reselected
-	$effect(() => {
-		if (modified) {
-			// this is a little tricky, but: we need to wrap this in untrack
-			// because otherwise we'll read `select.value` and re-run this
-			// when we navigate, which we don't want
-			untrack(() => {
-				// @ts-ignore not sure why this is erroring
-				select.value = '';
-			});
-		}
-	});
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -193,7 +179,7 @@
 							<li>
 								<a
 									href="http://github.com/playground/%7Bexample.slug%7D"
-									aria-current={page.params.id === example.slug ? 'page' : undefined}
+									aria-current={page.params.id === example.slug && !modified ? 'page' : undefined}
 								>
 									{example.title}
 								</a>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 571b9e30d8..d7cbda89aa 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -258,6 +258,7 @@
 		toggle={() => {
 			workspace.set(Object.values(completed ? a : b));
 		}}
+		{workspace}
 	/>
 
 	<div class="top" class:offset={show_editor}>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 31c5011b3b..003db02d6e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -3,16 +3,18 @@
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
-	import { Icon } from '@sveltejs/site-kit/components';
+	import { Checkbox, Icon, Toolbox } from '@sveltejs/site-kit/components';
+	import type { Workspace } from 'editor';
 
 	interface Props {
 		index: PartStub[];
 		exercise: Exercise;
 		completed: boolean;
 		toggle: () => void;
+		workspace: Workspace;
 	}
 
-	let { index, exercise, completed, toggle }: Props = $props();
+	let { index, exercise, completed, toggle, workspace }: Props = $props();
 </script>
 
 <SecondaryNav>
@@ -71,6 +73,13 @@
 			solve
 		{/if}
 	</button>
+
+	<Toolbox>
+		<label class="option">
+			<span>Toggle Vim mode</span>
+			<Checkbox bind:checked={workspace.vim}></Checkbox>
+		</label>
+	</Toolbox>
 </SecondaryNav>
 
 <style>
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 03b85fb401..17e1e2f65b 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -112,6 +112,7 @@ export class Workspace {
 	#readonly = false; // TODO do we need workspaces for readonly stuff?
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
+	#vim = $state(false);
 
 	#handlers = {
 		hover: new Set<(pos: number | null) => void>(),
@@ -279,23 +280,10 @@ export class Workspace {
 		if (this.#view) throw new Error('view is already linked');
 		this.#view = view;
 
-		view.setState(this.#get_state(untrack(() => this.#current)));
-
-		let should_install_vim = localStorage.getItem('vim') === 'true';
-
-		const q = new URLSearchParams(location.search);
-		if (q.has('vim')) {
-			should_install_vim = q.get('vim') === 'true';
-			localStorage.setItem('vim', should_install_vim.toString());
-		}
-
-		if (should_install_vim) {
-			const { vim } = await import('@replit/codemirror-vim');
-
-			this.#view?.dispatch({
-				effects: vim_mode.reconfigure(vim())
-			});
-		}
+		untrack(() => {
+			view.setState(this.#get_state(untrack(() => this.#current)));
+			this.vim = localStorage.getItem('vim') === 'true';
+		});
 	}
 
 	move(from: Item, to: Item) {
@@ -476,6 +464,44 @@ export class Workspace {
 		}
 	}
 
+	get vim() {
+		return this.#vim;
+	}
+
+	set vim(value) {
+		this.#toggle_vim(value);
+	}
+
+	async #toggle_vim(value: boolean) {
+		this.#vim = value;
+
+		localStorage.setItem('vim', String(value));
+
+		// @ts-expect-error jfc CodeMirror is a struggle
+		let vim_extension_index = default_extensions.findIndex((ext) => ext.compartment === vim_mode);
+
+		let extension: any = [];
+
+		if (value) {
+			const { vim } = await import('@replit/codemirror-vim');
+			extension = vim();
+		}
+
+		default_extensions[vim_extension_index] = vim_mode.of(extension);
+
+		this.#view?.dispatch({
+			effects: vim_mode.reconfigure(extension)
+		});
+
+		// update all the other states
+		for (const file of this.#files) {
+			if (file.type !== 'file') continue;
+			if (file === this.#current) continue;
+
+			this.states.set(file.name, this.#create_state(file));
+		}
+	}
+
 	#create_directories(item: Item) {
 		// create intermediate directories as necessary
 		const parts = item.name.split('/');
@@ -497,9 +523,10 @@ export class Workspace {
 	}
 
 	#get_state(file: File) {
-		let state = this.states.get(file.name);
-		if (state) return state;
+		return this.states.get(file.name) ?? this.#create_state(file);
+	}
 
+	#create_state(file: File) {
 		const extensions = [
 			...default_extensions,
 			EditorState.readOnly.of(this.#readonly),
@@ -573,7 +600,7 @@ export class Workspace {
 				break;
 		}
 
-		state = EditorState.create({
+		const state = EditorState.create({
 			doc: file.contents,
 			extensions
 		});
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index fe74cd788b..719bb5d218 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
 	import RunesInfo from './RunesInfo.svelte';
-	import Migrate from './Migrate.svelte';
 	import type { Workspace, File } from 'editor';
 	import { tick } from 'svelte';
+	import { Checkbox, Toolbox } from '@sveltejs/site-kit/components';
 
 	interface Props {
 		runes: boolean;
 		onchange: () => void;
 		workspace: Workspace;
 		can_migrate: boolean;
+		migrate: () => void;
 	}
 
-	let { runes, onchange, workspace, can_migrate }: Props = $props();
+	let { runes, onchange, workspace, can_migrate, migrate }: Props = $props();
 
 	let input = $state() as HTMLInputElement;
 	let input_value = $state(workspace.current.name);
@@ -162,7 +163,14 @@
 
 	<div class="runes">
 		<RunesInfo {runes} />
-		<Migrate {can_migrate} />
+		<Toolbox>
+			<label class="option">
+				<span>Toggle Vim mode</span>
+				<Checkbox bind:checked={workspace.vim}></Checkbox>
+			</label>
+
+			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
+		</Toolbox>
 	</div>
 </div>
 
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
deleted file mode 100644
index 676ebb5611..0000000000
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { get_repl_context } from '../context';
-
-	let { can_migrate }: { can_migrate: boolean } = $props();
-
-	const { migrate } = get_repl_context();
-</script>
-
-<button
-	class="raised tooltip-left"
-	disabled={!can_migrate}
-	onclick={migrate}
-	aria-label="Convert syntax from Svelte 4 to 5 if possible"
->
-	migrate
-</button>
-
-<style>
-	button {
-		position: relative;
-		display: flex;
-		align-items: center;
-		text-transform: uppercase;
-		font: var(--sk-font-ui-small);
-		padding: 0 0.8rem;
-		height: 3.2rem;
-	}
-</style>
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 99f73c5a1c..c9477cd6c3 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -4,17 +4,9 @@
 
 	let { runes }: { runes: boolean } = $props();
 
-	let open = $state(false);
-
 	const { workspace } = get_repl_context();
 </script>
 
-<svelte:window
-	onkeydown={(e) => {
-		if (e.key === 'Escape') open = false;
-	}}
-/>
-
 <Dropdown align="right">
 	<div class="target">
 		<span class="lightning" class:active={runes} role="presentation"></span>
@@ -106,12 +98,13 @@
 
 	.popup {
 		position: absolute;
-		right: -6rem;
+		right: -4rem;
 		width: 100vw;
 		max-width: 320px;
 		z-index: 9999;
 		background: var(--sk-bg-3);
 		padding: 1em;
+		border-radius: var(--sk-border-radius);
 
 		p {
 			font: var(--sk-font-ui-medium);
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index b290af60a4..3b3bd44ae8 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -85,9 +85,6 @@
 	set_repl_context({
 		bundle,
 		toggleable,
-
-		migrate,
-
 		workspace
 	});
 
@@ -177,7 +174,7 @@
 		>
 			{#snippet a()}
 				<section>
-					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
+					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} {migrate} />
 
 					<Editor {workspace} />
 				</section>
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index ef8e460f1e..4489ef6b43 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -46,9 +46,5 @@ export type ReplState = {
 export type ReplContext = {
 	bundle: Writable<ReplState['bundle']>;
 	toggleable: Writable<ReplState['toggleable']>;
-
 	workspace: Workspace;
-
-	// Methods
-	migrate(): Promise<void>;
 };
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
index 9bc8302272..e9160a5112 100644
--- a/packages/site-kit/src/lib/components/HoverMenu.svelte
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -11,10 +11,12 @@
 <style>
 	.hover-menu {
 		padding: 0.5rem;
+		white-space: nowrap;
 
 		:global {
 			a,
-			button {
+			button,
+			label {
 				color: inherit;
 				padding: 1rem;
 				display: block;
@@ -24,11 +26,21 @@
 				width: 100%;
 				text-align: left;
 				border-radius: var(--sk-border-radius-inner);
+
+				&:not(:disabled):hover {
+					background-color: var(--sk-bg-4);
+				}
+			}
+
+			label {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 1rem;
 			}
 
-			a:hover,
-			button:hover {
-				background-color: var(--sk-bg-4);
+			button:disabled {
+				color: var(--sk-fg-4);
 			}
 		}
 	}
diff --git a/packages/site-kit/src/lib/components/Toolbox.svelte b/packages/site-kit/src/lib/components/Toolbox.svelte
new file mode 100644
index 0000000000..14e582b961
--- /dev/null
+++ b/packages/site-kit/src/lib/components/Toolbox.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Dropdown from './Dropdown.svelte';
+	import HoverMenu from './HoverMenu.svelte';
+	import Icon from './Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<Dropdown align="right">
+	<div class="target">
+		<span class="wrench" role="presentation"></span>
+		<Icon name="chevron-down" />
+	</div>
+
+	{#snippet dropdown()}
+		<HoverMenu>
+			{@render children()}
+		</HoverMenu>
+	{/snippet}
+</Dropdown>
+
+<style>
+	.target {
+		text-transform: uppercase;
+		font: var(--sk-font-ui-small);
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		height: 100%;
+		padding: 0 0.8rem;
+		gap: 0.5rem;
+		z-index: 2;
+	}
+
+	span.wrench {
+		--icon-size: 1.8rem;
+		width: 1.8rem;
+		height: 1.8rem;
+		z-index: 9999;
+		background: url(http://github.com/icons/wrench-light.svg) no-repeat 50% 50%;
+		background-size: contain;
+
+		:root.dark & {
+			background-image: url(http://github.com/icons/wrench-dark.svg);
+		}
+	}
+</style>
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index ff63bdeda3..949dcb2653 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -9,3 +9,4 @@ export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as Text } from './Text.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Toolbox } from './Toolbox.svelte';
diff --git a/packages/site-kit/src/lib/icons/wrench-dark.svg b/packages/site-kit/src/lib/icons/wrench-dark.svg
new file mode 100644
index 0000000000..678bf90c44
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/wrench-dark.svg
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="#d4d4d4"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path
+		d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+	/>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/wrench-light.svg b/packages/site-kit/src/lib/icons/wrench-light.svg
new file mode 100644
index 0000000000..70c2e8c7ca
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/wrench-light.svg
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="#666"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path
+		d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+	/>
+</svg>

From 8c80acdd46b02e02124c3bb9659120b8e541dfbe Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 20 Dec 2024 09:27:49 -0500
Subject: [PATCH 253/453] day 20 (#1052)

---
 .../content/blog/2024-12-01-advent-of-svelte.md           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 65ecf76c90..580eadcfb2 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -160,9 +160,13 @@ In [some situations](https://github.com/sveltejs/kit/issues/3882), code-splittin
 - [docs](/docs/kit/configuration#output)
 - [example](https://bsky.app/profile/svelte.dev/post/3ldo633ht222p)
 
-## Day 20
+## Day 20: Vim mode
 
-Coming soon!
+The [playground](/playground) had a secret Vim mode that you could activate by appending `?vim=true` to the URL, but it was buggy. We've fixed it, and added a toggle to the playground and the tutorial that remembers your preference between visits. But don't worry: unlike normal Vim, you can quit by turning it off again (or closing the tab).
+
+- [playground](/playground)
+- [tutorial](/tutorial)
+- [demo video](https://bsky.app/profile/svelte.dev/post/3ldqli3lk4k2g)
 
 ## Day 21
 

From 89282d2feb7b04b15ef81df296f62380d95b4515 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 21 Dec 2024 13:01:51 -0500
Subject: [PATCH 254/453] Sync `kit` docs (#1054)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/98-reference/50-configuration.md | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 22477284f1..3e720453b3 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -1020,6 +1020,43 @@ The value of `url.origin` during prerendering; useful if it is included in rende
 
 </div>
 
+## router
+
+<div class="ts-block-property-bullets">
+
+
+
+</div>
+
+
+
+<div class="ts-block-property-children">
+
+<div class="ts-block-property">
+
+```ts
+// @noErrors
+type?: 'pathname' | 'hash';
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag">default</span> `"pathname"`
+- <span class="tag since">available since</span> v2.14.0
+
+</div>
+
+What type of client-side router to use.
+- `'pathname'` is the default and means the current URL pathname determines the route
+- `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
+
+</div>
+</div>
+
+</div>
+
 ## serviceWorker
 
 <div class="ts-block-property-bullets">

From 3766e3360de79edb43f1b2eb0bfb8fd9891da3be Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 21 Dec 2024 13:34:00 -0500
Subject: [PATCH 255/453] day 21 (#1055)

---
 .../content/blog/2024-12-01-advent-of-svelte.md          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 580eadcfb2..f061d02dd0 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -168,9 +168,14 @@ The [playground](/playground) had a secret Vim mode that you could activate by a
 - [tutorial](/tutorial)
 - [demo video](https://bsky.app/profile/svelte.dev/post/3ldqli3lk4k2g)
 
-## Day 21
+## Day 21: hash-based routing
 
-Coming soon!
+SvelteKit now supports hash-based routing, in addition to the default pathname-based routing. This can be useful for purely client-side apps (including those you might build with Electron or Tauri), or situations where you don't control the webserver and need to put everything on a single page.
+
+It comes with caveats — you can't use server-rendering (or any server logic), and you need to make sure all your internal links start with `/#/` or they won't work. Other than, it's just like any other SvelteKit app.
+
+- [docs](/docs/kit/configuration#router)
+- [demo](https://hash-based-routing.vercel.app/)
 
 ## Day 22
 

From 471942d569ca73d1e2cd64d16f0f442540212051 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 22 Dec 2024 12:37:49 -0500
Subject: [PATCH 256/453] Sync `kit` docs (#1057)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/50-configuration.md     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 3e720453b3..05077441aa 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -729,7 +729,7 @@ are three strategies with different trade-offs:
 
 ```ts
 // @noErrors
-bundleStrategy?: 'split' | 'single';
+bundleStrategy?: 'split' | 'single' | 'inline';
 ```
 
 <div class="ts-block-property-details">
@@ -741,8 +741,9 @@ bundleStrategy?: 'split' | 'single';
 
 </div>
 
-If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.
-If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.
+- If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.
+- If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.
+- If `'inline'`, inlines all JavaScript and CSS of the entire app into the HTML. The result is usable without a server (i.e. you can just open the file in your browser).
 
 When using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks)inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).
 
@@ -1051,6 +1052,7 @@ type?: 'pathname' | 'hash';
 What type of client-side router to use.
 - `'pathname'` is the default and means the current URL pathname determines the route
 - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
+	It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with /#/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
 
 </div>
 </div>

From 3eaa4b95c9857497aa75cc2582aced852e2cd801 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 22 Dec 2024 12:46:26 -0500
Subject: [PATCH 257/453] day 22 (#1058)

---
 apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index f061d02dd0..769f24ad70 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -179,7 +179,10 @@ It comes with caveats — you can't use server-rendering (or any server logic),
 
 ## Day 22
 
-Coming soon!
+Following the introduction of the `bundleStrategy` option on day 19, and hash-based routing yesterday, we now have the ability to generate fully self-contained apps with the `bundleStrategy: 'inline'` option. Together with Vite's `assetsInlineLimit` option, it's possible to put an entire SvelteKit app — code, styles, fonts, images, audio and everything else — inside a single .html file that you can share with people on a floppy disk.
+
+- [docs](/docs/kit/configuration#output)
+- [example downloadable Snake game](https://svelte-snek.vercel.app/)
 
 ## Day 23
 

From a940812a234b30046bf61e6e3964da1ca53e33eb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 23 Dec 2024 11:05:17 -0500
Subject: [PATCH 258/453] docs: use root-relative links instead of
 https://svelte.dev (#1061)

---
 ...12-01-whats-new-in-svelte-december-2024.md |  2 +-
 .../kit/10-getting-started/10-introduction.md |  2 +-
 .../20-core-concepts/50-state-management.md   |  2 +-
 .../60-appendix/50-additional-resources.md    |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 32 +++++++++----------
 .../docs/kit/98-reference/50-configuration.md | 32 +++++++++----------
 .../docs/svelte/98-reference/20-svelte.md     | 12 +++----
 .../01-welcome-to-svelte/index.md             |  2 +-
 .../07-conclusion/01-next-steps/index.md      |  2 +-
 9 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md b/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md
index 092f15229c..e0fab66604 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-whats-new-in-svelte-december-2024.md
@@ -43,7 +43,7 @@ The features since last month can be found below:
 - [PixelAttack](https://jason1610.github.io/PixelAttack/) takes an image, pixelizes it and makes the pixels fight each other
 - [NeoHtop](https://github.com/Abdenasser/neohtop) is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI
 - [WebVM](https://github.com/leaningtech/webvm) is a Linux virtual machine that runs in your browser
-- [Sveltris](https://svelte.dev/playground/8594eea15c6244908c3efad284fe2aa4?version=5.2.1) is Tetris built entirely in the Svelte REPL
+- [Sveltris](/playground/8594eea15c6244908c3efad284fe2aa4?version=5.2.1) is Tetris built entirely in the Svelte REPL
 
 ### Learning Resources
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
index c9d7fabb7b..8c3b86aeb3 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
@@ -7,7 +7,7 @@ title: Introduction
 
 > [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](/tutorial/kit).
 >
-> If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
+> If you get stuck, reach out for help in the [Discord chatroom](/chat).
 
 ## What is SvelteKit?
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index 53315fd93d..afc1d744fc 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -111,7 +111,7 @@ You might wonder how we're able to use `page.data` and other [app state]($app-st
 <p>Welcome {user().name}</p>
 ```
 
-> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](https://svelte.dev/docs/svelte/$state#Passing-state-into-functions)
+> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](/docs/svelte/$state#Passing-state-into-functions)
 
 > [!LEGACY]
 > You also use stores from `svelte/store` for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead.
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md b/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
index 6b83a8f309..9e3db90b0e 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/50-additional-resources.md
@@ -21,4 +21,4 @@ SvelteKit users have also published plenty of examples on GitHub, under the [#sv
 
 ## Support
 
-You can ask for help on [Discord](https://svelte.dev/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.
+You can ask for help on [Discord](/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index a9f652c60f..69e1737fff 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -680,7 +680,7 @@ generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): st
 
 </div>
 
-Generate a server-side manifest to initialise the SvelteKit [server](https://svelte.dev/docs/kit/@sveltejs-kit#Server) with.
+Generate a server-side manifest to initialise the SvelteKit [server](/docs/kit/@sveltejs-kit#Server) with.
 
 </div>
 </div>
@@ -1226,10 +1226,10 @@ fetch: typeof fetch;
 - It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.
 - It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).
 - Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
-- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle)
+- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)
 - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
 
-You can learn more about making credentialed requests with cookies [here](https://svelte.dev/docs/kit/load#Cookies)
+You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies)
 
 </div>
 </div>
@@ -1275,7 +1275,7 @@ export async function load({ fetch, setHeaders }) {
 
 Setting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.
 
-You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](https://svelte.dev/docs/kit/@sveltejs-kit#Cookies) API in a server-only `load` function instead.
+You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API in a server-only `load` function instead.
 
 `setHeaders` has no effect when a `load` function runs in the browser.
 
@@ -1306,7 +1306,7 @@ depends(...deps: Array<`${string}:${string}`>): void;
 
 <div class="ts-block-property-details">
 
-This function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](https://svelte.dev/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.
+This function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.
 
 Most of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.
 
@@ -1784,7 +1784,7 @@ state: App.PageState;
 
 <div class="ts-block-property-details">
 
-The page state, which can be manipulated using the [`pushState`](https://svelte.dev/docs/kit/$app-navigation#pushState) and [`replaceState`](https://svelte.dev/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
+The page state, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
 
 </div>
 </div>
@@ -1797,7 +1797,7 @@ form: any;
 
 <div class="ts-block-property-details">
 
-Filled only after a form submission. See [form actions](https://svelte.dev/docs/kit/form-actions) for more info.
+Filled only after a form submission. See [form actions](/docs/kit/form-actions) for more info.
 
 </div>
 </div></div>
@@ -1899,10 +1899,10 @@ fetch: typeof fetch;
 - It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.
 - It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).
 - Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
-- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle)
+- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)
 - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
 
-You can learn more about making credentialed requests with cookies [here](https://svelte.dev/docs/kit/load#Cookies)
+You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies)
 
 </div>
 </div>
@@ -1928,7 +1928,7 @@ locals: App.Locals;
 
 <div class="ts-block-property-details">
 
-Contains custom data that was added to the request within the [`server handle hook`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle).
+Contains custom data that was added to the request within the [`server handle hook`](/docs/kit/hooks#Server-hooks-handle).
 
 </div>
 </div>
@@ -2026,7 +2026,7 @@ export async function load({ fetch, setHeaders }) {
 
 Setting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.
 
-You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](https://svelte.dev/docs/kit/@sveltejs-kit#Cookies) API instead.
+You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API instead.
 
 </div>
 </div>
@@ -2486,7 +2486,7 @@ depends(...deps: string[]): void;
 
 <div class="ts-block-property-details">
 
-This function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](https://svelte.dev/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.
+This function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.
 
 Most of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.
 
@@ -3072,7 +3072,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span> 
+- <span class="tag deprecated">deprecated</span>
 
 </div>
 
@@ -3089,7 +3089,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span> 
+- <span class="tag deprecated">deprecated</span>
 
 </div>
 
@@ -3106,7 +3106,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span> 
+- <span class="tag deprecated">deprecated</span>
 
 </div>
 
@@ -3133,7 +3133,7 @@ referrer?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span> 
+- <span class="tag deprecated">deprecated</span>
 
 </div>
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 05077441aa..759a18d5b4 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -49,7 +49,7 @@ compilerOptions?: CompileOptions;
 
 </div>
 
-Options passed to [`svelte.compile`](https://svelte.dev/docs/svelte/svelte-compiler#CompileOptions).
+Options passed to [`svelte.compile`](/docs/svelte/svelte-compiler#CompileOptions).
 
 </div>
 </div>
@@ -139,7 +139,7 @@ The `kit` property configures SvelteKit, and can have the following properties:
 
 </div>
 
-Your [adapter](https://svelte.dev/docs/kit/adapters) is run when executing `vite build`. It determines how the output is converted for different platforms.
+Your [adapter](/docs/kit/adapters) is run when executing `vite build`. It determines how the output is converted for different platforms.
 
 <div class="ts-block-property-children">
 
@@ -247,9 +247,9 @@ When pages are prerendered, the CSP header is added via a `<meta http-equiv>` ta
 
 > [!NOTE] When `mode` is `'auto'`, SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.
 
-> [!NOTE] Note that most [Svelte transitions](https://svelte.dev/tutorial/svelte/transition) work by creating an inline `<style>` element. If you use these in your app, you must either leave the `style-src` directive unspecified or add `unsafe-inline`.
+> [!NOTE] Note that most [Svelte transitions](/tutorial/svelte/transition) work by creating an inline `<style>` element. If you use these in your app, you must either leave the `style-src` directive unspecified or add `unsafe-inline`.
 
-If this level of configuration is insufficient and you have more dynamic requirements, you can use the [`handle` hook](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) to roll your own CSP.
+If this level of configuration is insufficient and you have more dynamic requirements, you can use the [`handle` hook](/docs/kit/hooks#Server-hooks-handle) to roll your own CSP.
 
 <div class="ts-block-property-children">
 
@@ -394,7 +394,7 @@ publicPrefix?: string;
 
 </div>
 
-A prefix that signals that an environment variable is safe to expose to client-side code. See [`$env/static/public`](https://svelte.dev/docs/kit/$env-static-public) and [`$env/dynamic/public`](https://svelte.dev/docs/kit/$env-dynamic-public). Note that Vite's [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) must be set separately if you are using Vite's environment variable handling - though use of that feature should generally be unnecessary.
+A prefix that signals that an environment variable is safe to expose to client-side code. See [`$env/static/public`](/docs/kit/$env-static-public) and [`$env/dynamic/public`](/docs/kit/$env-dynamic-public). Note that Vite's [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) must be set separately if you are using Vite's environment variable handling - though use of that feature should generally be unnecessary.
 
 </div>
 </div>
@@ -414,7 +414,7 @@ privatePrefix?: string;
 
 </div>
 
-A prefix that signals that an environment variable is unsafe to expose to client-side code. Environment variables matching neither the public nor the private prefix will be discarded completely. See [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private) and [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private).
+A prefix that signals that an environment variable is unsafe to expose to client-side code. Environment variables matching neither the public nor the private prefix will be discarded completely. See [`$env/static/private`](/docs/kit/$env-static-private) and [`$env/dynamic/private`](/docs/kit/$env-dynamic-private).
 
 </div>
 </div>
@@ -476,7 +476,7 @@ client?: string;
 
 </div>
 
-The location of your client [hooks](https://svelte.dev/docs/kit/hooks).
+The location of your client [hooks](/docs/kit/hooks).
 
 </div>
 </div>
@@ -495,7 +495,7 @@ server?: string;
 
 </div>
 
-The location of your server [hooks](https://svelte.dev/docs/kit/hooks).
+The location of your server [hooks](/docs/kit/hooks).
 
 </div>
 </div>
@@ -515,7 +515,7 @@ universal?: string;
 
 </div>
 
-The location of your universal [hooks](https://svelte.dev/docs/kit/hooks).
+The location of your universal [hooks](/docs/kit/hooks).
 
 </div>
 </div></div>
@@ -556,7 +556,7 @@ params?: string;
 
 </div>
 
-a directory containing [parameter matchers](https://svelte.dev/docs/kit/advanced-routing#Matching)
+a directory containing [parameter matchers](/docs/kit/advanced-routing#Matching)
 
 </div>
 </div>
@@ -575,7 +575,7 @@ routes?: string;
 
 </div>
 
-the files that define the structure of your app (see [Routing](https://svelte.dev/docs/kit/routing))
+the files that define the structure of your app (see [Routing](/docs/kit/routing))
 
 </div>
 </div>
@@ -594,7 +594,7 @@ serviceWorker?: string;
 
 </div>
 
-the location of your service worker's entry point (see [Service workers](https://svelte.dev/docs/kit/service-workers))
+the location of your service worker's entry point (see [Service workers](/docs/kit/service-workers))
 
 </div>
 </div>
@@ -798,7 +798,7 @@ base?: '' | `/${string}`;
 
 </div>
 
-A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://svelte.dev/docs/kit/$app-paths#base) for that: `<a href="http://github.com/%7Bbase%7D/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
+A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](/docs/kit/$app-paths#base) for that: `<a href="http://github.com/%7Bbase%7D/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
 
 </div>
 </div>
@@ -823,7 +823,7 @@ Whether to use relative asset paths.
 If `true`, `base` and `assets` imported from `$app/paths` will be replaced with relative asset paths during server-side rendering, resulting in more portable HTML.
 If `false`, `%sveltekit.assets%` and references to build artifacts will always be root-relative paths, unless `paths.assets` is an external URL
 
-[Single-page app](https://svelte.dev/docs/kit/single-page-apps) fallback pages will always use absolute paths, regardless of this setting.
+[Single-page app](/docs/kit/single-page-apps) fallback pages will always use absolute paths, regardless of this setting.
 
 If your app uses a `<base>` element, you should set this to `false`, otherwise asset URLs will incorrectly be resolved against the `<base>` URL rather than the current page.
 
@@ -842,7 +842,7 @@ In 1.0, `undefined` was a valid value, which was set by default. In that case, i
 
 </div>
 
-See [Prerendering](https://svelte.dev/docs/kit/page-options#prerender).
+See [Prerendering](/docs/kit/page-options#prerender).
 
 <div class="ts-block-property-children">
 
@@ -1174,7 +1174,7 @@ Not all navigations will result in an error though, for example if the JavaScrip
 </script>
 ```
 
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of [`updated.current`](https://svelte.dev/docs/kit/$app-state#updated) `true` when it detects one.
+If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of [`updated.current`](/docs/kit/$app-state#updated) `true` when it detects one.
 
 <div class="ts-block-property-children">
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index babf83961d..243e02efd4 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -80,7 +80,7 @@ constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
 
 - <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
 is a stop-gap solution. Migrate towards using `mount` instead. See
-[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+[migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 </div>
 
@@ -98,7 +98,7 @@ $destroy(): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -120,7 +120,7 @@ $on<K extends Extract<keyof Events, string>>(
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -139,7 +139,7 @@ $set(props: Partial<Props>): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -576,13 +576,13 @@ interface Component<
 ): {
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+	 * is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$on?(type: string, callback: (e: any) => void): () => void;
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+	 * is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$set?(props: Partial<Props>): void;
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
index 07d0af3634..73d0a26228 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
@@ -4,7 +4,7 @@ title: Welcome to Svelte
 
 Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint.
 
-You can also consult the [API docs](https://svelte.dev/docs) and visit the [playground](https://svelte.dev/playground), or — if you're impatient to start hacking on your machine locally — create a project with `npx sv create`.
+You can also consult the [API docs](/docs) and visit the [playground](/playground), or — if you're impatient to start hacking on your machine locally — create a project with `npx sv create`.
 
 ## What is Svelte?
 
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
index 20ce08f918..4848015648 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
@@ -12,4 +12,4 @@ npx sv create
 
 Svelte and SvelteKit will continue to evolve, and so will this tutorial. Check back periodically for updates.
 
-To keep up with developments in the Svelte world, join our Discord server at [svelte.dev/chat](https://svelte.dev/chat) and follow [Svelte Society](https://twitter.com/sveltesociety) on Twitter. We're so happy to welcome you to the Svelte community!
+To keep up with developments in the Svelte world, join our Discord server at [svelte.dev/chat](/chat) and follow [Svelte Society](https://twitter.com/sveltesociety) on Twitter. We're so happy to welcome you to the Svelte community!

From 6e4cbb3a2e337999dae339a3792e4c4b0fdc8954 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 23 Dec 2024 17:39:06 +0100
Subject: [PATCH 259/453] feat: "download app" possibility (#1051)

* feat: "download app" possibility

closes #827

* lint

* maybe this?

* use SvelteKit instead

* integrate into menu

* move here

* remove outdated comment

* add css from playground
---
 apps/svelte.dev/.gitignore                    |  2 +
 apps/svelte.dev/package.json                  |  2 +
 .../svelte.dev/scripts/get_svelte_template.js | 86 +++++++++++++++++++
 apps/svelte.dev/scripts/update.js             |  1 +
 .../(authed)/playground/[id]/+page.svelte     | 40 +++++++++
 .../src/lib/Input/ComponentSelector.svelte    |  7 +-
 packages/repl/src/lib/Repl.svelte             |  6 +-
 pnpm-lock.yaml                                | 17 ++++
 8 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 apps/svelte.dev/scripts/get_svelte_template.js

diff --git a/apps/svelte.dev/.gitignore b/apps/svelte.dev/.gitignore
index 321615eddf..82cbd2da73 100644
--- a/apps/svelte.dev/.gitignore
+++ b/apps/svelte.dev/.gitignore
@@ -6,6 +6,8 @@
 /src/routes/_home/Supporters/contributors.js
 /src/routes/_home/Supporters/donors.jpg
 /src/routes/_home/Supporters/donors.js
+/scripts/svelte-template
+/static/svelte-template.json
 
 # git-repositories of synced docs go here
 /repos/
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 64a7ab86f5..28a7e97e91 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -35,6 +35,7 @@
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
 		"cookie": "^0.7.0",
+		"do-not-zip": "^1.0.0",
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
 		"editor": "workspace:*",
@@ -72,6 +73,7 @@
 		"prettier-plugin-svelte": "^3.3.2",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
+		"sv": "^0.6.8",
 		"svelte": "5.14.0",
 		"svelte-check": "^4.1.1",
 		"svelte-preprocess": "^6.0.3",
diff --git a/apps/svelte.dev/scripts/get_svelte_template.js b/apps/svelte.dev/scripts/get_svelte_template.js
new file mode 100644
index 0000000000..d525eaa3df
--- /dev/null
+++ b/apps/svelte.dev/scripts/get_svelte_template.js
@@ -0,0 +1,86 @@
+// @ts-check
+import { readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { create } from 'sv';
+
+// This download the currente Vite template from Github, adjusts it to our needs, and saves it to static/svelte-template.json
+// This is used by the Svelte REPL as part of the "download project" feature
+
+const force = process.env.FORCE_UPDATE === 'true';
+const output_file = fileURLToPath(new URL('../static/svelte-template.json', import.meta.url));
+const output_dir = fileURLToPath(new URL('./svelte-template', import.meta.url));
+
+try {
+	if (!force && statSync(output_file)) {
+		console.info(`[update/template] ${output_file} exists. Skipping`);
+		process.exit(0);
+	}
+} catch {
+	// create Svelte-Kit skelton app
+	create(output_dir, { template: 'minimal', types: 'typescript', name: 'your-app' });
+
+	function get_all_files(dir) {
+		const files = [];
+		const items = readdirSync(dir, { withFileTypes: true });
+
+		for (const item of items) {
+			const full_path = join(dir, item.name);
+			if (item.isDirectory()) {
+				files.push(...get_all_files(full_path));
+			} else {
+				files.push(full_path.replaceAll('\\', '/'));
+			}
+		}
+
+		return files;
+	}
+
+	const all_files = get_all_files(output_dir);
+	const files = [];
+
+	for (let path of all_files) {
+		const bytes = readFileSync(path);
+		const string = bytes.toString();
+		let data = bytes.compare(Buffer.from(string)) === 0 ? string : [...bytes];
+
+		if (path.endsWith('routes/+page.svelte')) {
+			data = `<script>\n\timport '../app.css';\n\timport App from './App.svelte';\n</script>\n\n<App />\n`;
+		}
+
+		files.push({ path: path.slice(output_dir.length + 1), data });
+	}
+
+	files.push({
+		path: 'src/routes/+page.js',
+		data:
+			"// Because we don't know whether or not your playground app can run in a server environment, we disable server-side rendering.\n" +
+			'// Make sure to test whether or not you can re-enable it, as SSR improves perceived performance and site accessibility.\n' +
+			'// Read more about this option here: https://svelte.dev/docs/kit/page-options#ssr\n' +
+			'export const ssr = false;\n'
+	});
+
+	// add CSS styles from playground to the project
+	const html = readFileSync(
+		join(output_dir, '../../../../packages/repl/src/lib/Output/srcdoc/index.html'),
+		{ encoding: 'utf-8' }
+	);
+	const css = html
+		.slice(html.indexOf('<style>') + 7, html.indexOf('</style>'))
+		.split('\n')
+		.map((line) =>
+			// remove leading \t
+			line.slice(3)
+		)
+		.join('\n')
+		.trimStart();
+	files.push({
+		path: 'src/app.css',
+		data: css
+	});
+
+	writeFileSync(output_file, JSON.stringify(files));
+
+	// remove output dir afterwards to prevent it messing with Vite watcher
+	rmSync(output_dir, { force: true, recursive: true });
+}
diff --git a/apps/svelte.dev/scripts/update.js b/apps/svelte.dev/scripts/update.js
index 41a4c2e9b6..9c25d958dc 100644
--- a/apps/svelte.dev/scripts/update.js
+++ b/apps/svelte.dev/scripts/update.js
@@ -9,3 +9,4 @@ const env = {
 
 fork(`${dir}/get_contributors.js`, { env });
 fork(`${dir}/get_donors.js`, { env });
+fork(`${dir}/get_svelte_template.js`, { env });
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index f883a1ec62..51f0c2b51a 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// @ts-expect-error no types
+	import * as doNotZip from 'do-not-zip';
 	import { browser } from '$app/environment';
 	import { afterNavigate, goto, replaceState } from '$app/navigation';
 	import type { Gist } from '$lib/db/types';
@@ -113,6 +115,43 @@
 		}
 	}
 
+	async function download() {
+		const { files: components, imports } = repl.toJSON();
+
+		const files: Array<{ path: string; data: string }> = await (
+			await fetch('http://github.com/svelte-template.json')
+		).json();
+
+		if (imports.length > 0) {
+			const idx = files.findIndex(({ path }) => path === 'package.json');
+			const pkg = JSON.parse(files[idx].data);
+			const { devDependencies } = pkg;
+			imports.forEach((mod) => {
+				const match = /^(@[^/]+\/)?[^@/]+/.exec(mod)!;
+				devDependencies[match[0]] = 'latest';
+			});
+			pkg.devDependencies = devDependencies;
+			files[idx].data = JSON.stringify(pkg, null, '  ');
+		}
+
+		files.push(
+			...components.map((component) => ({
+				path: `src/routes/${component.name}`,
+				data: (component as File).contents
+			}))
+		);
+
+		const url = URL.createObjectURL(doNotZip.toBlob(files));
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = 'svelte-app.zip';
+		link.style.display = 'none';
+		document.body.appendChild(link);
+		link.click();
+		URL.revokeObjectURL(url);
+		link.remove();
+	}
+
 	async function update_hash() {
 		// Only change hash when necessary to avoid polluting everyone's browser history
 		if (modified) {
@@ -200,6 +239,7 @@
 				{can_escape}
 				injectedJS={mapbox_setup}
 				{onchange}
+				{download}
 				previewTheme={$theme.current}
 			/>
 		</div>
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 719bb5d218..783600563f 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -10,9 +10,10 @@
 		workspace: Workspace;
 		can_migrate: boolean;
 		migrate: () => void;
+		download?: () => void;
 	}
 
-	let { runes, onchange, workspace, can_migrate, migrate }: Props = $props();
+	let { runes, onchange, workspace, can_migrate, migrate, download }: Props = $props();
 
 	let input = $state() as HTMLInputElement;
 	let input_value = $state(workspace.current.name);
@@ -170,6 +171,10 @@
 			</label>
 
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
+
+			{#if download}
+				<button onclick={download}>Download app</button>
+			{/if}
 		</Toolbox>
 	</div>
 </div>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 3b3bd44ae8..41e4e786a3 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -23,6 +23,7 @@
 		injectedCSS?: string;
 		previewTheme?: 'light' | 'dark';
 		onchange?: () => void;
+		download?: () => void;
 	}
 
 	let {
@@ -37,7 +38,8 @@
 		injectedJS = '',
 		injectedCSS = '',
 		previewTheme = 'light',
-		onchange = () => {}
+		onchange = () => {},
+		download
 	}: Props = $props();
 
 	// TODO pass in real data
@@ -174,7 +176,7 @@
 		>
 			{#snippet a()}
 				<section>
-					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} {migrate} />
+					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} {migrate} {download} />
 
 					<Editor {workspace} />
 				</section>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5ee117b10..7c572cd679 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       d3-geo-projection:
         specifier: ^4.0.0
         version: 4.0.0
+      do-not-zip:
+        specifier: ^1.0.0
+        version: 1.0.0
       editor:
         specifier: workspace:*
         version: link:../../packages/editor
@@ -177,6 +180,9 @@ importers:
       satori-html:
         specifier: ^0.3.2
         version: 0.3.2
+      sv:
+        specifier: ^0.6.8
+        version: 0.6.8
       svelte:
         specifier: 5.14.0
         version: 5.14.0
@@ -2131,6 +2137,9 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
+  do-not-zip@1.0.0:
+    resolution: {integrity: sha512-Pgd81ET43bhAGaN2Hq1zluSX1FmD7kl7KcV9ER/lawiLsRUB9pRA5y8r6us29Xk6BrINZETO8TjhYwtwafWUww==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -2994,6 +3003,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  sv@0.6.8:
+    resolution: {integrity: sha512-9+gEOIED7KzyvDVF7W4/L2Nv9ISvFrU0xp8dtEyP1QHWY/1bbz/Fp0Lo7/hgBSkVvvSXV3XMxQsTwz23AOobGw==}
+    hasBin: true
+
   svelte-check@4.1.1:
     resolution: {integrity: sha512-NfaX+6Qtc8W/CyVGS/F7/XdiSSyXz+WGYA9ZWV3z8tso14V2vzjfXviKaTFEzB7g8TqfgO2FOzP6XT4ApSTUTw==}
     engines: {node: '>= 18.0.0'}
@@ -4967,6 +4980,8 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
+  do-not-zip@1.0.0: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dotenv@16.4.7: {}
@@ -5883,6 +5898,8 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  sv@0.6.8: {}
+
   svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25

From cfa3d8c0167ce06ff20f0b202cbd60c4aec49276 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 23 Dec 2024 11:52:17 -0500
Subject: [PATCH 260/453] day 23 (#1062)

---
 .../content/blog/2024-12-01-advent-of-svelte.md           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 769f24ad70..99b0b752ae 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -177,16 +177,18 @@ It comes with caveats — you can't use server-rendering (or any server logic),
 - [docs](/docs/kit/configuration#router)
 - [demo](https://hash-based-routing.vercel.app/)
 
-## Day 22
+## Day 22: self-contained apps
 
 Following the introduction of the `bundleStrategy` option on day 19, and hash-based routing yesterday, we now have the ability to generate fully self-contained apps with the `bundleStrategy: 'inline'` option. Together with Vite's `assetsInlineLimit` option, it's possible to put an entire SvelteKit app — code, styles, fonts, images, audio and everything else — inside a single .html file that you can share with people on a floppy disk.
 
 - [docs](/docs/kit/configuration#output)
 - [example downloadable Snake game](https://svelte-snek.vercel.app/)
 
-## Day 23
+## Day 23: download from playground
 
-Coming soon!
+We've added a 'download app' option to the toolbox in the playground — selecting it will zip up the app, along with any packages you've imported, and download it to your machine so you can continue working on it in your editor of choice.
+
+- [playground](/playground)
 
 ## Day 24
 

From 97ad9c1690ab797a9a6d026b2f7904ab9eee37d6 Mon Sep 17 00:00:00 2001
From: Hyunbin Seo <47051820+hyunbinseo@users.noreply.github.com>
Date: Tue, 24 Dec 2024 08:29:47 +0900
Subject: [PATCH 261/453] chore: add title to root docs page (#1060)

---
 apps/svelte.dev/src/routes/docs/+page.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 6691bf3986..cfc220883a 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -58,6 +58,10 @@
 	});
 </script>
 
+<svelte:head>
+	<title>Docs • Svelte</title>
+</svelte:head>
+
 <div class="page">
 	<h1>Documentation</h1>
 	<p>

From 13a22b26cab41500e0682b05f0cf2ffc74dc9815 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Dec 2024 09:21:12 -0500
Subject: [PATCH 262/453] Sync `svelte` docs (#1065)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/03-template-syntax/16-class.md     | 24 -----
 .../svelte/03-template-syntax/18-class.md     | 91 +++++++++++++++++++
 .../98-reference/.generated/client-errors.md  |  8 +-
 .../.generated/client-warnings.md             |  2 +-
 .../.generated/compile-warnings.md            |  2 +-
 .../docs/svelte/98-reference/20-svelte.md     | 12 +--
 .../98-reference/30-compiler-warnings.md      |  2 +-
 .../svelte/98-reference/30-runtime-errors.md  |  8 +-
 .../98-reference/30-runtime-warnings.md       |  2 +-
 9 files changed, 113 insertions(+), 38 deletions(-)
 delete mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
 create mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
deleted file mode 100644
index cb23ea958a..0000000000
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: class:
----
-
-The `class:` directive is a convenient way to conditionally set classes on elements, as an alternative to using conditional expressions inside `class` attributes:
-
-```svelte
-<!-- These are equivalent -->
-<div class={isCool ? 'cool' : ''}>...</div>
-<div class:cool={isCool}>...</div>
-```
-
-As with other directives, we can use a shorthand when the name of the class coincides with the value:
-
-```svelte
-<div class:cool>...</div>
-```
-
-Multiple `class:` directives can be added to a single element:
-
-```svelte
-<div class:cool class:lame={!cool} class:potato>...</div>
-```
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md
new file mode 100644
index 0000000000..acf65a03ce
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md
@@ -0,0 +1,91 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: class
+---
+
+There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
+
+## Attributes
+
+Primitive values are treated like any other attribute:
+
+```svelte
+<div class={large ? 'large' : 'small'}>...</div>
+```
+
+> [!NOTE]
+> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.
+
+### Objects and arrays
+
+Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).
+
+If the value is an object, the truthy keys are added:
+
+```svelte
+<script>
+	let { cool } = $props();
+</script>
+
+<!-- results in `class="cool"` if `cool` is truthy,
+     `class="lame"` otherwise -->
+<div class={{ cool, lame: !cool }}>...</div>
+```
+
+If the value is an array, the truthy values are combined:
+
+```svelte
+<!-- if `faded` and `large` are both truthy, results in
+     `class="saturate-0 opacity-50 scale-200"` -->
+<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
+```
+
+Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.
+
+Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	let props = $props();
+</script>
+
+<button {...props} class={['cool-button', props.class]}>
+	{@render props.children?.()}
+</button>
+```
+
+The user of this component has the same flexibility to use a mixture of objects, arrays and strings:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Button from './Button.svelte';
+	let useTailwind = $state(false);
+</script>
+
+<Button
+	onclick={() => useTailwind = true}
+	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
+>
+	Accept the inevitability of Tailwind
+</Button>
+```
+
+## The `class:` directive
+
+Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
+
+```svelte
+<!-- These are equivalent -->
+<div class={{ cool, lame: !cool }}>...</div>
+<div class:cool={cool} class:lame={!cool}>...</div>
+```
+
+As with other directives, we can use a shorthand when the name of the class coincides with the value:
+
+```svelte
+<div class:cool class:lame={!cool}>...</div>
+```
+
+> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index 90c9c1f9d1..2c2e0707ea 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -21,15 +21,19 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### derived_references_self
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 06ca578b76..5218ec4cb1 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -52,7 +52,7 @@ Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
 
 ### event_handler_invalid
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 3d515305fe..57396bd7fd 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -62,7 +62,7 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 ### a11y_click_events_have_key_events
 
 ```
-Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
 ```
 
 Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 243e02efd4..babf83961d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -80,7 +80,7 @@ constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
 
 - <span class="tag deprecated">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which
 is a stop-gap solution. Migrate towards using `mount` instead. See
-[migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 
 </div>
 
@@ -98,7 +98,7 @@ $destroy(): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -120,7 +120,7 @@ $on<K extends Extract<keyof Events, string>>(
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -139,7 +139,7 @@ $set(props: Partial<Props>): void;
 <div class="ts-block-property-bullets">
 
 - <span class="tag deprecated">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which
-is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 for more info.
 
 </div>
@@ -576,13 +576,13 @@ interface Component<
 ): {
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$on?(type: string, callback: (e: any) => void): () => void;
 	/**
 	 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-	 * is a stop-gap solution. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+	 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
 	 * for more info.
 	 */
 	$set?(props: Partial<Props>): void;
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index d14e7d9526..155e05e6a8 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -83,7 +83,7 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 ### a11y_click_events_have_key_events
 
 ```
-Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
 ```
 
 Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index d85866cf79..e06883950e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -28,15 +28,19 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### derived_references_self
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index cdff222ae3..856c3b6710 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -59,7 +59,7 @@ Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
 
 ### event_handler_invalid
 

From c961a08aef6b922e36ce008ed3e08daf6ef5b7e8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Dec 2024 10:25:01 -0500
Subject: [PATCH 263/453] strip origin in more places (#1067)

---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md     | 8 ++++----
 apps/svelte.dev/scripts/sync-docs/types.ts                | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 69e1737fff..47354a4bf7 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -3072,7 +3072,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span>
+- <span class="tag deprecated">deprecated</span> 
 
 </div>
 
@@ -3089,7 +3089,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span>
+- <span class="tag deprecated">deprecated</span> 
 
 </div>
 
@@ -3106,7 +3106,7 @@ sandbox?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span>
+- <span class="tag deprecated">deprecated</span> 
 
 </div>
 
@@ -3133,7 +3133,7 @@ referrer?: Array<
 
 <div class="ts-block-property-bullets">
 
-- <span class="tag deprecated">deprecated</span>
+- <span class="tag deprecated">deprecated</span> 
 
 </div>
 
diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index fbee849d04..291d05f455 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -86,10 +86,10 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 					// `@link` JSDoc tags (and maybe others?) turn this property into an array, which we need to join manually
 					if (Array.isArray(jsDoc.comment)) {
 						comment = (jsDoc.comment as any[])
-							.map(({ name, text }) => (name ? `\`${name.escapedText}\`` : text))
+							.map(({ name, text }) => strip_origin(name ? `\`${name.escapedText}\`` : text))
 							.join('');
 					} else {
-						comment = jsDoc.comment;
+						comment = strip_origin(jsDoc.comment);
 					}
 
 					if (jsDoc.tags) {
@@ -280,7 +280,7 @@ function munge_type_element(member: ts.TypeElement, depth = 1): TypeElement | un
 }
 
 function cleanup_comment(comment: string = '') {
-	return comment
+	return strip_origin(comment)
 		.replace(/\/\/\/ type: (.+)/g, '/** @type {$1} */')
 		.replace(/\/\/\/ errors: (.+)/g, '// @errors: $1') // see read_d_ts_file
 		.replace(/^(  )+/gm, (match: string, spaces: string) => {

From 037f046493582e1535c378b37df1e1a0f97a0cc2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Dec 2024 10:25:24 -0500
Subject: [PATCH 264/453] update class tutorial (#1063)

* update class tutorial

* update

* more

* more

* rename exercise

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry <git@chor.date>

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry <git@chor.date>

---------

Co-authored-by: Conduitry <git@chor.date>
---
 .../+assets/app-b/src/lib/App.svelte          |  3 +-
 .../07-classes-and-styles/01-classes/index.md | 11 ++-
 .../+assets/app-b/src/lib/App.svelte          | 93 -------------------
 .../02-class-shorthand/index.md               | 24 -----
 .../+assets/app-b/src/lib/App.svelte          |  0
 .../{03-styles => 02-styles}/index.md         |  0
 .../+assets/app-a/src/lib/App.svelte          |  0
 .../+assets/app-a/src/lib/Box.svelte          |  0
 .../+assets/app-b/src/lib/App.svelte          |  0
 .../+assets/app-b/src/lib/Box.svelte          |  0
 .../index.md                                  |  0
 .../+assets/app-a/src/lib/App.svelte          |  2 +-
 .../+assets/app-b/src/lib/App.svelte          |  2 +-
 .../02-each-block-bindings/index.md           |  2 +-
 .../+assets/app-a/src/lib/AudioPlayer.svelte  |  2 +-
 .../+assets/app-b/src/lib/AudioPlayer.svelte  |  2 +-
 .../03-media-elements/index.md                |  2 +-
 .../+assets/app-a/src/lib/TodoList.svelte     |  2 +-
 .../+assets/app-b/src/lib/TodoList.svelte     |  2 +-
 .../01-deferred-transitions/index.md          |  2 +-
 .../+assets/app-b/src/lib/TodoList.svelte     |  2 +-
 .../02-animations/index.md                    |  4 +-
 .../+assets/app-a/src/lib/App.svelte          |  2 +-
 .../+assets/app-b/src/lib/App.svelte          |  2 +-
 .../+assets/app-a/src/lib/AudioPlayer.svelte  |  2 +-
 .../+assets/app-b/src/lib/AudioPlayer.svelte  |  2 +-
 .../+assets/app-b/src/lib/AudioPlayer.svelte  |  2 +-
 .../+assets/app-a/src/lib/Folder.svelte       |  2 +-
 .../+assets/app-b/src/lib/Folder.svelte       |  2 +-
 .../+assets/app-a/src/routes/+layout.svelte   |  4 +-
 .../+assets/app-b/src/routes/+layout.svelte   |  2 +-
 .../01-universal-load-functions/index.md      |  2 +-
 32 files changed, 30 insertions(+), 147 deletions(-)
 delete mode 100644 apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{03-styles => 02-styles}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{03-styles => 02-styles}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{04-component-styles => 03-component-styles}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{04-component-styles => 03-component-styles}/+assets/app-a/src/lib/Box.svelte (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{04-component-styles => 03-component-styles}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{04-component-styles => 03-component-styles}/+assets/app-b/src/lib/Box.svelte (100%)
 rename apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/{04-component-styles => 03-component-styles}/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
index 57ec47ebcf..85276916a0 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
@@ -5,8 +5,7 @@
 <div class="container">
 	Flip the card
 	<button
-		class="card"
-		class:flipped={flipped}
+		class={["card", { flipped }]}
 		onclick={() => flipped = !flipped}
 	>
 		<div class="front">
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
index ee1c65b364..4b4b073b46 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
@@ -1,5 +1,5 @@
 ---
-title: The class directive
+title: The class attribute
 ---
 
 Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a `flipped` class to the card:
@@ -14,15 +14,16 @@ Like any other attribute, you can specify classes with a JavaScript attribute. H
 
 This works as expected — if you click on the card now, it'll flip.
 
-We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte allows you to pass an object or array that is converted to a string by [clsx](https://github.com/lukeed/clsx).
 
 ```svelte
 /// file: App.svelte
 <button
-	class="card"
-	+++class:flipped={flipped}+++
+	+++class={["card", { flipped }]}+++
 	onclick={() => flipped = !flipped}
 >
 ```
 
-This directive means 'add the `flipped` class whenever `flipped` is truthy'.
+This means 'always add the `card` class, and add the `flipped` class whenever `flipped` is truthy'.
+
+For more examples of how to combine conditional classes, [consult the `class` documentation](/docs/svelte/class).
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
deleted file mode 100644
index 5ef956edfe..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-	let flipped = $state(false);
-</script>
-
-<div class="container">
-	Flip the card
-	<button
-		class="card"
-		class:flipped
-		onclick={() => flipped = !flipped}
-	>
-		<div class="front">
-			<span class="symbol">♠</span>
-		</div>
-		<div class="back">
-			<div class="pattern"></div>
-		</div>
-	</button>
-</div>
-
-<style>
-	.container {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-		perspective: 100vh;
-	}
-
-	.card {
-		position: relative;
-		aspect-ratio: 2.5 / 3.5;
-		font-size: min(1vh, 0.25rem);
-		height: 80em;
-		background: var(--bg-1);
-		border-radius: 2em;
-		transform: rotateY(180deg);
-		transition: transform 0.4s;
-		transform-style: preserve-3d;
-		padding: 0;
-		user-select: none;
-		cursor: pointer;
-	}
-
-	.card.flipped {
-		transform: rotateY(0);
-	}
-
-	.front, .back {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		backface-visibility: hidden;
-		border-radius: 2em;
-		border: 1px solid var(--fg-2);
-		box-sizing: border-box;
-		padding: 2em;
-	}
-
-	.front {
-		background: url(http://github.com/svelte-logo.svg) no-repeat 5em 5em, url(http://github.com/svelte-logo.svg) no-repeat calc(100% - 5em) calc(100% - 5em);
-		background-size: 8em 8em, 8em 8em;
-	}
-
-	.back {
-		transform: rotateY(180deg);
-	}
-
-	.symbol {
-		font-size: 30em;
-		color: var(--fg-1);
-	}
-
-	.pattern {
-		width: 100%;
-		height: 100%;
-		background-color: var(--bg-2);
-		/* pattern from https://projects.verou.me/css3patterns/#marrakesh */
-		background-image:
-		radial-gradient(var(--bg-3) 0.9em, transparent 1em),
-		repeating-radial-gradient(var(--bg-3) 0, var(--bg-3) 0.4em, transparent 0.5em, transparent 2em, var(--bg-3) 2.1em, var(--bg-3) 2.5em, transparent 2.6em, transparent 5em);
-		background-size: 3em 3em, 9em 9em;
-		background-position: 0 0;
-		border-radius: 1em;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
deleted file mode 100644
index 4852f1d176..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Shorthand class directive
----
-
-Often, the name of the class will be the same as the name of the value it depends on:
-
-```svelte
-<button
-	class="card"
-	class:flipped={flipped}
-	onclick={() => flipped = !flipped}
->
-```
-
-In those cases we can use a shorthand form:
-
-```svelte
-/// file: App.svelte
-<button
-	class="card"
-	+++class:flipped+++
-	onclick={() => flipped = !flipped}
->
-```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/Box.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/Box.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
index bb9e235320..c0decfa0bb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
index 2845e2fd22..d80df80e23 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					bind:checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
index b5efd3ea20..3d9d41ec05 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
@@ -7,7 +7,7 @@ You can bind to properties inside an `each` block.
 ```svelte
 /// file: App.svelte
 {#each todos as todo}
-	<li class:done={todo.done}>
+	<li class={{ done: todo.done }}>
 		<input
 			type="checkbox"
 			+++bind:+++checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
index e556a56646..9d44e7144f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
index 47ba2148a5..1a8e910919 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
index 8ae0e5cd6c..1023927307 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
@@ -8,7 +8,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 
 ```svelte
 /// file: AudioPlayer.svelte
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 +++	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
index bee5ab9dc2..dfb54f127e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -5,7 +5,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 		>
 			<label>
 				<input type="checkbox" bind:checked={todo.done}/>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
index 6639712f63..ed353a8fa3 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -7,7 +7,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 		>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
index c5fc3d8d30..b4febee21b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
@@ -24,7 +24,7 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	+++in:receive={{ key: todo.id }}+++
 	+++out:send={{ key: todo.id }}+++
 >
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
index e213d2717c..2f70529ddb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -8,7 +8,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 			animate:flip={{ duration: 200 }}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
index 8e6d78fd75..3a5ce32ebb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
index 8585df6463..00d0c63ff9 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
@@ -8,7 +8,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
index 5bd3e3cbd8..43be26bf0a 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
@@ -11,7 +11,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
index 47ba2148a5..1a8e910919 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
index fb06db4d32..c3239748af 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
index 30bdad76f8..0407b34137 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -23,7 +23,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
index ca58b19403..721ee9f09c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
index 5de935c96f..97e9750fc5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
@@ -9,7 +9,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
index f12a97415b..a08174e5d6 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>
@@ -21,4 +21,4 @@
 	nav.has-color a {
 		color: white;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
index 45d876bb40..4db65194be 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
index b4c2473686..834bf19f41 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
@@ -20,7 +20,7 @@ We can now use the `component` returned from these `load` functions like any oth
 ```svelte
 /// file: src/routes/+layout.svelte
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="http://github.com/">home</a>

From e567c6c59bd3d7943219b16389f0674506e8a266 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Dec 2024 11:12:41 -0500
Subject: [PATCH 265/453] day 24 (#1068)

---
 .../content/blog/2024-12-01-advent-of-svelte.md      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index 99b0b752ae..b84dc9c0d5 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -190,6 +190,14 @@ We've added a 'download app' option to the toolbox in the playground — selecti
 
 - [playground](/playground)
 
-## Day 24
+## Day 24: clsx built in
 
-Coming soon!
+Svelte now uses [clsx](https://github.com/lukeed/clsx) to parse `class` attributes, meaning you can use objects and arrays to conditionally add and remove classes. It's much more powerful and flexible than the `class:` directive, and — since this is Svelte — you still get dead code elimination of unused CSS. This feature is particularly useful for all you Tailwind-heads.
+
+- [docs](/docs/svelte/class)
+- [tutorial](/tutorial/svelte/classes)
+- [demo](/playground/61450f09983046efb18273d5c94db7b4?version=5.16.0)
+
+---
+
+And that's a wrap! Thanks for following along, everyone, and Merry Christmas to all who celebrate.

From 3afb34759d85adf10b4aba0ea7aa1e0c0eca4fc3 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani@equall.ai>
Date: Wed, 1 Jan 2025 05:08:43 -0700
Subject: [PATCH 266/453] docs: "What's new in Svelte" January newsletter
 (#1059)

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
Co-authored-by: Dani Sandoval <dani@equall.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 ...-01-01-whats-new-in-svelte-january-2025.md | 106 ++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md
new file mode 100644
index 0000000000..7ef10cb23b
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md
@@ -0,0 +1,106 @@
+---
+title: "What's new in Svelte: January 2025"
+description: 'Svelte 5 just keeps getting better. Plus, an in-person Svelte Summit!'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the _10th Svelte Summit_! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th.
+
+Now let's get to the news 👀
+
+## What's new in Svelte
+
+- Snippets can now be exported from module scripts (**5.5.0**, [Docs](/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315))
+- `defaultValue` and `defaultChecked` are now supported for inputs (**5.6.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked), [#14289](https://github.com/sveltejs/svelte/pull/14289))
+- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691))
+- A new "worker" exports condition helps better support bundling for worker-based environments (**5.15.0**, [#14779](https://github.com/sveltejs/svelte/pull/14779))
+- The `class` attribute can now be an object or array, using `clsx` (**5.16.0**, [Docs](https://svelte.dev/docs/svelte/class#Attributes-Objects-and-arrays), [#14714](https://github.com/sveltejs/svelte/pull/14714))
+
+_New/Updated Syntax_
+
+- `<svelte:boundary>` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211))
+- #each is now supported without `as` (**5.4.0**, [Docs](/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396))
+- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519))
+- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540))
+- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](</docs/svelte/$inspect#$inspect.trace()>), [#14290](https://github.com/sveltejs/svelte/pull/14290))
+
+_Reactivity APIs_
+
+- `createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422))
+- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422))
+- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307))
+- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660))
+
+## What's new in SvelteKit, Svelte CLI and Language Tools
+
+- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103))
+- The new [`transport`](https://svelte.dev/docs/kit/@sveltejs-kit#Transport) hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149))
+- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140))
+- `bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193))
+- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346))
+- The language tools extensions will now make use of loose Svelte parser and provide better intellisense (**109.4.0**, [#2631](https://github.com/sveltejs/language-tools/pull/2631))
+
+_Adapter Updates_
+
+- `adapter-auto` has added support for the bun language server (**3.3.0**, [#12854](https://github.com/sveltejs/kit/pull/12854))
+- `adapter-cloudflare-workers` now supports `wrangler.json` config files (**2.7.0**, [#13151](https://github.com/sveltejs/kit/pull/13151))
+- `adapter-cloudflare` will now generate an `.assetsignore` file for use with Cloudflare Workers Static Assets (**4.9.0**, [#13109](https://github.com/sveltejs/kit/pull/13109))
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Tokeko](https://tokeko.specy.app/) is an educational platform designed to help users understand and learn about different types of parsers, grammar structures, and parsing techniques
+- [QuickFlags](https://flags.isaxk.com/) is a fast paced, simple, flag knowledge game
+- [Hotspotter](https://github.com/BastiDood/hotspotter) is an incentivized crowdsensing system that collects, maps, and visualizes WiFi and cellular data to pinpoint hotspots and dead zones for the effective visualization of network coverage
+- [Writastic](https://writastic.com/) is an AI social media writing assistant to optimize your content with the best strategies of successful creators
+- [Walle](https://www.wallestudio.com/) is a macOS chatbot app that lets you interact with Claude, GPT, and Gemini simultaneously
+- [Fli.so](https://fli.so/) is a free, modern open-source link shortener
+- [VRDB](https://vrdb.app/) is a comprehensive database for Meta Quest Store, App Lab, and VR games
+- [sv-resize-image](https://github.com/ssebastianoo/sv-resize-image) resizes images using just the browser
+- [WickGPT](https://github.com/stormyzio/wickgpt) is an online tool to generate fake clips of chatGPT responses
+- [other.supply](https://other.supply/) is a virtual vinyl shop that simulates the record-flipping experience
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Svelte at Bloomberg (feat Julian Burgess)](https://www.svelteradio.com/episodes/svelte-at-bloomberg) and [Scott Tolinski on Svelte 5 Local First Development](https://www.svelteradio.com/episodes/scott-tolinski-on-svelte-5-local-first-development) by Svelte Radio
+- [Rich Harris' North Star](https://www.youtube.com/watch?v=UegUi2fWBaU) at JSNation US 2024
+- [Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot](https://www.youtube.com/watch?v=tprMklFzy44) by Stanislav Khromov
+- [Svelte 5 Is Here!](https://www.youtube.com/watch?v=t6-znHs8DDM) and [View Transitions Are More Powerful Than You Think](https://www.youtube.com/watch?v=jnYjIDKyKHw) by Syntax
+
+_This Week in Svelte_
+
+- [Ep. 86](https://www.youtube.com/watch?v=VTFAFqd51Fg) — Tabs component
+- [Ep. 87](https://www.youtube.com/watch?v=TIaUCw4wKio) — GPU rendered components with svader
+- [Ep. 88](https://www.youtube.com/watch?v=jFyMMu44t-s) — Live coding local storage
+
+_To Read_
+
+- [Building accessible sites with SvelteKit: seven practical tips](https://blog.datawrapper.de/sveltekit-accessibility-tips/) by Antonio Sarcevic
+- [How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data](https://blog.yuki-dev.com/blogs/d2_e1zwgn3_o) by Yuki Ishii
+- [Svelte Job's Svelte Salaries Report](https://sveltejobs.com/svelte-salaries) shows average and median salaries across remote, non-remote positions, locations, and seniority levels
+
+_To Watch_
+
+- [Build & Launch a Svelte Website in Just 15 Minutes!](https://www.youtube.com/watch?v=m9fsj5zXyDY) by NAD LABS
+- [The Magic of Svelte](https://www.youtube.com/watch?v=AKZtk0suBTE) by Jürg Hunziker, Vendure Conf 2024
+
+### Libraries, Tools & Components
+
+- [The Svelte docs](https://svelte.dev/content.json) are now available in an LLM-friendly format (shout out to Stanislav Khromov for [svelte-llm](https://svelte-llm.khromov.se/))
+- [svelte-mainloop](https://github.com/retrotheft/svelte-mainloop) is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component ([Reddit](https://www.reddit.com/r/sveltejs/comments/1hfto6y/sveltemainloop_the_easiest_way_to_add_a_loop_to/))
+- [bsky-comments-svelte](https://github.com/nsarrazin/bsky-comments-svelte/) is a simple customizable component to add comments to your website using Bluesky
+- [Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit
+- [svelte-firebase-state](https://github.com/pierregoutheraud/svelte-firebase-state) simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data
+- [monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components
+- [svelte-audio-waveform](https://github.com/Catsvilles/svelte-audio-waveform) transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more
+- [Svader](https://github.com/sockmaster27/svader) creates GPU-rendered Svelte components with WebGL and WebGPU fragment shaders
+
+That's it for this huge month in Svelte! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Happy new year! 🥳

From 414fba4836625804a6eb0e33467289c6facfce4f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 6 Jan 2025 09:50:29 -0500
Subject: [PATCH 267/453] Sync `kit` docs (#1070)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/kit/20-core-concepts/40-page-options.md  | 4 +++-
 .../content/docs/kit/40-best-practices/07-images.md       | 2 +-
 .../content/docs/kit/98-reference/20-$app-navigation.md   | 2 +-
 .../content/docs/kit/98-reference/20-$app-state.md        | 8 ++++----
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
index 4f869bbda3..055c7cfe84 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -7,7 +7,7 @@ By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any co
 
 You can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
 
-You can mix and match these options in different areas of your app. For example you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile.
+You can mix and match these options in different areas of your app. For example, you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile.
 
 ## prerender
 
@@ -128,6 +128,8 @@ export const ssr = false;
 
 If you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.
 
+> [!NOTE] Even with `ssr` set to `false`, code that relies on browser APIs should be imported in your `+page.svelte` or `+layout.svelte` file instead. This is because page options can be overriden and need to be evaluated by importing your `+page.js` or `+layout.js` file on the server (if you have a runtime) or at build time (in case of prerendering).
+
 ## csr
 
 Ordinarily, SvelteKit [hydrates](glossary#Hydration) your server-rendered HTML into an interactive client-side-rendered (CSR) page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can disable CSR:
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index ee357ef099..750470cb1f 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -159,7 +159,7 @@ CDNs can generally be used without any need for a library. However, there are a
 - Consider serving all images via CDN regardless of the image optimization types you use. CDNs reduce latency by distributing copies of static assets globally.
 - Your original images should have a good quality/resolution and should have 2x the width it will be displayed at to serve HiDPI devices. Image processing can size images down to save bandwidth when serving smaller screens, but it would be a waste of bandwidth to invent pixels to size images up.
 - For images which are much larger than the width of a mobile device (roughly 400px), such as a hero image taking the width of the page design, specify `sizes` so that smaller images can be served on smaller devices.
-- For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority="high" loading="eager"` to prioritize loading as early as possible.
+- For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority="high"` and avoid `loading="lazy"` to prioritize loading as early as possible.
 - Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you.
 - Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this.
 - Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes="(min-width: 768px) min(100vw, 108rem), 64rem"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index f7dad8742d..53d80b9c38 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -24,7 +24,7 @@ import {
 
 ## afterNavigate
 
-A lifecycle function that runs the supplied `callback` when the current component mounts, and also whenever we navigate to a new URL.
+A lifecycle function that runs the supplied `callback` when the current component mounts, and also whenever we navigate to a URL.
 
 `afterNavigate` must be called during a component initialization. It remains active as long as the component is mounted.
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
index 31ce1793c7..6dba39add8 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: $app/state
 ---
 
-SvelteKit makes three readonly state objects available via the `$app/state` module — `page`, `navigating` and `updated`.
+SvelteKit makes three read-only state objects available via the `$app/state` module — `page`, `navigating` and `updated`.
 
 > [!NOTE]
 > This module was added in 2.12. If you're using an earlier version of SvelteKit, use [`$app/stores`]($app-stores) instead.
@@ -17,7 +17,7 @@ import { navigating, page, updated } from '$app/state';
 
 ## navigating
 
-An object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+A read-only object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
 Values are `null` when no navigation is occurring, or during server rendering.
 
 <div class="ts-block">
@@ -41,7 +41,7 @@ const navigating:
 
 ## page
 
-A reactive object with information about the current page, serving several use cases:
+A read-only reactive object with information about the current page, serving several use cases:
 - retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](/docs/kit/load))
 - retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](/docs/kit/form-actions))
 - retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](/docs/kit/$app-navigation#goto) and [shallow routing](/docs/kit/shallow-routing))
@@ -76,7 +76,7 @@ const page: import('@sveltejs/kit').Page;
 
 ## updated
 
-A reactive value that's initially `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
+A read-only reactive value that's initially `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
 
 <div class="ts-block">
 

From 83e7d2d0082750be540b462fa7f6f8b53a275d7b Mon Sep 17 00:00:00 2001
From: Pascal Schuster <ThePaSch@users.noreply.github.com>
Date: Mon, 6 Jan 2025 15:57:40 +0100
Subject: [PATCH 268/453] fix: added Svelte version check to runes widget in
 Playground (#1072)

add pre-v5 runes notice

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/repl/src/lib/Input/RunesInfo.svelte | 10 ++++++++--
 packages/repl/src/lib/Repl.svelte            |  3 ++-
 packages/repl/src/lib/types.d.ts             |  1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index c9477cd6c3..5beb4cd3a3 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -4,7 +4,8 @@
 
 	let { runes }: { runes: boolean } = $props();
 
-	const { workspace } = get_repl_context();
+	const { workspace, svelteVersion } = get_repl_context();
+	const majorVersion = Number(svelteVersion.split(".")[0]);
 </script>
 
 <Dropdown align="right">
@@ -16,7 +17,12 @@
 
 	{#snippet dropdown()}
 		<div class="popup">
-			{#if workspace.current.name.endsWith('.svelte.js')}
+			{#if Number.isInteger(majorVersion) && majorVersion < 5}
+				<p>
+					<a href="http://github.com/blog/runes">Runes</a> are available from Svelte 5 onwards, and this playground is
+					using Svelte {svelteVersion}.
+				</p>
+			{:else if workspace.current.name.endsWith('.svelte.js')}
 				<p>
 					Files with a <code>.svelte.js</code> extension are always in
 					<a href="http://github.com/blog/runes">runes mode</a>.
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 41e4e786a3..26da2bd72e 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -87,7 +87,8 @@
 	set_repl_context({
 		bundle,
 		toggleable,
-		workspace
+		workspace,
+		svelteVersion
 	});
 
 	let current_token: Symbol;
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index 4489ef6b43..665293c6d5 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -47,4 +47,5 @@ export type ReplContext = {
 	bundle: Writable<ReplState['bundle']>;
 	toggleable: Writable<ReplState['toggleable']>;
 	workspace: Workspace;
+	svelteVersion: string;
 };

From ced06c357c99d113906ec8fdd57e27f304767589 Mon Sep 17 00:00:00 2001
From: Niko <nikoniko.proxy@gmail.com>
Date: Mon, 6 Jan 2025 18:38:48 +0100
Subject: [PATCH 269/453] fix: Add missing {@render children()} in tutorial
 (#1073)

Add missing {@render children()}
---
 .../04-advanced-routing/04-route-groups/index.md                | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
index 9f8644de81..76dcdc2243 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md
@@ -31,6 +31,8 @@ We can also add some UI to these two routes by adding a `src/routes/(authed)/+la
 	let { children } = $props();
 </script>
 
+{@render children()}
+
 <form method="POST" action="http://github.com/logout">
 	<button>log out</button>
 </form>

From 30648d0c8f6c5ef7e084a6b6db233a26ce76eb9e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 17:40:10 +0000
Subject: [PATCH 270/453] respect system theme, without FOUC (#1087)

* respect system theme, without FOUC

* fix

* drive-by fix
---
 apps/svelte.dev/src/app.html                  |  5 ---
 .../(authed)/playground/[id]/+page.svelte     |  4 +-
 .../playground/[id]/embed/+page.svelte        |  4 +-
 .../routes/tutorial/[...slug]/Output.svelte   | 27 ++++++-------
 .../tutorial/[...slug]/OutputRollup.svelte    |  4 +-
 packages/repl/src/lib/Input/RunesInfo.svelte  |  6 +--
 packages/site-kit/package.json                |  3 ++
 .../src/lib/components/ThemeToggle.svelte     | 36 ++++++++++-------
 .../src/lib/state/Persisted.svelte.ts         | 39 +++++++++++++++++++
 packages/site-kit/src/lib/state/index.ts      |  2 +
 .../site-kit/src/lib/state/theme.svelte.ts    | 18 +++++++++
 packages/site-kit/src/lib/stores/index.ts     |  1 -
 packages/site-kit/src/lib/stores/theme.ts     | 23 -----------
 13 files changed, 104 insertions(+), 68 deletions(-)
 create mode 100644 packages/site-kit/src/lib/state/Persisted.svelte.ts
 create mode 100644 packages/site-kit/src/lib/state/index.ts
 create mode 100644 packages/site-kit/src/lib/state/theme.svelte.ts
 delete mode 100644 packages/site-kit/src/lib/stores/theme.ts

diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index e1e9679e3e..8b6aba5fea 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -19,11 +19,6 @@
 		/>
 
 		<script>
-			document.documentElement.classList.add(
-				JSON.parse(localStorage.getItem('svelte:theme'))?.current ??
-					(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-			);
-
 			document.documentElement.classList.add(
 				`font-${localStorage.getItem('svelte:font') ?? 'elegant'}`
 			);
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 51f0c2b51a..7976235f1b 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -5,7 +5,7 @@
 	import { afterNavigate, goto, replaceState } from '$app/navigation';
 	import type { Gist } from '$lib/db/types';
 	import { Repl } from '@sveltejs/repl';
-	import { theme } from '@sveltejs/site-kit/stores';
+	import { theme } from '@sveltejs/site-kit/state';
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
@@ -240,7 +240,7 @@
 				injectedJS={mapbox_setup}
 				{onchange}
 				{download}
-				previewTheme={$theme.current}
+				previewTheme={theme.current}
 			/>
 		</div>
 	{/if}
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 4bc1be3e77..346f2381ac 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { afterNavigate, replaceState } from '$app/navigation';
-	import { theme } from '@sveltejs/site-kit/stores';
+	import { theme } from '@sveltejs/site-kit/state';
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
@@ -50,7 +50,7 @@
 			{relaxed}
 			can_escape
 			injectedJS={mapbox_setup}
-			previewTheme={$theme.current}
+			previewTheme={theme.current}
 			embedded
 		/>
 	{/if}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index 872b901123..f9fccd8e60 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
 	import { browser, dev } from '$app/environment';
 	import { afterNavigate } from '$app/navigation';
-	import { theme, type Theme } from '@sveltejs/site-kit/stores';
+	import { theme } from '@sveltejs/site-kit/state';
 	import { onMount } from 'svelte';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
@@ -43,18 +43,6 @@
 		clearTimeout(timeout);
 	});
 
-	function change_theme(theme: Theme) {
-		if (!iframe) return;
-
-		try {
-			const url = new URL(iframe.src);
-
-			url.searchParams.set('theme', theme.current);
-
-			iframe.src = url.href;
-		} catch {}
-	}
-
 	let timeout: any;
 
 	async function handle_message(e: MessageEvent) {
@@ -97,7 +85,7 @@
 		parentNode?.removeChild(iframe);
 
 		const url = new URL(src);
-		url.searchParams.set('theme', $theme.current);
+		url.searchParams.set('theme', theme.current);
 
 		iframe.src = url.href;
 		parentNode?.appendChild(iframe);
@@ -112,8 +100,17 @@
 	$effect(() => {
 		if (adapter_state.base) set_iframe_src(adapter_state.base + (path = exercise.path));
 	});
+
 	$effect(() => {
-		change_theme($theme);
+		if (!iframe) return;
+
+		try {
+			const url = new URL(iframe.src);
+
+			url.searchParams.set('theme', theme.current);
+
+			iframe.src = url.href;
+		} catch {}
 	});
 </script>
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 345cb39d9a..71992c3d0a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -4,7 +4,7 @@
 	import Viewer from '@sveltejs/repl/viewer';
 	// @ts-expect-error TODO types
 	import Console, { type Log } from '@sveltejs/repl/console';
-	import { theme } from '@sveltejs/site-kit/stores';
+	import { theme } from '@sveltejs/site-kit/state';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { adapter_state, update } from './adapter.svelte';
@@ -37,7 +37,7 @@
 			can_escape
 			onLog={(l: Log[]) => (logs = l)}
 			{bundle}
-			theme={$theme.current}
+			theme={theme.current}
 			injectedCSS="@import 'http://github.com/tutorial/shared.css';"
 		/>
 	{/if}
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 5beb4cd3a3..d6728b5abe 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -5,7 +5,7 @@
 	let { runes }: { runes: boolean } = $props();
 
 	const { workspace, svelteVersion } = get_repl_context();
-	const majorVersion = Number(svelteVersion.split(".")[0]);
+	const majorVersion = Number(svelteVersion.split('.')[0]);
 </script>
 
 <Dropdown align="right">
@@ -19,8 +19,8 @@
 		<div class="popup">
 			{#if Number.isInteger(majorVersion) && majorVersion < 5}
 				<p>
-					<a href="http://github.com/blog/runes">Runes</a> are available from Svelte 5 onwards, and this playground is
-					using Svelte {svelteVersion}.
+					<a href="http://github.com/blog/runes">Runes</a> are available from Svelte 5 onwards, and this playground
+					is using Svelte {svelteVersion}.
 				</p>
 			{:else if workspace.current.name.endsWith('.svelte.js')}
 				<p>
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index fcf674226e..a57d77fd98 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -73,6 +73,9 @@
 		"./actions": {
 			"default": "./src/lib/actions/index.ts"
 		},
+		"./state": {
+			"default": "./src/lib/state/index.ts"
+		},
 		"./stores": {
 			"default": "./src/lib/stores/index.ts"
 		},
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 5e93614caf..8135b48cac 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -1,31 +1,37 @@
 <script lang="ts">
-	import { on } from 'svelte/events';
-	import { theme } from '../stores';
+	import { theme } from '../state';
 
 	function toggle() {
-		const next = $theme.current === 'light' ? 'dark' : 'light';
-		const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-
-		$theme.preference = next === system ? 'system' : next;
-		$theme.current = next;
+		theme.current = theme.current === 'light' ? 'dark' : 'light';
 	}
 
 	$effect(() => {
-		if ($theme.preference === 'system') {
-			const query = window.matchMedia('(prefers-color-scheme: dark)');
-
-			return on(query, 'change', (e) => {
-				$theme.current = e.matches ? 'dark' : 'light';
-			});
-		}
+		document.documentElement.classList.remove('light', 'dark');
+		document.documentElement.classList.add(theme.current);
 	});
 </script>
 
+<svelte:head>
+	<script>
+		{
+			const theme = localStorage.getItem('sv:theme');
+
+			document.documentElement.classList.add(
+				theme === 'system'
+					? window.matchMedia('(prefers-color-scheme: dark)').matches
+						? 'dark'
+						: 'light'
+					: theme
+			);
+		}
+	</script>
+</svelte:head>
+
 <button
 	onclick={toggle}
 	class="raised icon"
 	type="button"
-	aria-pressed={$theme.current === 'dark'}
+	aria-pressed={theme.current === 'dark'}
 	aria-label="Toggle dark mode"
 ></button>
 
diff --git a/packages/site-kit/src/lib/state/Persisted.svelte.ts b/packages/site-kit/src/lib/state/Persisted.svelte.ts
new file mode 100644
index 0000000000..6f6147d34c
--- /dev/null
+++ b/packages/site-kit/src/lib/state/Persisted.svelte.ts
@@ -0,0 +1,39 @@
+import { on } from 'svelte/events';
+import { createSubscriber } from 'svelte/reactivity';
+
+export class Persisted<T extends string = string> {
+	#key: string;
+	#storage: Storage | undefined;
+	#fallback: T;
+	#version = $state(0);
+
+	#subscribe = createSubscriber((update) => {
+		return on(window, 'storage', (e) => {
+			if (e.key === this.#key) {
+				update();
+			}
+		});
+	});
+
+	constructor(
+		key: string,
+		fallback: T,
+		storage = typeof localStorage === 'undefined' ? undefined : localStorage
+	) {
+		this.#key = key;
+		this.#fallback = fallback;
+		this.#storage = storage;
+	}
+
+	get current() {
+		this.#subscribe(); // handle cross-tab updates
+		this.#version; // handle same-tab updates
+
+		return (this.#storage?.getItem(this.#key) as T) ?? this.#fallback;
+	}
+
+	set current(v: T) {
+		this.#storage?.setItem(this.#key, v);
+		this.#version += 1;
+	}
+}
diff --git a/packages/site-kit/src/lib/state/index.ts b/packages/site-kit/src/lib/state/index.ts
new file mode 100644
index 0000000000..ce3d5469ba
--- /dev/null
+++ b/packages/site-kit/src/lib/state/index.ts
@@ -0,0 +1,2 @@
+export { Persisted } from './Persisted.svelte';
+export { theme } from './theme.svelte';
diff --git a/packages/site-kit/src/lib/state/theme.svelte.ts b/packages/site-kit/src/lib/state/theme.svelte.ts
new file mode 100644
index 0000000000..729c2c2622
--- /dev/null
+++ b/packages/site-kit/src/lib/state/theme.svelte.ts
@@ -0,0 +1,18 @@
+import { MediaQuery } from 'svelte/reactivity';
+import { Persisted } from './Persisted.svelte';
+
+class Theme {
+	#preference = new Persisted<'system' | 'light' | 'dark'>('sv:theme', 'system');
+	#query = new MediaQuery('prefers-color-scheme: dark');
+	#system = $derived<'dark' | 'light'>(this.#query.current ? 'dark' : 'light');
+
+	get current() {
+		return this.#preference.current === 'system' ? this.#system : this.#preference.current;
+	}
+
+	set current(value: 'light' | 'dark') {
+		this.#preference.current = value === this.#system ? 'system' : value;
+	}
+}
+
+export const theme = new Theme();
diff --git a/packages/site-kit/src/lib/stores/index.ts b/packages/site-kit/src/lib/stores/index.ts
index 1fbecf60fe..39f05a77e0 100644
--- a/packages/site-kit/src/lib/stores/index.ts
+++ b/packages/site-kit/src/lib/stores/index.ts
@@ -2,4 +2,3 @@ export { mql } from './mql';
 export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav';
 export { reduced_motion } from './reduced-motion';
 export { search_query, search_recent, searching } from './search';
-export { theme, type Theme } from './theme';
diff --git a/packages/site-kit/src/lib/stores/theme.ts b/packages/site-kit/src/lib/stores/theme.ts
deleted file mode 100644
index 1b58f4e93d..0000000000
--- a/packages/site-kit/src/lib/stores/theme.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { BROWSER } from 'esm-env';
-import { persisted } from 'svelte-persisted-store';
-
-export interface Theme {
-	preference: 'light' | 'dark' | 'system';
-	current: 'light' | 'dark';
-}
-
-export const theme = persisted<Theme>('svelte:theme', {
-	preference: 'system',
-	current: BROWSER
-		? window.matchMedia('(prefers-color-scheme: dark)').matches
-			? 'dark'
-			: 'light'
-		: 'light'
-});
-
-theme.subscribe(($theme) => {
-	if (!BROWSER) return;
-
-	document.documentElement.classList.remove('light', 'dark');
-	document.documentElement.classList.add($theme.current);
-});

From 13a0f50ee8eab971e48d7821047b4ee550d0f2f1 Mon Sep 17 00:00:00 2001
From: Nikolai <107432990+nikolaiborbe@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:30:53 +0100
Subject: [PATCH 271/453] fix: Improve the readability of 05-keyed-each-blocks
 in tutorial (#1071)

* improve redability

* Update apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .../tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
index 2df9594247..a02e764d26 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
@@ -13,7 +13,7 @@ Click the 'Remove first thing' button a few times, and notice what happens:
 
 > [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
 
-One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `<Thing>` component altogether than to remove the _last_ one and update all the others.
+One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `<Thing>` component altogether rather than remove the _last_ one and update all the others.
 
 To do that, we specify a unique _key_ for each iteration of the `each` block:
 

From aa189881477f104c4be9801797dc1a7922106442 Mon Sep 17 00:00:00 2001
From: jsafarik <46523434+jsafarik@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:51:48 +0100
Subject: [PATCH 272/453] feat: change RSS feed pubDate and items order (#1077)

* feat: render day of week in RSS pubDate

* feat: sort rss feed by date desc

* Apply suggestions from code review

* simplify

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/src/routes/blog/rss.xml/+server.js | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
index b99e9981b6..d1fa7f53c0 100644
--- a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
+++ b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
@@ -3,14 +3,6 @@ import { render_content } from '$lib/server/renderer';
 
 export const prerender = true;
 
-const months = ',Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',');
-
-/** @param {string} str */
-function formatPubdate(str) {
-	const [y, m, d] = str.split('-');
-	return `${d} ${months[+m]} ${y} 12:00 +0000`;
-}
-
 /** @param {string} html */
 function escapeHTML(html) {
 	/** @type {{ [key: string]: string }} */
@@ -30,6 +22,7 @@ const get_rss = async (posts) => {
 	const renderedPosts = await Promise.all(
 		posts
 			.filter((post) => !post.metadata.draft)
+			.reverse()
 			.map(
 				async (post) => `
 		<item>
@@ -37,7 +30,7 @@ const get_rss = async (posts) => {
 			<link>https://svelte.dev/${post.slug}</link>
 			<author>${escapeHTML(post.metadata.author)}</author>
 			<description>${escapeHTML(await render_content(post.file, post.body))}</description>
-			<pubDate>${formatPubdate(/** @type {string} */ (post.file.split('/').pop()).slice(0, 10))}</pubDate>
+			<pubDate>${new Date(/** @type {string} */ (post.file.split('/').pop()).slice(0, 10)).toUTCString()}</pubDate>
 		</item>
 	`
 			)

From 375fa3b63a7c5f3ec095f0bab74c60e01b1ff3f0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 18:52:08 +0000
Subject: [PATCH 273/453] remove svelte-persisted-store (#1088)

* use Persisted for details blocks

* another

* another

* another

* remove svelte-persisted-store
---
 packages/site-kit/package.json                |  3 +-
 .../src/lib/actions/legacy-details.ts         |  9 ++-
 .../site-kit/src/lib/components/Banner.svelte | 12 ++--
 .../site-kit/src/lib/components/Text.svelte   |  6 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  7 ++-
 .../site-kit/src/lib/search/Search.svelte     | 10 ++--
 .../site-kit/src/lib/search/SearchBox.svelte  | 55 ++++++++++---------
 .../site-kit/src/lib/state/code_preference.ts |  6 ++
 .../site-kit/src/lib/state/search.svelte.ts   | 17 ++++++
 packages/site-kit/src/lib/stores/index.ts     |  1 -
 .../site-kit/src/lib/stores/prefers_ts.ts     |  3 -
 packages/site-kit/src/lib/stores/search.ts    |  6 --
 pnpm-lock.yaml                                | 13 -----
 13 files changed, 76 insertions(+), 72 deletions(-)
 create mode 100644 packages/site-kit/src/lib/state/code_preference.ts
 create mode 100644 packages/site-kit/src/lib/state/search.svelte.ts
 delete mode 100644 packages/site-kit/src/lib/stores/prefers_ts.ts
 delete mode 100644 packages/site-kit/src/lib/stores/search.ts

diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index a57d77fd98..d944365e11 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -42,8 +42,7 @@
 		"@shikijs/twoslash": "^1.22.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
-		"shiki": "^1.22.0",
-		"svelte-persisted-store": "^0.9.2"
+		"shiki": "^1.22.0"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.12.1",
diff --git a/packages/site-kit/src/lib/actions/legacy-details.ts b/packages/site-kit/src/lib/actions/legacy-details.ts
index c6c6270820..29ed5de516 100644
--- a/packages/site-kit/src/lib/actions/legacy-details.ts
+++ b/packages/site-kit/src/lib/actions/legacy-details.ts
@@ -1,9 +1,8 @@
 import { page } from '$app/stores';
-import { persisted } from 'svelte-persisted-store';
-import { get } from 'svelte/store';
 import { fix_position } from './utils';
+import { Persisted } from '../state';
 
-const show_legacy = persisted('svelte:show-legacy', true);
+const show_legacy = new Persisted<'open' | 'closed'>('sv:show-legacy', 'open');
 
 export function legacy_details(node: HTMLElement) {
 	function update() {
@@ -16,7 +15,7 @@ export function legacy_details(node: HTMLElement) {
 		}
 
 		const details = node.querySelectorAll('details.legacy') as NodeListOf<HTMLDetailsElement>;
-		const show = get(show_legacy);
+		const show = show_legacy.current === 'open';
 
 		/** Whether the toggle was initiated by user action or `element.open = !element.open` */
 		let secondary = false;
@@ -29,7 +28,7 @@ export function legacy_details(node: HTMLElement) {
 				if (secondary) return;
 				secondary = true;
 
-				show_legacy.set(detail.open);
+				show_legacy.current = detail.open ? 'open' : 'closed';
 
 				fix_position(detail, () => {
 					for (const other of details) {
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index 6e210b8761..d3b3f928b0 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { quintOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
-	import { persisted } from 'svelte-persisted-store';
 	import Icon from './Icon.svelte';
 	import type { BannerData } from '../types';
 	import { browser } from '$app/environment';
+	import { Persisted } from '../state';
 
 	let { banner }: { banner: BannerData } = $props();
 
-	const hidden = persisted<Record<string, boolean>>('svelte:hidden-banners', {});
+	const persisted = new Persisted<string>('sv:hidden-banners', '{}');
+	const hidden = $derived(JSON.parse(persisted.current));
 	const time = +new Date();
 
 	let visible = $derived(
-		browser && !$hidden[banner.id] && time > +banner.start && time < +banner.end
+		browser && !hidden[banner.id] && time > +banner.start && time < +banner.end
 	);
 
 	$effect(() => {
@@ -40,7 +41,10 @@
 			aria-label="Dismiss"
 			class="raised primary"
 			onclick={() => {
-				$hidden[banner.id] = true;
+				persisted.current = JSON.stringify({
+					...hidden,
+					[banner.id]: true
+				});
 			}}
 		>
 			<Icon name="close" />
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 9e58b9dd62..0ada4e8bda 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import type { Snippet } from 'svelte';
-	import { prefers_ts } from '../stores/prefers_ts';
+	import { code_preference } from '../state/code_preference';
 	import { fix_position } from '../actions/utils';
 
 	let { children }: { children: Snippet } = $props();
@@ -14,14 +14,14 @@
 		const inputs = container.querySelectorAll('.ts-toggle') as NodeListOf<HTMLInputElement>;
 
 		for (const input of inputs) {
-			input.checked = $prefers_ts;
+			input.checked = code_preference.current === 'typescript';
 		}
 	}
 
 	function toggle(e: Event) {
 		if ((e.target as HTMLElement).classList.contains('ts-toggle')) {
 			const input = e.target as HTMLInputElement;
-			$prefers_ts = input.checked;
+			code_preference.current = input.checked ? 'typescript' : 'javascript';
 			fix_position(input, update);
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 17485f1c29..c20e2d85d4 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -3,7 +3,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 -->
 
 <script lang="ts">
-	import { overlay_open, searching, on_this_page_open } from '../stores';
+	import { overlay_open, on_this_page_open } from '../stores';
+	import { search } from '../state/search.svelte';
 	import Icon from '../components/Icon.svelte';
 	import { page } from '$app/stores';
 	import ThemeToggle from '../components/ThemeToggle.svelte';
@@ -67,7 +68,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 <nav
 	class:visible
-	style:z-index={$overlay_open && ($searching || $on_this_page_open) ? 80 : null}
+	style:z-index={$overlay_open && (search.active || $on_this_page_open) ? 80 : null}
 	aria-label="Primary"
 >
 	<a class="home-link" href="http://github.com/" title={home_title} aria-label="Svelte"></a>
@@ -145,7 +146,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			aria-label="Search"
 			class="raised icon search"
 			onclick={() => {
-				$searching = true;
+				search.active = true;
 			}}
 		>
 			<Icon name="search" size={18} />
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index c46056c652..df19cd6a44 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -3,7 +3,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 -->
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
-	import { search_query, searching } from '../stores/search';
+	import { search } from '../state/search.svelte';
 
 	let { q = '', label = 'Search' }: { q?: string; label?: string } = $props();
 </script>
@@ -12,20 +12,20 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	<input
 		value={q}
 		oninput={(e) => {
-			$search_query = e.currentTarget.value;
-			$searching = true;
+			search.query = e.currentTarget.value;
+			search.active = true;
 			e.currentTarget.value = '';
 			e.currentTarget.blur();
 		}}
 		onmousedown={(event) => {
 			event.preventDefault();
 			event.currentTarget.blur();
-			$searching = true;
+			search.active = true;
 		}}
 		ontouchend={(event) => {
 			event.preventDefault();
 			event.currentTarget.blur();
-			$searching = true;
+			search.active = true;
 		}}
 		type="search"
 		name="q"
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index f56af88da6..1da198857b 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -4,7 +4,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 -->
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
-	import { overlay_open, search_query, search_recent, searching } from '../stores';
+	import { overlay_open } from '../stores';
+	import { search } from '../state/search.svelte';
 	import { onMount, type Snippet } from 'svelte';
 	import { focusable_children, forcefocus, trap } from '../actions/focus.js';
 	import Icon from '../components/Icon.svelte';
@@ -24,7 +25,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	let modal = $state() as HTMLElement;
 
 	// TODO proper types
-	let search: any = $state(null);
+	let searched: any = $state(null);
 	let recent_searches: any[] = $state([]);
 
 	let last_scroll_position: number | null = null;
@@ -46,7 +47,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			if (type === 'results') {
-				search = payload;
+				searched = payload;
 			}
 
 			if (type === 'recents') {
@@ -69,8 +70,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	});
 
 	async function close() {
-		if ($searching) {
-			$searching = false;
+		if (search.active) {
+			search.active = false;
 			const scroll = last_scroll_position || 0;
 			last_scroll_position = null;
 			document.body.style.position = '';
@@ -79,14 +80,14 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
 
-			$search_query = '';
+			search.query = '';
 		}
 
-		search = null;
+		searched = null;
 	}
 
 	function navigate(href: string) {
-		$search_recent = [href, ...$search_recent.filter((x) => x !== href)];
+		search.recent = [href, ...search.recent.filter((x) => x !== href)];
 		close();
 	}
 
@@ -99,7 +100,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 				type: 'query',
 				id,
 				payload: {
-					query: $search_query,
+					query: search.query,
 					path: $page.url.pathname
 				}
 			});
@@ -108,16 +109,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	$effect(() => {
 		if (ready) {
-			worker.postMessage({ type: 'recents', payload: $state.snapshot($search_recent) });
+			worker.postMessage({ type: 'recents', payload: search.recent });
 		}
 	});
 
 	$effect(() => {
-		$overlay_open = $searching;
+		$overlay_open = search.active;
 	});
 
 	$effect(() => {
-		if ($searching) {
+		if (search.active) {
 			last_scroll_position = window.scrollY;
 		}
 	});
@@ -127,12 +128,12 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	onkeydown={(e) => {
 		if (e.key === 'k' && (navigator.platform === 'MacIntel' ? e.metaKey : e.ctrlKey)) {
 			e.preventDefault();
-			$search_query = '';
+			search.query = '';
 
-			if ($searching) {
+			if (search.active) {
 				close();
 			} else {
-				$searching = true;
+				search.active = true;
 			}
 		}
 
@@ -142,7 +143,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}}
 />
 
-{#if $searching && ready}
+{#if search.active && ready}
 	<div class="pseudo-overlay" aria-hidden="true" onclick={close}></div>
 
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -178,16 +179,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 							}
 						}}
 						oninput={(e) => {
-							$search_query = e.currentTarget.value;
+							search.query = e.currentTarget.value;
 						}}
-						value={$search_query}
+						value={search.query}
 						{placeholder}
 						aria-describedby="search-description"
 						aria-label={placeholder}
 						spellcheck="false"
 					/>
 
-					<button aria-label="Clear" onclick={() => ($search_query = '')}>
+					<button aria-label="Clear" onclick={() => (search.query = '')}>
 						<Icon name="close" />
 					</button>
 				</div>
@@ -207,11 +208,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			</span>
 
 			<div class="results">
-				{#if search?.query}
+				{#if searched?.query}
 					<div class="results-container">
 						<SearchResults
-							results={search.results}
-							query={search.query}
+							results={searched.results}
+							query={searched.query}
 							onselect={(href) => {
 								navigate(href);
 							}}
@@ -229,17 +230,17 @@ It appears when the user clicks on the `Search` component or presses the corresp
 					{#if recent_searches.length}
 						<div class="results-container">
 							<ul class="recent">
-								{#each recent_searches as search}
+								{#each recent_searches as result}
 									<li>
-										<a onclick={() => navigate(search.href)} href={search.href}>
-											{search.breadcrumbs.at(-1)}
+										<a onclick={() => navigate(result.href)} href={result.href}>
+											{result.breadcrumbs.at(-1)}
 										</a>
 
 										<button
 											class="raised icon"
 											aria-label="Delete"
 											onclick={(e) => {
-												$search_recent = $search_recent.filter((href) => href !== search.href);
+												search.recent = search.recent.filter((href) => href !== result.href);
 												e.stopPropagation();
 												e.preventDefault();
 											}}
@@ -258,7 +259,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 {/if}
 
 <div aria-live="assertive" class="visually-hidden">
-	{#if $searching && search?.results.length === 0}
+	{#if search.active && searched?.results.length === 0}
 		<p>
 			{#if no_results}
 				{@render no_results()}
diff --git a/packages/site-kit/src/lib/state/code_preference.ts b/packages/site-kit/src/lib/state/code_preference.ts
new file mode 100644
index 0000000000..25510cc15b
--- /dev/null
+++ b/packages/site-kit/src/lib/state/code_preference.ts
@@ -0,0 +1,6 @@
+import { Persisted } from './Persisted.svelte';
+
+export const code_preference = new Persisted<'typescript' | 'javascript'>(
+	'sv:code_preference',
+	'typescript'
+);
diff --git a/packages/site-kit/src/lib/state/search.svelte.ts b/packages/site-kit/src/lib/state/search.svelte.ts
new file mode 100644
index 0000000000..c803ee3a7a
--- /dev/null
+++ b/packages/site-kit/src/lib/state/search.svelte.ts
@@ -0,0 +1,17 @@
+import { Persisted } from './Persisted.svelte';
+
+class SearchState {
+	#recent = new Persisted<string>('sv:recent-searches', '[]');
+	active = $state(false);
+	query = $state('');
+
+	get recent() {
+		return JSON.parse(this.#recent.current) as string[];
+	}
+
+	set recent(value) {
+		this.#recent.current = JSON.stringify(value);
+	}
+}
+
+export const search = new SearchState();
diff --git a/packages/site-kit/src/lib/stores/index.ts b/packages/site-kit/src/lib/stores/index.ts
index 39f05a77e0..000cd01565 100644
--- a/packages/site-kit/src/lib/stores/index.ts
+++ b/packages/site-kit/src/lib/stores/index.ts
@@ -1,4 +1,3 @@
 export { mql } from './mql';
 export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav';
 export { reduced_motion } from './reduced-motion';
-export { search_query, search_recent, searching } from './search';
diff --git a/packages/site-kit/src/lib/stores/prefers_ts.ts b/packages/site-kit/src/lib/stores/prefers_ts.ts
deleted file mode 100644
index f7b70f5c7f..0000000000
--- a/packages/site-kit/src/lib/stores/prefers_ts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { persisted } from 'svelte-persisted-store';
-
-export const prefers_ts = persisted('svelte:prefers-ts', true);
diff --git a/packages/site-kit/src/lib/stores/search.ts b/packages/site-kit/src/lib/stores/search.ts
deleted file mode 100644
index c3cca769ce..0000000000
--- a/packages/site-kit/src/lib/stores/search.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { persisted } from 'svelte-persisted-store';
-import { writable } from 'svelte/store';
-
-export const searching = writable(false);
-export const search_query = writable('');
-export const search_recent = persisted<any[]>('svelte:recent-searches', []);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c572cd679..b386f58ded 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -485,9 +485,6 @@ importers:
       shiki:
         specifier: ^1.22.0
         version: 1.22.0
-      svelte-persisted-store:
-        specifier: ^0.9.2
-        version: 0.9.4(svelte@5.14.0)
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.12.1
@@ -3020,12 +3017,6 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-persisted-store@0.9.4:
-    resolution: {integrity: sha512-Em3cDSsd3fAkQhvNc4+V7ZT86GnIkFrlcKK/oNSHFhF5fbNoavdxvtTZ0pCF2ueG/Oqg5kSbAFxn0rkeICpHUA==}
-    engines: {node: '>=0.14'}
-    peerDependencies:
-      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
-
   svelte-preprocess@6.0.3:
     resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
     engines: {node: '>= 18.0.0'}
@@ -5916,10 +5907,6 @@ snapshots:
     dependencies:
       svelte: 5.14.0
 
-  svelte-persisted-store@0.9.4(svelte@5.14.0):
-    dependencies:
-      svelte: 5.14.0
-
   svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
       svelte: 5.14.0

From 5c49543094ec7d8c132010cf4a32178f27558985 Mon Sep 17 00:00:00 2001
From: Matt Smith <matthewgarysmith@gmail.com>
Date: Mon, 6 Jan 2025 14:11:32 -0500
Subject: [PATCH 274/453] Fix: SvelteKit post-handlers tutorial (#1085)

* Fix tutorial to work with immutable data prop

* Remove extraneous $bindable rune on data prop

* Update apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../+assets/app-b/src/routes/+page.svelte                 | 6 ++++--
 .../03-sveltekit/07-api-routes/02-post-handlers/index.md  | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
index 89ff6d39be..185eff2227 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { data = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -26,11 +26,13 @@
 
 				const { id } = await response.json();
 
-				data.todos = [...data.todos, {
+				const todos = [...data.todos, {
 					id,
 					description
 				}];
 
+				data = { ...data, todos };
+
 				input.value = '';
 			}}
 		/>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
index 3a83537f09..8a44b9daf3 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -74,14 +74,16 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 
 +++		const { id } = await response.json();
 
-		data.todos = [...data.todos, {
+		const todos = [...data.todos, {
 			id,
 			description
-		}];+++
+		}];
+
+		data = { ...data, todos };+++
 
 		input.value = '';
 	}}
 />
 ```
 
-> [!NOTE] You should only mutate `data` in such a way that you'd get the same result by reloading the page.
+> [!NOTE] You should only update `data` in such a way that you'd get the same result by reloading the page. The `data` prop is not _deeply_ reactive, so you need to replace it — mutations like `data.todos = todos` will not cause a re-render.

From 2b6bcc80519f20b84c3bc2c01874ff2d188665b7 Mon Sep 17 00:00:00 2001
From: Matt Smith <matthewgarysmith@gmail.com>
Date: Mon, 6 Jan 2025 14:12:09 -0500
Subject: [PATCH 275/453] Fix: SvelteKit other-handlers tutorial (#1086)

* Fix tutorial to work with immutable data prop

* Remove extraneous $bindable rune on data prop
---
 .../+assets/app-b/src/routes/+page.svelte              | 10 +++++++---
 .../07-api-routes/03-other-handlers/index.md           |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
index ce0b7d145e..3680fdfddc 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { data = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -26,11 +26,13 @@
 
 				const { id } = await response.json();
 
-				data.todos = [...data.todos, {
+				const todos = [...data.todos, {
 					id,
 					description
 				}];
 
+				data = { ...data, todos };
+
 				input.value = '';
 			}}
 		/>
@@ -63,7 +65,9 @@
 								method: 'DELETE'
 							});
 
-							data.todos = data.todos.filter((t) => t !== todo);
+							const todos = data.todos.filter((t) => t !== todo);
+
+							data = { ...data, todos };
 						}}
 					></button>
 				</label>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
index eb0d345a4a..56eb0405ed 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
@@ -54,7 +54,9 @@ We can now interact with this endpoint inside our event handlers:
 				method: 'DELETE'
 			});
 
-			data.todos = data.todos.filter((t) => t !== todo);+++
+			const todos = data.todos.filter((t) => t !== todo);
+
+			data = { ...data, todos };+++
 		}}
 	></button>
 </label>

From 1752deadcc277f7a10b1e0378e82d1b49b231273 Mon Sep 17 00:00:00 2001
From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com>
Date: Tue, 7 Jan 2025 01:48:29 +0530
Subject: [PATCH 276/453] fix: repl redirect to playground (#1089)

---
 apps/svelte.dev/src/hooks.server.js                       | 6 ++++++
 apps/svelte.dev/src/routes/repl/[...path]/+page.server.ts | 5 -----
 2 files changed, 6 insertions(+), 5 deletions(-)
 delete mode 100644 apps/svelte.dev/src/routes/repl/[...path]/+page.server.ts

diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js
index d95a800f56..0afe0a3c11 100644
--- a/apps/svelte.dev/src/hooks.server.js
+++ b/apps/svelte.dev/src/hooks.server.js
@@ -55,6 +55,12 @@ export async function handle({ event, resolve }) {
 		redirect(307, destination);
 	}
 
+	// For REPL. For some reason, the repl/+page.server.ts file is not working, so
+	// we are doing the redirect here
+	if (event.url.pathname.startsWith('/repl')) {
+		redirect(307, event.url.pathname.replace('/repl', '/playground'));
+	}
+
 	// Best effort to redirect from Svelte 3 tutorial to new tutorial
 	if (event.url.pathname.startsWith('/tutorial/') && event.url.pathname.split('/').length === 2) {
 		redirect(307, event.url.pathname.replace('/tutorial/', '/tutorial/svelte/'));
diff --git a/apps/svelte.dev/src/routes/repl/[...path]/+page.server.ts b/apps/svelte.dev/src/routes/repl/[...path]/+page.server.ts
deleted file mode 100644
index 0668ac1364..0000000000
--- a/apps/svelte.dev/src/routes/repl/[...path]/+page.server.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export function load({ url }) {
-	throw redirect(307, url.href.replace('/repl', '/playground'));
-}

From a6e93ead775f9efa2f9a0a2e9cf7e9d2db3d34b8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 23:19:55 +0000
Subject: [PATCH 277/453] oops (#1090)

* oops

* alternative
---
 apps/svelte.dev/scripts/sync-docs/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index 291d05f455..c11f90008c 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -89,7 +89,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 							.map(({ name, text }) => strip_origin(name ? `\`${name.escapedText}\`` : text))
 							.join('');
 					} else {
-						comment = strip_origin(jsDoc.comment);
+						comment = strip_origin(jsDoc.comment ?? '');
 					}
 
 					if (jsDoc.tags) {

From de5ce6383346c1fd1e08d214a4dac2b49961bb07 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:33:33 -0500
Subject: [PATCH 278/453] Sync `svelte` docs (#1091)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md       | 2 ++
 apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md   | 2 +-
 .../content/docs/svelte/98-reference/21-svelte-compiler.md      | 2 --
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
index 25bd0b3cb4..ec2044ac9a 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
@@ -197,4 +197,6 @@ You can, of course, separate the type declaration from the annotation:
 </script>
 ```
 
+> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))
+
 Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index babf83961d..1d6b62dc14 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -900,7 +900,7 @@ let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
 ```
 You can only call a snippet through the `{@render ...}` tag.
 
-/docs/svelte/snippet
+See the [snippet documentation](/docs/svelte/snippet) for more info.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 3667577c3e..5cbbff0806 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -22,8 +22,6 @@ import {
 
 The current version, as set in package.json.
 
-/docs/svelte-compiler#svelte-version
-
 <div class="ts-block">
 
 ```dts

From 83881c6c26302840acb3487b700cfab17153748f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 07:29:49 -0500
Subject: [PATCH 279/453] Sync `svelte` docs (#1092)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/03-template-syntax/12-use.md       | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
index 1c4452a65d..1d372f0b61 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
@@ -51,17 +51,16 @@ The `Action` interface receives three optional type arguments — a node type (w
 ```svelte
 <!--- file: App.svelte --->
 <script>
-	import { on } from 'svelte/events';
-
 	/**
 	 * @type {import('svelte/action').Action<
 	 * 	HTMLDivElement,
-	 * 	null,
+	 * 	undefined,
 	 * 	{
 	 * 		onswiperight: (e: CustomEvent) => void;
 	 * 		onswipeleft: (e: CustomEvent) => void;
 	 * 		// ...
-	 * }>}
+	 * 	}
+	 * >}
 	 */
 	function gestures(node) {
 		$effect(() => {

From 8b5618261473f4f30d3e4e9783a69bcf71121b0b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 7 Jan 2025 16:12:50 +0100
Subject: [PATCH 280/453] chore: markdown rendering fixes (#1094)

* chore: markdown fixes

- handle `@param` on properties
- properly run markdown on `.js` files. Previously `.js` was treated as TS, which resulted in errors because the jsdoc was ignored. This was done this way because twoslash does not run on `js` by default, but there's a different way to make it still run on them while respecting jsdoc.

* set relevant compiler options

* see if that helps

* another one
---
 .../content/docs/kit/30-advanced/25-errors.md |  6 ++--
 .../content/docs/svelte/02-runes/02-$state.md |  7 +---
 .../site-kit/src/lib/markdown/renderer.ts     | 33 +++++++++++++++++--
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
index e2472b0f90..231ff5b619 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
@@ -58,8 +58,7 @@ This throws an exception that SvelteKit catches, causing it to set the response
 You can add extra properties to the error object if needed...
 
 ```js
-import { error } from '@sveltejs/kit';
-
+// @filename: ambient.d.ts
 declare global {
 	namespace App {
 		interface Error {
@@ -68,7 +67,10 @@ declare global {
 		}
 	}
 }
+export {}
 
+// @filename: index.js
+import { error } from '@sveltejs/kit';
 // ---cut---
 error(404, {
 	message: 'Not found',
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index 5cccb2456f..509efb007b 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -45,12 +45,7 @@ todos[0].done = !todos[0].done;
 If you push a new object to the array, it will also be proxified:
 
 ```js
-// @filename: ambient.d.ts
-declare global {
-	const todos: Array<{ done: boolean, text: string }>
-}
-
-// @filename: index.js
+let todos = [{ done: false, text: 'add more todos' }];
 // ---cut---
 todos.push({
 	done: false,
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 74117ca5ef..3dde3c71a7 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -498,6 +498,31 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 					if (code.original[end - 1] === ';') end -= 1;
 					code.appendLeft(end, ` satisfies ${satisfies}`);
 				}
+			} else if (
+				(ts.isPropertyAssignment(node) && ts.isArrowFunction(node.initializer)) ||
+				ts.isMethodDeclaration(node)
+			) {
+				if (type) {
+					throw new Error('@type on property methods does nothing');
+				}
+
+				const parameters = ts.isMethodDeclaration(node)
+					? node.parameters
+					: (node.initializer as ts.ArrowFunction).parameters;
+				for (let i = 0; i < parameters.length; i += 1) {
+					if (params[i] !== undefined) {
+						code.appendLeft(parameters[i].getEnd(), `: ${params[i]}`);
+					}
+				}
+
+				if (returns) {
+					const body = ts.isMethodDeclaration(node)
+						? node.body
+						: (node.initializer as ts.ArrowFunction).body;
+					let start = body!.getStart();
+					while (code.original[start - 1] !== ')') start -= 1;
+					code.appendLeft(start, `: ${returns}`);
+				}
 			} else {
 				throw new Error('Unhandled @type JsDoc->TS conversion: ' + js_code);
 			}
@@ -699,16 +724,20 @@ async function syntax_highlight({
 
 		try {
 			html = await codeToHtml(prelude + redacted, {
-				lang: 'ts',
+				lang: language,
 				theme,
 				transformers: check
 					? [
 							transformerTwoslash({
 								twoslashOptions: {
 									compilerOptions: {
+										allowJs: true,
+										checkJs: true,
 										types: ['svelte', '@sveltejs/kit']
 									}
-								}
+								},
+								// by default, twoslash does not run on .js files, change that through this option
+								filter: () => true
 							})
 						]
 					: []

From b8e19baaf270671c62a647e0d6de35a6f9ac43db Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 15:46:55 -0500
Subject: [PATCH 281/453] Sync `svelte` docs (#1095)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/02-runes/03-$derived.md       | 17 ++++++
 .../content/docs/svelte/07-misc/02-testing.md | 61 ++++++++++++++++++-
 .../docs/svelte/07-misc/04-custom-elements.md |  1 +
 3 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index cc126e08f2..1f63b3fe95 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -52,3 +52,20 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
 Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
 
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
+
+## Update propagation
+
+Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').
+
+If the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:
+
+```svelte
+<script>
+	let count = $state(0);
+	let large = $derived(count > 10);
+</script>
+
+<button onclick={() => count++}>
+	{large}
+</button>
+```
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
index afbfc63aba..151c15e9d8 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
@@ -41,7 +41,7 @@ You can now write unit tests for code inside your `.js/.ts` files:
 /// file: multiplier.svelte.test.js
 import { flushSync } from 'svelte';
 import { expect, test } from 'vitest';
-import { multiplier } from './multiplier.js';
+import { multiplier } from './multiplier.svelte.js';
 
 test('Multiplier', () => {
 	let double = multiplier(0, 2);
@@ -54,9 +54,30 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {number} initial
+ * @param {number} k
+ */
+export function multiplier(initial, k) {
+	let count = $state(initial);
+
+	return {
+		get value() {
+			return count * k;
+		},
+		/** @param {number} c */
+		set: (c) => {
+			count = c;
+		}
+	};
+}
+```
+
 ### Using runes inside your test files
 
-It is possible to use runes inside your test files. First ensure your bundler knows to route the file through the Svelte compiler before running the test by adding `.svelte` to the filename (e.g `multiplier.svelte.test.js`). After that, you can use runes inside your tests.
+Since Vitest processes your test files the same way as your source files, you can use runes inside your tests as long as the filename includes `.svelte`:
 
 ```js
 /// file: multiplier.svelte.test.js
@@ -76,6 +97,21 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {() => number} getCount
+ * @param {number} k
+ */
+export function multiplier(getCount, k) {
+	return {
+		get value() {
+			return getCount() * k;
+		}
+	};
+}
+```
+
 If the code being tested uses effects, you need to wrap the test inside `$effect.root`:
 
 ```js
@@ -106,6 +142,27 @@ test('Effect', () => {
 });
 ```
 
+```js
+/// file: logger.svelte.js
+/**
+ * @param {() => any} getValue
+ */
+export function logger(getValue) {
+	/** @type {any[]} */
+	let log = $state([]);
+
+	$effect(() => {
+		log.push(getValue());
+	});
+
+	return {
+		get value() {
+			return log;
+		}
+	};
+}
+```
+
 ### Component testing
 
 It is possible to test your components in isolation using Vitest.
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
index 70240067c0..0efc26f5bc 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
@@ -126,3 +126,4 @@ Custom elements can be a useful way to package components for consumption in a n
 - The deprecated `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot
 - Polyfills are required to support older browsers
 - You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.
+- Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `<custom-element oneworld={true}></custom-element>` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`)

From d366515a26efb8a194ba94de0fe2c0e7163868f9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 20:37:02 -0500
Subject: [PATCH 282/453] Sync `svelte` docs (#1097)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/98-reference/.generated/compile-errors.md   | 6 ++++++
 .../content/docs/svelte/98-reference/30-compiler-errors.md  | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 298363f78d..c498920007 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -1012,6 +1012,12 @@ Unexpected end of input
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
+### unterminated_string_constant
+
+```
+Unterminated string constant
+```
+
 ### void_element_invalid_content
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 2ea1e6e57e..346d909bf7 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -1017,6 +1017,12 @@ Unexpected end of input
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
+### unterminated_string_constant
+
+```
+Unterminated string constant
+```
+
 ### void_element_invalid_content
 
 ```

From 66121dfe04ee6ede618a092dc82782fa91f87e2e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:58:34 -0500
Subject: [PATCH 283/453] Sync `svelte` docs (#1098)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/svelte/02-runes/04-$effect.md        | 48 +------------------
 .../.generated/client-warnings.md             | 12 +++++
 .../98-reference/.generated/compile-errors.md | 34 ++++++++++++-
 .../svelte/98-reference/30-compiler-errors.md | 34 ++++++++++++-
 .../98-reference/30-runtime-warnings.md       | 12 +++++
 5 files changed, 91 insertions(+), 49 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 41f0c96a7d..be481a227f 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -194,53 +194,7 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 <p>in template: {$effect.tracking()}</p> <!-- true -->
 ```
 
-This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a tracking context:
-
-```ts
-import { tick } from 'svelte';
-
-export default function readable<T>(
-	initial_value: T,
-	start: (callback: (update: (v: T) => T) => T) => () => void
-) {
-	let value = $state(initial_value);
-
-	let subscribers = 0;
-	let stop: null | (() => void) = null;
-
-	return {
-		get value() {
-			// If in a tracking context ...
-			if ($effect.tracking()) {
-				$effect(() => {
-					// ...and there's no subscribers yet...
-					if (subscribers === 0) {
-						// ...invoke the function and listen to changes to update state
-						stop = start((fn) => (value = fn(value)));
-					}
-
-					subscribers++;
-
-					// The return callback is called once a listener unlistens
-					return () => {
-						tick().then(() => {
-							subscribers--;
-							// If it was the last subscriber...
-							if (subscribers === 0) {
-								// ...stop listening to changes
-								stop?.();
-								stop = null;
-							}
-						});
-					};
-				});
-			}
-
-			return value;
-		}
-	};
-}
-```
+It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
 
 ## `$effect.root`
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 5218ec4cb1..284e9a7c3e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -222,3 +222,15 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 ```
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+
+### transition_slide_display
+
+```
+The `slide` transition does not work correctly for elements with `display: %value%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index c498920007..a867cfe88c 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -331,7 +331,39 @@ The $ prefix is reserved, and cannot be used for variables and imports
 ### each_item_invalid_assignment
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+```
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
 ```
 
 ### effect_invalid_placement
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 346d909bf7..c9ea54c994 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -336,7 +336,39 @@ The $ prefix is reserved, and cannot be used for variables and imports
 ### each_item_invalid_assignment
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+```
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
 ```
 
 ### effect_invalid_placement
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 856c3b6710..51853aa42d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -230,6 +230,18 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+### transition_slide_display
+
+```
+The `slide` transition does not work correctly for elements with `display: %value%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`
+
 
 ## Shared warnings
 

From ab7481b0fe7081b1e6916349207369376c16c8ff Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Jan 2025 15:20:27 -0500
Subject: [PATCH 284/453] Sync `svelte` docs (#1100)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/04-$effect.md         | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index be481a227f..8e83d56da5 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -126,7 +126,11 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
-An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/playground/untitled#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.
+
+For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3VQzWrDMAx-FdUU4kBp71li6EPstOxge0ox8-QQK2PD-N1nLy2F0Z2Evj9_chKkP1B04pnYscc3cRCT8xhF95IEf8-Vq0DBr8rzPB_jJ3qumNERH-E2ECNxiRF9tIubWY00lgcYNAywj6wZJS8rtk83wjwgCrXHaULLUrYwKEgVGrnkx-Dx6MNFNstK5OjSbFGbwE0gdXuT_zGYrjmAuco515Hr1p_uXak3K3MgCGS9s-9D2grU-judlQYXIencnzad-tdR79qZrMyvw9wd5Z8Yv1h09dz8mn8AkM7Pfo0BAAA=).
+
+Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes.
 
 ```ts
 let a = false;
@@ -135,8 +139,8 @@ let b = false;
 $effect(() => {
 	console.log('running');
 
-	if (a || b) {
-		console.log('inside if block');
+	if (a) {
+		console.log('b:', b);
 	}
 });
 ```

From 4c54849691bc478b7951666e8a684fbd630a54d0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Jan 2025 21:45:48 -0500
Subject: [PATCH 285/453] Sync `svelte` docs (#1101)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/07-misc/07-v5-migration-guide.md   | 117 ++++++++++--------
 .../99-legacy/30-legacy-svelte-component.md   |   2 +-
 2 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 24c01f2705..32cdbac47e 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -340,7 +340,31 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 
 In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets which are more powerful and flexible, and as such slots are deprecated in Svelte 5.
 
-They continue to work, however, and you can mix and match snippets and slots in your components.
+They continue to work, however, and you can pass snippets to a component that uses slots:
+
+```svelte
+<!--- file: Child.svelte --->
+<slot />
+<hr />
+<slot name="foo" message="hello" />
+```
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	default child content
+
+	{#snippet foo({ message })}
+		message from child: {message}
+	{/snippet}
+</Child>
+```
+
+(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
 
 When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.
 
@@ -598,28 +622,57 @@ export declare const MyComponent: Component<{
 
 To declare that a component of a certain type is required:
 
+```js
+import { ComponentA, ComponentB } from 'component-library';
+---import type { SvelteComponent } from 'svelte';---
++++import type { Component } from 'svelte';+++
+
+---let C: typeof SvelteComponent<{ foo: string }> = $state(---
++++let C: Component<{ foo: string }> = $state(+++
+	Math.random() ? ComponentA : ComponentB
+);
+```
+
+The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (i.e. `ComponentType<SvelteComponent<{ prop: string }>>` is equivalent to `Component<{ prop: string }>`).
+
+### bind:this changes
+
+Because components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.
+
+## `<svelte:component>` is no longer necessary
+
+In Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you had to use `<svelte:component>`.
+
+This is no longer true in Svelte 5:
+
 ```svelte
-<script lang="ts">
-	import type { ---SvelteComponent--- +++Component+++ } from 'svelte';
-	import {
-		ComponentA,
-		ComponentB
-	} from 'component-library';
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
 
-	---let component: typeof SvelteComponent<{ foo: string }>---
-	+++let component: Component<{ foo: string }>+++ = $state(
-		Math.random() ? ComponentA : ComponentB
-	);
+	let Thing = $state();
 </script>
 
-<svelte:component this={component} foo="bar" />
+<select bind:value={Thing}>
+	<option value={A}>A</option>
+	<option value={B}>B</option>
+</select>
+
+<!-- these are equivalent -->
+<Thing />
+<svelte:component this={Thing} />
 ```
+While migrating, keep in mind that your component's name should be capitalized (`Thing`) to distinguish it from elements, unless using dot notation.
 
-The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (e.g. `ComponentType<SvelteComponent<{ prop: string }>>` == `Component<{ prop: string }>`).
+### Dot notation indicates a component
 
-### bind:this changes
+In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
 
-Because components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.
+```svelte
+{#each items as item}
+	<item.component {...item.props} />
+{/each}
+```
 
 ## Whitespace handling changed
 
@@ -654,16 +707,6 @@ The `legacy` compiler option, which generated bulkier but IE-friendly code, no l
 
 Content inside component tags becomes a snippet prop called `children`. You cannot have a separate prop by that name.
 
-## Dot notation indicates a component
-
-In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
-
-```svelte
-{#each items as item}
-	<item.component {...item.props} />
-{/each}
-```
-
 ## Breaking changes in runes mode
 
 Some breaking changes only apply once your component is in runes mode.
@@ -701,30 +744,6 @@ In Svelte 4, doing the following triggered reactivity:
 
 This is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.
 
-### `<svelte:component>` is no longer necessary
-
-In Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you must use `<svelte:component>`.
-
-This is no longer true in Svelte 5:
-
-```svelte
-<script>
-	import A from './A.svelte';
-	import B from './B.svelte';
-
-	let Thing = $state();
-</script>
-
-<select bind:value={Thing}>
-	<option value={A}>A</option>
-	<option value={B}>B</option>
-</select>
-
-<!-- these are equivalent -->
-<Thing />
-<svelte:component this={Thing} />
-```
-
 ### Touch and wheel events are passive
 
 When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
diff --git a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
index 1ba1629069..94a654b7ba 100644
--- a/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
+++ b/apps/svelte.dev/content/docs/svelte/99-legacy/30-legacy-svelte-component.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: <svelte:component>
 ---
 
-In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary) for an example.
+In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.
 
 In legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:
 

From 4dc828ec2a1ae49a15723b10892bf0342d23d63c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 9 Jan 2025 08:48:30 -0500
Subject: [PATCH 286/453] docs: remove useless private fields (#1102)

---
 apps/svelte.dev/scripts/sync-docs/types.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/svelte.dev/scripts/sync-docs/types.ts b/apps/svelte.dev/scripts/sync-docs/types.ts
index c11f90008c..f88debc1bc 100644
--- a/apps/svelte.dev/scripts/sync-docs/types.ts
+++ b/apps/svelte.dev/scripts/sync-docs/types.ts
@@ -122,6 +122,16 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 				if (ts.isInterfaceDeclaration(statement) || ts.isClassDeclaration(statement)) {
 					if (statement.members.length > 0) {
 						for (const member of statement.members) {
+							// for some reason, the existence of any private fields results
+							// in a useless `#private;` being added to the definition
+							if (
+								member.name?.getText() === '#private' &&
+								ts.isPropertyDeclaration(member) &&
+								!member.initializer
+							) {
+								continue;
+							}
+
 							children.push(munge_type_element(member as any)!);
 						}
 

From 1118cedd6906a3e52b89391a0c123f44e78cbd54 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 9 Jan 2025 08:48:51 -0500
Subject: [PATCH 287/453] Sync `cli` docs (#1103)

sync cli docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index 422d49308e..5778f8a12c 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -17,7 +17,7 @@ npx sv migrate [migration]
 
 ### `app-state`
 
-Migrates `$app/store` usage to `$app/state` in `.svelte` files. See the [migration guide](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) for more details.
+Migrates `$app/stores` usage to `$app/state` in `.svelte` files. See the [migration guide](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) for more details.
 
 ### `svelte-5`
 

From 8a182cef609b0b69c38169328cf95c30485beead Mon Sep 17 00:00:00 2001
From: Vlad Svoka <shchvova@gmail.com>
Date: Mon, 13 Jan 2025 00:17:29 -0800
Subject: [PATCH 288/453] fix: using `u` as in the description (#1106)

* Fixing missing parentheses and using u as in doc above

* added to inital app
---
 .../+assets/app-a/src/lib/App.svelte                        | 2 +-
 .../+assets/app-b/src/lib/App.svelte                        | 6 +++---
 .../09-transitions/04-custom-css-transitions/index.md       | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
index 849b25bac5..9122f31881 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
@@ -6,7 +6,7 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => ``
+			css: (t, u) => ``
 		};
 	}
 </script>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
index 1a5d821c29..242db34153 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
@@ -7,15 +7,15 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => {
+			css: (t, u) => {
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`;
 			}
 		};
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
index 5c1284a14d..2696714d4a 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
@@ -53,15 +53,15 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => +++{
+			css: (t, u) => +++{
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`
 			}+++
 		};

From 17c672aa16ddd387093e1df5711df06ee072754b Mon Sep 17 00:00:00 2001
From: Lael <127096683+laelhalawani@users.noreply.github.com>
Date: Mon, 13 Jan 2025 09:36:23 +0100
Subject: [PATCH 289/453] tutorial: Update css in App.svelte in a and b
 examples to make display more readable (#880)

* Update App.svelte

made the fonts larger and heavier for improved readability of the example

* Update App.svelte

made the fonts larger and heavier for improved readability of the example

---------

Co-authored-by: Tee Ming <chewteeming01@gmail.com>
---
 .../04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte | 5 +++++
 .../04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte
index f2425672ac..35e010c7c2 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte
@@ -36,6 +36,8 @@
 
 <style>
 	h1 {
+		font-size: 2rem;
+		font-weight: 700;
 		transition: color 0.2s;
 	}
 
@@ -53,6 +55,9 @@
 		transform: translate(-2px,-2px);
 		filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
 		transition: all 0.1s;
+		color: black;
+		font-weight: 700;
+		font-size: 2rem;
 	}
 
 	button[aria-current="true"] {
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
index 01b661f612..5621985485 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
@@ -19,6 +19,8 @@
 <style>
 	h1 {
 		transition: color 0.2s;
+		font-size: 2rem;
+		font-weight: 700;
 	}
 
 	div {
@@ -35,6 +37,9 @@
 		transform: translate(-2px,-2px);
 		filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
 		transition: all 0.1s;
+		color: black;
+		font-weight: 700;
+		font-size: 2rem;
 	}
 
 	button[aria-current="true"] {

From 8422db4af7f224c27ccea9031fc49f75c1fb123a Mon Sep 17 00:00:00 2001
From: F2 <916098+F2@users.noreply.github.com>
Date: Mon, 13 Jan 2025 09:37:16 +0100
Subject: [PATCH 290/453] docs: Fixed TODO id in animation tutorial (#1108)

* Tutorial: Fixed animation id

* Tutorial: Fixed id as key in another file

---------

Co-authored-by: Tee Ming <chewteeming01@gmail.com>
---
 .../+assets/app-a/src/lib/App.svelte              | 15 +++++++++------
 .../+assets/app-a/src/lib/TodoList.svelte         |  2 +-
 .../+assets/app-b/src/lib/TodoList.svelte         |  2 +-
 .../+assets/app-b/src/lib/TodoList.svelte         |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
index 48dbb606c1..884e6b59c5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
@@ -2,14 +2,16 @@
 	import TodoList from './TodoList.svelte';
 
 	const todos = $state([
-		{ done: false, description: 'write some docs' },
-		{ done: false, description: 'start writing blog post' },
-		{ done: true, description: 'buy some milk' },
-		{ done: false, description: 'mow the lawn' },
-		{ done: false, description: 'feed the turtle' },
-		{ done: false, description: 'fix some bugs' }
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing blog post' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
 	]);
 
+	let uid = todos.length + 1;
+
 	function remove(todo) {
 		const index = todos.indexOf(todo);
 		todos.splice(index, 1);
@@ -23,6 +25,7 @@
 			if (e.key !== 'Enter') return;
 
 			todos.push({
+				id: uid++,
 				done: false,
 				description: e.currentTarget.value
 			});
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
index dfb54f127e..57082ca4b7 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 		>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
index ed353a8fa3..e7bb9640f8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
index 2f70529ddb..f2fe5a4317 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}

From e4cdbe6a9107943f5ee7fede16f64f8201056221 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 16 Jan 2025 11:14:44 +0100
Subject: [PATCH 291/453] fix: prevent FOUC for theme (#1110)

Closes #1109
---
 packages/site-kit/src/lib/components/ThemeToggle.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 8135b48cac..83189f29ef 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -17,7 +17,7 @@
 			const theme = localStorage.getItem('sv:theme');
 
 			document.documentElement.classList.add(
-				theme === 'system'
+				!theme || theme === 'system'
 					? window.matchMedia('(prefers-color-scheme: dark)').matches
 						? 'dark'
 						: 'light'

From 78f401b93efa29a44c07ab2e0ec51f933ea3965c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:56:38 +0100
Subject: [PATCH 292/453] Sync `kit` docs (#1105)

sync kit docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/10-routing.md   |  34 +++++-
 .../docs/kit/20-core-concepts/20-load.md      |  29 +++--
 .../kit/20-core-concepts/30-form-actions.md   |  17 ++-
 .../20-core-concepts/50-state-management.md   |   6 +-
 .../60-adapter-cloudflare.md                  |   6 +-
 .../70-adapter-cloudflare-workers.md          |   4 +-
 .../25-build-and-deploy/90-adapter-vercel.md  |  46 ++++++--
 .../content/docs/kit/30-advanced/20-hooks.md  |   2 +
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 109 ++++++++++--------
 .../docs/kit/98-reference/20-$app-forms.md    |   3 +
 .../kit/98-reference/20-$app-navigation.md    |   3 +
 .../docs/kit/98-reference/20-$app-state.md    |  11 ++
 .../docs/kit/98-reference/50-configuration.md |  35 +++++-
 .../content/docs/kit/98-reference/54-types.md |  31 +++++
 14 files changed, 245 insertions(+), 91 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 29e99b7394..46159a1791 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -43,7 +43,7 @@ Pages can receive data from `load` functions via the `data` prop.
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 </script>
 
@@ -52,7 +52,9 @@ Pages can receive data from `load` functions via the `data` prop.
 ```
 
 > [!LEGACY]
-> In Svelte 4, you'd use `export let data` instead
+> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` property manually with `PageData` instead, see [$types](#\$types).
+>
+> In Svelte 4, you'd use `export let data` instead.
 
 > [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
 
@@ -213,7 +215,7 @@ We can create a layout that only applies to pages below `/settings` (while inher
 ```svelte
 <!--- file: src/routes/settings/+layout.svelte --->
 <script>
-	/** @type {{ data: import('./$types').LayoutData, children: import('svelte').Snippet }} */
+	/** @type {import('./$types').LayoutProps} */
 	let { data, children } = $props();
 </script>
 
@@ -228,6 +230,9 @@ We can create a layout that only applies to pages below `/settings` (while inher
 {@render children()}
 ```
 
+> [!LEGACY]
+> `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\$types).
+
 You can see how `data` is populated by looking at the `+layout.js` example in the next section just below.
 
 By default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you.
@@ -256,7 +261,7 @@ Data returned from a layout's `load` function is also available to all its child
 ```svelte
 <!--- file: src/routes/settings/profile/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
 	console.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]
@@ -389,16 +394,33 @@ export async function fallback({ request }) {
 
 Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
 
-For example, annotating `let { data } = $props()` with `PageData` (or `LayoutData`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
+For example, annotating `let { data } = $props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
 
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 </script>
 ```
 
+> [!NOTE]
+> The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page:
+>
+> ```js
+> /// file: +page.svelte
+> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
+> let { data, form } = $props();
+> ```
+>
+> Or, for a layout:
+>
+> ```js
+> /// file: +layout.svelte
+> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
+> let { data, children } = $props();
+> ```
+
 In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.
 
 If you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index ab4d0eda73..b53304c60b 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -25,7 +25,7 @@ export function load({ params }) {
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 </script>
 
@@ -34,7 +34,14 @@ export function load({ params }) {
 ```
 
 > [!LEGACY]
-> In Svelte 4, you'd use `export let data` instead
+> Before version 2.16.0, the props of a page and layout had to be typed individually:
+> ```js
+> /// file: +page.svelte
+> /** @type {{ data: import('./$types').PageData }} */
+> let { data } = $props();
+> ```
+>
+> In Svelte 4, you'd use `export let data` instead.
 
 Thanks to the generated `$types` module, we get full type safety.
 
@@ -89,7 +96,7 @@ export async function load() {
 ```svelte
 <!--- file: src/routes/blog/[slug]/+layout.svelte --->
 <script>
-	/** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
+	/** @type {import('./$types').LayoutProps} */
 	let { data, children } = $props();
 </script>
 
@@ -112,6 +119,14 @@ export async function load() {
 </aside>
 ```
 
+> [!LEGACY]
+> `LayoutProps` was added in 2.16.0. In earlier versions, properties had to be typed individually:
+> ```js
+> /// file: +layout.svelte
+> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
+> let { data, children } = $props();
+> ```
+
 Data returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.
 
 ```svelte
@@ -119,7 +134,7 @@ Data returned from layout `load` functions is available to child `+layout.svelte
 <script>
 	+++import { page } from '$app/state';+++
 
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
 +++	// we can access `data.posts` because it's returned from
@@ -373,7 +388,7 @@ export async function load({ parent }) {
 ```svelte
 <!--- file: src/routes/abc/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 </script>
 
@@ -512,7 +527,7 @@ This is useful for creating skeleton loading states, for example:
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 </script>
 
@@ -653,7 +668,7 @@ export async function load({ fetch, depends }) {
 <script>
 	import { invalidate, invalidateAll } from '$app/navigation';
 
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
 	function rerunLoadFunction() {
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index 39072aa94f..fb0e591417 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -141,7 +141,7 @@ export const actions = {
 ```svelte
 <!--- file: src/routes/login/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data, form } = $props();
 </script>
 
@@ -153,7 +153,14 @@ export const actions = {
 ```
 
 > [!LEGACY]
-> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties
+> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` and `form` properties individually:
+> ```js
+> /// file: +page.svelte
+> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
+> let { data, form } = $props();
+> ```
+>
+> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties.
 
 ### Validation errors
 
@@ -340,7 +347,7 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti
 <script>
 	+++import { enhance } from '$app/forms';+++
 
-	/** @type {{ form: import('./$types').ActionData }} */
+	/** @type {import('./$types').PageProps} */
 	let { form } = $props();
 </script>
 
@@ -391,7 +398,7 @@ If you return a callback, you may need to reproduce part of the default `use:enh
 <script>
 	import { enhance, +++applyAction+++ } from '$app/forms';
 
-	/** @type {{ form: import('./$types').ActionData }} */
+	/** @type {import('./$types').PageProps} */
 	let { form } = $props();
 </script>
 
@@ -428,7 +435,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	import { invalidateAll, goto } from '$app/navigation';
 	import { applyAction, deserialize } from '$app/forms';
 
-	/** @type {{ form: import('./$types').ActionData }} */
+	/** @type {import('./$types').PageProps} */
 	let { form } = $props();
 
 	/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index afc1d744fc..ff49f1d6ff 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -90,7 +90,7 @@ You might wonder how we're able to use `page.data` and other [app state]($app-st
 <script>
 	import { setContext } from 'svelte';
 
-	/** @type {{ data: import('./$types').LayoutData }} */
+	/** @type {import('./$types').LayoutProps} */
 	let { data } = $props();
 
 	// Pass a function referencing our state
@@ -127,7 +127,7 @@ When you navigate around your application, SvelteKit reuses existing layout and
 ```svelte
 <!--- file: src/routes/blog/[slug]/+page.svelte --->
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
 	// THIS CODE IS BUGGY!
@@ -150,7 +150,7 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
-	/** @type {{ data: import('./$types').PageData }} */
+	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
 +++	let wordCount = $derived(data.content.split(' ').length);
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 9a7b9ba8a6..260f48dbf0 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -83,11 +83,11 @@ export async function POST({ request, platform }) {
 
 > [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
 
-To include type declarations for your bindings, reference them in your `src/app.d.ts`:
+To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
 
 ```ts
 /// file: src/app.d.ts
-import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
++++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++
 
 declare global {
 	namespace App {
@@ -121,7 +121,7 @@ However, they will have no effect on responses dynamically rendered by SvelteKit
 
 ### Further reading
 
-You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site).
+You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site).
 
 ### Accessing the file system
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index 339177c06e..f9ec5d44fa 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -104,11 +104,11 @@ export async function POST({ request, platform }) {
 
 > [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
 
-To include type declarations for your bindings, reference them in your `src/app.d.ts`:
+To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
 
 ```ts
 /// file: src/app.d.ts
-import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
++++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++
 
 declare global {
 	namespace App {
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index 5c3324f0b4..073f5e12d2 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -92,6 +92,8 @@ export default {
 
 Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.
 
+> Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits
+
 To add ISR to a route, include the `isr` property in your `config` object:
 
 ```js
@@ -100,24 +102,44 @@ import { BYPASS_TOKEN } from '$env/static/private';
 
 export const config = {
 	isr: {
-		// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
-		// Setting the value to `false` means it will never expire.
 		expiration: 60,
-
-		// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
-		// with a __prerender_bypass=<token> cookie.
-		//
-		// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
 		bypassToken: BYPASS_TOKEN,
-
-		// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
-		// ensuring that they do not result in content being regenerated unnecessarily
 		allowQuery: ['search']
 	}
 };
 ```
 
-The `expiration` property is required; all others are optional.
+> Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time
+
+The `expiration` property is required; all others are optional. The properties are discussed in more detail below.
+
+### expiration
+
+The expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand.
+
+### bypassToken
+
+A random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=<token>` cookie.
+
+Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
+
+Note that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:
+
+```console
+btoa(Math.random().toString()).substring(0,32);
+```
+
+Set this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For "Key" put `BYPASS_TOKEN` and for "value" use the string generated above, then hit "Save".
+
+To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:
+
+```console
+$ vercel env pull .env.development.local
+```
+
+### allowQuery
+
+A list of valid query parameters that contribute to the cache key. Other parameters (such as utm tracking codes) will be ignored, ensuring that they do not result in content being re-generated unnecessarily. By default, query parameters are ignored.
 
 > Pages that are  [prerendered](page-options#prerender) will ignore ISR configuration.
 
@@ -141,7 +163,7 @@ export function load() {
 ```svelte
 <!--- file: +layout.svelte --->
 <script>
-	/** @type {{ data: import('./$types').LayoutServerData }} */
+	/** @type {import('./$types').LayoutProps} */
 	let { data } = $props();
 </script>
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index f0afa6e41c..15f67005f1 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -40,6 +40,8 @@ export async function handle({ event, resolve }) {
 
 If unimplemented, defaults to `({ event, resolve }) => resolve(event)`.
 
+During prerendering, SvelteKit crawls your pages for links and renders each route it finds. Rendering the route invokes the `handle` function (and all other route dependencies, like `load`). If you need to exclude some code from running during this phase, check that the app is not [`building`]($app-environment#building) beforehand.
+
 ### locals
 
 To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 47354a4bf7..b3c855540f 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -195,6 +195,13 @@ function json(
 Redirect a request. When called during request handling, SvelteKit will return a redirect response.
 Make sure you're not catching the thrown redirect, which would prevent SvelteKit from handling it.
 
+Most common status codes:
+ * `303 See Other`: redirect as a GET request (often used after a form POST request)
+ * `307 Temporary Redirect`: redirect will keep the request method
+ * `308 Permanent Redirect`: redirect will keep the request method, SEO will be transferred to the new page
+
+[See all redirect status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages)
+
 <div class="ts-block">
 
 ```dts
@@ -374,7 +381,7 @@ The name of the adapter, using for logging. Will typically correspond to the pac
 <div class="ts-block-property">
 
 ```dts
-adapt(builder: Builder): MaybePromise<void>;
+adapt: (builder: Builder) => MaybePromise<void>;
 ```
 
 <div class="ts-block-property-details">
@@ -425,7 +432,7 @@ Test support for `read` from `$app/server`
 <div class="ts-block-property">
 
 ```dts
-emulate?(): MaybePromise<Emulator>;
+emulate?: () => MaybePromise<Emulator>;
 ```
 
 <div class="ts-block-property-details">
@@ -508,7 +515,7 @@ interface BeforeNavigate extends Navigation {/*…*/}
 <div class="ts-block-property">
 
 ```dts
-cancel(): void;
+cancel: () => void;
 ```
 
 <div class="ts-block-property-details">
@@ -545,7 +552,7 @@ Print messages to the console. `log.info` and `log.minor` are silent unless Vite
 <div class="ts-block-property">
 
 ```dts
-rimraf(dir: string): void;
+rimraf: (dir: string) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -558,7 +565,7 @@ Remove `dir` and all its contents.
 <div class="ts-block-property">
 
 ```dts
-mkdirp(dir: string): void;
+mkdirp: (dir: string) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -610,7 +617,7 @@ An array of all routes (including prerendered)
 <div class="ts-block-property">
 
 ```dts
-createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
+createEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise<void>;
 ```
 
 <div class="ts-block-property-details">
@@ -630,7 +637,7 @@ Create separate functions that map to one or more routes of your app.
 <div class="ts-block-property">
 
 ```dts
-findServerAssets(routes: RouteDefinition[]): string[];
+findServerAssets: (routes: RouteDefinition[]) => string[];
 ```
 
 <div class="ts-block-property-details">
@@ -643,7 +650,7 @@ Find all the assets imported by server files belonging to `routes`
 <div class="ts-block-property">
 
 ```dts
-generateFallback(dest: string): Promise<void>;
+generateFallback: (dest: string) => Promise<void>;
 ```
 
 <div class="ts-block-property-details">
@@ -656,7 +663,7 @@ Generate a fallback page for a static webserver to use when no route is matched.
 <div class="ts-block-property">
 
 ```dts
-generateEnvModule(): void;
+generateEnvModule: () => void;
 ```
 
 <div class="ts-block-property-details">
@@ -669,7 +676,7 @@ Generate a module exposing build-time environment variables as `$env/dynamic/pub
 <div class="ts-block-property">
 
 ```dts
-generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string;
+generateManifest: (opts: { relativePath: string; routes?: RouteDefinition[] }) => string;
 ```
 
 <div class="ts-block-property-details">
@@ -688,7 +695,7 @@ Generate a server-side manifest to initialise the SvelteKit [server](/docs/kit/@
 <div class="ts-block-property">
 
 ```dts
-getBuildDirectory(name: string): string;
+getBuildDirectory: (name: string) => string;
 ```
 
 <div class="ts-block-property-details">
@@ -707,7 +714,7 @@ Resolve a path to the `name` directory inside `outDir`, e.g. `/path/to/.svelte-k
 <div class="ts-block-property">
 
 ```dts
-getClientDirectory(): string;
+getClientDirectory: () => string;
 ```
 
 <div class="ts-block-property-details">
@@ -720,7 +727,7 @@ Get the fully resolved path to the directory containing client-side assets, incl
 <div class="ts-block-property">
 
 ```dts
-getServerDirectory(): string;
+getServerDirectory: () => string;
 ```
 
 <div class="ts-block-property-details">
@@ -733,7 +740,7 @@ Get the fully resolved path to the directory containing server-side code.
 <div class="ts-block-property">
 
 ```dts
-getAppPath(): string;
+getAppPath: () => string;
 ```
 
 <div class="ts-block-property-details">
@@ -746,7 +753,7 @@ Get the application path including any configured `base` path, e.g. `my-base-pat
 <div class="ts-block-property">
 
 ```dts
-writeClient(dest: string): string[];
+writeClient: (dest: string) => string[];
 ```
 
 <div class="ts-block-property-details">
@@ -766,7 +773,7 @@ Write client assets to `dest`.
 <div class="ts-block-property">
 
 ```dts
-writePrerendered(dest: string): string[];
+writePrerendered: (dest: string) => string[];
 ```
 
 <div class="ts-block-property-details">
@@ -786,7 +793,7 @@ Write prerendered files to `dest`.
 <div class="ts-block-property">
 
 ```dts
-writeServer(dest: string): string[];
+writeServer: (dest: string) => string[];
 ```
 
 <div class="ts-block-property-details">
@@ -806,14 +813,14 @@ Write server-side code to `dest`.
 <div class="ts-block-property">
 
 ```dts
-copy(
+copy: (
 	from: string,
 	to: string,
 	opts?: {
 		filter?(basename: string): boolean;
 		replace?: Record<string, string>;
 	}
-): string[];
+) => string[];
 ```
 
 <div class="ts-block-property-details">
@@ -836,7 +843,7 @@ Copy a file or directory.
 <div class="ts-block-property">
 
 ```dts
-compress(directory: string): Promise<void>;
+compress: (directory: string) => Promise<void>;
 ```
 
 <div class="ts-block-property-details">
@@ -885,7 +892,7 @@ interface Cookies {/*…*/}
 <div class="ts-block-property">
 
 ```dts
-get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;
+get: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined;
 ```
 
 <div class="ts-block-property-details">
@@ -905,7 +912,7 @@ Gets a cookie that was previously set with `cookies.set`, or from the request he
 <div class="ts-block-property">
 
 ```dts
-getAll(opts?: import('cookie').CookieParseOptions): Array<{ name: string; value: string }>;
+getAll: (opts?: import('cookie').CookieParseOptions) => Array<{ name: string; value: string }>;
 ```
 
 <div class="ts-block-property-details">
@@ -924,11 +931,11 @@ Gets all cookies that were previously set with `cookies.set`, or from the reques
 <div class="ts-block-property">
 
 ```dts
-set(
+set: (
 	name: string,
 	value: string,
 	opts: import('cookie').CookieSerializeOptions & { path: string }
-): void;
+) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -953,7 +960,7 @@ You must specify a `path` for the cookie. In most cases you should explicitly se
 <div class="ts-block-property">
 
 ```dts
-delete(name: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void;
+delete: (name: string, opts: import('cookie').CookieSerializeOptions & { path: string }) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -975,11 +982,11 @@ You must specify a `path` for the cookie. In most cases you should explicitly se
 <div class="ts-block-property">
 
 ```dts
-serialize(
+serialize: (
 	name: string,
 	value: string,
 	opts: import('cookie').CookieSerializeOptions & { path: string }
-): string;
+) => string;
 ```
 
 <div class="ts-block-property-details">
@@ -1037,10 +1044,10 @@ This allows you to modify response headers or bodies, or bypass SvelteKit entire
 ```dts
 type Handle = (input: {
 	event: RequestEvent;
-	resolve(
+	resolve: (
 		event: RequestEvent,
 		opts?: ResolveOptions
-	): MaybePromise<Response>;
+	) => MaybePromise<Response>;
 }) => MaybePromise<Response>;
 ```
 
@@ -1250,7 +1257,7 @@ Contains the data returned by the route's server `load` function (in `+layout.se
 <div class="ts-block-property">
 
 ```dts
-setHeaders(headers: Record<string, string>): void;
+setHeaders: (headers: Record<string, string>) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -1285,7 +1292,7 @@ You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/
 <div class="ts-block-property">
 
 ```dts
-parent(): Promise<ParentData>;
+parent: () => Promise<ParentData>;
 ```
 
 <div class="ts-block-property-details">
@@ -1301,7 +1308,7 @@ Be careful not to introduce accidental waterfalls when using `await parent()`. I
 <div class="ts-block-property">
 
 ```dts
-depends(...deps: Array<`${string}:${string}`>): void;
+depends: (...deps: Array<`${string}:${string}`>) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -1349,7 +1356,7 @@ export async function load({ depends }) {
 <div class="ts-block-property">
 
 ```dts
-untrack<T>(fn: () => T): T;
+untrack: <T>(fn: () => T) => T;
 ```
 
 <div class="ts-block-property-details">
@@ -1671,7 +1678,7 @@ Since `onNavigate` callbacks are called immediately before a client-side navigat
 
 ## Page
 
-The shape of the `$page` store
+The shape of the [`page`](/docs/kit/$app-state#page) reactive object and the [`$page`](/docs/kit/$app-stores) store.
 
 <div class="ts-block">
 
@@ -1693,7 +1700,7 @@ url: URL;
 
 <div class="ts-block-property-details">
 
-The URL of the current page
+The URL of the current page.
 
 </div>
 </div>
@@ -1706,7 +1713,7 @@ params: Params;
 
 <div class="ts-block-property-details">
 
-The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object
+The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.
 
 </div>
 </div>
@@ -1719,7 +1726,7 @@ route: {/*…*/}
 
 <div class="ts-block-property-details">
 
-Info about the current route
+Info about the current route.
 
 <div class="ts-block-property-children"><div class="ts-block-property">
 
@@ -1729,7 +1736,7 @@ id: RouteId;
 
 <div class="ts-block-property-details">
 
-The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`.
 
 </div>
 </div></div>
@@ -1745,7 +1752,7 @@ status: number;
 
 <div class="ts-block-property-details">
 
-Http status code of the current page
+HTTP status code of the current page.
 
 </div>
 </div>
@@ -1910,7 +1917,7 @@ You can learn more about making credentialed requests with cookies [here](/docs/
 <div class="ts-block-property">
 
 ```dts
-getClientAddress(): string;
+getClientAddress: () => string;
 ```
 
 <div class="ts-block-property-details">
@@ -2001,7 +2008,7 @@ The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/b
 <div class="ts-block-property">
 
 ```dts
-setHeaders(headers: Record<string, string>): void;
+setHeaders: (headers: Record<string, string>) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -2121,7 +2128,7 @@ interface ResolveOptions {/*…*/}
 <div class="ts-block-property">
 
 ```dts
-transformPageChunk?(input: { html: string; done: boolean }): MaybePromise<string | undefined>;
+transformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;
 ```
 
 <div class="ts-block-property-details">
@@ -2142,7 +2149,7 @@ but they will always be split at sensible boundaries such as `%sveltekit.head%`
 <div class="ts-block-property">
 
 ```dts
-filterSerializedResponseHeaders?(name: string, value: string): boolean;
+filterSerializedResponseHeaders?: (name: string, value: string) => boolean;
 ```
 
 <div class="ts-block-property-details">
@@ -2163,7 +2170,7 @@ By default, none will be included.
 <div class="ts-block-property">
 
 ```dts
-preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
+preload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }) => boolean;
 ```
 
 <div class="ts-block-property-details">
@@ -2345,7 +2352,7 @@ routes: SSRRoute[];
 <div class="ts-block-property">
 
 ```dts
-matchers(): Promise<Record<string, ParamMatcher>>;
+matchers: () => Promise<Record<string, ParamMatcher>>;
 ```
 
 <div class="ts-block-property-details"></div>
@@ -2466,7 +2473,7 @@ interface ServerLoadEvent<
 <div class="ts-block-property">
 
 ```dts
-parent(): Promise<ParentData>;
+parent: () => Promise<ParentData>;
 ```
 
 <div class="ts-block-property-details">
@@ -2481,7 +2488,7 @@ Be careful not to introduce accidental waterfalls when using `await parent()`. I
 <div class="ts-block-property">
 
 ```dts
-depends(...deps: string[]): void;
+depends: (...deps: string[]) => void;
 ```
 
 <div class="ts-block-property-details">
@@ -2529,7 +2536,7 @@ export async function load({ depends }) {
 <div class="ts-block-property">
 
 ```dts
-untrack<T>(fn: () => T): T;
+untrack: <T>(fn: () => T) => T;
 ```
 
 <div class="ts-block-property-details">
@@ -2596,7 +2603,7 @@ type SubmitFunction<
 	formElement: HTMLFormElement;
 	controller: AbortController;
 	submitter: HTMLElement | null;
-	cancel(): void;
+	cancel: () => void;
 }) => MaybePromise<
 	| void
 	| ((opts: {
@@ -2609,10 +2616,10 @@ type SubmitFunction<
 			 * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.
 			 * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.
 			 */
-			update(options?: {
+			update: (options?: {
 				reset?: boolean;
 				invalidateAll?: boolean;
-			}): Promise<void>;
+			}) => Promise<void>;
 	  }) => void)
 >;
 ```
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
index 4caad2b1af..e9c99d5c15 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-forms.md
@@ -86,6 +86,9 @@ If this function or its return value isn't set, it
 - redirects to the nearest error page in case of an unexpected error
 
 If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
+It accepts an options object
+- `reset: false` if you don't want the `<form>` values to be reset after a successful submission
+- `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index 53d80b9c38..ac29666d00 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -101,6 +101,9 @@ function goto(
 				noScroll?: boolean | undefined;
 				keepFocus?: boolean | undefined;
 				invalidateAll?: boolean | undefined;
+				invalidate?:
+					| (string | URL | ((url: URL) => boolean))[]
+					| undefined;
 				state?: App.PageState | undefined;
 		  }
 		| undefined
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
index 6dba39add8..652ec7ac4f 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-state.md
@@ -62,6 +62,17 @@ A read-only reactive object with information about the current page, serving sev
 {/if}
 ```
 
+Changes to `page` are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+	import { page } from '$app/state';
+	const id = $derived(page.params.id); // This will correctly update id for usage on this page
+	$: badId = page.params.id; // Do not use; will never update after initial load
+</script>
+```
+
 On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
 
 <div class="ts-block">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 759a18d5b4..f1302471a9 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -741,11 +741,42 @@ bundleStrategy?: 'split' | 'single' | 'inline';
 
 </div>
 
+The bundle strategy option affects how your app's JavaScript and CSS files are loaded.
 - If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.
 - If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.
 - If `'inline'`, inlines all JavaScript and CSS of the entire app into the HTML. The result is usable without a server (i.e. you can just open the file in your browser).
 
-When using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks)inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).
+When using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks) inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).
+
+If you want to inline your assets, you'll need to set Vite's [`build.assetsInlineLimit`](https://vite.dev/config/build-options.html#build-assetsinlinelimit) option to an appropriate size then import your assets through Vite.
+
+```js
+// @errors: 7031
+/// file: vite.config.js
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	build: {
+		// inline all imported assets
+		assetsInlineLimit: Infinity
+	}
+});
+```
+
+```svelte
+/// file: src/routes/+layout.svelte
+<script>
+	// import the asset through Vite
+	import favicon from './favicon.png';
+</script>
+
+<svelte:head>
+	<!-- this asset will be inlined as a base64 URL -->
+	<link rel="icon" href={favicon} />
+</svelte:head>
+```
 
 </div>
 </div>
@@ -1052,7 +1083,7 @@ type?: 'pathname' | 'hash';
 What type of client-side router to use.
 - `'pathname'` is the default and means the current URL pathname determines the route
 - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
-	It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with /#/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
+	It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with #/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
 
 </div>
 </div>
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index 0e2c95ba28..fe22ef78bd 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -85,6 +85,37 @@ export async function load({ params, fetch }) {
 }
 ```
 
+The return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`. Starting with version 2.16.0, two additional helper types are provided. `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined. `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`:
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data, form } = $props();
+</script>
+```
+
+> [!LEGACY]
+> Before 2.16.0:
+> ```svelte
+> <!--- file: src/routes/+page.svelte --->
+> <script>
+> 	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
+> 	let { data, form } = $props();
+> </script>
+> ```
+>
+> Using Svelte 4:
+> ```svelte
+> <!--- file: src/routes/+page.svelte --->
+> <script>
+>   /** @type {import('./$types').PageData} */
+>   export let data;
+>   /** @type {import('./$types').ActionData} */
+>   export let form;
+> </script>
+> ```
+
 > [!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)):
 >
 > `{ "extends": "./.svelte-kit/tsconfig.json" }`

From d160b1930312713d4c8c405b35d1d6278f269403 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:57:12 +0100
Subject: [PATCH 293/453] Sync `svelte` docs (#1104)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../svelte/03-template-syntax/09-@const.md    |  2 +-
 .../svelte/03-template-syntax/18-class.md     | 12 +++++
 .../98-reference/.generated/compile-errors.md |  2 +-
 .../svelte/98-reference/21-svelte-motion.md   |  9 ----
 .../98-reference/21-svelte-reactivity.md      | 45 -------------------
 .../svelte/98-reference/30-compiler-errors.md |  2 +-
 6 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
index 17dff83eec..afb7b9b2ba 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
@@ -12,4 +12,4 @@ The `{@const ...}` tag defines a local constant.
 {/each}
 ```
 
-`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — or a `<Component />`.
+`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary`.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md
index acf65a03ce..116aae1439 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md
@@ -72,6 +72,18 @@ The user of this component has the same flexibility to use a mixture of objects,
 </Button>
 ```
 
+Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:
+
+```svelte
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
 ## The `class:` directive
 
 Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index a867cfe88c..2fef3bd45d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -187,7 +187,7 @@ Cyclical dependency detected: %cycle%
 ### const_tag_invalid_placement
 
 ```
-`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
 ```
 
 ### constant_assignment
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
index 59046d7797..c1ca57e4fc 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md
@@ -252,15 +252,6 @@ set target(v: T);
 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>
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index b7f94e7d69..401941c542 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
@@ -101,15 +101,6 @@ class SvelteDate extends Date {/*…*/}
 constructor(...params: any[]);
 ```
 
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-#private;
-```
-
 <div class="ts-block-property-details"></div>
 </div></div>
 
@@ -138,15 +129,6 @@ constructor(value?: Iterable<readonly [K, V]> | null | undefined);
 set(key: K, value: V): this;
 ```
 
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-#private;
-```
-
 <div class="ts-block-property-details"></div>
 </div></div>
 
@@ -175,15 +157,6 @@ constructor(value?: Iterable<T> | null | undefined);
 add(value: T): this;
 ```
 
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-#private;
-```
-
 <div class="ts-block-property-details"></div>
 </div></div>
 
@@ -203,15 +176,6 @@ class SvelteURL extends URL {/*…*/}
 get searchParams(): SvelteURLSearchParams;
 ```
 
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-#private;
-```
-
 <div class="ts-block-property-details"></div>
 </div></div>
 
@@ -231,15 +195,6 @@ class SvelteURLSearchParams extends URLSearchParams {/*…*/}
 [REPLACE](params: URLSearchParams): void;
 ```
 
-<div class="ts-block-property-details"></div>
-</div>
-
-<div class="ts-block-property">
-
-```dts
-#private;
-```
-
 <div class="ts-block-property-details"></div>
 </div></div>
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index c9ea54c994..b51ad849a2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -192,7 +192,7 @@ Cyclical dependency detected: %cycle%
 ### const_tag_invalid_placement
 
 ```
-`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
 ```
 
 ### constant_assignment

From ae3ead096df46c49f9f604f28ac295b389acd90e Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Thu, 23 Jan 2025 16:47:48 -0700
Subject: [PATCH 294/453] feat: Remove Rich Harris as commenter on preview
 comments (#1120)

* feat: Remove Rich Harris as commenter on preview comments

* chore: Move to workflow_dispatch, makes more sense

* chore: name job descriptively

* feat: Rename inputs, use repository dispatch to request comment
---
 .github/workflows/docs-preview-create.yml | 54 ++++++++++++-----------
 .github/workflows/docs-preview-delete.yml | 14 ++++--
 .github/workflows/sync-docs.yml           | 16 ++++---
 3 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index fcbfab0d57..8ee9ea15bc 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -1,14 +1,31 @@
 name: Docs preview create
 
 on:
-  repository_dispatch:
-    types: [docs-preview-create]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
+      pr:
+        description: 'PR number'
+        required: true
+        type: string
+      owner:
+        description: 'Owner (eg. sveltejs)'
+        required: true
+        type: string
+      branch:
+        description: 'Branch (eg. my-feature-branch)'
+        required: true
+        type: string
 
 env:
-  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+  BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}
 
 jobs:
   Sync:
+    name: Sync
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -25,7 +42,7 @@ jobs:
         run: git fetch origin ${{ env.BRANCH }} && git checkout ${{ env.BRANCH }} || git checkout -b ${{ env.BRANCH }}
 
       - name: Sync
-        run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"
+        run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ inputs.owner }}" -p "${{ inputs.repo }}#${{ inputs.branch }}"
 
       - name: Configure Git
         run: |
@@ -36,25 +53,12 @@ jobs:
         id: push
         run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
 
-      - name: Find comment
-        id: fc
-        uses: peter-evans/find-comment@v3
+      - name: Request preview comment
+        uses: peter-evans/repository-dispatch@v3
         with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
-          repository: ${{ github.event.client_payload.repo }}
-          issue-number: ${{ github.event.client_payload.pr }}
-          comment-author: 'Rich-Harris' # it's using my personal access token, not sure if there's a way to comment as a bot instead
-          body-includes: _this is an automated message_
-
-      - name: Create comment
-        if: steps.fc.outputs.comment-id == ''
-        uses: peter-evans/create-or-update-comment@v4
-        with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
-          repository: ${{ github.event.client_payload.repo }}
-          issue-number: ${{ github.event.client_payload.pr }}
-          body: |
-            preview: https://svelte-dev-git-${{ env.BRANCH }}-svelte.vercel.app/
-
-            _this is an automated message_
-          edit-mode: replace
+          event-type: 'request-preview-comment'
+          client-payload: |-
+            {
+              "repo": "${{ inputs.repo }}",
+              "pr": "${{ inputs.pr }}",
+            }
diff --git a/.github/workflows/docs-preview-delete.yml b/.github/workflows/docs-preview-delete.yml
index d9f2a77f4b..faa13fbade 100644
--- a/.github/workflows/docs-preview-delete.yml
+++ b/.github/workflows/docs-preview-delete.yml
@@ -1,11 +1,19 @@
 name: Docs preview delete
 
 on:
-  repository_dispatch:
-    types: [docs-preview-delete]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
+      pr:
+        description: 'PR number'
+        required: true
+        type: string
 
 env:
-  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+  BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}
 
 jobs:
   Sync:
diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 4c6ba04953..67f0d58db4 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -1,8 +1,12 @@
 name: Sync docs
 
 on:
-  repository_dispatch:
-    types: [sync-request]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
 
 jobs:
   Sync:
@@ -17,13 +21,13 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Sync
-        run: cd apps/svelte.dev && pnpm sync-docs -p ${{ github.event.client_payload.package }}
+        run: cd apps/svelte.dev && pnpm sync-docs -p ${{ inputs.repo }}
 
       - name: Create or update pull request
         uses: peter-evans/create-pull-request@v7
         with:
-          commit-message: sync ${{ github.event.client_payload.package }} docs
-          title: Sync `${{ github.event.client_payload.package }}` docs
+          commit-message: sync ${{ inputs.repo }} docs
+          title: Sync `${{ inputs.repo }}` docs
           body: This is an automated pull request. See the [README](../tree/main/apps/svelte.dev/scripts/sync-docs/README.md) for more information
-          branch: sync-${{ github.event.client_payload.package }}
+          branch: sync-${{ inputs.repo }}
           base: main

From 3e6083e3ef50d47813b60e8a20983e89d57d091f Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Thu, 23 Jan 2025 16:59:12 -0700
Subject: [PATCH 295/453] chore: Fix broken trailing comma (#1121)

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 8ee9ea15bc..00b89cac88 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -60,5 +60,5 @@ jobs:
           client-payload: |-
             {
               "repo": "${{ inputs.repo }}",
-              "pr": "${{ inputs.pr }}",
+              "pr": "${{ inputs.pr }}"
             }

From 965cf81d323844e4bb30ef5191152d34c5b8acc5 Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Fri, 24 Jan 2025 12:46:37 -0700
Subject: [PATCH 296/453] feat: Add concurrency to docs-preview-create.yml
 (#1123)

---
 .github/workflows/docs-preview-create.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 00b89cac88..2d77ed56d8 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -27,6 +27,11 @@ jobs:
   Sync:
     name: Sync
     runs-on: ubuntu-latest
+
+    concurrency:
+      group: preview-${{ inputs.repo }}-${{ inputs.pr }} # can't reference env here
+      cancel-in-progress: true
+
     steps:
       - uses: actions/checkout@v4
         with:

From be182c9ef9e788f2d87feec064ffc579cec67892 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 24 Jan 2025 16:03:12 -0500
Subject: [PATCH 297/453] support experimental options (#1124)

---
 .../editor/src/lib/compile-worker/worker.ts   | 35 +++++++++++++++-
 .../repl/src/lib/workers/bundler/index.ts     | 41 ++++++++++++++++---
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index b2c6053518..ce90e79850 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -12,6 +12,8 @@ declare var self: Window & typeof globalThis & { svelte: typeof import('svelte/c
 
 let inited: PromiseWithResolvers<typeof self.svelte>;
 
+let can_use_experimental_async = false;
+
 async function init(v: string) {
 	const svelte_url = v === 'local' ? '/svelte' : `https://unpkg.com/svelte@${v}`;
 	const match = /^(?:pr|commit)-(.+)/.exec(v);
@@ -46,6 +48,23 @@ async function init(v: string) {
 
 	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
 
+	try {
+		self.svelte.compileModule('', {
+			generate: 'client',
+			// @ts-expect-error
+			experimental: {
+				async: true
+			}
+		});
+
+		can_use_experimental_async = true;
+	} catch (e) {
+		console.error(e);
+		// do nothing
+	}
+
+	console.log({ can_use_experimental_async });
+
 	return self.svelte;
 }
 
@@ -101,16 +120,28 @@ addEventListener('message', async (event) => {
 				dev: options.dev,
 				filename: file.name
 			};
+
 			if (!is_svelte_3_or_4) {
 				compilerOptions.modernAst = options.modernAst; // else Svelte 3/4 will throw an "unknown option" error
 			}
+
+			if (can_use_experimental_async) {
+				compilerOptions.experimental = { async: true };
+			}
+
 			result = svelte.compile(file.contents, compilerOptions);
 		} else {
-			result = svelte.compileModule(file.contents, {
+			const compilerOptions: any = {
 				generate: options.generate,
 				dev: options.dev,
 				filename: file.name
-			});
+			};
+
+			if (can_use_experimental_async) {
+				compilerOptions.experimental = { async: true };
+			}
+
+			result = svelte.compileModule(file.contents, compilerOptions);
 		}
 
 		postMessage({
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index b65147fbec..1c4631aa62 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -31,6 +31,8 @@ let current_id: number;
 
 let inited = Promise.withResolvers<typeof svelte>();
 
+let can_use_experimental_async = false;
+
 async function init(v: string, packages_url: string) {
 	const match = /^(pr|commit)-(.+)/.exec(v);
 
@@ -80,6 +82,23 @@ async function init(v: string, packages_url: string) {
 
 	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
 
+	try {
+		self.svelte.compileModule('', {
+			generate: 'client',
+			// @ts-expect-error
+			experimental: {
+				async: true
+			}
+		});
+
+		can_use_experimental_async = true;
+	} catch (e) {
+		console.error(e);
+		// do nothing
+	}
+
+	console.log({ can_use_experimental_async });
+
 	return svelte;
 }
 
@@ -405,13 +424,18 @@ async function get_bundle(
 			if (cached_id && cached_id.code === code) {
 				result = cached_id.result;
 			} else if (id.endsWith('.svelte')) {
-				result = svelte.compile(code, {
+				const compilerOptions: any = {
 					...options,
 					filename: name + '.svelte',
-					// @ts-expect-error
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
-				});
+				};
+
+				if (can_use_experimental_async) {
+					compilerOptions.experimental = { async: true };
+				}
+
+				result = svelte.compile(code, compilerOptions);
 
 				if (result.css?.code) {
 					// resolve local files by inlining them
@@ -441,11 +465,18 @@ async function get_bundle(
 				`.replace(/\t/g, '');
 				}
 			} else if (id.endsWith('.svelte.js')) {
-				result = svelte.compileModule?.(code, {
+				const compilerOptions: any = {
 					filename: name + '.js',
 					generate: 'client',
 					dev: true
-				});
+				};
+
+				if (can_use_experimental_async) {
+					compilerOptions.experimental = { async: true };
+				}
+
+				result = svelte.compileModule?.(code, compilerOptions);
+
 				if (!result) {
 					return null;
 				}

From e7c091adc6c9792a7249e2eb48c6241c7e87ea59 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 25 Jan 2025 08:22:18 -0500
Subject: [PATCH 298/453] allow branch playground urls (#1125)

---
 packages/editor/src/lib/compile-worker/worker.ts | 2 +-
 packages/repl/src/lib/workers/bundler/index.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index ce90e79850..7c22fb5424 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -16,7 +16,7 @@ let can_use_experimental_async = false;
 
 async function init(v: string) {
 	const svelte_url = v === 'local' ? '/svelte' : `https://unpkg.com/svelte@${v}`;
-	const match = /^(?:pr|commit)-(.+)/.exec(v);
+	const match = /^(?:pr|commit|branch)-(.+)/.exec(v);
 
 	let tarball: FileDescription[] | undefined;
 	let version: string;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 1c4631aa62..f9e5925a09 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -34,7 +34,7 @@ let inited = Promise.withResolvers<typeof svelte>();
 let can_use_experimental_async = false;
 
 async function init(v: string, packages_url: string) {
-	const match = /^(pr|commit)-(.+)/.exec(v);
+	const match = /^(pr|commit|branch)-(.+)/.exec(v);
 
 	let tarball: FileDescription[] | undefined;
 

From 7a8fa4d4dc8da494f9fa9ec3b856570995f9b1ac Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:37:47 +0100
Subject: [PATCH 299/453] Sync `kit` docs (#1116)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../25-build-and-deploy/90-adapter-vercel.md    | 11 +++++------
 .../content/docs/kit/30-advanced/20-hooks.md    |  7 +++++++
 .../docs/kit/30-advanced/70-packaging.md        | 17 +++++++++++++++++
 .../docs/kit/40-best-practices/03-auth.md       |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md   |  8 ++++++++
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index 073f5e12d2..af9d3ab4f6 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -70,13 +70,12 @@ If your functions need to access data in a specific region, it's recommended tha
 You may set the `images` config to control how Vercel builds your images. See the [image configuration reference](https://vercel.com/docs/build-output-api/v3/configuration#images) for full details. As an example, you may set:
 
 ```js
-// @errors: 2300 2842 7031 1181 1005 1136 1128
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-vercel';
 
 export default {
 	kit: {
-		adapter({
+		adapter: adapter({
 			images: {
 				sizes: [640, 828, 1200, 1920, 3840],
 				formats: ['image/avif', 'image/webp'],
@@ -125,16 +124,16 @@ Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will for
 
 Note that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:
 
-```console
-btoa(Math.random().toString()).substring(0,32);
+```js
+crypto.randomUUID();
 ```
 
 Set this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For "Key" put `BYPASS_TOKEN` and for "value" use the string generated above, then hit "Save".
 
 To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:
 
-```console
-$ vercel env pull .env.development.local
+```sh
+vercel env pull .env.development.local
 ```
 
 ### allowQuery
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 15f67005f1..91a56728f0 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -68,6 +68,13 @@ export async function handle({ event, resolve }) {
 	event.locals.user = await getUserInformation(event.cookies.get('sessionid'));
 
 	const response = await resolve(event);
+
+	// Note that modifying response headers isn't always safe.
+	// Response objects can have immutable headers
+	// (e.g. Response.redirect() returned from an endpoint).
+	// Modifying immutable headers throws a TypeError.
+	// In that case, clone the response or avoid creating a
+	// response object with immutable headers.
 	response.headers.set('x-custom-header', 'potato');
 
 	return response;
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
index 78f656119e..b354fca1e5 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
@@ -219,6 +219,23 @@ You should think carefully about whether or not the changes you make to your pac
 }
 ```
 
+## Source maps
+
+You can create so-called declaration maps (`d.ts.map` files) by setting `"declarationMap": true` in your `tsconfig.json`. This will allow editors such as VS Code to go to the original `.ts` or `.svelte` file when using features like _Go to Definition_. This means you also need to publish your source files alongside your dist folder in a way that the relative path inside the declaration files leads to a file on disk. Assuming that you have all your library code inside `src/lib` as suggested by Svelte's CLI, this is as simple as adding `src/lib` to `files` in your `package.json`:
+
+```json
+{
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		+++"src/lib",
+		"!src/lib/**/*.test.*",
+		"!src/lib/**/*.spec.*"+++
+	]
+}
+```
+
 ## Options
 
 `svelte-package` accepts the following options:
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
index daf6c48334..a2167e0b5e 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md
@@ -19,6 +19,6 @@ Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks
 
 ## Guides
 
-[Lucia](https://lucia-auth.com/) is a reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
+[Lucia](https://lucia-auth.com/) is a good reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.
 
 An auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index b3c855540f..a3c8095515 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -2351,6 +2351,14 @@ routes: SSRRoute[];
 </div>
 <div class="ts-block-property">
 
+```dts
+prerendered_routes: Set<string>;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+<div class="ts-block-property">
+
 ```dts
 matchers: () => Promise<Record<string, ParamMatcher>>;
 ```

From caac675206f63e138330651354cdcf394885aa7d Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 30 Jan 2025 12:24:23 -0800
Subject: [PATCH 300/453] docs: link to old site in welcoming directory (#1132)

* docs: link to old site in welcoming directory

* curly quote thing

* format
---
 apps/svelte.dev/src/routes/docs/+page.svelte | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index cfc220883a..c338b6caa8 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -95,18 +95,26 @@
 		</a>
 
 		<a href="http://github.com/docs/llms">
-			<h2>I'm a Large Language Model (LLM)</h2>
+			<h2>I&rsquo;m a Large Language Model (LLM)</h2>
 			<p>
-				If you're an artificial intelligence, or trying to teach one how to use Svelte, we offer the
-				documentation in plaintext format. Beep boop.
+				If you&rsquo;re an artificial intelligence, or trying to teach one how to use Svelte, we
+				offer the documentation in plaintext format. Beep boop.
+			</p>
+		</a>
+
+		<a href="https://v4.svelte.dev/">
+			<h2>I&rsquo;m looking for the old docs</h2>
+			<p>
+				If you&rsquo;re developing a site using only Svelte 3 or Svelte 4, the old site may be a
+				helpful reference until you upgrade.
 			</p>
 		</a>
 
 		<a href="http://github.com/chat" class="external">
-			<h2>Help! I'm stuck</h2>
+			<h2>Help! I&rsquo;m stuck</h2>
 			<p>
 				Join our Discord server where you can hang out with fellow Svelte users and ask them
-				questions. It's like an LLM but with people.
+				questions. It&rsquo;s like an LLM but with people.
 			</p>
 		</a>
 	</div>

From a23a0288b125de7fe8e459b8fd542c34395a951e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 31 Jan 2025 07:06:46 -0500
Subject: [PATCH 301/453] fix: allow inline dynamic imports (#1136)

---
 packages/repl/src/lib/workers/bundler/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index f9e5925a09..324d32574a 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -521,9 +521,6 @@ async function get_bundle(
 					'process.env.NODE_ENV': JSON.stringify('production')
 				})
 			],
-			output: {
-				inlineDynamicImports: true
-			},
 			onwarn(warning) {
 				all_warnings.push({
 					message: warning.message
@@ -630,7 +627,8 @@ async function bundle({
 		const client_result = (
 			await client.bundle?.generate({
 				format: 'iife',
-				exports: 'named'
+				exports: 'named',
+				inlineDynamicImports: true
 				// sourcemap: 'inline'
 			})
 		)?.output[0];

From f71b1c684336134e130cb101c5b8381a673481e7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 31 Jan 2025 07:07:19 -0500
Subject: [PATCH 302/453] remove logging (#1137)

---
 packages/editor/src/lib/compile-worker/worker.ts | 2 --
 packages/repl/src/lib/workers/bundler/index.ts   | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index 7c22fb5424..c00ed75e9f 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -63,8 +63,6 @@ async function init(v: string) {
 		// do nothing
 	}
 
-	console.log({ can_use_experimental_async });
-
 	return self.svelte;
 }
 
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 324d32574a..6b2f7b26d5 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -97,8 +97,6 @@ async function init(v: string, packages_url: string) {
 		// do nothing
 	}
 
-	console.log({ can_use_experimental_async });
-
 	return svelte;
 }
 

From f5e9142c6ecffdb3f4a17ca1980d43d7db99f369 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:36:44 +0100
Subject: [PATCH 303/453] Sync `kit` docs (#1135)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/10-routing.md   |  4 +-
 .../kit/20-core-concepts/30-form-actions.md   |  2 +-
 .../30-migrating-to-sveltekit-2.md            |  2 +-
 .../docs/kit/98-reference/50-configuration.md | 35 ++++++++++++++++
 .../content/docs/kit/98-reference/54-types.md | 41 +++++++++++++------
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index 46159a1791..d6fb735d9f 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -38,6 +38,8 @@ A `+page.svelte` component defines a page of your app. By default, pages are ren
 <a href="http://github.com/">Home</a>
 ```
 
+> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
+
 Pages can receive data from `load` functions via the `data` prop.
 
 ```svelte
@@ -56,8 +58,6 @@ Pages can receive data from `load` functions via the `data` prop.
 >
 > In Svelte 4, you'd use `export let data` instead.
 
-> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
-
 ### +page.js
 
 Often, a page will need to load some data before it can be rendered. For this, we add a `+page.js` module that exports a `load` function:
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index fb0e591417..c0ae9dbf84 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -354,7 +354,7 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti
 <form method="POST" +++use:enhance+++>
 ```
 
-> [!NOTE] `use:enhance` can only be used with forms that have `method="POST"`. It will not work with `method="GET"`, which is the default for forms without a specified method. Attempting to use `use:enhance` on forms without `method="POST"` will result in an error.
+> [!NOTE] `use:enhance` can only be used with forms that have `method="POST"` and point to actions defined in a `+page.server.js` file. It will not work with `method="GET"`, which is the default for forms without a specified method. Attempting to use `use:enhance` on forms without `method="POST"` or posting to a `+server.js` endpoint will result in an error.
 
 > [!NOTE] Yes, it's a little confusing that the `enhance` action and `<form action>` are both called 'action'. These docs are action-packed. Sorry.
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
index bc1e6e59a0..6f018fbefd 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
@@ -130,7 +130,7 @@ The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _
 
 During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
 
-Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
+Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `/_app/env.js`) instead of reading them from the server-rendered HTML.
 
 ## `form` and `data` have been removed from `use:enhance` callbacks
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index f1302471a9..d1d4c343a7 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -1085,6 +1085,41 @@ What type of client-side router to use.
 - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.
 	It comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with #/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.
 
+</div>
+</div>
+<div class="ts-block-property">
+
+```ts
+// @noErrors
+resolution?: 'client' | 'server';
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag">default</span> `"client"`
+- <span class="tag since">available since</span> v2.17.0
+
+</div>
+
+How to determine which route to load when navigating to a new page.
+
+By default, SvelteKit will serve a route manifest to the browser.
+When navigating, this manifest is used (along with the `reroute` hook, if it exists) to determine which components to load and which `load` functions to run.
+Because everything happens on the client, this decision can be made immediately. The drawback is that the manifest needs to be
+loaded and parsed before the first navigation can happen, which may have an impact if your app contains many routes.
+
+Alternatively, SvelteKit can determine the route on the server. This means that for every navigation to a path that has not yet been visited, the server will be asked to determine the route.
+This has several advantages:
+- The client does not need to load the routing manifest upfront, which can lead to faster initial page loads
+- The list of routes is hidden from public view
+- The server has an opportunity to intercept each navigation (for example through a middleware), enabling (for example) A/B testing opaque to SvelteKit
+
+The drawback is that for unvisited paths, resolution will take slightly longer (though this is mitigated by [preloading](/docs/kit/link-options#data-sveltekit-preload-data)).
+
+> [!NOTE] When using server-side route resolution and prerendering, the resolution is prerendered along with the route itself.
+
 </div>
 </div>
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index fe22ef78bd..bd97d2ab2c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -128,15 +128,34 @@ The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. So
 /// file: .svelte-kit/tsconfig.json
 {
 	"compilerOptions": {
-		"baseUrl": "..",
 		"paths": {
-			"$lib": "src/lib",
-			"$lib/*": "src/lib/*"
+			"$lib": ["../src/lib"],
+			"$lib/*": ["../src/lib/*"]
 		},
 		"rootDirs": ["..", "./types"]
 	},
-	"include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
-	"exclude": ["../node_modules/**", "./**"]
+	"include": [
+		"ambient.d.ts",
+		"non-ambient.d.ts",
+		"./types/**/$types.d.ts",
+		"../vite.config.js",
+		"../vite.config.ts",
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte",
+		"../tests/**/*.js",
+		"../tests/**/*.ts",
+		"../tests/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"../src/service-worker.js",
+		"../src/service-worker/**/*.js",
+		"../src/service-worker.ts",
+		"../src/service-worker/**/*.ts",
+		"../src/service-worker.d.ts",
+		"../src/service-worker/**/*.d.ts"
+	]
 }
 ```
 
@@ -148,24 +167,22 @@ Others are required for SvelteKit to work properly, and should also be left unto
 	"compilerOptions": {
 		// this ensures that types are explicitly
 		// imported with `import type`, which is
-		// necessary as svelte-preprocess cannot
+		// necessary as Svelte/Vite cannot
 		// otherwise compile components correctly
-		"importsNotUsedAsValues": "error",
+		"verbatimModuleSyntax": true,
 
 		// Vite compiles one TypeScript module
 		// at a time, rather than compiling
 		// the entire module graph
 		"isolatedModules": true,
 
-		// TypeScript cannot 'see' when you
-		// use an imported value in your
-		// markup, so we need this
-		"preserveValueImports": true,
+		// Tell TS it's used only for type-checking
+		"noEmit": true,
 
 		// This ensures both `vite build`
 		// and `svelte-package` work correctly
 		"lib": ["esnext", "DOM", "DOM.Iterable"],
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"module": "esnext",
 		"target": "esnext"
 	}

From 2609fcc8766ea007f58a0005d968bc916e50714f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:37:19 +0100
Subject: [PATCH 304/453] Sync `svelte` docs (#1131)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md   | 2 +-
 .../content/docs/svelte/03-template-syntax/09-@const.md      | 2 +-
 .../content/docs/svelte/03-template-syntax/11-bind.md        | 2 +-
 .../content/docs/svelte/04-styling/01-scoped-styles.md       | 5 +----
 .../docs/svelte/05-special-elements/01-svelte-boundary.md    | 2 +-
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 8e83d56da5..5ca6045dfa 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -67,7 +67,7 @@ You can return a function from `$effect`, which will run immediately before the
 
 ### Understanding dependencies
 
-`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
+`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
 
 Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
index afb7b9b2ba..dc8c714149 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
@@ -12,4 +12,4 @@ The `{@const ...}` tag defines a local constant.
 {/each}
 ```
 
-`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary`.
+`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary>`.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 41c08d7ba4..4c309dcc32 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -236,7 +236,7 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 
 ## `<video>`
 
-`<video>` elements have all the same bindings as [#audio] elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
+`<video>` elements have all the same bindings as [`<audio>`](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
 
 ## `<img>`
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md b/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
index 681e908b81..b09afa7811 100644
--- a/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
+++ b/apps/svelte.dev/content/docs/svelte/04-styling/01-scoped-styles.md
@@ -34,10 +34,7 @@ If a component defines `@keyframes`, the name is scoped to the component using t
 
 	/* these keyframes are only accessible inside this component */
 	@keyframes bounce {
-		/* ... *.
+		/* ... */
 	}
 </style>
 ```
-
-
-
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
index 8723e3ca88..9260040679 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md
@@ -14,7 +14,7 @@ Boundaries allow you to guard against errors in part of your app from breaking t
 
 If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
 
-Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries.
+Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
 
 ## Properties
 

From 90ffb12884998f832d9bfd9b8d76e359860e57fa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:21:20 -0500
Subject: [PATCH 305/453] Sync `cli` docs (#1138)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md  | 2 +-
 .../svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
index ef1c492fb8..8d4e4af289 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/30-sv-check.md
@@ -122,7 +122,7 @@ The first row is of type `START` and contains the workspace folder (wrapped in q
 1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
 ```
 
-Any number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argoument.
+Any number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argument.
 
 If the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example:
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
index 5778f8a12c..4cc432faaa 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md
@@ -9,6 +9,11 @@ Some migrations may annotate your codebase with tasks for completion that you ca
 
 ## Usage
 
+```bash
+npx sv migrate
+```
+
+You can also specify a migration directly via the CLI:
 ```bash
 npx sv migrate [migration]
 ```

From 0de9b6265627887c997d581cafb6afcd7e5ed5cf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:22:32 -0500
Subject: [PATCH 306/453] Sync `svelte` docs (#1145)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/03-template-syntax/11-bind.md          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index 4c309dcc32..fcfe036211 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -220,11 +220,10 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 - [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
 - [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
 
-...and seven readonly ones:
+...and six readonly ones:
 
 - [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
 - [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)
-- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
 - [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)
 - [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
 - [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)

From 0e4b7b8d8c3d3538e62f795be995f3cfd92cf2a8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 3 Feb 2025 14:54:28 -0500
Subject: [PATCH 307/453] Sync `svelte` docs (#1146)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../svelte/07-misc/07-v5-migration-guide.md   | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 32cdbac47e..4e9e5fd010 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -723,7 +723,39 @@ If a bindable property has a default value (e.g. `let { foo = $bindable('bar') }
 
 ### `accessors` option is ignored
 
-Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance. In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
+Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.
+
+```svelte
+<svelte:options accessors={true} />
+
+<script>
+	// available via componentInstance.name
+	export let name;
+</script>
+```
+
+In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
+
+```svelte
+<script>
+	let { name } = $props();
+	// available via componentInstance.getName()
+	export const getName = () => name;
+</script>
+```
+
+Alternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:
+
+```js
++++import { mount } from 'svelte';+++
+import App from './App.svelte'
+
+---const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
+app.foo = 'baz'---
++++const props = $state({ foo: 'bar' });
+const app = mount(App, { target: document.getElementById("app"), props });
+props.foo = 'baz';+++
+```
 
 ### `immutable` option is ignored
 

From 9c05b0548ccdb315cc6e05765cc4416f05bc36fa Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani@equall.ai>
Date: Tue, 4 Feb 2025 11:36:50 -0700
Subject: [PATCH 308/453] docs: "What's new in Svelte" February newsletter
 (#1133)

* february draft

* fix urls

* Apply suggestions from code review

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...02-01-whats-new-in-svelte-february-2025.md | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md b/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md
new file mode 100644
index 0000000000..ae35eaeac6
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md
@@ -0,0 +1,85 @@
+---
+title: "What's new in Svelte: February 2025"
+description: 'New types, pnpm 10 support and better syntax highlighting'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+The Svelte developer experience got a huge upgrade this month with more exported types and better syntax highlighting in VS Code. Combine that with the huge releases from Storybook, Tailwind and Threlte... and you've got a pretty big month!
+
+Let's dive in 🐬
+
+## What's new in Svelte
+
+- Non-numeric values can now be tweened by snapping immediately to the new value (**5.17.0**, [Docs](/docs/svelte-motion#tweened), [#14941](https://github.com/sveltejs/svelte/pull/14941))
+- `const` tags are now allowed inside of a `svelte:boundary` (**5.17.5**, [Docs](/docs/svelte/svelte-boundary), [#14993](https://github.com/sveltejs/svelte/pull/14993))
+- `<template>` elements are now allowed to contain any child elements (**5.18.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), [#15007](https://github.com/sveltejs/svelte/pull/15007))
+- `ClassValue` is now exposed from `svelte/elements` (**5.19.0**, [Docs](/docs/svelte/class#Attributes-Objects-and-arrays)), [#15035](https://github.com/sveltejs/svelte/pull/15035))
+
+
+## What's new in SvelteKit and Language Tools
+
+- Custom identifiers can now be invalidated on `goto()` navigation (**2.16.0**, [Docs](/docs/kit/$app-navigation#goto), [#13256](https://github.com/sveltejs/kit/pull/13256))
+- The `postinstall` script has been removed to support pnpm 10 (**2.16.0**, [#13304](https://github.com/sveltejs/kit/pull/13304))
+  - users should add `"prepare": "svelte-kit sync"` to their `package.json` in order to avoid the a warning upon first running Vite
+- `PageProps` and `LayoutProps` types are now provided (**2.16.0**, [#13308](https://github.com/sveltejs/kit/pull/13308))
+- The generics attribute is now supported for JSDoc (**svelte2tsx-0.7.32/svelte-check-4.1.2**, [#2624](https://github.com/sveltejs/language-tools/pull/2624))
+- Semantic document highlighting makes the document highlights based on semantic/syntactic meaning instead of the current word-based default by VSCode (**language-server-0.17.9**, [Docs](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#textDocument_documentHighlight), [#1408](https://github.com/sveltejs/language-tools/pull/1408))
+
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Daily Tokki](https://dailytokki.com/?ref=sveltenewsletter) is daily personalized Korean learning delivered right to your inbox
+- [svelte-tower-defence](https://github.com/baterson/svelte-tower-defence) is a tower defense clicker game built with Svelte 5, without canvas, using only CSS transitions and the Runes 
+- [PraccJS](https://github.com/alyalin/PraccJS) lets you practice JavaScript with real-time code execution
+- [Invoice-r](https://www.invoice-r.co.uk/) calculates what you're owed from the information you give and makes your invoice look good
+- [Carry Fit](https://github.com/AxelUser/carry-fit) is an online carry-on luggage compliance checker
+- [Fiddle](https://www.reddit.com/r/sveltejs/comments/1hv3rpd/selfpromotion_we_made_fiddle_with_svelte_so_you/) (currently in waitlist stage) lets you design, collaborate and experiment in code
+- [Kener](https://github.com/rajnandan1/kener) is a modern status page with batteries included
+- [Open TLC](https://opentlc.org/) is a free, open source CAT (Computer-Assisted Translation) tool
+- [Mathesar](https://github.com/mathesar-foundation/mathesar) is a secure, spreadsheet-like tool for Postgres data
+- [Pile Commander](https://github.com/a-matyukh/pile-commander) is an open-source file manager for creative people
+- [Hetzner Auction Browser](https://hetzner-value-auctions.cnap.tech/about) is a better way to find the perfect server in Hetzner's Server-Bidding marketplace
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Svelte 5 And The Future Of Frameworks: A Chat With Rich Harris](https://www.smashingmagazine.com/2025/01/svelte-5-future-frameworks-chat-rich-harris/) by Frederick O'Brien
+- [Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way)](https://www.youtube.com/watch?v=R82Ptutku0M) by Stanislav Khromov
+
+_Svelte Radio_
+
+- [Rich Harris on the Svelte 5 reception](https://www.svelteradio.com/episodes/rich-harris-on-the-svelte-5-reception)
+- [Dominik G on Svelte 5 and Vite 6](https://www.svelteradio.com/episodes/dominik-g-on-svelte-5-and-vite-6)
+- [Timothy Cohen Talks SampleKit](https://www.svelteradio.com/episodes/timothy-cohen-talks-samplekit)
+
+_This Week in Svelte_
+
+- [Ep. 89](https://www.youtube.com/watch?v=BtZQmNoy6dI) — Sailkit
+- [Ep. 90](https://www.youtube.com/watch?v=9DeWd_ShWM4) — Svelte Radar VS Code Extension
+- [Ep. 91](https://www.youtube.com/watch?v=Fn0_8iZGkLk) — Threlte 8
+
+_To Read_
+
+- [Dockerize SvelteKit with adapter-static and Nginx](https://hugosum.com/blog/dockerize-sveltekit-with-adaptor-static-and-nginx), [Analyze and optimize your Vite bundle](https://hugosum.com/blog/analyze-and-optimize-your-vite-bundle) and [End-to-end type safety with Svelte 5 and SvelteKit 2](https://hugosum.com/blog/end-to-end-type-safety-with-svelte5-and-sveltekit2) by Hugo Sum
+
+### Libraries, Tools & Components
+
+- [Svelte Radar](https://marketplace.visualstudio.com/items?itemName=HarshKothari.svelte-radar) is a VS Code extension that provides a visual overview of your project's routing structure
+- [Threlte 8](https://threlte.xyz/blog/threlte-8) is out and is more performant, flexible and aligned with Svelte 5
+- [Storybook 8.5](https://storybook.js.org/blog/storybook-8-5/) includes Svelte Storybook Test support - improving testing in Svelte CSF stories
+- [SVAR for Svelte](https://svar.dev/svelte/) provides feature-rich Svelte UI Components
+- [Tailwind CSS v4.0 ](https://tailwindcss.com/blog/tailwindcss-v4)has been released - with a new engine, simpler installation and more
+- [Frizzante](https://github.com/razshare/frizzante) is a procedural, minimalistic and opinionated web server that uses Svelte to render web pages
+- [svelte-5-dashboard](https://github.com/thomaslappenbusch/svelte-5-dashboard) is a boilerplate for Svelte 5 dashboards. Including alerts, avatars, custom formatting and more 
+- [dnd-kit-svelte](https://github.com/HanielU/dnd-kit-svelte) is a Svelte 5 dnd-kit port
+- [youva](https://github.com/SikandarJODD/youva) provides pagination, debounced search, sorting, filtering and caching for SvelteKit
+
+That's it for the review of Svelte's first month of 2025! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

From 3f5642a4f865d191c8c90aeaec2704aa31849e41 Mon Sep 17 00:00:00 2001
From: Allen Pike <apike@users.noreply.github.com>
Date: Thu, 6 Feb 2025 13:19:27 -0800
Subject: [PATCH 309/453] docs: Fixed old reference to throwing redirects in
 SvelteKit tutorial (#1150)

Fixed old reference to throwing redirects

This is remaining work from [the tutorial update from SvelteKit 1 to 2](https://github.com/sveltejs/svelte.dev/commit/1fc5055f0f0aca9cc4611900c7d2494512cb088e#diff-bf2d1cf2d0668155a5de372c1a78a12e766e3a6f51ac7aa552c2771c24564c27).
---
 .../03-sveltekit/09-errors-and-redirects/04-redirects/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
index 5f4735ec18..46cb804ab1 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
@@ -2,7 +2,7 @@
 title: Redirects
 ---
 
-We can also use the `throw` mechanism to redirect from one page to another.
+We can use the `redirect` mechanism to redirect from one page to another.
 
 Create a new `load` function in `src/routes/a/+page.server.js`:
 

From ea5c8d1a90b77cc29664fe16f317ade0716d66cc Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:07:47 -0800
Subject: [PATCH 310/453] chore: run prettier to fix formatting (#1156)

---
 .../blog/2025-02-01-whats-new-in-svelte-february-2025.md    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md b/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md
index ae35eaeac6..1f816252a7 100644
--- a/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md
+++ b/apps/svelte.dev/content/blog/2025-02-01-whats-new-in-svelte-february-2025.md
@@ -16,7 +16,6 @@ Let's dive in 🐬
 - `<template>` elements are now allowed to contain any child elements (**5.18.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), [#15007](https://github.com/sveltejs/svelte/pull/15007))
 - `ClassValue` is now exposed from `svelte/elements` (**5.19.0**, [Docs](/docs/svelte/class#Attributes-Objects-and-arrays)), [#15035](https://github.com/sveltejs/svelte/pull/15035))
 
-
 ## What's new in SvelteKit and Language Tools
 
 - Custom identifiers can now be invalidated on `goto()` navigation (**2.16.0**, [Docs](/docs/kit/$app-navigation#goto), [#13256](https://github.com/sveltejs/kit/pull/13256))
@@ -26,7 +25,6 @@ Let's dive in 🐬
 - The generics attribute is now supported for JSDoc (**svelte2tsx-0.7.32/svelte-check-4.1.2**, [#2624](https://github.com/sveltejs/language-tools/pull/2624))
 - Semantic document highlighting makes the document highlights based on semantic/syntactic meaning instead of the current word-based default by VSCode (**language-server-0.17.9**, [Docs](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#textDocument_documentHighlight), [#1408](https://github.com/sveltejs/language-tools/pull/1408))
 
-
 ---
 
 ## Community Showcase
@@ -34,7 +32,7 @@ Let's dive in 🐬
 ### Apps & Sites built with Svelte
 
 - [Daily Tokki](https://dailytokki.com/?ref=sveltenewsletter) is daily personalized Korean learning delivered right to your inbox
-- [svelte-tower-defence](https://github.com/baterson/svelte-tower-defence) is a tower defense clicker game built with Svelte 5, without canvas, using only CSS transitions and the Runes 
+- [svelte-tower-defence](https://github.com/baterson/svelte-tower-defence) is a tower defense clicker game built with Svelte 5, without canvas, using only CSS transitions and the Runes
 - [PraccJS](https://github.com/alyalin/PraccJS) lets you practice JavaScript with real-time code execution
 - [Invoice-r](https://www.invoice-r.co.uk/) calculates what you're owed from the information you give and makes your invoice look good
 - [Carry Fit](https://github.com/AxelUser/carry-fit) is an online carry-on luggage compliance checker
@@ -76,7 +74,7 @@ _To Read_
 - [SVAR for Svelte](https://svar.dev/svelte/) provides feature-rich Svelte UI Components
 - [Tailwind CSS v4.0 ](https://tailwindcss.com/blog/tailwindcss-v4)has been released - with a new engine, simpler installation and more
 - [Frizzante](https://github.com/razshare/frizzante) is a procedural, minimalistic and opinionated web server that uses Svelte to render web pages
-- [svelte-5-dashboard](https://github.com/thomaslappenbusch/svelte-5-dashboard) is a boilerplate for Svelte 5 dashboards. Including alerts, avatars, custom formatting and more 
+- [svelte-5-dashboard](https://github.com/thomaslappenbusch/svelte-5-dashboard) is a boilerplate for Svelte 5 dashboards. Including alerts, avatars, custom formatting and more
 - [dnd-kit-svelte](https://github.com/HanielU/dnd-kit-svelte) is a Svelte 5 dnd-kit port
 - [youva](https://github.com/SikandarJODD/youva) provides pagination, debounced search, sorting, filtering and caching for SvelteKit
 

From f385fa9875177965b9637df07569bfd345e5deff Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:15:05 -0800
Subject: [PATCH 311/453] chore(deps): bump vitest from 2.1.2 to 2.1.9 (#1152)

Bumps [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) from 2.1.2 to 2.1.9.
- [Release notes](https://github.com/vitest-dev/vitest/releases)
- [Commits](https://github.com/vitest-dev/vitest/commits/v2.1.9/packages/vitest)

---
updated-dependencies:
- dependency-name: vitest
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/package.json |   2 +-
 pnpm-lock.yaml               | 163 ++++++++++++++++++-----------------
 2 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 28a7e97e91..fd7d9aebe4 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -44,7 +44,7 @@
 		"port-authority": "^2.0.1",
 		"shiki": "^1.22.0",
 		"topojson-client": "^3.1.0",
-		"vitest": "^2.1.2",
+		"vitest": "^2.1.9",
 		"ws": "^8.18.0",
 		"yootils": "^0.3.1"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b386f58ded..133660058d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -99,8 +99,8 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0
       vitest:
-        specifier: ^2.1.2
-        version: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
+        specifier: ^2.1.9
+        version: 2.1.9(@types/node@20.14.2)(lightningcss@1.25.1)
       ws:
         specifier: ^8.18.0
         version: 8.18.0
@@ -1779,14 +1779,13 @@ packages:
       vue-router:
         optional: true
 
-  '@vitest/expect@2.1.2':
-    resolution: {integrity: sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==}
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
 
-  '@vitest/mocker@2.1.2':
-    resolution: {integrity: sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==}
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
     peerDependencies:
-      '@vitest/spy': 2.1.2
-      msw: ^2.3.5
+      msw: ^2.4.9
       vite: ^5.0.0
     peerDependenciesMeta:
       msw:
@@ -1794,20 +1793,20 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.1.2':
-    resolution: {integrity: sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==}
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
-  '@vitest/runner@2.1.2':
-    resolution: {integrity: sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==}
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
 
-  '@vitest/snapshot@2.1.2':
-    resolution: {integrity: sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==}
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
 
-  '@vitest/spy@2.1.2':
-    resolution: {integrity: sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==}
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
 
-  '@vitest/utils@2.1.2':
-    resolution: {integrity: sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==}
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
   '@webcontainer/api@1.1.9':
     resolution: {integrity: sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg==}
@@ -1960,8 +1959,8 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@5.1.1:
-    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+  chai@5.1.2:
+    resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
     engines: {node: '>=12'}
 
   chalk@2.4.2:
@@ -2166,6 +2165,9 @@ packages:
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
+
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -2212,6 +2214,10 @@ packages:
   exif-parser@0.1.12:
     resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==}
 
+  expect-type@1.1.0:
+    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+    engines: {node: '>=12.0.0'}
+
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
@@ -2279,9 +2285,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-
   get-tsconfig@4.8.0:
     resolution: {integrity: sha512-Pgba6TExTZ0FJAn1qkJAjIeKoDJ3CsI2ChuLohJnZl/tTU8MVrq3b+2t5UOPfRa4RMsorClBjJALkJUMjG1PAw==}
 
@@ -2518,8 +2521,8 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  loupe@3.1.1:
-    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
@@ -2953,8 +2956,8 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+  std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
 
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -3087,11 +3090,11 @@ packages:
   tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
 
-  tinyexec@0.3.0:
-    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinypool@1.0.1:
-    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
   tinyrainbow@1.2.0:
@@ -3199,8 +3202,8 @@ packages:
     resolution: {integrity: sha512-C9C7b2p/8/TCN2g26tE9haoer2i8K4x0v2RXUiHsIjiz221vQuKItCQ+VyiVCsUMPXfJC/tlZsmCZVBz5jh7uA==}
     engines: {node: '>=18.0.0'}
 
-  vite-node@2.1.2:
-    resolution: {integrity: sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==}
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
@@ -3243,15 +3246,15 @@ packages:
       vite:
         optional: true
 
-  vitest@2.1.2:
-    resolution: {integrity: sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==}
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.1.2
-      '@vitest/ui': 2.1.2
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -4570,13 +4573,13 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
       svelte: 5.14.0
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-      vitest: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
+      vitest: 2.1.9(@types/node@20.14.2)(lightningcss@1.25.1)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -4659,44 +4662,44 @@ snapshots:
       '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.14.0
 
-  '@vitest/expect@2.1.2':
+  '@vitest/expect@2.1.9':
     dependencies:
-      '@vitest/spy': 2.1.2
-      '@vitest/utils': 2.1.2
-      chai: 5.1.1
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@vitest/mocker@2.1.9(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@vitest/spy': 2.1.2
+      '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.12
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@vitest/pretty-format@2.1.2':
+  '@vitest/pretty-format@2.1.9':
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@2.1.2':
+  '@vitest/runner@2.1.9':
     dependencies:
-      '@vitest/utils': 2.1.2
+      '@vitest/utils': 2.1.9
       pathe: 1.1.2
 
-  '@vitest/snapshot@2.1.2':
+  '@vitest/snapshot@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.1.2
+      '@vitest/pretty-format': 2.1.9
       magic-string: 0.30.12
       pathe: 1.1.2
 
-  '@vitest/spy@2.1.2':
+  '@vitest/spy@2.1.9':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@2.1.2':
+  '@vitest/utils@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.1.2
-      loupe: 3.1.1
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.1.3
       tinyrainbow: 1.2.0
 
   '@webcontainer/api@1.1.9': {}
@@ -4812,12 +4815,12 @@ snapshots:
 
   ccount@2.0.1: {}
 
-  chai@5.1.1:
+  chai@5.1.2:
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
       deep-eql: 5.0.2
-      loupe: 3.1.1
+      loupe: 3.1.3
       pathval: 2.0.0
 
   chalk@2.4.2:
@@ -4994,6 +4997,8 @@ snapshots:
 
   entities@2.2.0: {}
 
+  es-module-lexer@1.6.0: {}
+
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -5097,6 +5102,8 @@ snapshots:
 
   exif-parser@0.1.12: {}
 
+  expect-type@1.1.0: {}
+
   extendable-error@0.1.7: {}
 
   external-editor@3.1.0:
@@ -5166,8 +5173,6 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  get-func-name@2.0.2: {}
-
   get-tsconfig@4.8.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -5421,9 +5426,7 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
-  loupe@3.1.1:
-    dependencies:
-      get-func-name: 2.0.2
+  loupe@3.1.3: {}
 
   lower-case@2.0.2:
     dependencies:
@@ -5839,7 +5842,7 @@ snapshots:
 
   stackback@0.0.2: {}
 
-  std-env@3.7.0: {}
+  std-env@3.8.0: {}
 
   string-width@4.2.3:
     dependencies:
@@ -5961,9 +5964,9 @@ snapshots:
 
   tinycolor2@1.6.0: {}
 
-  tinyexec@0.3.0: {}
+  tinyexec@0.3.2: {}
 
-  tinypool@1.0.1: {}
+  tinypool@1.0.2: {}
 
   tinyrainbow@1.2.0: {}
 
@@ -6077,10 +6080,11 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  vite-node@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1):
+  vite-node@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
+      es-module-lexer: 1.6.0
       pathe: 1.1.2
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
@@ -6108,26 +6112,27 @@ snapshots:
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  vitest@2.1.2(@types/node@20.14.2)(lightningcss@1.25.1):
+  vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1):
     dependencies:
-      '@vitest/expect': 2.1.2
-      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@vitest/pretty-format': 2.1.2
-      '@vitest/runner': 2.1.2
-      '@vitest/snapshot': 2.1.2
-      '@vitest/spy': 2.1.2
-      '@vitest/utils': 2.1.2
-      chai: 5.1.1
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.1.2
       debug: 4.4.0
+      expect-type: 1.1.0
       magic-string: 0.30.12
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinybench: 2.9.0
-      tinyexec: 0.3.0
-      tinypool: 1.0.1
+      tinyexec: 0.3.2
+      tinypool: 1.0.2
       tinyrainbow: 1.2.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-      vite-node: 2.1.2(@types/node@20.14.2)(lightningcss@1.25.1)
+      vite-node: 2.1.9(@types/node@20.14.2)(lightningcss@1.25.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.14.2

From c8b83c6b2c3adbb9a5415958dab9178643b185e7 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:14:37 -0800
Subject: [PATCH 312/453] chore: allow running with pnpm 10 (#1155)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d45538f4f5..2a83db1073 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
 	"license": "MIT",
 	"packageManager": "pnpm@9.2.0",
 	"engines": {
-		"pnpm": "^9.0.0"
+		"pnpm": ">=9.0.0"
 	},
 	"repository": {
 		"type": "git",

From 38fcfdecbb1657b1815f1fc3bece6386b14f9aad Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 12 Feb 2025 15:28:39 +0100
Subject: [PATCH 313/453] Sync `svelte` docs (#1158)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/05-$props.md | 21 +++++++++++++++++++
 .../svelte/06-runtime/03-lifecycle-hooks.md   | 15 -------------
 .../98-reference/.generated/compile-errors.md |  8 ++++++-
 .../svelte/98-reference/30-compiler-errors.md |  8 ++++++-
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
index ec2044ac9a..b0307c98a0 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
@@ -200,3 +200,24 @@ You can, of course, separate the type declaration from the annotation:
 > [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))
 
 Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
+
+
+## `$props.id()`
+
+This rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.
+
+This is useful for linking elements via attributes like `for` and `aria-labelledby`.
+
+```svelte
+<script>
+	const uid = $props.id();
+</script>
+
+<form>
+	<label for="{uid}-firstname">First Name: </label>
+	<input id="{uid}-firstname" type="text" />
+
+	<label for="{uid}-lastname">Last Name: </label>
+	<input id="{uid}-lastname" type="text" />
+</form>
+```
\ No newline at end of file
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index cba3893bf6..6c0d7d25a7 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -46,21 +46,6 @@ If a function is returned from `onMount`, it will be called when the component i
 
 ## `onDestroy`
 
-Schedules a callback to run immediately before the component is unmounted.
-
-Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
-only one that runs inside a server-side component.
-
-<div class="ts-block">
-
-```dts
-function onDestroy(fn: () => any): void;
-```
-
-</div>
-
-
-
 Schedules a callback to run immediately before the component is unmounted.
 
 Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 2fef3bd45d..a4ecbb31d5 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -573,7 +573,13 @@ Unrecognised compiler option %keypath%
 ### props_duplicate
 
 ```
-Cannot use `$props()` more than once
+Cannot use `%rune%()` more than once
+```
+
+### props_id_invalid_placement
+
+```
+`$props.id()` can only be used at the top level of components as a variable declaration initializer
 ```
 
 ### props_illegal_name
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index b51ad849a2..10593d886e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -578,7 +578,13 @@ Unrecognised compiler option %keypath%
 ### props_duplicate
 
 ```
-Cannot use `$props()` more than once
+Cannot use `%rune%()` more than once
+```
+
+### props_id_invalid_placement
+
+```
+`$props.id()` can only be used at the top level of components as a variable declaration initializer
 ```
 
 ### props_illegal_name

From 76811308c3322f7f6d91d2b43756e1d0879ba3e5 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 18 Feb 2025 09:24:14 -0800
Subject: [PATCH 314/453] chore: update links (#1119)

---
 ...-11-26-frameworks-without-the-framework.md |  6 ++--
 .../2017-09-06-the-zen-of-just-writing-css.md |  2 +-
 ...per-towards-the-ideal-web-app-framework.md |  2 +-
 .../content/blog/2018-04-18-version-2.md      |  2 +-
 .../blog/2018-12-26-svelte-css-in-js.md       |  2 +-
 ...2018-12-27-virtual-dom-is-pure-overhead.md |  2 +-
 .../2019-01-31-svelte-on-the-changelog.md     |  6 ++--
 .../blog/2019-04-15-setting-up-your-editor.md |  2 +-
 .../2019-04-16-svelte-for-new-developers.md   |  2 +-
 .../blog/2019-04-20-write-less-code.md        |  2 +-
 ...19-04-22-svelte-3-rethinking-reactivity.md |  2 +-
 .../blog/2020-07-17-svelte-and-typescript.md  |  2 +-
 ...020-11-05-whats-the-deal-with-sveltekit.md |  4 +--
 .../content/blog/2021-03-23-sveltekit-beta.md |  4 +--
 ...12-01-whats-new-in-svelte-december-2021.md | 30 +++++++++----------
 ...-01-13-accelerating-sveltes-development.md |  4 +--
 .../2022-12-14-announcing-sveltekit-1.0.md    |  4 +--
 ...023-02-21-streaming-snapshots-sveltekit.md |  2 +-
 .../2023-03-09-zero-config-type-safety.md     |  2 +-
 .../content/blog/2024-10-21-the-omnisite.md   |  2 +-
 .../blog/2024-12-01-advent-of-svelte.md       |  2 +-
 .../07-conclusion/01-next-steps/index.md      |  2 +-
 .../src/routes/_home/Community.svelte         |  2 +-
 23 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md b/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
index 677273c48a..7756f3135a 100644
--- a/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
+++ b/apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md
@@ -2,7 +2,7 @@
 title: "Frameworks without the framework: why didn't we think of this sooner?"
 description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 > Wait, this new framework has a _runtime_? Ugh. Thanks, I'll pass.
@@ -12,7 +12,7 @@ We're shipping too much code to our users. Like a lot of front end developers, I
 
 But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
 
-If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
+If you're not convinced that this is a problem, follow [Alex Russell](https://bsky.app/profile/infrequently.org) on BlueSky. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
 
 Perhaps we need to rethink the whole thing.
 
@@ -30,7 +30,7 @@ Svelte is a new framework that does exactly that. You write your components usin
 
 The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM _without any app code_ weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
 
-And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
+And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://bsky.app/profile/trueadm.dev) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
 
 It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
 
diff --git a/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md b/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
index 70e4cc06b9..678e178ee8 100644
--- a/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
+++ b/apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md
@@ -2,7 +2,7 @@
 title: The zen of Just Writing CSS
 description: I would say this is the future, but we're already doing it.
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is _unpredictable_. If you've never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you're trying to ship — then you're either new at this or you're a much better programmer than the rest of us.
diff --git a/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
index c4c5643699..228c149ddd 100644
--- a/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
+++ b/apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
@@ -2,7 +2,7 @@
 title: 'Sapper: Towards the ideal web app framework'
 description: Taking the next-plus-one step
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 > Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)
diff --git a/apps/svelte.dev/content/blog/2018-04-18-version-2.md b/apps/svelte.dev/content/blog/2018-04-18-version-2.md
index 3043319b7d..ef1c1aa9d9 100644
--- a/apps/svelte.dev/content/blog/2018-04-18-version-2.md
+++ b/apps/svelte.dev/content/blog/2018-04-18-version-2.md
@@ -2,7 +2,7 @@
 title: Svelte v2 is out!
 description: Here's what you need to know
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 <aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>
diff --git a/apps/svelte.dev/content/blog/2018-12-26-svelte-css-in-js.md b/apps/svelte.dev/content/blog/2018-12-26-svelte-css-in-js.md
index 0eb2d0a19e..394d3cc339 100644
--- a/apps/svelte.dev/content/blog/2018-12-26-svelte-css-in-js.md
+++ b/apps/svelte.dev/content/blog/2018-12-26-svelte-css-in-js.md
@@ -2,7 +2,7 @@
 title: Using CSS-in-JS with Svelte
 description: You don't need to, but you can
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished.
diff --git a/apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md b/apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
index 066e758e81..9aece76947 100644
--- a/apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
+++ b/apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
@@ -2,7 +2,7 @@
 title: Virtual DOM is pure overhead
 description: Let's retire the 'virtual DOM is fast' myth once and for all
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the _real_ DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
diff --git a/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md b/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
index d94d928795..084bea6d01 100644
--- a/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
+++ b/apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md
@@ -2,7 +2,7 @@
 title: Svelte on The Changelog
 description: Listen to the interview here
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 Earlier this month, I had the privilege of appearing on [The Changelog](https://changelog.com/podcast), a podcast about software development. We had a fun (for me) and wide-ranging conversation:
@@ -14,8 +14,8 @@ Earlier this month, I had the privilege of appearing on [The Changelog](https://
 
 ...and, most importantly, Svelte 3.
 
-Unless you hang out in our [Discord server](/chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it _will_ be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
+Unless you hang out in our [Discord server](/chat) or follow [@sveltejs](https://bsky.app/profile/svelte.dev) on BlueSky, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it _will_ be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
 
-On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
+On the podcast [Adam](https://bsky.app/profile/adamstac.bsky.social), [Jerod](https://bsky.app/profile/jerod.bsky.social) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
 
 <audio data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="http://cdn.changelog.com/embed.js"></script>
diff --git a/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md b/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md
index 6456397a41..1eceb756e9 100644
--- a/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md
+++ b/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md
@@ -2,7 +2,7 @@
 title: Setting up your editor
 description: Instructions for configuring linting and syntax highlighting
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 draft: true
 ---
 
diff --git a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
index b12aabaad7..7682c06646 100644
--- a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -2,7 +2,7 @@
 title: Svelte for new developers
 description: Never used Node.js or the command line? No problem
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running.
diff --git a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
index 86bcc083ce..edb8796d45 100644
--- a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
+++ b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
@@ -2,7 +2,7 @@
 title: Write less code
 description: The most important metric you're not paying attention to
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.
diff --git a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index 7577994897..5a179a2a6b 100644
--- a/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -2,7 +2,7 @@
 title: 'Svelte 3: Rethinking reactivity'
 description: It's finally here
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way.
diff --git a/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md b/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
index 580507114f..ad1158257e 100644
--- a/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
+++ b/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
@@ -2,7 +2,7 @@
 title: Svelte <3 TypeScript
 description: Typernetically enhanced web apps
 author: Orta Therox
-authorURL: https://twitter.com/orta
+authorURL: https://bsky.app/profile/orta.io
 ---
 
 It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.
diff --git a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
index 29baaf5c0c..ccf01fb642 100644
--- a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
+++ b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -2,7 +2,7 @@
 title: What's the deal with SvelteKit?
 description: We're rethinking how to build Svelte apps. Here's what you need to know
 author: Rich Harris
-authorURL: https://twitter.com/rich_harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 <aside><p>If you <em>didn't</em> attend Svelte Summit, you can catch up on the <a href="https://www.youtube.com/c/SvelteSociety/videos">Svelte Society YouTube page</a></p></aside>
@@ -91,4 +91,4 @@ Keep your eyes peeled for announcements about when we'll launch the public beta
 
 ## Where can I learn more?
 
-Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
+Follow [svelte.dev](https://bsky.app/profile/svelte.dev) and [sveltesociety.dev](https://bsky.app/profile/sveltesociety.dev) on BlueSky, and visit [svelte.dev/chat](/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
diff --git a/apps/svelte.dev/content/blog/2021-03-23-sveltekit-beta.md b/apps/svelte.dev/content/blog/2021-03-23-sveltekit-beta.md
index 0a4b42c4c5..fc7589f378 100644
--- a/apps/svelte.dev/content/blog/2021-03-23-sveltekit-beta.md
+++ b/apps/svelte.dev/content/blog/2021-03-23-sveltekit-beta.md
@@ -2,7 +2,7 @@
 title: SvelteKit is in public beta
 description: And we'd love to have your feedback
 author: Rich Harris
-authorURL: https://twitter.com/rich_harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 <aside><p>Previously: <a href="http://github.com/blog/whats-the-deal-with-sveltekit">What's the deal with SvelteKit?</a></p></aside>
@@ -40,7 +40,7 @@ One thing that might seem surprising after the [announcement video](/blog/whats-
 
 Snowpack created an entirely new category of dev tooling. Rather than _bundling_ your app in development, as we've been doing with webpack and Rollup for the last several years, Snowpack is an _unbundled dev server_ that uses the browser's native `import` and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else.
 
-Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://twitter.com/youyuxi)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations.
+Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://bsky.app/profile/evanyou.me)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations.
 
 We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It's a wonderful tool, and you should absolutely try it out.
 
diff --git a/apps/svelte.dev/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md b/apps/svelte.dev/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
index 20571dd5eb..92b137ba13 100644
--- a/apps/svelte.dev/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
+++ b/apps/svelte.dev/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
@@ -15,26 +15,26 @@ If you missed Svelte Summit, you can watch the entire live stream on [YouTube](h
 
 Here are the highlights:
 
-- [Rich Harris](https://twitter.com/rich_harris) took us through a tour of Svelte's history and announced [his move to Vercel](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte) - where he will be helping maintain Svelte full-time! ([20:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1200s))
-- [Steph Dietz](https://twitter.com/steph_dietz_) explained how Svelte's simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate ([29:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1740s))
-- [Kevin Bridges](https://twitter.com/kevinast) dove deep into Svelte's reactivity logic by visualizing it through `ReflectiveCounter` and showing how to "fine tune" it, as needed. A full "syllabus" for the presentation is available on [Kevin's site](https://wiibridges.com/presentations/ResponsiveSvelte/). ([42:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=2575s))
-- [Mateo Morris](https://twitter.com/_mateomorris) launched [Primo](https://primo.af/), an all-in-one SvelteKit CMS to help build and manage static sites ([1:12:34](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4354s))
+- [Rich Harris](https://bsky.app/profile/rich-harris.dev) took us through a tour of Svelte's history and announced [his move to Vercel](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte) - where he will be helping maintain Svelte full-time! ([20:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1200s))
+- [Steph Dietz](https://www.steph-dietz.com/) explained how Svelte's simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate ([29:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1740s))
+- [Kevin Bridges](https://github.com/KevinAst) dove deep into Svelte's reactivity logic by visualizing it through `ReflectiveCounter` and showing how to "fine tune" it, as needed. A full "syllabus" for the presentation is available on [Kevin's site](https://wiibridges.com/presentations/ResponsiveSvelte/). ([42:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=2575s))
+- [Mateo Morris](https://github.com/mateomorris) launched [Primo](https://primo.af/), an all-in-one SvelteKit CMS to help build and manage static sites ([1:12:34](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4354s))
 - [Guillermo Rauch](https://vercel.com/about/rauchg) explained Vercel's commitment to Svelte, what it means to have Rich on the team, and what's coming next from the company... ([1:21:54](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4914s))
-- [Geoff Rich](https://twitter.com/geoffrich_) introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on [Geoff's site](https://geoffrich.net/posts/svelte-summit-2021/). ([1:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=5550s))
+- [Geoff Rich](https://bsky.app/profile/geoffrich.net) introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on [Geoff's site](https://geoffrich.net/posts/svelte-summit-2021/). ([1:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=5550s))
 - [Dean Fogarty](https://df.id.au/) demoed a number of different use-cases for custom stores - transforming data to and from storage mechanisms within Svelte. Transcript and code is available on [Dean's GitHub](https://github.com/angrytongan/svelte-summit-2021). ([1:43:06](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6186s))
-- [Kellen Mace](https://twitter.com/kellenmace) shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience ([1:49:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6570ss))
-- [Ben Holmes](https://twitter.com/bholmesdev) explained the "islands" architecture and how 11ty + [Slinkity](https://slinkity.dev/) can bring these islands to any HTML template ([2:17:15](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=8235s))
-- [Scott Tolinski](https://twitter.com/stolinski) shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and "found developer bliss" ([3:16:35](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=11795s))
+- [Kellen Mace](https://bsky.app/profile/kellenmace.bsky.social) shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience ([1:49:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6570ss))
+- [Ben Holmes](https://bsky.app/profile/bholmes.dev) explained the "islands" architecture and how 11ty + [Slinkity](https://slinkity.dev/) can bring these islands to any HTML template ([2:17:15](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=8235s))
+- [Scott Tolinski](https://bsky.app/profile/tolin.ski) shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and "found developer bliss" ([3:16:35](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=11795s))
 - [Svelte Sirens](https://sveltesirens.dev) was announced as the new Svelte community for women, non-binary and allies. Their first event was on November 29th - all future events can be found on [the Svelte Sirens website](https://sveltesirens.dev/events) ([3:50:45](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=13845s))
-- [Rich Harris](https://twitter.com/rich_harris) discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development ([3:56:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14160s))
-- [Ken Kunz](https://twitter.com/kennethkunz) explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on [Ken's GitHub](https://github.com/kenkunz/svelte-fsm/wiki/Examples). ([4:07:18](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14838s))
-- [Austin Crim](https://twitter.com/crim_codes) connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn't have to be a chore ([4:21:50](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=15710s))
-- [Jesse Skinner](https://twitter.com/JesseSkinner) brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects ([4:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=16350s))
-- [Jim Fisk](https://twitter.com/jimafisk) and [Stephanie Luz](https://stephanie-luz.medium.com/) introduced [Plenti](https://plenti.co/) and its theming tools to make building new Svelte sites much faster ([4:59:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=17940s))
-- [Evyatar Alush](https://twitter.com/evyataral) helped us all make (and maintain) better forms using a powerful validation library called [Vest](https://github.com/ealush/vest) ([5:08:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=18535s))
+- [Rich Harris](https://bsky.app/profile/rich-harris.dev) discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development ([3:56:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14160s))
+- [Ken Kunz](https://bsky.app/profile/kenthropic.com) explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on [Ken's GitHub](https://github.com/kenkunz/svelte-fsm/wiki/Examples). ([4:07:18](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14838s))
+- [Austin Crim](https://github.com/austincrim) connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn't have to be a chore ([4:21:50](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=15710s))
+- [Jesse Skinner](https://toot.cafe/@JesseSkinner) brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects ([4:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=16350s))
+- [Jim Fisk](https://github.com/jimafisk) and [Stephanie Luz](https://stephanie-luz.medium.com/) introduced [Plenti](https://plenti.co/) and its theming tools to make building new Svelte sites much faster ([4:59:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=17940s))
+- [Evyatar Alush](https://github.com/ealush) helped us all make (and maintain) better forms using a powerful validation library called [Vest](https://github.com/ealush/vest) ([5:08:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=18535s))
 - Dominik G. presented a fresh take on icon libraries - one that reduces the bundle size of applications and opens up the entire iconify library for use in any Svelte app ([5:30:04](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=19804s))
 
-Thanks to [Kevin](https://twitter.com/kevmodrome) and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, [Kevin announced](https://twitter.com/kevmodrome/status/1463151477174714373) after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in [this Svelte Society YouTube Playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt).
+Thanks to [Kevin](https://bsky.app/profile/kevinak.se) and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, [Kevin announced](https://twitter.com/kevmodrome/status/1463151477174714373) after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in [this Svelte Society YouTube Playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt).
 
 If you have feedback on the Svelte Summit, Kev is [looking for feedback on the Svelte subreddit](https://www.reddit.com/r/sveltejs/comments/qzgo3k/svelte_summit_feedback/) 👀
 
diff --git a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
index 2704c71a4c..9f32fcafe6 100644
--- a/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/apps/svelte.dev/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -35,13 +35,13 @@ Svelte began accepting donations via [OpenCollective](https://opencollective.com
 
 ## Partnerships
 
-Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
+Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://bsky.app/profile/pngwn.at) and [lukeed](https://bsky.app/profile/lukeed.bsky.social), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
 
 We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
 
 ## A growing community
 
-[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](/blog/whats-new-in-svelte-december-2021#What-happened-at-Svelte-Summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](/blog/whats-new-in-svelte-december-2021#What-happened-at-Svelte-Summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://github.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
 
 Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement. The initial ambassadors in alphabetical order are:
 
diff --git a/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md b/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
index 1c6fe2e46d..b120461610 100644
--- a/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
+++ b/apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md
@@ -90,7 +90,7 @@ We’ve had terrific support from teams at [Vercel](https://vercel.com), [Netlif
 
 Our friends at [StackBlitz](https://stackblitz.com/) worked feverishly to make [learn.svelte.dev](https://learn.svelte.dev), our first-of-its-kind [WebContainer](https://blog.stackblitz.com/posts/introducing-webcontainers/)-powered interactive tutorial, a reality.
 
-Finally, none of this could have happened without the project’s financial supporters. This includes hundreds of backers on [Open Collective](https://opencollective.com/svelte), and Vercel, which employs two core developers ([Rich](https://twitter.com/Rich_Harris/) and [Simon](https://twitter.com/dummdidumm_/)) to work on Svelte full time and supports the project in many other ways, such as [Steph’s](https://twitter.com/steph_dietz_) [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) course.
+Finally, none of this could have happened without the project’s financial supporters. This includes hundreds of backers on [Open Collective](https://opencollective.com/svelte), and Vercel, which employs two core developers ([Rich](https://bsky.app/profile/rich-harris.dev) and [Simon](https://bsky.app/profile/dummdidumm.bsky.social)) to work on Svelte full time and supports the project in many other ways, such as [Steph’s](https://www.steph-dietz.com/) [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) course.
 
 ## Migrating
 
@@ -100,6 +100,6 @@ If you have an app built with pre-release versions of SvelteKit, we recommend up
 
 SvelteKit 1.0 is the beginning, not the end. It’s ready for production use today, but we’re just getting started. Our roadmap includes built-in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimisation, and many other improvements. Next year we’ll also start work on Svelte 4 — more on that later.
 
-But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on [Twitter](https://twitter.com/SvelteSociety) and [YouTube](https://youtube.com/sveltesociety) to stay up to date, and join us in our [Discord server](/chat) and on [GitHub](https://github.com/sveltejs) to contribute back.
+But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on [BlueSky](https://bsky.app/profile/sveltesociety.dev) and [YouTube](https://youtube.com/sveltesociety) to stay up to date, and join us in our [Discord server](/chat) and on [GitHub](https://github.com/sveltejs) to contribute back.
 
 We can’t wait to see what you build.
diff --git a/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md b/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
index 10081a7a01..cfd5b41d61 100644
--- a/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ b/apps/svelte.dev/content/blog/2023-02-21-streaming-snapshots-sveltekit.md
@@ -2,7 +2,7 @@
 title: Streaming, snapshots, and other new features since SvelteKit 1.0
 description: Exciting improvements in the latest version of SvelteKit
 author: Geoff Rich, Rich Harris
-authorURL: https://geoffrich.net, https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/geoffrich.net, https://bsky.app/profile/rich-harris.dev
 ---
 
 The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: [streaming non-essential data](/docs/kit/load#Streaming-with-promises), [snapshots](/docs/kit/snapshots), and [route-level config](/docs/kit/page-options#config).
diff --git a/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md b/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
index 998b4a1cdb..7c547ac233 100644
--- a/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
+++ b/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
@@ -2,7 +2,7 @@
 title: Zero-effort type safety
 description: More convenience and correctness, less boilerplate
 author: Simon Holthausen
-authorURL: https://twitter.com/dummdidumm_
+authorURL: https://bsky.app/profile/dummdidumm.bsky.social
 ---
 
 By sprinkling type annotations into your SvelteKit apps, you can get full type safety across the network — the `data` in your page has a type that's inferred from the return values of the `load` functions that generated that data, without you having to explicitly declare anything. It's one of those things that you come to wonder how you ever lived without.
diff --git a/apps/svelte.dev/content/blog/2024-10-21-the-omnisite.md b/apps/svelte.dev/content/blog/2024-10-21-the-omnisite.md
index 283d7ee979..958d914c42 100644
--- a/apps/svelte.dev/content/blog/2024-10-21-the-omnisite.md
+++ b/apps/svelte.dev/content/blog/2024-10-21-the-omnisite.md
@@ -2,7 +2,7 @@
 title: The Omnisite
 description: Your one-stop-shop for everything Svelte
 author: Rich Harris
-authorURL: https://twitter.com/rich_harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 Launching [Svelte 5](svelte-5-is-alive) and [the brand new `sv` CLI](https://www.youtube.com/watch?v=fAPFsRP-mbc#t=3h15m40s) wasn't enough: we've also released a brand new website. You're looking at it.
diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
index b84dc9c0d5..af040fc00e 100644
--- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
+++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md
@@ -103,7 +103,7 @@ As of today, you can also return things that _aren't_ built in to the language,
 
 For those of you using LLMs to help you write code — via Cursor or Copilot or Claude or Bolt or v0 or some other interface — we now publish the documentation in a selection of robot-friendly `llms.txt` files. This is experimental and will evolve over time, but by way of example here's a [snake game](/playground/0de3c1c1a31d47bdbb7c4aa3477a6b46) built by Sonnet 3.5 with no additional prompting.
 
-Thanks to [Didier Catz](https://x.com/didiercatz) and [Stanislav Khromov](https://bsky.app/profile/khromov.se) for building this!
+Thanks to [Didier Catz](https://bsky.app/profile/didiercatz.com) and [Stanislav Khromov](https://bsky.app/profile/khromov.se) for building this!
 
 - [docs](/docs/llms)
 
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
index 4848015648..110167d5c5 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/07-conclusion/01-next-steps/index.md
@@ -12,4 +12,4 @@ npx sv create
 
 Svelte and SvelteKit will continue to evolve, and so will this tutorial. Check back periodically for updates.
 
-To keep up with developments in the Svelte world, join our Discord server at [svelte.dev/chat](/chat) and follow [Svelte Society](https://twitter.com/sveltesociety) on Twitter. We're so happy to welcome you to the Svelte community!
+To keep up with developments in the Svelte world, join our Discord server at [svelte.dev/chat](/chat) and follow [Svelte Society](https://bsky.app/profile/sveltesociety.dev) on BlueSky. We're so happy to welcome you to the Svelte community!
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index 1b0382f79a..e6945d75a3 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -15,7 +15,7 @@
 			src="http://github.com/summit.png?w=800;1200;2000;2800;4400"
 			alt="Photos by Marcel Cutts from the 2022 Svelte Summit in Stockholm"
 		/>
-		<figcaption>Photos by <a href="https://x.com/marcelcutts">Marcel Cutts</a></figcaption>
+		<figcaption>Photos by <a href="https://marcel.gg/">Marcel Cutts</a></figcaption>
 	</figure>
 </Section>
 

From 61831e6e5c025559c45ddb3f790c9759dc680e98 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 18 Feb 2025 11:00:54 -0800
Subject: [PATCH 315/453] Sync `svelte` docs (#1160)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md  | 2 +-
 .../content/docs/svelte/03-template-syntax/11-bind.md         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md b/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
index a8b1edcee7..844c062870 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/06-$bindable.md
@@ -34,7 +34,7 @@ Now, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive
 
 <!-- prettier-ignore -->
 ```svelte
-/// App.svelte
+/// file: App.svelte
 <script>
 	import FancyInput from './FancyInput.svelte';
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index fcfe036211..f99a8b5fda 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -268,7 +268,7 @@ Elements with the `contenteditable` attribute support the following bindings:
 <!-- for some reason puts the comment and html on same line -->
 <!-- prettier-ignore -->
 ```svelte
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML={html}></div>
 ```
 
 ## Dimensions
@@ -308,7 +308,7 @@ To get a reference to a DOM node, use `bind:this`. The value will be `undefined`
 	});
 </script>
 
-<canvas bind:this={canvas} />
+<canvas bind:this={canvas}></canvas>
 ```
 
 Components also support `bind:this`, allowing you to interact with component instances programmatically.

From db011d2830049d493722d39ce3f0a4857bf94ebf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 18 Feb 2025 11:01:37 -0800
Subject: [PATCH 316/453] Sync `kit` docs (#1151)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../70-adapter-cloudflare-workers.md           |  2 +-
 .../docs/kit/40-best-practices/07-images.md    |  6 ++++++
 .../content/docs/kit/60-appendix/10-faq.md     | 18 +++++++++---------
 .../docs/kit/60-appendix/20-integrations.md    |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md  |  2 +-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index f9ec5d44fa..32b31a8813 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -134,7 +134,7 @@ For testing the build, you should use [wrangler](https://developers.cloudflare.c
 
 ### Worker size limits
 
-When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-X-with-SvelteKit-How-do-I-use-a-client-side-only-library-that-depends-on-document-or-window) for more information.
+When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
 
 ### Accessing the file system
 
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index 750470cb1f..245486209e 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -153,6 +153,12 @@ Using a content delivery network (CDN) can allow you to optimize these images dy
 
 CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
 
+## Icons
+
+A great way to use icons is to define them purely in CSS. Iconify offers a huge set of icons [available via CSS](https://iconify.design/docs/usage/css/).
+
+For icons defined in `.svelte` files, it is recommended to avoid libraries that provide a `.svelte` file per icon. These libraries can have thousands of `.svelte` files which really slow down Vite's dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
+
 ## Best practices
 
 - For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index 87be647d41..db51277adb 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -60,7 +60,7 @@ Libraries work best in the browser with Vite when they distribute an ESM version
 
 If you are still encountering issues we recommend searching both [the Vite issue tracker](https://github.com/vitejs/vite/issues) and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options) or [`ssr`](https://vitejs.dev/config/#ssr-options) config values though we recommend this as only a short-term workaround in favor of fixing the library in question.
 
-## How do I use the view transitions API with SvelteKit?
+## How do I use the view transitions API?
 
 While SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`]($app-navigation#onNavigate) to trigger a view transition on every client-side navigation.
 
@@ -82,15 +82,13 @@ onNavigate((navigation) => {
 
 For more, see ["Unlocking view transitions"](/blog/view-transitions) on the Svelte blog.
 
-## How do I use X with SvelteKit?
-
-Make sure you've read the [documentation section on integrations](./integrations). If you're still having trouble, solutions to common issues are listed below.
-
-### How do I setup a database?
+## How do I set up a database?
 
 Put the code to query your database in a [server route](./routing#server) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.server.js` and import your database helpers into any endpoint that needs them.
 
-### How do I use a client-side only library that depends on `document` or `window`?
+You can use [the Svelte CLI](/docs/cli/overview) to automatically set up database integrations.
+
+## How do I use a client-side library accessing `document` or `window`?
 
 If you need access to the `document` or `window` variables or otherwise need code to run only on the client-side you can wrap it in a `browser` check:
 
@@ -158,7 +156,7 @@ Finally, you may also consider using an `{#await}` block:
 {/await}
 ```
 
-### How do I use a different backend API server?
+## How do I use a different backend API server?
 
 You can use [`event.fetch`](./load#Making-fetch-requests) to request data from an external API server, but be aware that you would need to deal with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which will result in complications such as generally requiring requests to be preflighted resulting in higher latency. Requests to a separate subdomain may also increase latency due to an additional DNS lookup, TLS setup, etc. If you wish to use this method, you may find [`handleFetch`](./hooks#Server-hooks-handleFetch) helpful.
 
@@ -176,7 +174,7 @@ export function GET({ params, url }) {
 
 (Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)
 
-### How do I use middleware?
+## How do I use middleware?
 
 `adapter-node` builds a middleware that you can use with your own server for production mode. In dev, you can add middleware to Vite by using a Vite plugin. For example:
 
@@ -210,6 +208,8 @@ export default config;
 
 See [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver) for more details including how to control ordering.
 
+## How do I use Yarn?
+
 ### Does it work with Yarn 2?
 
 Sort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Node module resolution algorithm, and [doesn't yet work with native JavaScript modules](https://github.com/yarnpkg/berry/issues/638) which SvelteKit — along with an [increasing number of packages](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77) — uses). You can use `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file to disable pnp, but it's probably easier to just use npm or [pnpm](https://pnpm.io/), which is similarly fast and efficient but without the compatibility headaches.
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
index c3cf2deacd..0feb1ff420 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
@@ -50,4 +50,4 @@ Since SvelteKit projects are built with Vite, you can use Vite plugins to enhanc
 
 ## Integration FAQs
 
-The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#How-do-I-use-X-with-SvelteKit), which may be helpful if you still have questions.
+The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#How-do-I-set-up-a-database), which may be helpful if you still have questions.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index a3c8095515..678c1513b9 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -2628,7 +2628,7 @@ type SubmitFunction<
 				reset?: boolean;
 				invalidateAll?: boolean;
 			}) => Promise<void>;
-	  }) => void)
+	  }) => MaybePromise<void>)
 >;
 ```
 

From 37ccfd3a882bbf76832f2f03c869647c8f9970b4 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <accounts@dreamindani.com>
Date: Tue, 4 Mar 2025 03:30:48 -0700
Subject: [PATCH 317/453] docs: "What's new in Svelte" March newsletter (#1175)

* first draft march

* PR feedback

* Update apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* format

* Update apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...25-03-01-whats-new-in-svelte-march-2025.md | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md b/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md
new file mode 100644
index 0000000000..7743b51fb2
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md
@@ -0,0 +1,104 @@
+---
+title: "What's new in Svelte: March 2025"
+description: 'Congrats to the SvelteHack winners! Plus improved SSR in Svelte and SvelteKit'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+[SvelteHack 2024](https://hack.sveltesociety.dev/2024) has ended and the winners were announced on February 9th. Congrats to all the [winners](https://hack.sveltesociety.dev/2024/winners) who you'll also find listed in the "Community Showcase" below.
+
+But before we dive into that, let's get to some updates!
+
+## What's new in Svelte and SvelteKit
+
+- Native support for Websockets in SvelteKit is now available for testing! You can install the version of SvelteKit from the PR using pkg.pr.new and the PR number ([How To Install](https://github.com/sveltejs/kit/issues/1491#issuecomment-2645962690), [PR/Docs](https://github.com/sveltejs/kit/pull/12973))
+- `$props.id()` provides SSR-safe ID generation - unique for each instance of a component (**Svelte@5.20.0**, [Docs](</docs/svelte/$props#$props.id()>), [#15185](https://github.com/sveltejs/svelte/pull/15185))
+- SvelteKit now supports an option for server-side route resolution. This means that instead of loading the whole routing manifest in the client, and doing the route resolution there, the server runtime is invoked for each route request (**Kit@2.17.0**, [#13379](https://github.com/sveltejs/kit/pull/13379))
+- The values for `cache-control` and `content-type` headers are now validated in dev mode to help catch invalid values early (**2.17.0**, [#13114](https://github.com/sveltejs/kit/pull/13114))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Faviconizer](https://www.faviconizer.com/) is a simple, functional favicon (.ico) converter made with SvelteKit
+- [stocknear](https://github.com/stocknear) is an open source stock analysis & community platform (congrats on [2 years of development](https://www.reddit.com/r/sveltejs/comments/1iupfxb/from_learning_web_dev_to_building_my_saas_hit/)!)
+- [Workouts](https://www.reddit.com/r/sveltejs/comments/1in1t0n/self_promotion_svelte_tauri_mobile_app_for/) is a simple and private app for tracking your strength training workouts
+- [Perplexity Fast Chat](https://github.com/Ayfri/Deep-Research) is a modern web interface to interact with Perplexity AI and OpenAI models, featuring a unique deep research mode
+- [exiftool-web](https://github.com/lucasgelfond/exiftool-web) is an exif data inspector tool, in the browser (via WebAssembly!)
+- [Weekend Scanner](https://weekendscanner.com/) helps you find long weekends by combining your weekends and holidays
+- [Linklink](https://linklink.ink/) is a link management tool for organising and sharing links
+- [Multiplayer Globe App](https://github.com/lilnasy/multiplayer-globe) displays website visitor locations in real-time using Astro, Cloudflare and Redis
+- [Mathesar](https://github.com/mathesar-foundation/mathesar) is an intuitive spreadsheet-like interface that lets users of all technical skill levels view, edit, query, and collaborate on Postgres data directly
+- [Squash](https://image-squash.web.app/) lets you compress and convert your images to AVIF, JPEG, JPEG XL, PNG, or WebP
+- [Segment Anything 2 in WebGPU](https://github.com/lucasgelfond/webgpu-sam2) is a WebGPU implementation of Facebook Research's model
+
+_Svelte Hack Wizzbangery Wizard Winners_
+
+1. [kunkun](https://github.com/kunkunsh/kunkun) is an open source, cross-platform, extensible app launcher (like Raycast) - it's also the winner of SvelteHack 2024 🏆
+2. [Infinite Turtles](https://github.com/edsunman/infinite-turtles) is a card game made with Threlte
+3. [Svudoku](https://github.com/fodor-lori/svudoku) is a modern-looking Sudoku application that lets you enjoy solving both Classic and Killer Sudoku puzzles
+4. [Svelte Space](https://github.com/baterson/svelte-tower-defence) is a TowerDefence clicker game made with Svelte 5, without canvas. Playable on different screens, Mobile or Desktop.
+5. [Haunted house](https://github.com/martaProsniak/haunted-house) is an old-school arcade game where you explore a haunted mansion full of ghosts. Control plasma bullets, use your wits and clear the whole house! Created only with Svelte 5.
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Svelte Hack 2024 Winners Announcement Livestream](https://www.youtube.com/live/NwRJvFX-lOk?si=kGLb_09XSitwdaqk) featuring GHOST, Paulo and Dominik
+- [20 Svelte Features You Missed During Advent Of Svelte](https://www.youtube.com/watch?v=SJiE4tu39EQ) by Joy of Code
+- [Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way)](https://www.youtube.com/watch?v=R82Ptutku0M) by Stanislav Khromov
+- [Svelte London - February 2025](https://www.youtube.com/watch?v=s79E0Q9f2YM)
+
+_This Week in Svelte_
+
+- [Ep. 92](https://www.youtube.com/watch?v=UHBekhrnKVs) — Changelog and Showcase
+- [Ep. 93](https://www.youtube.com/watch?v=-VV-2FyBnng) — Changelog, dynamic layouts with snippets
+- [Ep. 94](https://www.youtube.com/watch?v=Qo57-7JmUaw) — Go + Svelte as a hybrid SPA/MPA application
+- [Ep. 95](https://www.youtube.com/watch?v=9ypawEnb12U) — Changelog
+
+_To Watch_
+
+- [GitHub Copilot: the agent awakens](https://www.youtube.com/watch?v=C95drFKy4ss) uses SvelteKit as their example project 🙌🏼
+- [Full Stack E-Commerce + Dashboard: Svelte 5, Cloudflare, Tailwind, Drizzle, Sqlite, 2025](https://www.youtube.com/watch?v=lwbNPEPt0E8) by Lawal Adebola
+
+_To Read_
+
+- [How to Protect Your SvelteKit Routes](https://blog.yuki-dev.com/blogs/x2lxp2szm) by Yuki Ishii
+- [Sharing Runes in Svelte 5 with the Rune Class](https://dev.to/jdgamble555/sharing-runes-in-svelte-5-the-rune-class-505e) by Jonathan Gamble
+- [Mixed Signals with Svelte 5](https://blog.fullmeasure.uk/2025/01/07/mixed-signals-with-svelte5/) from the FullMeasure Blog
+- [Did Svelte 5 Get Runed with Complexity?](https://steve-sob.medium.com/did-svelte-5-get-runed-with-complexity-cbeda34b9feb) by sobPilot
+- [Background Jobs in SvelteKit with BullMQ](https://dev.to/ranjanpurbey/background-jobs-in-sveltekit-with-bullmq-4dn3) by Ranjan Purbey
+
+### Libraries, Tools & Components
+
+- [Svelte Form Builder](https://svelte-form-builder.vercel.app/) helps you create forms with Shadcn-Svelte, Superforms and schema within minutes
+- [shadcn-svelte-enhancements](https://github.com/tzezar/shadcn-svelte-enhancements) is a collection of additional components designed specifically for Shadcn-Svelte
+- [lomer-ui](https://ui.lomer.dev/) provides standalone components for Svelte powered by Tailwind CSS
+- [Vite Plugin Svelte Anywhere](https://github.com/vidschofelix/vite-plugin-svelte-anywhere) empowers developers to define reusable custom elements directly within their Svelte components
+- [Svelte 5 + SvelteKit Sage](https://chatgpt.com/g/g-Knj6VxTpl-svelte-5-sveltekit-sage) is a custom GPT to get the best answers out of ChatGPT
+- [ModalFileManager](https://github.com/raguay/ModalFileManager/releases/tag/v2.0.0) and [PersonalKanban](https://github.com/raguay/PersonKanban/releases/tag/v0.5) have been updated to work with Svelte 5 (and fix a large number of bugs)
+- [components-pack](https://github.com/Matb85/components-pack) provides photos-related UI components for Svelte 5, Vue 3, Astro 5 and vanilla JS
+
+_Svelte Hack Rune Ritualist Winners_
+
+1. [SyncroState](https://github.com/beynar/syncrostate) brings Svelte 5 reactivity DX to the multiplayer level. Built on top of Yjs, it's a typesafe, efficient and dead simple way to manage multiplayer state. It is just like a normal $state but synchronised in realtime.
+2. [Twoslash Svelte](https://github.com/twoslashes/twoslash/pull/57) is an extension of `twoslashes/twoslash` which supports Svelte. This will be beneficial for adding type hints to code blocks on any documentation website targeting Svelte.
+3. [svisx](https://github.com/xGEMINIx/svisx) is a port of Airbnb's visx to Svelte, bringing the power of D3 visualizations to the Svelte ecosystem.
+4. [Svelte Value Inspect](https://github.com/ampled/svelte-inspect-value) is a "json tree"-like inspector inspired by the likes of react-json-view, and svelte-json-tree.
+5. [Flexiboards](https://github.com/Blakintosh/svelte-flexiboards) provides headless, reactive drag and drop components for Svelte 5.
+
+_Svelte Hack Migration Magician Winners_
+
+1. [Svelte MapLibre GL](https://github.com/MIERUNE/svelte-maplibre-gl) lets you build interactive web maps effortlessly with MapLibre GL JS and Svelte 5.
+2. [svelte-ux](https://github.com/techniq/svelte-ux/pull/530) is a collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
+3. [rokkit](https://github.com/jerrythomas/rokkit/tree/develop) is a data-driven, configurable, and themeable UI library built for use with Svelte. Rokkit controls are designed to be easily themeable, so you can match the look and feel of your project with minimal effort.
+4. [Svelte MiniApps](https://github.com/Michael-Obele/Svelte-MiniApps) is a collection of user-friendly tools rebuilt with Svelte 5 for enhanced speed and reliability
+5. [Roguelighter Engine](https://github.com/roguelighterengine/roguelighter) is a free, open-source, easy-to-use game engine for 2D game development.
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

From ab142c48e7b0aefbeaaf8d0d4cd36d898be04315 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 4 Mar 2025 21:54:30 -0500
Subject: [PATCH 318/453] Sync `svelte` docs (#1170)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/02-runes/01-what-are-runes.md      |  2 +-
 .../98-reference/.generated/compile-errors.md      |  6 ++++++
 .../content/docs/svelte/98-reference/20-svelte.md  | 14 ++++++++++++--
 .../docs/svelte/98-reference/21-svelte-server.md   |  2 ++
 .../docs/svelte/98-reference/30-compiler-errors.md |  6 ++++++
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md b/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
index 2bae4b3561..7154725b70 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: What are runes?
 ---
 
-> [!NOTE] **rune** /ro͞on/ _noun_
+> [!NOTE] **rune** /ruːn/ _noun_
 >
 > A letter or mark used as a mystical or magic symbol.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index a4ecbb31d5..ea116014e7 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -84,6 +84,12 @@ Attribute values containing `{...}` must be enclosed in quote marks, unless the
 `bind:group` can only bind to an Identifier or MemberExpression
 ```
 
+### bind_group_invalid_snippet_parameter
+
+```
+Cannot `bind:group` to a snippet parameter
+```
+
 ### bind_invalid_expression
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 1d6b62dc14..cb54e53481 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -278,12 +278,13 @@ function createRawSnippet<Params extends unknown[]>(
 
 ## flushSync
 
-Synchronously flushes any pending state changes and those that result from it.
+Synchronously flush any pending updates.
+Returns void if no callback is provided, otherwise returns the result of calling the callback.
 
 <div class="ts-block">
 
 ```dts
-function flushSync(fn?: (() => void) | undefined): void;
+function flushSync<T = void>(fn?: (() => T) | undefined): T;
 ```
 
 </div>
@@ -707,6 +708,15 @@ sync?: boolean;
 
 <div class="ts-block-property">
 
+```dts
+idPrefix?: string;
+```
+
+<div class="ts-block-property-details"></div>
+</div>
+
+<div class="ts-block-property">
+
 ```dts
 $$inline?: boolean;
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
index 3be98b0abd..747b4387b0 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md
@@ -30,6 +30,7 @@ function render<
 				options?: {
 					props?: Omit<Props, '$$slots' | '$$events'>;
 					context?: Map<any, any>;
+					idPrefix?: string;
 				}
 			]
 		: [
@@ -39,6 +40,7 @@ function render<
 				options: {
 					props: Omit<Props, '$$slots' | '$$events'>;
 					context?: Map<any, any>;
+					idPrefix?: string;
 				}
 			]
 ): RenderOutput;
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 10593d886e..b3423d020e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -89,6 +89,12 @@ Attribute values containing `{...}` must be enclosed in quote marks, unless the
 `bind:group` can only bind to an Identifier or MemberExpression
 ```
 
+### bind_group_invalid_snippet_parameter
+
+```
+Cannot `bind:group` to a snippet parameter
+```
+
 ### bind_invalid_expression
 
 ```

From f1fcf07eedccecfb544fec6d06921ab32d8b277a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 4 Mar 2025 21:55:04 -0500
Subject: [PATCH 319/453] Sync `kit` docs (#1163)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../60-adapter-cloudflare.md                  | 44 +++++----
 .../70-adapter-cloudflare-workers.md          | 90 +++++++++----------
 .../content/docs/kit/30-advanced/20-hooks.md  |  2 +
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 57 +++++++++---
 .../content/docs/kit/98-reference/54-types.md | 16 ++--
 5 files changed, 129 insertions(+), 80 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 260f48dbf0..9c849a51d1 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Cloudflare Pages
 ---
 
-To deploy to [Cloudflare Pages](https://developers.cloudflare.com/pages/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
+To deploy to [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
 
 This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare Pages, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that values specific to Cloudflare Workers are emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
 
@@ -31,10 +31,9 @@ export default {
 				exclude: ['<all>']
 			},
 			platformProxy: {
-				configPath: 'wrangler.toml',
+				configPath: undefined,
 				environment: undefined,
-				experimentalJsonConfig: false,
-				persist: false
+				persist: undefined
 			}
 		})
 	}
@@ -45,7 +44,7 @@ export default {
 
 ### routes
 
-Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
+Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
 
 - `include` defines routes that will invoke a function, and defaults to `['/*']`
 - `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:
@@ -58,11 +57,11 @@ You can have up to 100 `include` and `exclude` rules combined. Generally you can
 
 ### platformProxy
 
-Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#syntax) Wrangler API documentation for a full list of options.
+Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.
 
 ## Deployment
 
-Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started) for Cloudflare Pages to begin.
+Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.
 
 When configuring your project settings, you must use the following settings:
 
@@ -72,7 +71,7 @@ When configuring your project settings, you must use the following settings:
 
 ## Runtime APIs
 
-The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
+The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
 
 ```js
 // @errors: 7031
@@ -81,9 +80,9 @@ export async function POST({ request, platform }) {
 }
 ```
 
-> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
+> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.
 
-To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
+To make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:
 
 ```ts
 /// file: src/app.d.ts
@@ -105,15 +104,15 @@ export {};
 
 ### Testing Locally
 
-Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on the configuration in your `wrangler.toml` file and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
+Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/pages/functions/bindings/) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/pages/functions/wrangler-configuration/#local-development) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
 
 ## Notes
 
-Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](routing#server) in your SvelteKit app.
+Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).
 
-The `_headers` and `_redirects` files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
+The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
 
 However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
 
@@ -121,7 +120,22 @@ However, they will have no effect on responses dynamically rendered by SvelteKit
 
 ### Further reading
 
-You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site).
+You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).
+
+### Node.js compatibility
+
+If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"compatibility_flags": ["nodejs_compat"]
+}
+```
+
+### Worker size limits
+
+When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
 
 ### Accessing the file system
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index 32b31a8813..b09e438ac9 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -5,7 +5,7 @@ title: Cloudflare Workers
 
 To deploy to [Cloudflare Workers](https://workers.cloudflare.com/), use [`adapter-cloudflare-workers`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare-workers).
 
-> [!NOTE] Unless you have a specific reason to use `adapter-cloudflare-workers`, it's recommended that you use `adapter-cloudflare` instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
+> [!NOTE] Unless you have a specific reason to use `adapter-cloudflare-workers`, it's recommended that you use [`adapter-cloudflare`](adapter-cloudflare) instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
 
 ## Usage
 
@@ -19,13 +19,7 @@ import adapter from '@sveltejs/adapter-cloudflare-workers';
 export default {
 	kit: {
 		adapter: adapter({
-			config: 'wrangler.toml',
-			platformProxy: {
-				configPath: 'wrangler.toml',
-				environment: undefined,
-				experimentalJsonConfig: false,
-				persist: false
-			}
+			// see below for options that can be set here
 		})
 	}
 };
@@ -35,42 +29,44 @@ export default {
 
 ### config
 
-Path to your custom `wrangler.toml` or `wrangler.json` config file.
+Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, you can specify it using this option.
 
 ### platformProxy
 
-Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#syntax) Wrangler API documentation for a full list of options.
+Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.
 
 ## Basic Configuration
 
-This adapter expects to find a [wrangler.toml/wrangler.json](https://developers.cloudflare.com/workers/platform/sites/configuration) file in the project root. It should look something like this:
-
-```toml
-/// file: wrangler.toml
-name = "<your-service-name>"
-account_id = "<your-account-id>"
-
-main = "./.cloudflare/worker.js"
-site.bucket = "./.cloudflare/public"
-
-build.command = "npm run build"
-
-compatibility_date = "2021-11-12"
-workers_dev = true
+This adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"name": "<your-service-name>",
+	"account_id": "<your-account-id>",
+	"main": "./.cloudflare/worker.js",
+	"site": {
+		"bucket": "./.cloudflare/public"
+	},
+	"build": {
+		"command": "npm run build"
+	},
+	"compatibility_date": "2021-11-12"
+}
 ```
 
-`<your-service-name>` can be anything. `<your-account-id>` can be found by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:
+`<your-service-name>` can be anything. `<your-account-id>` can be found by running `wrangler whoami` using the Wrangler CLI tool or by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:
 
 ```
-https://dash.cloudflare.com/<your-account-id>
+https://dash.cloudflare.com/<your-account-id>/home
 ```
 
-> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) to your `.gitignore`.
+> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) and the `.wrangler` directory to your `.gitignore`.
 
-You will need to install [wrangler](https://developers.cloudflare.com/workers/wrangler/get-started/) and log in, if you haven't already:
+You will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already:
 
-```
-npm i -g wrangler
+```sh
+npm i -D wrangler
 wrangler login
 ```
 
@@ -80,20 +76,9 @@ Then, you can build your app and deploy it:
 wrangler deploy
 ```
 
-## Custom config
-
-If you would like to use a config file other than `wrangler.toml` you can specify so using the [`config` option](#Options-config).
-
-If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-nodejs-from-the-cloudflare-dashboard), you can add "nodejs_compat" flag to `wrangler.toml`:
-
-```toml
-/// file: wrangler.toml
-compatibility_flags = [ "nodejs_compat" ]
-```
-
 ## Runtime APIs
 
-The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
+The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
 
 ```js
 // @errors: 7031
@@ -102,9 +87,9 @@ export async function POST({ request, platform }) {
 }
 ```
 
-> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
+> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.
 
-To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
+To make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:
 
 ```ts
 /// file: src/app.d.ts
@@ -126,15 +111,26 @@ export {};
 
 ### Testing Locally
 
-Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on the configuration in your `wrangler.toml` file and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
+Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler dev`.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler dev`.
 
 ## Troubleshooting
 
+### Node.js compatibility
+
+If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"compatibility_flags": ["nodejs_compat"]
+}
+```
+
 ### Worker size limits
 
-When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
+When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
 
 ### Accessing the file system
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 91a56728f0..e8b248635a 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -300,6 +300,8 @@ The `lang` parameter will be correctly derived from the returned pathname.
 
 Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.
 
+Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise.
+
 ### transport
 
 This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns `false` for anything that isn't an instance of the type) and a corresponding `decode` function:
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 678c1513b9..60e777f122 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -16,6 +16,7 @@ import {
 	isHttpError,
 	isRedirect,
 	json,
+	normalizeUrl,
 	redirect,
 	text
 } from '@sveltejs/kit';
@@ -190,6 +191,34 @@ function json(
 
 
 
+## normalizeUrl
+
+Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.
+Returns the normalized URL as well as a method for adding the potential suffix back
+based on a new pathname (possibly including search) or URL.
+```js
+// @errors: 7031
+import { normalizeUrl } from '@sveltejs/kit';
+
+const { url, denormalize } = normalizeUrl('/blog/post/__data.json');
+console.log(url.pathname); // /blog/post
+console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
+```
+
+<div class="ts-block">
+
+```dts
+function normalizeUrl(url: URL | string): {
+	url: URL;
+	wasNormalized: boolean;
+	denormalize: (url?: string | URL) => URL;
+};
+```
+
+</div>
+
+
+
 ## redirect
 
 Redirect a request. When called during request handling, SvelteKit will return a redirect response.
@@ -1833,7 +1862,7 @@ type PrerenderOption = boolean | 'auto';
 
 ## Redirect
 
-The object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function
+The object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function.
 
 <div class="ts-block">
 
@@ -1909,7 +1938,7 @@ fetch: typeof fetch;
 - During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)
 - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.
 
-You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies)
+You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies).
 
 </div>
 </div>
@@ -1948,7 +1977,7 @@ params: Params;
 
 <div class="ts-block-property-details">
 
-The parameters of the current route - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object
+The parameters of the current route - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.
 
 </div>
 </div>
@@ -1974,7 +2003,7 @@ request: Request;
 
 <div class="ts-block-property-details">
 
-The original request object
+The original request object.
 
 </div>
 </div>
@@ -1987,7 +2016,7 @@ route: {/*…*/}
 
 <div class="ts-block-property-details">
 
-Info about the current route
+Info about the current route.
 
 <div class="ts-block-property-children"><div class="ts-block-property">
 
@@ -1997,7 +2026,7 @@ id: RouteId;
 
 <div class="ts-block-property-details">
 
-The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`.
 
 </div>
 </div></div>
@@ -2112,7 +2141,9 @@ The [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modi
 <div class="ts-block">
 
 ```dts
-type Reroute = (event: { url: URL }) => void | string;
+type Reroute = (event: {
+	url: URL;
+}) => MaybePromise<void | string>;
 ```
 
 </div>
@@ -2303,7 +2334,11 @@ appPath: string;
 assets: Set<string>;
 ```
 
-<div class="ts-block-property-details"></div>
+<div class="ts-block-property-details">
+
+Static files from `kit.config.files.assets` and the service worker (if any).
+
+</div>
 </div>
 
 <div class="ts-block-property">
@@ -2373,7 +2408,7 @@ server_assets: Record<string, number>;
 
 <div class="ts-block-property-details">
 
-A `[file]: size` map of all assets imported by server code
+A `[file]: size` map of all assets imported by server code.
 
 </div>
 </div></div>
@@ -2415,7 +2450,7 @@ env: Record<string, string>;
 
 <div class="ts-block-property-details">
 
-A map of environment variables
+A map of environment variables.
 
 </div>
 </div>
@@ -2428,7 +2463,7 @@ read?: (file: string) => ReadableStream;
 
 <div class="ts-block-property-details">
 
-A function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work
+A function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work.
 
 </div>
 </div></div>
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index bd97d2ab2c..60755eec51 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -8,7 +8,7 @@ title: Types
 The `RequestHandler` and `Load` types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:
 
 ```js
-/// file: src/routes/[foo]/[bar]/[baz]/+page.server.js
+/// file: src/routes/[foo]/[bar]/[baz]/+server.js
 // @errors: 2355 2322 1360
 /** @type {import('@sveltejs/kit').RequestHandler<{
     foo: string;
@@ -35,14 +35,14 @@ type RouteParams = {
 	baz: string;
 };
 
-export type PageServerLoad = Kit.ServerLoad<RouteParams>;
+export type RequestHandler = Kit.RequestHandler<RouteParams>;
 export type PageLoad = Kit.Load<RouteParams>;
 ```
 
 These files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration:
 
 ```js
-/// file: src/routes/[foo]/[bar]/[baz]/+page.server.js
+/// file: src/routes/[foo]/[bar]/[baz]/+server.js
 // @filename: $types.d.ts
 import type * as Kit from '@sveltejs/kit';
 
@@ -52,12 +52,12 @@ type RouteParams = {
 	baz: string;
 }
 
-export type PageServerLoad = Kit.ServerLoad<RouteParams>;
+export type RequestHandler = Kit.RequestHandler<RouteParams>;
 
 // @filename: index.js
-// @errors: 2355
+// @errors: 2355 2322
 // ---cut---
-/** @type {import('./$types').PageServerLoad} */
+/** @type {import('./$types').RequestHandler} */
 export async function GET({ params }) {
 	// ...
 }
@@ -85,7 +85,9 @@ export async function load({ params, fetch }) {
 }
 ```
 
-The return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`. Starting with version 2.16.0, two additional helper types are provided. `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined. `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`:
+The return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`.
+
+Starting with version 2.16.0, two additional helper types are provided: `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined, while `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`.
 
 ```svelte
 <!--- file: src/routes/+page.svelte --->

From c86afc0360e4a1d69f020089617687df691704fe Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 4 Mar 2025 21:58:44 -0500
Subject: [PATCH 320/453] Sync `svelte` docs (#1176)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/03-template-syntax/01-basic-markup.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
index 1d62973bfb..a73f0e29e6 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -186,7 +186,7 @@ You can use HTML comments inside components.
 Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
 
 ```svelte
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <input bind:value={name} autofocus />
 ```
 

From e9c55119f04aa43ce92bd133b00973e4860af30c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 5 Mar 2025 09:06:55 -0500
Subject: [PATCH 321/453] Sync `kit` docs (#1178)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 60e777f122..f6762ae352 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -193,6 +193,12 @@ function json(
 
 ## normalizeUrl
 
+<blockquote class="since note">
+
+Available since 2.18.0
+
+</blockquote>
+
 Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.
 Returns the normalized URL as well as a method for adding the potential suffix back
 based on a new pathname (possibly including search) or URL.

From 0416fcb93e3b43c4f00d7820b5101c2a431458f0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 5 Mar 2025 21:50:41 -0500
Subject: [PATCH 322/453] Sync `svelte` docs (#1179)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/02-runes/04-$effect.md        | 30 +++++++++++--------
 .../svelte/07-misc/07-v5-migration-guide.md   |  2 ++
 .../docs/svelte/98-reference/20-svelte.md     | 11 +++----
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 5ca6045dfa..af92e373c8 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -3,15 +3,11 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: $effect
 ---
 
-Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.
 
-Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.
+Generally speaking, you should _not_ update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles. If you find yourself doing so, see [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
 
-But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `<canvas>` element, or something across a network) with state inside your Svelte app.
-
-> [!NOTE] Avoid overusing `$effect`! When you do too much work in effects, code often becomes difficult to understand and maintain. See [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
-
-Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
+You can create an effect with the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
 
 ```svelte
 <script>
@@ -33,11 +29,19 @@ Your effects run after the component has been mounted to the DOM, and in a [micr
 <canvas bind:this={canvas} width="100" height="100" />
 ```
 
-Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
+When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+
+> [!NOTE] If you're having difficulty understanding why your `$effect` is rerunning or is not running see [understanding dependencies](#Understanding-dependencies). Effects are triggered differently than the `$:` blocks you may be used to if coming from Svelte 4.
+
+### Understanding lifecycle
 
-You can place `$effect` anywhere, not just at the top level of a component, as long as it is called during component initialization (or while a parent effect is active). It is then tied to the lifecycle of the component (or parent effect) and will therefore destroy itself when the component unmounts (or the parent effect is destroyed).
+Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes. Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
 
-You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed ([demo](/playground/untitled#H4sIAAAAAAAAE42RQY-bMBCF_8rI2kPopiXpMQtIPfbeW6m0xjyKtWaM7CFphPjvFVB2k2oPe7LmzXzyezOjaqxDVKefo5JrD3VaBLVXrLu5-tb3X-IZTmat0hHv6cazgCWqk8qiCbaXouRSHISMH1gop4coWrA7JE9bp7PO2QjjuY5vA8fDYZ3hUh7QNDCy2yWUFzTOUilpSj9aG-linaMKFGACtKCmSwvGGYGeLQvCWbtnMq3m34grajxHoa1JOUXI93_V_Sfz7Oz7Mafj0ypN-zvHm8dSAmQITP_xaUq2IU1GO1dp80I2Uh_82dao92Rl9R8GvgF0QrbrUFstcFeq0PgAkha0LoICPoeB4w1SJUvsZcj4rvcMlvmvGlGCv6J-DeSgw2vabQnJlm55p7nM0rcTctYei3HZxZSl7XHVqkHEM3k2zpqXfFyj393zU05fpyI6f0HI0hUoPoamC9roKDeo2ivBH1EnCQOmX9NfYw2GHrgCAAA=)).
+You can use `$effect` anywhere, not just at the top level of a component, as long as it is called while a parent effect is running.
+
+> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.
+
+An effect can return a _teardown function_ which will run immediately before the effect re-runs ([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).
 
 ```svelte
 <script>
@@ -51,7 +55,7 @@ You can return a function from `$effect`, which will run immediately before the
 		}, milliseconds);
 
 		return () => {
-			// if a callback is provided, it will run
+			// if a teardown function is provided, it will run
 			// a) immediately before the effect re-runs
 			// b) when the component is destroyed
 			clearInterval(interval);
@@ -65,9 +69,11 @@ You can return a function from `$effect`, which will run immediately before the
 <button onclick={() => (milliseconds /= 2)}>faster</button>
 ```
 
+Teardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.
+
 ### Understanding dependencies
 
-`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
+`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.
 
 Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 4e9e5fd010..217db6696c 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -52,6 +52,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 </script>
 ```
 
+Note that [when `$effect` runs is different]($effect#Understanding-dependencies) than when `$:` runs.
+
 > [!DETAILS] Why we did this
 > `$:` was a great shorthand and easy to get started with: you could slap a `$:` in front of most code and it would somehow work. This intuitiveness was also its drawback the more complicated your code became, because it wasn't as easy to reason about. Was the intent of the code to create a derivation, or a side effect? With `$derived` and `$effect`, you have a bit more up-front decision making to do (spoiler alert: 90% of the time you want `$derived`), but future-you and other developers on your team will have an easier time.
 >
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index cb54e53481..454df3f0ef 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -419,13 +419,14 @@ function onDestroy(fn: () => any): void;
 
 ## onMount
 
-The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
-It must be called during the component's initialisation (but doesn't need to live *inside* the component;
-it can be called from an external module).
+`onMount`, like [`$effect`](/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
+Unlike `$effect`, the provided function only runs once.
 
-If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
+It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
+it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
+it will be called when the component is unmounted.
 
-`onMount` does not run inside [server-side components](/docs/svelte/svelte-server#render).
+`onMount` functions do not run during [server-side rendering](/docs/svelte/svelte-server#render).
 
 <div class="ts-block">
 

From 286e422158d0546a22ee7061811646aaba738093 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 6 Mar 2025 11:17:12 -0800
Subject: [PATCH 323/453] Sync `kit` docs (#1180)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../kit/10-getting-started/10-introduction.md |  2 +-
 .../10-getting-started/25-project-types.md    | 70 +++++++++++++++++++
 .../kit/30-advanced/40-service-workers.md     |  6 +-
 .../content/docs/kit/60-appendix/10-faq.md    | 19 +----
 .../docs/kit/60-appendix/60-glossary.md       | 20 +++++-
 5 files changed, 95 insertions(+), 22 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md

diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
index 8c3b86aeb3..bdf5d2a8cc 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
@@ -13,7 +13,7 @@ title: Introduction
 
 SvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](../svelte). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
 
-To learn more about the kinds of applications you can build with SvelteKit, see the [FAQ](faq#What-can-I-make-with-SvelteKit).
+To learn more about the kinds of applications you can build with SvelteKit, see the [documentation regarding project types](project-types).
 
 ## What is Svelte?
 
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md b/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md
new file mode 100644
index 0000000000..50a2d99c97
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md
@@ -0,0 +1,70 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Project types
+---
+
+SvelteKit offers configurable rendering, which allows you to build and deploy your project in several different ways. You can build all of the below types of applications and more with SvelteKit. Rendering settings are not mutually exclusive and you may choose the optimal manner with which to render different parts of your application.
+
+If you don't have a particular way you'd like to build your application in mind, don't worry! The way your application is built, deployed, and rendered is controlled by which adapter you've chosen and a small amount of configuration and these can always be changed later. The [project structure](project-structure) and [routing](glossary#Routing) will be the same regardless of the project type that you choose.
+
+## Default rendering
+
+By default, when a user visits a site, SvelteKit will render the first page with [server-side rendering (SSR)](glossary#SSR) and subsequent pages with [client-side rendering (CSR)](glossary#CSR). Using SSR for the initial render improves SEO and perceived performance of the initial page load. Client-side rendering then takes over and updates the page without having to rerender common components, which is typically faster and eliminates a flash when navigating between pages. Apps built with this hybrid rendering approach have also been called [transitional apps](https://www.youtube.com/watch?v=860d8usGC0o).
+
+## Static site generation
+
+You can use SvelteKit as a [static site generator (SSG)](glossary#SSG) that fully [prerenders](glossary#Prerendering) your site with static rendering using [`adapter-static`](adapter-static). You may also use [the prerender option](page-options#prerender) to prerender only some pages and then choose a different adapter with which to dynamically server-render other pages.
+
+Tools built solely to do static site generation may scale the prerendering process more efficiently during build when rendering a very large number of pages. When working with very large statically generated sites, you can avoid long build times with [Incremental Static Regeneration (ISR) if using `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration). And in contrast to purpose-built SSGs, SvelteKit allows for nicely mixing and matching different rendering types on different pages.
+
+## Single-page app
+
+[Single-page apps (SPAs)](glossary#SPA) exclusively use [client-side rendering (CSR)](glossary#CSR). You can [build single-page apps (SPAs)](single-page-apps) with SvelteKit. As with all types of SvelteKit applications, you can write your backend in SvelteKit or [another language or framework](#Separate-backend). If you are building an application with no backend or a [separate backend](#Separate-backend), you can simply skip over and ignore the parts of the docs talking about `server` files.
+
+## Multi-page app
+
+SvelteKit isn't typically used to build [traditional multi-page apps](glossary#MPA). However, in SvelteKit you can remove all JavaScript on a page with [`csr = false`](page-options#csr), which will render subsequent links on the server, or you can use [`data-sveltekit-reload`](link-options#data-sveltekit-reload) to render specific links on the server.
+
+## Separate backend
+
+If your backend is written in another language such as Go, Java, PHP, Ruby, Rust, or C#, there are a couple of ways that you can deploy your application. The most recommended way would be to deploy your SvelteKit frontend separately from your backend utilizing `adapter-node` or a serverless adapter. Some users prefer not to have a separate process to manage and decide to deploy their application as a [single-page app (SPA)](single-page-apps) served by their backend server, but note that single-page apps have worse SEO and performance characteristics.
+
+If you are using an external backend, you can simply skip over and ignore the parts of the docs talking about `server` files. You may also want to reference [the FAQ about how to make calls to a separate backend](faq#How-do-I-use-a-different-backend-API-server).
+
+## Serverless app
+
+SvelteKit apps are simple to run on serverless platforms. [The default zero config adapter](adapter-auto) will automatically run your app on a number of supported platforms or you can use [`adapter-vercel`](adapter-vercel), [`adapter-netlify`](adapter-netlify), or [`adapter-cloudflare`](adapter-cloudflare) to provide platform-specific configuration. And [community adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) allow you to deploy your application to almost any serverless environment. Some of these adapters such as [`adapter-vercel`](adapter-vercel) and [`adapter-netlify`](adapter-netlify) offer an `edge` option, to support [edge rendering](glossary#Edge) for improved latency.
+
+## Your own server
+
+You can deploy to your own server or VPS using [`adapter-node`](adapter-node).
+
+## Container
+
+You can use [`adapter-node`](adapter-node) to run a SvelteKit app within a container such as Docker or LXC.
+
+## Library
+
+You can create a library to be used by other Svelte apps with the [`@sveltejs/package`](packaging) add-on to SvelteKit by choosing the library option when running [`sv create`](/docs/cli/sv-create).
+
+## Offline app
+
+SvelteKit has full suppport for [service workers](service-workers) allowing you to build many types of applications such as offline apps and [progressive web apps](glossary#PWA).
+
+## Mobile app
+
+You can turn a [SvelteKit SPA](single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.
+
+These mobile development platforms work by starting a local web server and then serving your application like a static host on your phone. You may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option to limit the number of requests made. E.g. at the time of writing, the Capacitor local server uses HTTP/1, which limits the number of concurrent connections.
+
+## Desktop app
+
+You can turn a [SvelteKit SPA](single-page-apps) into a desktop app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/), [Wails](https://wails.io/docs/guides/sveltekit/), or [Electron](https://www.electronjs.org/).
+
+## Browser extension
+
+You can build browser extensions using either [`adapter-static`](adapter-static) or [community adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) specifically tailored towards browser extensions.
+
+## Embedded device
+
+Because of its efficient rendering, Svelte can be run on low power devices. Embedded devices like microcontrollers and TVs may limit the number of concurrent connections. In order to reduce the number of concurrent requests, you may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option in this deployment configuration.
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md b/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
index df3106ea56..51f41ca86b 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
@@ -148,4 +148,8 @@ This disables access to DOM typings like `HTMLElement` which are not available i
 
 ## Other solutions
 
-SvelteKit's service worker implementation is deliberately low-level. If you need a more full-fledged but also more opinionated solution, we recommend looking at solutions like [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html), which uses [Workbox](https://web.dev/learn/pwa/workbox). For more general information on service workers, we recommend [the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).
+SvelteKit's service worker implementation is designed to be easy to work with and is probably a good solution for most users. However, outside of SvelteKit, many PWA applications leverage the [Workbox](https://web.dev/learn/pwa/workbox) library. If you're used to using Workbox you may prefer [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html).
+
+## References
+
+For more general information on service workers, we recommend [the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index db51277adb..f281c91b8b 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -9,24 +9,7 @@ Please see [the Svelte FAQ](../svelte/faq) and [`vite-plugin-svelte` FAQ](https:
 
 ## What can I make with SvelteKit?
 
-SvelteKit can be used to create most kinds of applications. Out of the box, SvelteKit supports many features including:
-
-- Dynamic page content with [load](load) functions and [API routes](routing#server).
-- SEO-friendly dynamic content with [server-side rendering (SSR)](glossary#SSR).
-- User-friendly progressively-enhanced interactive pages with SSR and [Form Actions](form-actions).
-- Static pages with [prerendering](page-options#prerender).
-
-SvelteKit can also be deployed to a wide spectrum of hosted architectures via [adapters](adapters). In cases where SSR is used (or server-side logic is added without prerendering), those functions will be adapted to the target backend. Some examples include:
-
-- Self-hosted dynamic web applications with a [Node.js backend](adapter-node).
-- Serverless web applications with backend loaders and APIs deployed as remote functions. See [zero-config deployments](adapter-auto) for popular deployment options.
-- [Static pre-rendered sites](adapter-static) such as a blog or multi-page site hosted on a CDN or static host. Statically-generated sites are shipped without a backend.
-- [Single-page Applications (SPAs)](single-page-apps) with client-side routing and rendering for API-driven dynamic content. SPAs are shipped without a backend and are not server-rendered. This option is commonly chosen when bundling SvelteKit with an app written in PHP, .Net, Java, C, Golang, Rust, etc.
-- A mix of the above; some routes can be static, and some routes can use backend functions to fetch dynamic information. This can be configured with [page options](page-options) that includes the option to opt out of SSR.
-
-In order to support SSR, a JS backend — such as Node.js or Deno-based server, serverless function, or edge function — is required.
-
-It is also possible to write custom adapters or leverage community adapters to deploy SvelteKit to more platforms such as specialized server environments, browser extensions, or native applications. See [integrations](./integrations) for more examples and integrations.
+See [the documentation regarding project types](project-types) for more details.
 
 ## How do I include details from package.json in my application?
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md b/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
index ab4ab91112..af44c472e4 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/60-glossary.md
@@ -11,12 +11,24 @@ Client-side rendering (CSR) is the generation of the page contents in the web br
 
 In SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
 
+## Edge
+
+Rendering on the edge refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance thus improving latency.
+
 ## Hydration
 
 Svelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.
 
 In SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
 
+## ISR
+
+Incremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduces build times compared to [SSG](#SSG) sites with a large number of pages. You can do [ISR with `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration).
+
+## MPA
+
+Traditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).
+
 ## Prerendering
 
 Prerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.
@@ -27,6 +39,10 @@ Pre-rendered pages are not limited to static content. You can build personalized
 
 In SvelteKit, you can control prerendering with [the `prerender` page option](page-options#prerender) and [`prerender` config](configuration#prerender) in `svelte.config.js`.
 
+## PWA
+
+A progressive web app (PWA) is an app that's built using web APIs and technologies, but functions like a mobile or desktop app. Sites served as [PWAs can be installed](https://web.dev/learn/pwa/installation), allowing you to add a shortcut to the application on your launcher, home screen, or start menu. Many PWAs will utilize [service workers](service-workers) to build offline capabilities.
+
 ## Routing
 
 By default, when you navigate to a new page (by clicking on a link or using the browser's forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.
@@ -35,13 +51,13 @@ In SvelteKit, client-side routing will be used by default, but you can skip it w
 
 ## SPA
 
-A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering of the requested contents based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. SPAs do not provide SSR, which has the shortcoming described above. However, some applications are not greatly impacted by these shortcomings such as a complex business application behind a login where SEO would not be important and it is known that users will be accessing the application from a consistent computing environment.
+A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering of the requested contents based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. SPAs do not provide SSR and thus have worse performance and SEO characteristics. However, some applications are not greatly impacted by these shortcomings such as a complex business application behind a login where SEO would not be important and it is known that users will be accessing the application from a consistent computing environment.
 
 In SvelteKit, you can [build an SPA with `adapter-static`](single-page-apps).
 
 ## SSG
 
-Static Site Generation (SSG) is a term that refers to a site where every page is prerendered. SvelteKit was not built to do only static site generation like some tools and so may not scale as well to efficiently render a very large number of pages as tools built specifically for that purpose. However, in contrast to most purpose-built SSGs, SvelteKit does nicely allow for mixing and matching different rendering types on different pages. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great "time to first byte" performance. This delivery model is often referred to as JAMstack.
+Static Site Generation (SSG) is a term that refers to a site where every page is prerendered. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great “time to first byte” performance. This delivery model is often referred to as JAMstack.
 
 In SvelteKit, you can do static site generation by using [`adapter-static`](adapter-static) or by configuring every page to be prerendered using [the `prerender` page option](page-options#prerender) or [`prerender` config](configuration#prerender) in `svelte.config.js`.
 

From c7505f4c91d44c49c73037c1ccaab7befa8781a9 Mon Sep 17 00:00:00 2001
From: Robert Morgan <robert.thomas.morgan@gmail.com>
Date: Thu, 13 Mar 2025 14:23:44 -0500
Subject: [PATCH 324/453] =?UTF-8?q?docs:=20Added=20docs=20link=20for=20Mar?=
 =?UTF-8?q?ch=202025=20What's=20New=20-=20server=20route=20resolu=E2=80=A6?=
 =?UTF-8?q?=20(#1181)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: Added docs link for March 2025 What's New - server route resolution addition

Added the docs link for consistency with other What's New changes and news.

* Update apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .../content/blog/2025-03-01-whats-new-in-svelte-march-2025.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md b/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md
index 7743b51fb2..c9385f0ff8 100644
--- a/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md
+++ b/apps/svelte.dev/content/blog/2025-03-01-whats-new-in-svelte-march-2025.md
@@ -13,7 +13,7 @@ But before we dive into that, let's get to some updates!
 
 - Native support for Websockets in SvelteKit is now available for testing! You can install the version of SvelteKit from the PR using pkg.pr.new and the PR number ([How To Install](https://github.com/sveltejs/kit/issues/1491#issuecomment-2645962690), [PR/Docs](https://github.com/sveltejs/kit/pull/12973))
 - `$props.id()` provides SSR-safe ID generation - unique for each instance of a component (**Svelte@5.20.0**, [Docs](</docs/svelte/$props#$props.id()>), [#15185](https://github.com/sveltejs/svelte/pull/15185))
-- SvelteKit now supports an option for server-side route resolution. This means that instead of loading the whole routing manifest in the client, and doing the route resolution there, the server runtime is invoked for each route request (**Kit@2.17.0**, [#13379](https://github.com/sveltejs/kit/pull/13379))
+- SvelteKit now supports an option for server-side route resolution. This means that instead of loading the whole routing manifest in the client, and doing the route resolution there, the server runtime is invoked for each route request (**Kit@2.17.0**, [docs](/docs/kit/configuration#router), [pull request](https://github.com/sveltejs/kit/pull/13379))
 - The values for `cache-control` and `content-type` headers are now validated in dev mode to help catch invalid values early (**2.17.0**, [#13114](https://github.com/sveltejs/kit/pull/13114))
 
 For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).

From 52f5936daac3bdbe283b4bbc2584d8afba3d5cb8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 13:05:01 -0400
Subject: [PATCH 325/453] chore: update permissions (#1187)

---
 .github/workflows/docs-preview-create.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 2d77ed56d8..82b49f260b 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -20,6 +20,10 @@ on:
         required: true
         type: string
 
+permissions:
+  contents: read
+  actions: write
+
 env:
   BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}
 

From d5f44823b73314c0cbf9712b95dbaf7ce4235e06 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 15:19:19 -0400
Subject: [PATCH 326/453] chore: update workflow permissions again (#1188)

---
 .github/workflows/docs-preview-create.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 82b49f260b..7581a54d1d 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -22,7 +22,7 @@ on:
 
 permissions:
   contents: read
-  actions: write
+  issues: write
 
 env:
   BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}

From 6a1edfed0fe16e6a327e627e5b3e3e4fd85bdca8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 15:48:57 -0400
Subject: [PATCH 327/453] chore: update workflow permissions again (#1191)

once more with feeling
---
 .github/workflows/docs-preview-create.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 7581a54d1d..5c9f983245 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -21,8 +21,7 @@ on:
         type: string
 
 permissions:
-  contents: read
-  issues: write
+  contents: write
 
 env:
   BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}

From 425b7b8094870830d91c5428bd3793c044555705 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 15:50:01 -0400
Subject: [PATCH 328/453] fix: remove all backticks from titles (#1189)

---
 packages/site-kit/src/lib/server/content/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/server/content/index.ts b/packages/site-kit/src/lib/server/content/index.ts
index ec85309c79..a2f6defb2e 100644
--- a/packages/site-kit/src/lib/server/content/index.ts
+++ b/packages/site-kit/src/lib/server/content/index.ts
@@ -34,7 +34,7 @@ export async function create_index(
 		const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).map((match) => {
 			const title = smart_quotes(match[1])
 				// replace < and > inside code spans
-				.replace(/`(.+?)`/, (_, contents) => contents.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
+				.replace(/`(.+?)`/g, (_, contents) => contents.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
 				// turn e.g. `class:_name_` into `class:<em>name</em>`
 				.replace(/_(.+)_/g, (_, contents) => `<em>${contents}</em>`);
 

From bb4f4f69e11d1d17938b3011d434f1a077ad7dc2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 16:41:59 -0400
Subject: [PATCH 329/453] chore: bump svelte (#1190)

---
 apps/svelte.dev/package.json   |   4 +-
 packages/editor/package.json   |   2 +-
 packages/repl/package.json     |   2 +-
 packages/site-kit/package.json |   2 +-
 pnpm-lock.yaml                 | 225 ++++++++++++++++++---------------
 5 files changed, 128 insertions(+), 107 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index fd7d9aebe4..c269fc0232 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -35,9 +35,9 @@
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
 		"cookie": "^0.7.0",
-		"do-not-zip": "^1.0.0",
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
+		"do-not-zip": "^1.0.0",
 		"editor": "workspace:*",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
@@ -74,7 +74,7 @@
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"sv": "^0.6.8",
-		"svelte": "5.14.0",
+		"svelte": "5.23.0",
 		"svelte-check": "^4.1.1",
 		"svelte-preprocess": "^6.0.3",
 		"tiny-glob": "^0.2.9",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 2ca77bbc6d..e78041f376 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -55,7 +55,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
-		"svelte": "^5.14.0",
+		"svelte": "^5.23.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
diff --git a/packages/repl/package.json b/packages/repl/package.json
index a16b7e1df6..4dab111ab9 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -86,7 +86,7 @@
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.14.0",
+		"svelte": "5.23.0",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index d944365e11..f83bc91165 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -52,7 +52,7 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "5.14.0",
+		"svelte": "5.23.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 133660058d..5f903723c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,13 +28,13 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^2.0.0
-        version: 2.0.0(svelte@5.14.0)
+        version: 2.0.0(svelte@5.23.0)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.4
-        version: 1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -43,7 +43,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)
+        version: 1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -119,19 +119,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
-        version: 0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.3
-        version: 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -173,7 +173,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -184,14 +184,14 @@ importers:
         specifier: ^0.6.8
         version: 0.6.8
       svelte:
-        specifier: 5.14.0
-        version: 5.14.0
+        specifier: 5.23.0
+        version: 5.23.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4)
+        version: 6.0.3(postcss@8.4.45)(svelte@5.23.0)(typescript@5.5.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -258,13 +258,13 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../repl
@@ -273,7 +273,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
@@ -282,16 +282,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
       svelte:
-        specifier: ^5.14.0
-        version: 5.14.0
+        specifier: ^5.23.0
+        version: 5.23.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -342,7 +342,7 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
         specifier: ^2.0.0
-        version: 2.0.0(svelte@5.14.0)
+        version: 2.0.0(svelte@5.23.0)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -351,7 +351,7 @@ importers:
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
         specifier: ^2.2.1
-        version: 2.2.1(svelte@5.14.0)
+        version: 2.2.1(svelte@5.23.0)
       acorn:
         specifier: ^8.11.3
         version: 8.14.0
@@ -374,8 +374,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: 5.14.0
-        version: 5.14.0
+        specifier: 5.23.0
+        version: 5.23.0
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -388,16 +388,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.14.0)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -406,13 +406,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -488,7 +488,7 @@ importers:
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -506,13 +506,13 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.14.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
       svelte:
-        specifier: 5.14.0
-        version: 5.14.0
+        specifier: 5.23.0
+        version: 5.23.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -1599,6 +1599,11 @@ packages:
   '@supabase/supabase-js@2.43.4':
     resolution: {integrity: sha512-/pLPaxiIsn5Vaz3s32HC6O/VNwfeddnzS0bZRpOW0AKcPuXroD8pT9G8mpiBlZfpKsMmq6k7tlhW7Sr1PAQ1lw==}
 
+  '@sveltejs/acorn-typescript@1.0.5':
+    resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
   '@sveltejs/adapter-auto@3.2.0':
     resolution: {integrity: sha512-She5nKT47kwHE18v9NMe6pbJcvULr82u0V3yZ0ej3n1laWKGgkgdEABE9/ak5iDPs93LqsBkuIo51kkwCLBjJA==}
     peerDependencies:
@@ -1820,16 +1825,16 @@ packages:
     peerDependencies:
       acorn: ^8
 
-  acorn-typescript@1.4.13:
-    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
-    peerDependencies:
-      acorn: '>=8.9.0'
-
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   adm-zip@0.5.14:
     resolution: {integrity: sha512-DnyqqifT4Jrcvb8USYjp6FHtBpEIz1mnXu6pTRHZ0RL69LbQYiO+0lDFg5+OKA7U29oWSs3a/i8fhn8ZcceIWg==}
     engines: {node: '>=12.0'}
@@ -2000,6 +2005,10 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   codemirror@6.0.1:
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
 
@@ -2205,6 +2214,9 @@ packages:
   esrap@1.2.3:
     resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
 
+  esrap@1.4.5:
+    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -3063,8 +3075,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.14.0:
-    resolution: {integrity: sha512-xHrS9dd2Ci9GJd2sReNFqJztoe515wB4OzsPw4A8L2M6lddLFkREkWDJnM5DAND30Zyvjwc1icQVzH0F+Sdx5A==}
+  svelte@5.23.0:
+    resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
     engines: {node: '>=18'}
 
   tar@7.4.3:
@@ -4284,9 +4296,9 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.14.0)':
+  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.23.0)':
     dependencies:
-      svelte: 5.14.0
+      svelte: 5.23.0
 
   '@rollup/browser@4.17.2':
     dependencies:
@@ -4431,19 +4443,23 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.1)':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      acorn: 8.14.1
+
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+    dependencies:
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.9(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4451,25 +4467,25 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
       sharp: 0.33.5
-      svelte: 5.14.0
-      svelte-parse-markup: 0.1.5(svelte@5.14.0)
+      svelte: 5.23.0
+      svelte-parse-markup: 0.1.5(svelte@5.23.0)
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
       zimmerframe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4481,13 +4497,13 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.14.0
+      svelte: 5.23.0
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4499,64 +4515,64 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.14.0
+      svelte: 5.23.0
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/package@2.3.1(svelte@5.14.0)(typescript@5.5.4)':
+  '@sveltejs/package@2.3.1(svelte@5.23.0)(typescript@5.5.4)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 5.14.0
-      svelte2tsx: 0.7.8(svelte@5.14.0)(typescript@5.5.4)
+      svelte: 5.23.0
+      svelte2tsx: 0.7.8(svelte@5.23.0)(typescript@5.5.4)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.14.0)':
+  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.23.0)':
     dependencies:
-      svelte: 5.14.0
+      svelte: 5.23.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.14.0
+      svelte: 5.23.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.14.0
+      svelte: 5.23.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.14.0
+      svelte: 5.23.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.14.0
+      svelte: 5.23.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4573,10 +4589,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.14.0
+      svelte: 5.23.0
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.9(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4657,10 +4673,10 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.14.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.14.0
+      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.23.0
 
   '@vitest/expect@2.1.9':
     dependencies:
@@ -4710,12 +4726,10 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  acorn-typescript@1.4.13(acorn@8.14.0):
-    dependencies:
-      acorn: 8.14.0
-
   acorn@8.14.0: {}
 
+  acorn@8.14.1: {}
+
   adm-zip@0.5.14: {}
 
   agent-base@7.1.3: {}
@@ -4862,6 +4876,8 @@ snapshots:
 
   ci-info@3.9.0: {}
 
+  clsx@2.1.1: {}
+
   codemirror@6.0.1(@lezer/common@1.2.2):
     dependencies:
       '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
@@ -5094,6 +5110,10 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.6
 
+  esrap@1.4.5:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -5647,10 +5667,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  prettier-plugin-svelte@3.3.2(prettier@3.3.2)(svelte@5.14.0):
+  prettier-plugin-svelte@3.3.2(prettier@3.3.2)(svelte@5.23.0):
     dependencies:
       prettier: 3.3.2
-      svelte: 5.14.0
+      svelte: 5.23.0
 
   prettier@2.8.8: {}
 
@@ -5894,47 +5914,48 @@ snapshots:
 
   sv@0.6.8: {}
 
-  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.14.0)(typescript@5.5.4):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.14.0
+      svelte: 5.23.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - picomatch
 
-  svelte-parse-markup@0.1.5(svelte@5.14.0):
+  svelte-parse-markup@0.1.5(svelte@5.23.0):
     dependencies:
-      svelte: 5.14.0
+      svelte: 5.23.0
 
-  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4):
+  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.23.0)(typescript@5.5.4):
     dependencies:
-      svelte: 5.14.0
+      svelte: 5.23.0
     optionalDependencies:
       postcss: 8.4.45
       typescript: 5.5.4
 
-  svelte2tsx@0.7.8(svelte@5.14.0)(typescript@5.5.4):
+  svelte2tsx@0.7.8(svelte@5.23.0)(typescript@5.5.4):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.14.0
+      svelte: 5.23.0
       typescript: 5.5.4
 
-  svelte@5.14.0:
+  svelte@5.23.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
       '@types/estree': 1.0.6
-      acorn: 8.14.0
-      acorn-typescript: 1.4.13(acorn@8.14.0)
+      acorn: 8.14.1
       aria-query: 5.3.2
       axobject-query: 4.1.0
+      clsx: 2.1.1
       esm-env: 1.2.1
-      esrap: 1.2.3
+      esrap: 1.4.5
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.12

From e79fe8c7fdad78ff29cb7e4b2a33bcda8f61b1c4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 16:48:39 -0400
Subject: [PATCH 330/453] chore: fix sync-docs workflow (#1192)

try this
---
 .github/workflows/sync-docs.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 67f0d58db4..1cb99bba7a 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -8,6 +8,9 @@ on:
         required: true
         type: string
 
+permissions:
+  contents: write
+
 jobs:
   Sync:
     runs-on: ubuntu-latest

From 5887477d416ed6d23c57dffd9c2ac6553daea602 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 16:51:20 -0400
Subject: [PATCH 331/453] try this

---
 .github/workflows/sync-docs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 1cb99bba7a..068251ecb1 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -9,7 +9,7 @@ on:
         type: string
 
 permissions:
-  contents: write
+  pull-requests: write
 
 jobs:
   Sync:

From 8fd43ef695f852e79c12d9b1b577f55a266b028d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 14 Mar 2025 16:53:51 -0400
Subject: [PATCH 332/453] gah

---
 .github/workflows/sync-docs.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 068251ecb1..79b5a9727f 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -9,6 +9,7 @@ on:
         type: string
 
 permissions:
+  contents: write
   pull-requests: write
 
 jobs:

From 425d32305377165d5ce462f2aa82db8d25f3789b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 14 Mar 2025 17:06:02 -0400
Subject: [PATCH 333/453] Sync `kit` docs (#1193)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/10-routing.md   |  2 +-
 .../kit/20-core-concepts/40-page-options.md   |  2 +-
 .../content/docs/kit/30-advanced/20-hooks.md  | 23 ++++++++++++++++++-
 .../content/docs/kit/60-appendix/10-faq.md    | 15 ++++--------
 .../docs/kit/60-appendix/20-integrations.md   |  2 +-
 .../docs/kit/60-appendix/40-migrating.md      |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md |  1 +
 7 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index d6fb735d9f..c80adfd7f9 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -364,10 +364,10 @@ export async function POST({ request }) {
 Exporting the `fallback` handler will match any unhandled request methods, including methods like `MOVE` which have no dedicated export from `+server.js`.
 
 ```js
-// @errors: 7031
 /// file: src/routes/api/add/+server.js
 import { json, text } from '@sveltejs/kit';
 
+/** @type {import('./$types').RequestHandler} */
 export async function POST({ request }) {
 	const { a, b } = await request.json();
 	return json(a + b);
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
index 055c7cfe84..ae8ca9f56b 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -32,7 +32,7 @@ Routes with `prerender = true` will be excluded from manifests used for dynamic
 export const prerender = 'auto';
 ```
 
-> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static), which will output files suitable for use with any static webserver.
+> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](adapter-static), which will output files suitable for use with any static webserver.
 
 The prerenderer will start at the root of your app and generate files for any prerenderable pages or `+server.js` routes it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an [`entries`](#entries) function from your dynamic route.
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index e8b248635a..33d93f0fc0 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -300,7 +300,28 @@ The `lang` parameter will be correctly derived from the returned pathname.
 
 Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.
 
-Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise.
+Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. If you need to fetch data, use the `fetch` provided as an argument. It has the [same benefits](load#Making-fetch-requests) as the `fetch` provided to `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#Server-hooks-handleFetch) because the route is not yet known.
+
+```js
+/// file: src/hooks.js
+// @errors: 2345`
+// @errors: 2304
+
+/** @type {import('@sveltejs/kit').Reroute} */
+export function reroute({ url, fetch }) {
+	// Ask a special endpoint within your app about the destination
+	if (url.pathname === '/api/reroute') return;
+
+	const api = new URL('/api/reroute', url);
+	api.searchParams.set('pathname', url.pathname);
+
+	const result = await fetch(api).then(r => r.json());
+	return result.pathname;
+}
+```
+
+
+> [!NOTE] `reroute` is considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result of `reroute` on the client so it is only called once per unique URL.
 
 ### transport
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index f281c91b8b..d98e925f62 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -13,19 +13,12 @@ See [the documentation regarding project types](project-types) for more details.
 
 ## How do I include details from package.json in my application?
 
-You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](./configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:
+If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:
 
-```js
+```ts
+// @errors: 2732
 /// file: svelte.config.js
-// @filename: index.js
-/// <reference types="@types/node" />
-import { URL } from 'node:url';
-// ---cut---
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-
-const path = fileURLToPath(new URL('package.json', import.meta.url));
-const pkg = JSON.parse(readFileSync(path, 'utf8'));
+import pkg from './package.json' with { type: 'json' };
 ```
 
 ## How do I fix the error I'm getting trying to include a package?
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
index 0feb1ff420..4958096fe3 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md
@@ -50,4 +50,4 @@ Since SvelteKit projects are built with Vite, you can use Vite plugins to enhanc
 
 ## Integration FAQs
 
-The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#How-do-I-set-up-a-database), which may be helpful if you still have questions.
+[The SvelteKit FAQ](./faq) answers many questions about how to do X with SvelteKit, which may be helpful if you still have questions.
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
index 48e2eae42c..24a0d9bc6b 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
@@ -40,7 +40,7 @@ The bulk of your app, in `src/routes`, can be left where it is, but several proj
 
 Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](configuration). Svelte preprocessor options should be moved to `config.preprocess`.
 
-You will need to add an [adapter](adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/main/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.
+You will need to add an [adapter](adapters). `sapper build` is roughly equivalent to [adapter-node](adapter-node) while `sapper export` is roughly equivalent to [adapter-static](adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.
 
 If you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](project-structure#Project-files-vite.config.js).
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index f6762ae352..a5523f4233 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -2149,6 +2149,7 @@ The [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modi
 ```dts
 type Reroute = (event: {
 	url: URL;
+	fetch: typeof fetch;
 }) => MaybePromise<void | string>;
 ```
 

From ea568ee82e71bbcf5744358b1609865f8aaaa2f0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 14 Mar 2025 17:16:13 -0400
Subject: [PATCH 334/453] Sync `svelte` docs (#1194)

sync svelte docs

Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
---
 .../content/docs/svelte/06-runtime/03-lifecycle-hooks.md        | 2 +-
 apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
index 6c0d7d25a7..0cef93c898 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
@@ -148,7 +148,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 	}
 
 	function toggle() {
-		toggleValue = !toggleValue;
+		theme = theme === 'dark' ? 'light' : 'dark';
 	}
 </script>
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
index 911cb9ec85..f38a2b5582 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
@@ -47,7 +47,7 @@ It will show up on hover.
 - You can use markdown here.
 - You can also use code blocks here.
 - Usage:
-  ```tsx
+  ```svelte
   <main name="Arethra">
   ```
 -->

From abb2077421da3d5d8a16a1d8e29a6ad2193943c2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 12:04:27 -0400
Subject: [PATCH 335/453] Sync `kit` docs (#1195)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../60-adapter-cloudflare.md                  |  2 +-
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 9c849a51d1..2e776f11e6 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -5,7 +5,7 @@ title: Cloudflare Pages
 
 To deploy to [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
 
-This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare Pages, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that values specific to Cloudflare Workers are emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
+This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare Pages, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
 
 ## Comparisons
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index a5523f4233..0d1c666f13 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -1564,7 +1564,7 @@ id: RouteId;
 
 <div class="ts-block-property-details">
 
-The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.
 
 </div>
 </div></div>
@@ -1612,13 +1612,26 @@ Is `null` if the target is not part of the SvelteKit app (could not be resolved
 <div class="ts-block-property">
 
 ```dts
-route: { id: string | null };
+route: {/*…*/}
 ```
 
 <div class="ts-block-property-details">
 
 Info about the target route
 
+<div class="ts-block-property-children"><div class="ts-block-property">
+
+```dts
+id: string | null;
+```
+
+<div class="ts-block-property-details">
+
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.
+
+</div>
+</div></div>
+
 </div>
 </div>
 
@@ -1771,7 +1784,7 @@ id: RouteId;
 
 <div class="ts-block-property-details">
 
-The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`.
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.
 
 </div>
 </div></div>
@@ -2032,7 +2045,7 @@ id: RouteId;
 
 <div class="ts-block-property-details">
 
-The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`.
+The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.
 
 </div>
 </div></div>

From 71dbef51a0476305b1aa03531a74810810171a55 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 12:17:13 -0400
Subject: [PATCH 336/453] Sync `cli` docs (#1198)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/cli/10-introduction/20-faq.md        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 apps/svelte.dev/content/docs/cli/10-introduction/20-faq.md

diff --git a/apps/svelte.dev/content/docs/cli/10-introduction/20-faq.md b/apps/svelte.dev/content/docs/cli/10-introduction/20-faq.md
new file mode 100644
index 0000000000..5dd4fa79f2
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/10-introduction/20-faq.md
@@ -0,0 +1,24 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Frequently asked questions
+---
+
+## How do I run the `sv` CLI?
+
+Running `sv` looks slightly different for each package manager. Here is a list of the most common commands:
+
+- **npm** : `npx sv create`
+- **pnpm** : `pnpx sv create` or `pnpm dlx sv create`
+- **Bun** : `bunx sv create`
+- **Deno** : `deno run npm:sv create`
+- **Yarn** : `yarn dlx sv create`
+
+## `npx sv` is not working
+
+Some package managers prefer to run locally installed tools instead of downloading and executing packages from the registry. This issue mostly occurs with `npm` and `yarn`. This usually results in an error message or looks like the command you were trying to execute did not do anything.
+
+Here is a list of issues with possible solutions that users have encountered in the past:
+
+- [`npx sv` create does nothing](https://github.com/sveltejs/cli/issues/472)
+- [`sv` command name collides with `runit`](https://github.com/sveltejs/cli/issues/259)
+- [`sv` in windows powershell conflicts with `Set-Variable`](https://github.com/sveltejs/cli/issues/317)

From f6af4c1785a607a3bc38e6cba2ab8f6c512004fc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 17 Mar 2025 12:48:09 -0400
Subject: [PATCH 337/453] chore: bump kit (#1203)

* chore: bump kit

* update lockfile
---
 .../content/tutorial/+assets/package.json     |  2 +-
 apps/svelte.dev/package.json                  |  2 +-
 .../common/package-lock.json                  | 45 +++----------
 .../create-tutorial-zip/common/package.json   |  2 +-
 packages/editor/package.json                  |  2 +-
 packages/repl/package.json                    |  2 +-
 packages/site-kit/package.json                |  4 +-
 pnpm-lock.yaml                                | 65 ++++++++++---------
 8 files changed, 50 insertions(+), 74 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/+assets/package.json b/apps/svelte.dev/content/tutorial/+assets/package.json
index a585b2ecfe..5b46802a49 100644
--- a/apps/svelte.dev/content/tutorial/+assets/package.json
+++ b/apps/svelte.dev/content/tutorial/+assets/package.json
@@ -8,7 +8,7 @@
 	},
 	"devDependencies": {
 		"@rollup/wasm-node": "^4.25.0",
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
 		"vite": "^5.4"
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index c269fc0232..5efe141419 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -54,7 +54,7 @@
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/enhanced-img": "^0.4.3",
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.3",
 		"@types/cookie": "^0.6.0",
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json b/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
index 9673a0bb84..f00b923f5a 100644
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "0.0.1",
 			"devDependencies": {
 				"@rollup/wasm-node": "^4.21.0",
-				"@sveltejs/kit": "^2.12.1",
+				"@sveltejs/kit": "^2.20.0",
 				"esbuild-wasm": "^0.21.5",
 				"svelte": "^5.0.0",
 				"vite": "^6"
@@ -784,25 +784,23 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.12.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.12.1.tgz",
-			"integrity": "sha512-M3rPijGImeOkI0DBJSwjqz+YFX2DyOf6NzWgHVk3mqpT06dlYCpcv5xh1q4rYEqB58yQlk4QA1Y35PUqnUiFKw==",
+			"version": "2.20.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.0.tgz",
+			"integrity": "sha512-xCUGevE2GFhpDAxZiVOsk6HKaBicwU7uWYcMOcpHCDcjoN6mKBIeMEzuddRMqSA4zjbeA+RcillCv1ppkWRwSQ==",
 			"dev": true,
-			"hasInstallScript": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",
 				"devalue": "^5.1.0",
-				"esm-env": "^1.2.1",
+				"esm-env": "^1.2.2",
 				"import-meta-resolve": "^4.1.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
-				"sirv": "^3.0.0",
-				"tiny-glob": "^0.2.9"
+				"sirv": "^3.0.0"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -1016,9 +1014,9 @@
 			}
 		},
 		"node_modules/esm-env": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
-			"integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==",
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -1048,20 +1046,6 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
-		"node_modules/globalyzer": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/globrex": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/import-meta-resolve": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -1302,17 +1286,6 @@
 				"node": ">=18"
 			}
 		},
-		"node_modules/tiny-glob": {
-			"version": "0.2.9",
-			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
-			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"globalyzer": "0.1.0",
-				"globrex": "^0.1.2"
-			}
-		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json b/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
index 22cd91a771..a5f5d24593 100644
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/package.json
@@ -8,7 +8,7 @@
 	},
 	"devDependencies": {
 		"@rollup/wasm-node": "^4.21.0",
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
 		"vite": "^6"
diff --git a/packages/editor/package.json b/packages/editor/package.json
index e78041f376..17651a37c3 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -46,7 +46,7 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/repl": "workspace:*",
 		"@sveltejs/site-kit": "workspace:*",
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 4dab111ab9..a396380a63 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -49,7 +49,7 @@
 	"devDependencies": {
 		"@lezer/common": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index f83bc91165..177b5472a6 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -45,7 +45,7 @@
 		"shiki": "^1.22.0"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"@types/node": "^20.12.11",
 		"flexsearch": "^0.7.43",
 		"magic-string": "^0.30.11",
@@ -61,7 +61,7 @@
 		"access": "public"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/kit": "^2.20.0",
 		"svelte": "^4.0.0 || ^5.0.0-next.1"
 	},
 	"types": "./dist/types.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f903723c6..d68dce3e53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.4
-        version: 1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -55,7 +55,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)
+        version: 1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -119,13 +119,13 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.5.2(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
         version: 0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
@@ -258,10 +258,10 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
@@ -388,10 +388,10 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
-        specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
         version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
@@ -487,8 +487,8 @@ importers:
         version: 1.22.0
     devDependencies:
       '@sveltejs/kit':
-        specifier: ^2.12.1
-        version: 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -1625,8 +1625,8 @@ packages:
       svelte: ^5.0.0
       vite: '>= 5.0.0'
 
-  '@sveltejs/kit@2.12.1':
-    resolution: {integrity: sha512-M3rPijGImeOkI0DBJSwjqz+YFX2DyOf6NzWgHVk3mqpT06dlYCpcv5xh1q4rYEqB58yQlk4QA1Y35PUqnUiFKw==}
+  '@sveltejs/kit@2.20.0':
+    resolution: {integrity: sha512-xCUGevE2GFhpDAxZiVOsk6HKaBicwU7uWYcMOcpHCDcjoN6mKBIeMEzuddRMqSA4zjbeA+RcillCv1ppkWRwSQ==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -2206,6 +2206,9 @@ packages:
   esm-env@1.2.1:
     resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -4447,19 +4450,19 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.9(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4467,9 +4470,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
   '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
@@ -4483,13 +4486,13 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.2.1
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4498,16 +4501,15 @@ snapshots:
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
       svelte: 5.23.0
-      tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.2.1
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -4516,7 +4518,6 @@ snapshots:
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
       svelte: 5.23.0
-      tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
   '@sveltejs/package@2.3.1(svelte@5.23.0)(typescript@5.5.4)':
@@ -4673,9 +4674,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.12.1(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.23.0
 
   '@vitest/expect@2.1.9':
@@ -5103,6 +5104,8 @@ snapshots:
 
   esm-env@1.2.1: {}
 
+  esm-env@1.2.2: {}
+
   esprima@4.0.1: {}
 
   esrap@1.2.3:

From 2c961b0a3b1e0fe5f72f0cee20836cb759d92661 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 15:11:16 -0400
Subject: [PATCH 338/453] Sync `kit` docs (#1202)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../docs/kit/20-core-concepts/20-load.md      | 68 +++++++++++++++++++
 .../docs/kit/98-reference/20-$app-server.md   | 27 +++++++-
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index b53304c60b..a93eae45f3 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -714,6 +714,74 @@ To prevent data waterfalls and preserve layout `load` caches:
 
 Putting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant.
 
+## Using `getRequestEvent`
+
+When running server `load` functions, the `event` object passed to the function as an argument can also be retrieved with [`getRequestEvent`]($app-server#getRequestEvent). This allows shared logic (such as authentication guards) to access information about the current request without it needing to be passed around.
+
+For example, you might have a function that requires users to be logged in, and redirects them to `/login` if not:
+
+```js
+/// file: src/lib/server/auth.js
+// @filename: ambient.d.ts
+interface User {
+	name: string;
+}
+
+declare namespace App {
+	interface Locals {
+		user?: User;
+	}
+}
+
+// @filename: index.ts
+// ---cut---
+import { redirect } from '@sveltejs/kit';
+import { getRequestEvent } from '$app/server';
+
+export function requireLogin() {
+	const { locals, url } = getRequestEvent();
+
+	// assume `locals.user` is populated in `handle`
+	if (!locals.user) {
+		const redirectTo = url.pathname + url.search;
+		const params = new URLSearchParams({ redirectTo });
+
+		redirect(307, `/login?${params}`);
+	}
+
+	return locals.user;
+}
+```
+
+Now, you can call `requireLogin` in any `load` function (or [form action](form-actions), for example) to guarantee that the user is logged in:
+
+```js
+/// file: +page.server.js
+// @filename: ambient.d.ts
+
+declare module '$lib/server/auth' {
+	interface User {
+		name: string;
+	}
+
+	export function requireLogin(): User;
+}
+
+// @filename: index.ts
+// ---cut---
+import { requireLogin } from '$lib/server/auth';
+
+export function load() {
+	const user = requireLogin();
+
+	// `user` is guaranteed to be a user object here, because otherwise
+	// `requireLogin` would throw a redirect and we wouldn't get here
+	return {
+		message: `hello ${user.name}!`
+	};
+}
+```
+
 ## Further reading
 
 - [Tutorial: Loading data](/tutorial/kit/page-data)
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
index ff1d26f383..5fb3b8b4b0 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
@@ -7,9 +7,34 @@ title: $app/server
 
 ```js
 // @noErrors
-import { read } from '$app/server';
+import { getRequestEvent, read } from '$app/server';
+```
+
+## getRequestEvent
+
+<blockquote class="since note">
+
+Available since 2.20.0
+
+</blockquote>
+
+Returns the current `RequestEvent`. Can be used inside `handle`, `load` and actions (and functions called by them).
+
+In environments without [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage), this must be called synchronously (i.e. not after an `await`).
+
+<div class="ts-block">
+
+```dts
+function getRequestEvent(): RequestEvent<
+	Partial<Record<string, string>>,
+	string | null
+>;
 ```
 
+</div>
+
+
+
 ## read
 
 <blockquote class="since note">

From a324f577fa36bc5fc8796383bbb674947649f088 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 18 Mar 2025 21:05:40 -0400
Subject: [PATCH 339/453] fix: convert type assertions (#1204)

* fix: convert type assertions

* fix
---
 .../site-kit/src/lib/markdown/renderer.ts     | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 3dde3c71a7..d39b68545e 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -523,8 +523,20 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 					while (code.original[start - 1] !== ')') start -= 1;
 					code.appendLeft(start, `: ${returns}`);
 				}
+			} else if (type && ts.isParenthesizedExpression(node)) {
+				// convert `/* @type {Foo} */ (foo)` to `foo as Foo`
+				// TODO one day we may need to account for operator precedence
+				// (i.e. preserve the parens in e.g. `(x as y).z()`)
+				let start = node.getStart();
+				while (js_code[start - 1] !== '/') start -= 1;
+				code.remove(start, node.getStart() + 1);
+
+				let end = node.getEnd();
+				code.overwrite(end - 1, end, ` as ${type}`);
 			} else {
-				throw new Error('Unhandled @type JsDoc->TS conversion: ' + js_code);
+				throw new Error(
+					'Unhandled @type JsDoc->TS conversion: ' + js_code.slice(node.getStart(), node.getEnd())
+				);
 			}
 
 			if (!comment) {
@@ -532,7 +544,9 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 				let start = jsdoc[0].getStart();
 				let end = jsdoc[0].getEnd();
 
-				while (start > 0 && code.original[start] !== '\n') start -= 1;
+				while (start > 0 && code.original[start - 1] === '\t') start -= 1;
+				while (start > 0 && code.original[start - 1] === '\n') start -= 1;
+
 				code.overwrite(start, end, '');
 			}
 		}
@@ -560,7 +574,7 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 			while (js_code[i] !== '\n') i += 1;
 			i += 1;
 
-			code.appendLeft(i, import_statements + '\n');
+			code.appendLeft(i, '\n' + import_statements + '\n');
 		} else {
 			code.prependLeft(0, offset + import_statements + '\n');
 		}

From 0e0d6ed408d03a02aa009f5b16cae33516e08b48 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 19 Mar 2025 10:59:07 -0400
Subject: [PATCH 340/453] Sync `svelte` docs (#1196)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/02-runes/04-$effect.md        |  42 +----
 .../docs/svelte/06-runtime/02-context.md      | 164 +++++++++---------
 .../svelte/07-misc/07-v5-migration-guide.md   |  39 +++--
 .../98-reference/.generated/client-errors.md  |  24 +++
 .../svelte/98-reference/30-runtime-errors.md  |  24 +++
 5 files changed, 161 insertions(+), 132 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index af92e373c8..13862bbebe 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -281,7 +281,7 @@ You might be tempted to do something convoluted with effects to link one value t
 </label>
 ```
 
-Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)):
+Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51SsW6DMBT8FcvqABINdOhCIFKXTt06lg4GHpElYyz8iECIf69tcIIipo6-u3f3fPZMJWuBpvRzkBXyTpKSy5rLq6YRbbgATdOfmeKkrMgCBt9GPpQ66RsItFjJNBzhVScRJBobmumq5wovhSxQABLskAmSk7ckOXtMKyM22ItGhhAk4Z0R0OwIN-tIQzd-90HVhvy2HsGNiQFCMltBgd7XoecV2xzXNV7XaEcth7ZfRv7kujnsTX2Qd7USb5rFjwZkJlgJwpWRcakG04cpOS9oz-QVCuoeInXW-RyEJL-sG0b7Wy6kZWM-u7CFxM5tdrIl9qg72vB74H-y7T2iXROHyVb0CLanp1yNk4D1A1jQ91hzrQSbUtIIGLcir0ylJDm9Q7urz42bX4UwIk2xH2D5Xf4A7SeMcMQCAAA=)):
 
 ```svelte
 <script>
@@ -289,54 +289,26 @@ Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAAC
 	let spent = $state(0);
 	let left = $state(total);
 
-	function updateSpent(e) {
-		spent = +e.target.value;
+	function updateSpent(value) {
+		spent = value;
 		left = total - spent;
 	}
 
-	function updateLeft(e) {
-		left = +e.target.value;
+	function updateLeft(value) {
+		left = value;
 		spent = total - left;
 	}
 </script>
 
 <label>
-	<input type="range" value={spent} oninput={updateSpent} max={total} />
+	<input type="range" bind:value={() => spent, updateSpent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" value={left} oninput={updateLeft} max={total} />
+	<input type="range" bind:value={() => left, updateLeft} max={total} />
 	{left}/{total} left
 </label>
 ```
 
-If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACpWRwW6DMBBEf8WyekikFOihFwcq9TvqHkyyQUjGsfCCQMj_XnvBNKpy6Qn2DTOD1wu_tRocF18Lx9kCFwT4iRvVxenT2syNoDGyWjl4xi93g2AwxPDSXfrW4oc0EjUgwzsqzSr2VhTnxJwNHwf24lAhHIpjVDZNwy1KS5wlNoGMSg9wOCYksQccerMlv65p51X0p_Xpdt_4YEy9yTkmV3z4MJT579-bUqsaNB2kbI0dwlnCgirJe2UakJzVrbkKaqkWivasU1O1ULxnOVk3JU-Uxti0p_-vKO4no_enbQ_yXhnZn0aHs4b1jiJMK7q2zmo1C3bTMG3LaZQVrMjeoSPgaUtkDxePMCEX2Ie6b_8D4WyJJEwCAAA=)):
-
-```svelte
-<script>
-	let total = 100;
-	let spent = $state(0);
-
-	let left = {
-		get value() {
-			return total - spent;
-		},
-		set value(v) {
-			spent = total - v;
-		}
-	};
-</script>
-
-<label>
-	<input type="range" bind:value={spent} max={total} />
-	{spent}/{total} spent
-</label>
-
-<label>
-	<input type="range" bind:value={left.value} max={total} />
-	{left.value}/{total} left
-</label>
-```
-
 If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 04d94b9da9..4b3ab273c9 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -3,129 +3,137 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Context
 ---
 
-<!-- - get/set/hasContext
-- how to use, best practises (like encapsulating them) -->
+Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...
 
-Most state is component-level state that lives as long as its component lives. There's also section-wide or app-wide state however, which also needs to be handled somehow.
-
-The easiest way to do that is to create global state and just import that.
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
 
-```ts
-/// file: state.svelte.js
-export const myGlobalState = $state({
-	user: {
-		/* ... */
-	}
-	/* ... */
-});
+	setContext('my-context', 'hello from Parent.svelte');
+</script>
 ```
 
+...and the child retrieves it with `getContext`:
+
 ```svelte
-<!--- file: App.svelte --->
+<!--- file: Child.svelte --->
 <script>
-	import { myGlobalState } from './state.svelte.js';
-	// ...
+	import { getContext } from 'svelte';
+
+	const message = getContext('my-context');
 </script>
+
+<h1>{message}, inside Child.svelte</h1>
 ```
 
-This has a few drawbacks though:
+This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) ([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):
+
+```svelte
+<Parent>
+	<Child />
+</Parent>
+```
 
-- it only safely works when your global state is only used client-side - for example, when you're building a single page application that does not render any of your components on the server. If your state ends up being managed and updated on the server, it could end up being shared between sessions and/or users, causing bugs
-- it may give the false impression that certain state is global when in reality it should only used in a certain part of your app
+The key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.
 
-To solve these drawbacks, Svelte provides a few `context` primitives which alleviate these problems.
+In addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.
 
-## Setting and getting context
+## Using context with state
 
-To associate an arbitrary object with the current component, use `setContext`.
+You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...
 
 ```svelte
 <script>
 	import { setContext } from 'svelte';
+	import Child from './Child.svelte';
 
-	setContext('key', value);
+	let counter = $state({
+		count: 0
+	});
+
+	setContext('counter', counter);
 </script>
+
+<button onclick={() => counter.count += 1}>
+	increment
+</button>
+
+<Child />
+<Child />
+<Child />
 ```
 
-The context is then available to children of the component (including slotted content) with `getContext`.
+...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...
 
 ```svelte
-<script>
-	import { getContext } from 'svelte';
-
-	const value = getContext('key');
-</script>
+<button onclick={() => counter = { count: 0 }}>
+	reset
+</button>
 ```
 
-`setContext` and `getContext` solve the above problems:
+...you must do this:
 
-- the state is not global, it's scoped to the component. That way it's safe to render your components on the server and not leak state
-- it's clear that the state is not global but rather scoped to a specific component tree and therefore can't be used in other parts of your app
+```svelte
+<button onclick={() => +++counter.count = 0+++}>
+	reset
+</button>
+```
 
-> [!NOTE] `setContext`/`getContext` must be called during component initialisation.
+Svelte will warn you if you get it wrong.
 
-Context is not inherently reactive. If you need reactive values in context then you can pass a `$state` object into context, whose properties _will_ be reactive.
+## Type-safe context
 
-```svelte
-<!--- file: Parent.svelte --->
-<script>
-	import { setContext } from 'svelte';
+A useful pattern is to wrap the calls to `setContext` and `getContext` inside helper functions that let you preserve type safety:
 
-	let value = $state({ count: 0 });
-	setContext('counter', value);
-</script>
+```js
+/// file: context.js
+// @filename: ambient.d.ts
+interface User {}
 
-<button onclick={() => value.count++}>increment</button>
-```
+// @filename: index.js
+// ---cut---
+import { getContext, setContext } from 'svelte';
 
-```svelte
-<!--- file: Child.svelte --->
-<script>
-	import { getContext } from 'svelte';
+let key = {};
 
-	const value = getContext('counter');
-</script>
+/** @param {User} user */
+export function setUserContext(user) {
+	setContext(key, user);
+}
 
-<p>Count is {value.count}</p>
+export function getUserContext() {
+	return /** @type {User} */ (getContext(key));
+}
 ```
 
-To check whether a given `key` has been set in the context of a parent component, use `hasContext`.
+## Replacing global state
 
-```svelte
-<script>
-	import { hasContext } from 'svelte';
+When you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed:
 
-	if (hasContext('key')) {
-		// do something
+```js
+/// file: state.svelte.js
+export const myGlobalState = $state({
+	user: {
+		// ...
 	}
-</script>
+	// ...
+});
 ```
 
-You can also retrieve the whole context map that belongs to the closest parent component using `getAllContexts`. This is useful, for example, if you programmatically create a component and want to pass the existing context to it.
+In many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...
 
 ```svelte
+<!--- file: App.svelte ---->
 <script>
-	import { getAllContexts } from 'svelte';
+	import { myGlobalState } from 'svelte';
 
-	const contexts = getAllContexts();
+	let { data } = $props();
+
+	if (data.user) {
+		myGlobalState.user = data.user;
+	}
 </script>
 ```
 
-## Encapsulating context interactions
-
-The above methods are very unopinionated about how to use them. When your app grows in scale, it's worthwhile to encapsulate setting and getting the context into functions and properly type them.
-
-```ts
-// @errors: 2304
-import { getContext, setContext } from 'svelte';
-
-let userKey = Symbol('user');
-
-export function setUserContext(user: User) {
-	setContext(userKey, user);
-}
-
-export function getUserContext(): User {
-	return getContext(userKey) as User;
-}
-```
+...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 217db6696c..20b9326bd7 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -11,13 +11,13 @@ You don't have to migrate to the new syntax right away - Svelte 5 still supports
 
 At the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.
 
-### let -> $state
+### let → $state
 
 In Svelte 4, a `let` declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the `$state` rune. Let's migrate the counter to runes mode by wrapping the counter in `$state`:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = +++$state(0)+++;
 </script>
 ```
 
@@ -26,14 +26,14 @@ Nothing else changes. `count` is still the number itself, and you read and write
 > [!DETAILS] Why we did this
 > `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
 
-### $: -> $derived/$effect
+### $: → $derived/$effect
 
 In Svelte 4, a `$:` statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the `$derived` rune:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
-	---$:--- +++const+++ double = +++$derived(+++count * 2+++)+++;
+	let count = $state(0);
+	---$:--- +++const+++ double = +++$derived(count * 2)+++;
 </script>
 ```
 
@@ -43,7 +43,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = $state(0);
+
 	---$:---+++$effect(() =>+++ {
 		if (count > 5) {
 			alert('Count is too high!');
@@ -74,14 +75,14 @@ Note that [when `$effect` runs is different]($effect#Understanding-dependencies)
 > - executing dependencies as needed and therefore being immune to ordering problems
 > - being TypeScript-friendly
 
-### export let -> $props
+### export let → $props
 
 In Svelte 4, properties of a component were declared using `export let`. Each property was one declaration. In Svelte 5, all properties are declared through the `$props` rune, through destructuring:
 
 ```svelte
 <script>
-	---export let optional = 'unset';
-	export let required;---
+	---export let optional = 'unset';---
+	---export let required;---
 	+++let { optional = 'unset', required } = $props();+++
 </script>
 ```
@@ -106,8 +107,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
 
 ```svelte
 <script>
-	---let klass = '';
-	export { klass as class};---
+	---let klass = '';---
+	---export { klass as class};---
 	+++let { class: klass, ...rest } = $props();+++
 </script>
 <button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@@ -193,9 +194,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 ```svelte
 <!--- file: Pump.svelte --->
 <script>
-    ---import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-    ---
+	---import { createEventDispatcher } from 'svelte';---
+	---const dispatch = createEventDispatcher();---
+
 	+++let { inflate, deflate } = $props();+++
 	let power = $state(5);
 </script>
@@ -467,11 +468,11 @@ By now you should have a pretty good understanding of the before/after and how t
 We thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:
 
 - bump core dependencies in your `package.json`
-- migrate to runes (`let` -> `$state` etc)
-- migrate to event attributes for DOM elements (`on:click` -> `onclick`)
-- migrate slot creations to render tags (`<slot />` -> `{@render children()}`)
-- migrate slot usages to snippets (`<div slot="x">...</div>` -> `{#snippet x()}<div>...</div>{/snippet}`)
-- migrate obvious component creations (`new Component(...)` -> `mount(Component, ...)`)
+- migrate to runes (`let` → `$state` etc)
+- migrate to event attributes for DOM elements (`on:click` → `onclick`)
+- migrate slot creations to render tags (`<slot />` → `{@render children()}`)
+- migrate slot usages to snippets (`<div slot="x">...</div>` → `{#snippet x()}<div>...</div>{/snippet}`)
+- migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`)
 
 You can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index 2c2e0707ea..0beb3cb9a9 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -133,3 +133,27 @@ Reading state that was created inside the same derived is forbidden. Consider us
 ```
 Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
+
+This error is thrown in a situation like this:
+
+```svelte
+<script>
+    let count = $state(0);
+    let multiple = $derived.by(() => {
+        const result = count * 2;
+        if (result > 10) {
+            count = 0;
+        }
+        return result;
+    });
+</script>
+
+<button onclick={() => count++}>{count} / {multiple}</button>
+```
+
+Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+
+To fix this:
+- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
+- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
+- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index e06883950e..ad6bbc35a3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -141,6 +141,30 @@ Reading state that was created inside the same derived is forbidden. Consider us
 Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
+This error is thrown in a situation like this:
+
+```svelte
+<script>
+    let count = $state(0);
+    let multiple = $derived.by(() => {
+        const result = count * 2;
+        if (result > 10) {
+            count = 0;
+        }
+        return result;
+    });
+</script>
+
+<button onclick={() => count++}>{count} / {multiple}</button>
+```
+
+Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+
+To fix this:
+- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
+- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
+- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
+
 
 ## Server errors
 

From d954227142ac5e32ed976df2512f627bedad5e5c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 15:53:59 +0800
Subject: [PATCH 341/453] Sync `kit` docs (#1207)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md     | 2 +-
 .../docs/kit/25-build-and-deploy/80-adapter-netlify.md        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 2e776f11e6..ec32319f4d 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -112,7 +112,7 @@ For testing the build, you should use [Wrangler](https://developers.cloudflare.c
 
 Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).
 
-The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
+The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the project root folder.
 
 However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
index 854da44960..a053e16d17 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
@@ -71,6 +71,10 @@ export default {
 
 You may build your app using functionality provided directly by SvelteKit without relying on any Netlify functionality. Using the SvelteKit versions of these features will allow them to be used in dev mode, tested with integration tests, and to work with other adapters should you ever decide to switch away from Netlify. However, in some scenarios you may find it beneficial to use the Netlify versions of these features. One example would be if you're migrating an app that's already hosted on Netlify to SvelteKit.
 
+### `_headers` and `_redirects`
+
+The [`_headers`](https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file) and [`_redirects`](https://docs.netlify.com/routing/redirects/redirect-options/) files specific to Netlify can be used for static asset responses (like images) by putting them into the project root folder.
+
 ### Redirect rules
 
 During compilation, redirect rules are automatically appended to your `_redirects` file. (If it doesn't exist yet, it will be created.) That means:

From 21d6ef8e9d6853647deb9fd8b476cd9c6916c2b9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 10:23:56 -0400
Subject: [PATCH 342/453] Sync `svelte` docs (#1208)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md  | 2 ++
 .../docs/svelte/98-reference/.generated/client-errors.md    | 6 ------
 .../content/docs/svelte/98-reference/30-runtime-errors.md   | 6 ------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 13862bbebe..d9d45a2075 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -75,6 +75,8 @@ Teardown functions also run when the effect is destroyed, which happens when its
 
 `$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.
 
+If `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.
+
 Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
 ```ts
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index 0beb3cb9a9..62d9c3302a 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -122,12 +122,6 @@ Property descriptors defined on `$state` objects must contain `value` and always
 Cannot set prototype of `$state` object
 ```
 
-### state_unsafe_local_read
-
-```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
-```
-
 ### state_unsafe_mutation
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index ad6bbc35a3..a2eef7743b 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -129,12 +129,6 @@ Property descriptors defined on `$state` objects must contain `value` and always
 Cannot set prototype of `$state` object
 ```
 
-### state_unsafe_local_read
-
-```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
-```
-
 ### state_unsafe_mutation
 
 ```

From f9e3f20491511be45f8475d9d402cc94f9e34e0e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 13:13:42 -0400
Subject: [PATCH 343/453] Sync `svelte` docs (#1209)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/02-runes/03-$derived.md       | 42 +++++++++++++++++++
 .../docs/svelte/02-runes/04-$effect.md        |  2 +
 .../98-reference/.generated/client-errors.md  | 37 +++++++++-------
 .../svelte/98-reference/30-runtime-errors.md  | 37 +++++++++-------
 4 files changed, 88 insertions(+), 30 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
index 1f63b3fe95..c482c8d9cb 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md
@@ -53,6 +53,48 @@ Anything read synchronously inside the `$derived` expression (or `$derived.by` f
 
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
 
+## Overriding derived values
+
+Derived expressions are recalculated when their dependencies change, but you can temporarily override their values by reassigning them (unless they are declared with `const`). This can be useful for things like _optimistic UI_, where a value is derived from the 'source of truth' (such as data from your server) but you'd like to show immediate feedback to the user:
+
+```svelte
+<script>
+	let { post, like } = $props();
+
+	let likes = $derived(post.likes);
+
+	async function onclick() {
+		// increment the `likes` count immediately...
+		likes += 1;
+
+		// and tell the server, which will eventually update `post`
+		try {
+			await like();
+		} catch {
+			// failed! roll back the change
+			likes -= 1;
+		}
+	}
+</script>
+
+<button {onclick}>🧡 {likes}</button>
+```
+
+> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.
+
+## Deriveds and reactivity
+
+Unlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...
+
+```svelte
+let items = $state([...]);
+
+let index = $state(0);
+let selected = $derived(items[index]);
+```
+
+...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
+
 ## Update propagation
 
 Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index d9d45a2075..decb34866a 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -255,6 +255,8 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 > [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
 
+If you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.
+
 You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
 
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index 62d9c3302a..fd9419176d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -128,26 +128,33 @@ Cannot set prototype of `$state` object
 Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
-This error is thrown in a situation like this:
+This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
 
 ```svelte
 <script>
-    let count = $state(0);
-    let multiple = $derived.by(() => {
-        const result = count * 2;
-        if (result > 10) {
-            count = 0;
-        }
-        return result;
-    });
+	let count = $state(0);
+
+	let even = $state(true);
+
+	let odd = $derived.by(() => {
+		even = count % 2 === 0;
+		return !even;
+	});
 </script>
 
-<button onclick={() => count++}>{count} / {multiple}</button>
+<button onclick={() => count++}>{count}</button>
+
+<p>{count} is even: {even}</p>
+<p>{count} is odd: {odd}</p>
 ```
 
-Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
+
+```js
+let count = 0;
+// ---cut---
+let even = $derived(count % 2 === 0);
+let odd = $derived(!even);
+```
 
-To fix this:
-- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
-- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
-- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
+If side-effects are unavoidable, use [`$effect`]($effect) instead.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index a2eef7743b..ef6627c1c7 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -135,29 +135,36 @@ Cannot set prototype of `$state` object
 Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
-This error is thrown in a situation like this:
+This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
 
 ```svelte
 <script>
-    let count = $state(0);
-    let multiple = $derived.by(() => {
-        const result = count * 2;
-        if (result > 10) {
-            count = 0;
-        }
-        return result;
-    });
+	let count = $state(0);
+
+	let even = $state(true);
+
+	let odd = $derived.by(() => {
+		even = count % 2 === 0;
+		return !even;
+	});
 </script>
 
-<button onclick={() => count++}>{count} / {multiple}</button>
+<button onclick={() => count++}>{count}</button>
+
+<p>{count} is even: {even}</p>
+<p>{count} is odd: {odd}</p>
 ```
 
-Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
+
+```js
+let count = 0;
+// ---cut---
+let even = $derived(count % 2 === 0);
+let odd = $derived(!even);
+```
 
-To fix this:
-- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
-- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
-- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
+If side-effects are unavoidable, use [`$effect`]($effect) instead.
 
 
 ## Server errors

From 27346598034f6f09b496c30a396ad951ad2325d6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 21 Mar 2025 14:54:54 -0400
Subject: [PATCH 344/453] remove sideEffects: false (#1211)

---
 packages/repl/package.json     | 1 -
 packages/site-kit/package.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/repl/package.json b/packages/repl/package.json
index a396380a63..5ab688c8e7 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@sveltejs/repl",
 	"version": "0.6.0",
-	"sideEffects": false,
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 177b5472a6..2e594c3cf5 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@sveltejs/site-kit",
 	"version": "6.0.0-next.64",
-	"sideEffects": false,
 	"description": "Styles and components for use in *.svelte.dev websites",
 	"type": "module",
 	"scripts": {

From dbdf39e2d51e18719093bb57c82a8358309eb6b4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 12:26:17 -0700
Subject: [PATCH 345/453] fix

---
 packages/repl/src/lib/Output/console/Console.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index cc9471eb29..4c27f3ecec 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
 	export type Log = {
 		command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
 		action?: 'console';

From 6390752c15e4862354d9fd5e469117f9e91a8bcf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 13:25:54 -0700
Subject: [PATCH 346/453] remove logging

---
 packages/editor/src/lib/compile-worker/worker.ts | 1 -
 packages/repl/src/lib/workers/bundler/index.ts   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index c00ed75e9f..d5fd227096 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -59,7 +59,6 @@ async function init(v: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 6b2f7b26d5..00cae45f91 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -93,7 +93,6 @@ async function init(v: string, packages_url: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 

From 897ce99f1f46b3d180b8eb6cfbdb03dfe19bcaa1 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 24 Mar 2025 14:40:48 -0700
Subject: [PATCH 347/453] chore: output-only embedded mode (#1217)

Embed mode, but with hash support and a new query param that makes it so only the output is shown, nothing else
---
 .../playground/[id]/embed/+page.svelte        | 40 +++++++++++++++++--
 packages/repl/src/lib/Output/Output.svelte    | 25 +++++++-----
 packages/repl/src/lib/Repl.svelte             | 23 ++++++++---
 3 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 346f2381ac..6db54545e2 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -5,6 +5,8 @@
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
+	import { decode_and_decompress_text } from '../gzip.js';
+	import type { File } from 'editor';
 
 	let { data } = $props();
 
@@ -25,10 +27,40 @@
 		});
 	}
 
+	// TODO make this munging unnecessary
+	function munge(data: any): File {
+		const basename = `${data.name}.${data.type}`;
+
+		return {
+			type: 'file',
+			name: basename,
+			basename,
+			contents: data.source,
+			text: true
+		};
+	}
+
+	async function set_files() {
+		const hash = location.hash.slice(1);
+
+		if (!hash) {
+			repl?.set({
+				files: data.gist.components.map(munge)
+			});
+
+			return;
+		}
+
+		try {
+			const recovered = JSON.parse(await decode_and_decompress_text(hash));
+			repl.set({ files: recovered.files });
+		} catch {
+			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
+		}
+	}
+
 	afterNavigate(() => {
-		repl?.set({
-			files: data.gist.components
-		});
+		set_files();
 	});
 
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
@@ -51,7 +83,7 @@
 			can_escape
 			injectedJS={mapbox_setup}
 			previewTheme={theme.current}
-			embedded
+			embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
 		/>
 	{/if}
 </div>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 9d29e4c73a..008511c753 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -12,7 +12,7 @@
 	interface Props {
 		status: string | null;
 		runtimeError?: Error | null;
-		embedded?: boolean;
+		embedded?: boolean | 'output-only';
 		relaxed?: boolean;
 		can_escape?: boolean;
 		injectedJS: string;
@@ -182,16 +182,18 @@
 	});
 </script>
 
-<div class="view-toggle">
-	{#if workspace.current.name.endsWith('.md')}
-		<button class="active">Markdown</button>
-	{:else}
-		<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
-		<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
-		<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
-		<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
-	{/if}
-</div>
+{#if embedded !== 'output-only'}
+	<div class="view-toggle">
+		{#if workspace.current.name.endsWith('.md')}
+			<button class="active">Markdown</button>
+		{:else}
+			<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+			<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
+			<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
+			<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
+		{/if}
+	</div>
+{/if}
 
 <!-- component viewer -->
 <div class="tab-content" class:visible={!is_markdown && view === 'result'}>
@@ -202,6 +204,7 @@
 		{can_escape}
 		{injectedJS}
 		{injectedCSS}
+		onLog={embedded === 'output-only' ? () => {} : undefined}
 		theme={previewTheme}
 	/>
 </div>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 26da2bd72e..021c722a4d 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -13,7 +13,7 @@
 	interface Props {
 		packagesUrl?: string;
 		svelteVersion?: string;
-		embedded?: boolean;
+		embedded?: boolean | 'output-only';
 		orientation?: 'columns' | 'rows';
 		relaxed?: boolean;
 		can_escape?: boolean;
@@ -152,7 +152,7 @@
 	let mobile = $derived(width < 540);
 
 	$effect(() => {
-		$toggleable = mobile && orientation === 'columns';
+		$toggleable = mobile && orientation === 'columns' && embedded !== 'output-only';
 	});
 
 	let runes = $derived(
@@ -166,13 +166,24 @@
 
 <svelte:window onbeforeunload={before_unload} />
 
-<div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
+<div
+	class="container {embedded === 'output-only' ? '' : 'container-normal'}"
+	class:embedded
+	class:toggleable={$toggleable}
+	bind:clientWidth={width}
+>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
-			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
-			min="100px"
+			pos="{embedded === 'output-only'
+				? 0
+				: mobile || fixed
+					? fixedPos
+					: orientation === 'rows'
+						? 60
+						: 50}%"
+			min={embedded === 'output-only' ? '0px' : '100px'}
 			max="-4.1rem"
 		>
 			{#snippet a()}
@@ -264,7 +275,7 @@
 
 	/* on mobile, override the <SplitPane> controls */
 	@media (max-width: 799px) {
-		:global {
+		.container-normal :global {
 			[data-pane='main'] {
 				--pos: 50% !important;
 			}

From 0a244f067d8c7ea5598b572c223e98ae810ecc96 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 15:47:07 -0700
Subject: [PATCH 348/453] Tailwind (#1218)

* fix

* remove logging

* WIP

* more

* remove unused caching stuff

* try this

* types
---
 .../tutorial/adapters/rollup/index.svelte.ts  |   2 +-
 packages/editor/src/lib/Workspace.svelte.ts   |  10 ++
 .../editor/src/lib/compile-worker/worker.ts   |   1 -
 packages/repl/package.json                    |   1 +
 packages/repl/src/lib/Bundler.ts              |   2 +-
 .../src/lib/Input/ComponentSelector.svelte    |   5 +
 packages/repl/src/lib/Output/ReplProxy.ts     |   4 +-
 packages/repl/src/lib/Output/Viewer.svelte    |   8 +-
 .../src/lib/Output/console/Console.svelte     |   2 +-
 .../repl/src/lib/Output/srcdoc/index.html     |  71 +--------
 .../repl/src/lib/Output/srcdoc/styles.css     |  61 ++++++++
 packages/repl/src/lib/Repl.svelte             |   4 +-
 packages/repl/src/lib/types.d.ts              |   1 +
 .../repl/src/lib/workers/bundler/index.ts     | 142 +++++++++++++-----
 packages/repl/src/lib/workers/workers.d.ts    |   6 +-
 pnpm-lock.yaml                                |   8 +
 16 files changed, 220 insertions(+), 108 deletions(-)
 create mode 100644 packages/repl/src/lib/Output/srcdoc/styles.css

diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 2907bbe4f5..53e59cfd97 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
-				runes: true
+				// TODO support Tailwind here?
 			}
 		);
 	}
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 17e1e2f65b..e8ec12d208 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -113,6 +113,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#tailwind = $state(false);
 
 	#handlers = {
 		hover: new Set<(pos: number | null) => void>(),
@@ -464,6 +465,15 @@ export class Workspace {
 		}
 	}
 
+	get tailwind() {
+		return this.#tailwind;
+	}
+
+	set tailwind(value) {
+		this.#tailwind = value;
+		this.#onreset(this.#files);
+	}
+
 	get vim() {
 		return this.#vim;
 	}
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index c00ed75e9f..d5fd227096 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -59,7 +59,6 @@ async function init(v: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 5ab688c8e7..500b9c3758 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -86,6 +86,7 @@
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.23.0",
+		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
index 49caae67c7..0a0ca2d25d 100644
--- a/packages/repl/src/lib/Bundler.ts
+++ b/packages/repl/src/lib/Bundler.ts
@@ -58,7 +58,7 @@ export default class Bundler {
 		});
 	}
 
-	bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
+	bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
 			this.worker.postMessage({
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 783600563f..b7fb95b3fa 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -170,6 +170,11 @@
 				<Checkbox bind:checked={workspace.vim}></Checkbox>
 			</label>
 
+			<label class="option">
+				<span>Toggle Tailwind</span>
+				<Checkbox bind:checked={workspace.tailwind}></Checkbox>
+			</label>
+
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
 
 			{#if download}
diff --git a/packages/repl/src/lib/Output/ReplProxy.ts b/packages/repl/src/lib/Output/ReplProxy.ts
index 19c7700171..a42f28cd73 100644
--- a/packages/repl/src/lib/Output/ReplProxy.ts
+++ b/packages/repl/src/lib/Output/ReplProxy.ts
@@ -85,8 +85,8 @@ export default class ReplProxy {
 		}
 	}
 
-	eval(script: string) {
-		return this.iframe_command('eval', { script });
+	eval(script: string, style?: string) {
+		return this.iframe_command('eval', { script, style });
 	}
 
 	handle_links() {
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 3931e79a1f..9ab087e4a3 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -8,6 +8,7 @@
 	import Console, { type Log } from './console/Console.svelte';
 	import getLocationFromStack from './get-location-from-stack';
 	import srcdoc from './srcdoc/index.html?raw';
+	import srcdoc_styles from './srcdoc/styles.css?raw';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	import type { CompileError } from 'svelte/compiler';
 	import type { Bundle } from '../types';
@@ -107,7 +108,8 @@
 			clear_logs();
 
 			if (!$bundle.error) {
-				await proxy?.eval(`
+				await proxy?.eval(
+					`
 					${injectedJS}
 
 					if (!window.__setup_focus_handling) {
@@ -183,7 +185,9 @@
 						}
 					}
 					//# sourceURL=playground:output
-				`);
+				`,
+					$bundle?.tailwind ?? srcdoc_styles
+				);
 				error = null;
 			}
 		} catch (e) {
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index cc9471eb29..4c27f3ecec 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
 	export type Log = {
 		command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
 		action?: 'console';
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index 9e56bf30db..f89f687249 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -1,72 +1,13 @@
 <!doctype html>
 <html>
 	<head>
-		<style>
-			body {
-				--bg-1: hsl(0, 0%, 100%);
-				--bg-2: hsl(206, 20%, 90%);
-				--bg-3: hsl(206, 20%, 80%);
-				--fg-1: hsl(0, 0%, 13%);
-				--fg-2: hsl(0, 0%, 20%);
-				--fg-2: hsl(0, 0%, 30%);
-				--link: hsl(208, 77%, 47%);
-				--link-hover: hsl(208, 77%, 55%);
-				--link-active: hsl(208, 77%, 40%);
-				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-					'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-					'DejaVu Sans Mono', monospace;
-				color-scheme: light;
-				background: var(--bg-1);
-				color: var(--fg-1);
-				font-family: var(--font);
-				line-height: 1.5;
-				margin: 1rem;
-				height: calc(100vh - 2rem);
-				accent-color: var(--hover) !important;
-			}
-
-			a {
-				color: var(--link);
-			}
-
-			a:hover {
-				color: var(--link-hover);
-			}
-
-			a:active {
-				color: var(--link-active);
-			}
-
-			code {
-				background: var(--bg-2);
-				font-family: var(--font-mono);
-				font-size: 0.9em;
-				padding: 0.15rem 0.3rem;
-				border-radius: var(--border-radius);
-			}
-
-			ul.todos {
-				padding: 0;
-			}
-
-			body.dark {
-				color-scheme: dark;
-				--bg-1: hsl(0, 0%, 18%);
-				--bg-2: hsl(0, 0%, 30%);
-				--bg-3: hsl(0, 0%, 40%);
-				--fg-1: hsl(0, 0%, 90%);
-				--fg-2: hsl(0, 0%, 70%);
-				--fg-3: hsl(0, 0%, 60%);
-				--link: hsl(206, 96%, 72%);
-				--link-hover: hsl(206, 96%, 78%);
-				--link-active: hsl(206, 96%, 64%);
-			}
-		</style>
+		<style id="injected"></style>
 
 		<script>
 			(function () {
+				const style = document.querySelector('style#injected');
+				let styles = '';
+
 				function send(payload, origin = '*') {
 					if (payload.command === 'info' && payload.args[0] instanceof Error) {
 						const error = payload.args[0];
@@ -97,6 +38,10 @@
 						}
 
 						if (action === 'eval') {
+							if (data.args.style !== undefined && styles !== (styles = data.args.style)) {
+								style.textContent = styles;
+							}
+
 							(0, eval)(data.args.script);
 						}
 
diff --git a/packages/repl/src/lib/Output/srcdoc/styles.css b/packages/repl/src/lib/Output/srcdoc/styles.css
new file mode 100644
index 0000000000..33b0dcabc5
--- /dev/null
+++ b/packages/repl/src/lib/Output/srcdoc/styles.css
@@ -0,0 +1,61 @@
+body {
+	--bg-1: hsl(0, 0%, 100%);
+	--bg-2: hsl(206, 20%, 90%);
+	--bg-3: hsl(206, 20%, 80%);
+	--fg-1: hsl(0, 0%, 13%);
+	--fg-2: hsl(0, 0%, 20%);
+	--fg-2: hsl(0, 0%, 30%);
+	--link: hsl(208, 77%, 47%);
+	--link-hover: hsl(208, 77%, 55%);
+	--link-active: hsl(208, 77%, 40%);
+	--border-radius: 4px;
+	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+		monospace;
+	color-scheme: light;
+	background: var(--bg-1);
+	color: var(--fg-1);
+	font-family: var(--font);
+	line-height: 1.5;
+	margin: 1rem;
+	height: calc(100vh - 2rem);
+	accent-color: var(--hover) !important;
+}
+
+a {
+	color: var(--link);
+}
+
+a:hover {
+	color: var(--link-hover);
+}
+
+a:active {
+	color: var(--link-active);
+}
+
+code {
+	background: var(--bg-2);
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	padding: 0.15rem 0.3rem;
+	border-radius: var(--border-radius);
+}
+
+ul.todos {
+	padding: 0;
+}
+
+body.dark {
+	color-scheme: dark;
+	--bg-1: hsl(0, 0%, 18%);
+	--bg-2: hsl(0, 0%, 30%);
+	--bg-3: hsl(0, 0%, 40%);
+	--fg-1: hsl(0, 0%, 90%);
+	--fg-2: hsl(0, 0%, 70%);
+	--fg-3: hsl(0, 0%, 60%);
+	--link: hsl(206, 96%, 72%);
+	--link-hover: hsl(206, 96%, 78%);
+	--link-active: hsl(206, 96%, 64%);
+}
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 021c722a4d..0e023d797b 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -95,7 +95,9 @@
 
 	async function rebundle() {
 		const token = (current_token = Symbol());
-		const result = await bundler!.bundle(workspace.files as File[]);
+		const result = await bundler!.bundle(workspace.files as File[], {
+			tailwind: workspace.tailwind
+		});
 		if (token === current_token) $bundle = result as Bundle;
 	}
 
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index 665293c6d5..a46e9f0766 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -26,6 +26,7 @@ export type Bundle = {
 	client: OutputChunk | null;
 	error: (RollupError & CompileError) | null;
 	server: OutputChunk | null;
+	tailwind?: string;
 	imports: string[];
 	warnings: Warning[];
 };
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 6b2f7b26d5..77baccd678 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -1,4 +1,6 @@
 import '@sveltejs/site-kit/polyfills';
+import * as tailwindcss from 'tailwindcss';
+import { walk } from 'zimmerframe';
 import '../patch_window';
 import { sleep } from '../../utils';
 import { rollup } from '@rollup/browser';
@@ -12,14 +14,19 @@ import image from './plugins/image';
 import svg from './plugins/svg';
 import replace from './plugins/replace';
 import loop_protect from './plugins/loop-protect';
-import type { Plugin, TransformResult } from '@rollup/browser';
-import type { BundleMessageData } from '../workers';
+import type { Plugin, RollupCache, TransformResult } from '@rollup/browser';
+import type { BundleMessageData, BundleOptions } from '../workers';
 import type { Warning } from '../../types';
-import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
+import type { CompileError, CompileResult } from 'svelte/compiler';
 import type { File } from 'editor';
+import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
+import tailwind_preflight from 'tailwindcss/preflight.css?raw';
+import tailwind_theme from 'tailwindcss/theme.css?raw';
+import tailwind_utilities from 'tailwindcss/utilities.css?raw';
+
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -93,7 +100,6 @@ async function init(v: string, packages_url: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 
@@ -138,14 +144,6 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 	}
 });
 
-let cached: Record<
-	'client' | 'server',
-	Map<string, { code: string; result: ReturnType<typeof svelte.compile> }>
-> = {
-	client: new Map(),
-	server: new Map()
-};
-
 const ABORT = { aborted: true };
 
 const FETCH_CACHE: Map<string, Promise<{ url: string; body: string }>> = new Map();
@@ -253,12 +251,39 @@ async function resolve_from_pkg(
 
 const versions = Object.create(null);
 
+let previous: {
+	key: string;
+	cache: RollupCache | undefined;
+};
+
+let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
+
+async function init_tailwind() {
+	const tailwind_files: Record<string, string> = {
+		'tailwindcss/theme.css': tailwind_theme,
+		'tailwindcss/preflight.css': tailwind_preflight,
+		'tailwindcss/utilities.css': tailwind_utilities
+	};
+
+	const tailwind_base = [
+		`@layer theme, base, components, utilities;`,
+		`@import "http://github.com/tailwindcss/theme.css" layer(theme);`,
+		`@import "http://github.com/tailwindcss/preflight.css" layer(base);`,
+		`@import "http://github.com/tailwindcss/utilities.css" layer(utilities);`
+	].join('\n');
+
+	return await tailwindcss.compile(tailwind_base, {
+		loadStylesheet: async (id, base) => {
+			return { content: tailwind_files[id], base };
+		}
+	});
+}
+
 async function get_bundle(
 	uid: number,
 	mode: 'client' | 'server',
-	cache: (typeof cached)['client'],
 	local_files_lookup: Map<string, File>,
-	options: CompileOptions
+	options: BundleOptions
 ) {
 	let bundle;
 
@@ -266,7 +291,29 @@ async function get_bundle(
 	const imports: Set<string> = new Set();
 	const warnings: Warning[] = [];
 	const all_warnings: Array<{ message: string }> = [];
-	const new_cache: typeof cache = new Map();
+
+	const tailwind_candidates: string[] = [];
+
+	function add_tailwind_candidates(ast: Node | undefined) {
+		if (!ast) return;
+
+		walk(ast, null, {
+			ImportDeclaration() {
+				// don't descend into these nodes, so that we don't
+				// pick up import sources
+			},
+			Literal(node) {
+				if (typeof node.value === 'string' && node.value) {
+					tailwind_candidates.push(...node.value.split(' '));
+				}
+			},
+			TemplateElement(node) {
+				if (node.value.raw) {
+					tailwind_candidates.push(...node.value.raw.split(' '));
+				}
+			}
+		});
+	}
 
 	const repl_plugin: Plugin = {
 		name: 'svelte-repl',
@@ -416,14 +463,10 @@ async function get_bundle(
 
 			const name = id.split('/').pop()?.split('.')[0];
 
-			const cached_id = cache.get(id);
 			let result: CompileResult;
 
-			if (cached_id && cached_id.code === code) {
-				result = cached_id.result;
-			} else if (id.endsWith('.svelte')) {
+			if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
-					...options,
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
@@ -435,6 +478,21 @@ async function get_bundle(
 
 				result = svelte.compile(code, compilerOptions);
 
+				walk(result.ast.html as import('svelte/compiler').AST.TemplateNode, null, {
+					Attribute(node) {
+						if (Array.isArray(node.value)) {
+							for (const chunk of node.value) {
+								if (chunk.type === 'Text') {
+									tailwind_candidates.push(...chunk.data.split(' '));
+								}
+							}
+						}
+					}
+				});
+
+				add_tailwind_candidates(result.ast.module);
+				add_tailwind_candidates(result.ast.instance);
+
 				if (result.css?.code) {
 					// resolve local files by inlining them
 					result.css.code = result.css.code.replace(
@@ -482,8 +540,6 @@ async function get_bundle(
 				return null;
 			}
 
-			new_cache.set(id, { code, result });
-
 			// @ts-expect-error
 			(result.warnings || result.stats?.warnings)?.forEach((warning) => {
 				// This is required, otherwise postMessage won't work
@@ -504,8 +560,11 @@ async function get_bundle(
 	};
 
 	try {
+		const key = JSON.stringify(options);
+
 		bundle = await rollup({
 			input: './__entry.js',
+			cache: previous?.key === key && previous.cache,
 			plugins: [
 				repl_plugin,
 				commonjs,
@@ -517,7 +576,21 @@ async function get_bundle(
 				loop_protect,
 				replace({
 					'process.env.NODE_ENV': JSON.stringify('production')
-				})
+				}),
+				options.tailwind && {
+					name: 'tailwind-extract',
+					transform(code, id) {
+						// TODO tidy this up
+						if (id.startsWith(svelte_url)) return;
+						if (id.endsWith('.svelte')) return;
+						if (id === './__entry.js') return;
+						if (id === 'esm-env') return;
+						if (id === shared_file) return;
+						if (id.startsWith('https://unpkg.com/clsx@')) return;
+
+						add_tailwind_candidates(this.parse(code));
+					}
+				}
 			],
 			onwarn(warning) {
 				all_warnings.push({
@@ -526,16 +599,20 @@ async function get_bundle(
 			}
 		});
 
+		previous = { key, cache: bundle.cache };
+
 		return {
 			bundle,
+			tailwind: options.tailwind
+				? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
+				: undefined,
 			imports: Array.from(imports),
-			cache: new_cache,
 			error: null,
 			warnings,
 			all_warnings
 		};
 	} catch (error) {
-		return { error, imports: null, bundle: null, cache: new_cache, warnings, all_warnings };
+		return { error, imports: null, bundle: null, warnings, all_warnings };
 	}
 }
 
@@ -550,7 +627,7 @@ async function bundle({
 }: {
 	uid: number;
 	files: File[];
-	options: CompileOptions;
+	options: BundleOptions;
 }) {
 	if (!DEV) {
 		console.clear();
@@ -610,7 +687,6 @@ async function bundle({
 	let client: Awaited<ReturnType<typeof get_bundle>> = await get_bundle(
 		uid,
 		'client',
-		cached.client,
 		lookup,
 		options
 	);
@@ -620,8 +696,6 @@ async function bundle({
 			throw client.error;
 		}
 
-		cached.client = client.cache;
-
 		const client_result = (
 			await client.bundle?.generate({
 				format: 'iife',
@@ -632,14 +706,11 @@ async function bundle({
 		)?.output[0];
 
 		const server = false // TODO how can we do SSR?
-			? await get_bundle(uid, 'server', cached.server, lookup, options)
+			? await get_bundle(uid, 'server', lookup, options)
 			: null;
 
-		if (server) {
-			cached.server = server.cache;
-			if (server.error) {
-				throw server.error;
-			}
+		if (server?.error) {
+			throw server.error;
 		}
 
 		const server_result = server
@@ -657,6 +728,7 @@ async function bundle({
 			uid,
 			client: client_result,
 			server: server_result,
+			tailwind: client.tailwind,
 			imports: client.imports,
 			// Svelte 5 returns warnings as error objects with a toJSON method, prior versions return a POJO
 			warnings: client.warnings.map((w: any) => w.toJSON?.() ?? w),
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index 1515b10974..59710fa266 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -48,6 +48,10 @@ export interface MigrateOutput {
 	error?: string;
 }
 
+export interface BundleOptions {
+	tailwind: boolean;
+}
+
 export type BundleMessageData = {
 	uid: number;
 	type: 'init' | 'bundle' | 'status' | 'error';
@@ -55,7 +59,7 @@ export type BundleMessageData = {
 	packages_url: string;
 	svelte_version: string;
 	files: File[];
-	options: CompileOptions;
+	options: BundleOptions;
 };
 
 declare global {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d68dce3e53..565ad85b01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -376,6 +376,9 @@ importers:
       svelte:
         specifier: 5.23.0
         version: 5.23.0
+      tailwindcss:
+        specifier: ^4.0.15
+        version: 4.0.15
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -3082,6 +3085,9 @@ packages:
     resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
     engines: {node: '>=18'}
 
+  tailwindcss@4.0.15:
+    resolution: {integrity: sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==}
+
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
@@ -5964,6 +5970,8 @@ snapshots:
       magic-string: 0.30.12
       zimmerframe: 1.1.2
 
+  tailwindcss@4.0.15: {}
+
   tar@7.4.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1

From eb1eb2b0fd928887dd2da48df54d633849070583 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 16:39:37 -0700
Subject: [PATCH 349/453] persist tailwind option (#1219)

* persist tailwind option

* fix

* fix
---
 .../src/routes/(authed)/playground/[id]/+page.svelte  | 11 +++++++----
 .../(authed)/playground/[id]/embed/+page.svelte       |  5 +++--
 packages/editor/src/lib/Workspace.svelte.ts           |  6 ++++--
 packages/repl/src/lib/Repl.svelte                     |  7 ++++---
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 7976235f1b..00579ed7a0 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -72,7 +72,8 @@
 		if (!hash && !saved) {
 			repl?.set({
 				// TODO make this munging unnecessary (using JSON instead of structuredClone for better browser compat)
-				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge)
+				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge),
+				tailwind: false // TODO
 			});
 
 			modified = false;
@@ -92,7 +93,7 @@
 				name = recovered.name;
 			}
 
-			repl.set({ files });
+			repl.set({ files, tailwind: recovered.tailwind ?? false });
 		} catch {
 			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
 		}
@@ -155,7 +156,8 @@
 	async function update_hash() {
 		// Only change hash when necessary to avoid polluting everyone's browser history
 		if (modified) {
-			const json = JSON.stringify({ name, files: repl.toJSON().files });
+			const { files, tailwind } = repl.toJSON();
+			const json = JSON.stringify({ name, files, tailwind });
 			await set_hash(json);
 		}
 	}
@@ -210,7 +212,8 @@
 		if (modified) {
 			// we can't save to the hash because it's an async operation, so we use
 			// a short-lived sessionStorage value instead
-			const json = JSON.stringify({ name, files: repl.toJSON().files });
+			const { files, tailwind } = repl.toJSON();
+			const json = JSON.stringify({ name, files, tailwind });
 			sessionStorage.setItem(STORAGE_KEY, json);
 		}
 	}}
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 6db54545e2..ab843d9ad3 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -45,7 +45,8 @@
 
 		if (!hash) {
 			repl?.set({
-				files: data.gist.components.map(munge)
+				files: data.gist.components.map(munge),
+				tailwind: false // TODO
 			});
 
 			return;
@@ -53,7 +54,7 @@
 
 		try {
 			const recovered = JSON.parse(await decode_and_decompress_text(hash));
-			repl.set({ files: recovered.files });
+			repl.set({ files: recovered.files, tailwind: recovered.tailwind ?? false });
 		} catch {
 			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
 		}
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index e8ec12d208..a4ec178e02 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -393,12 +393,14 @@ export class Workspace {
 		this.#onreset?.(this.#files);
 	}
 
-	reset(new_files: Item[], selected?: string) {
+	reset(new_files: Item[], options: { tailwind: boolean }, selected?: string) {
 		this.states.clear();
 		this.set(new_files, selected);
 
 		this.mark_saved();
 
+		this.#tailwind = options.tailwind;
+
 		this.#onreset(new_files);
 		this.#reset_diagnostics();
 	}
@@ -471,7 +473,7 @@ export class Workspace {
 
 	set tailwind(value) {
 		this.#tailwind = value;
-		this.#onreset(this.#files);
+		this.#onupdate(this.#current);
 	}
 
 	get vim() {
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 0e023d797b..85bd3f520b 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -67,13 +67,14 @@
 	export function toJSON() {
 		return {
 			imports: $bundle?.imports ?? [],
-			files: workspace.files
+			files: workspace.files,
+			tailwind: workspace.tailwind
 		};
 	}
 
 	// TODO get rid
-	export async function set(data: { files: File[]; css?: string }) {
-		workspace.reset(data.files, 'App.svelte');
+	export async function set(data: { files: File[]; tailwind?: boolean }) {
+		workspace.reset(data.files, { tailwind: data.tailwind ?? false }, 'App.svelte');
 	}
 
 	// TODO get rid

From 3b045a6995a7fced520f2bb5a074d9ef5be3c23a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 25 Mar 2025 10:53:23 -0700
Subject: [PATCH 350/453] extract strings from template as well as scripts
 (#1226)

extract strings from template as well as scripts - closes #1223
---
 packages/repl/src/lib/workers/bundler/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 77baccd678..c408da3b83 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -492,6 +492,7 @@ async function get_bundle(
 
 				add_tailwind_candidates(result.ast.module);
 				add_tailwind_candidates(result.ast.instance);
+				add_tailwind_candidates(result.ast.html);
 
 				if (result.css?.code) {
 					// resolve local files by inlining them

From cf20346c8e28cbe8e8ec913a0afefd5393f071ad Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 27 Mar 2025 09:47:41 -0700
Subject: [PATCH 351/453] use module workers (#1228)

* use module workers

* fix

* fix, i think
---
 apps/svelte.dev/vite.config.ts                    |  3 +++
 packages/editor/src/lib/compile-worker/index.ts   |  5 +++--
 packages/repl/src/lib/Bundler.ts                  |  7 ++++---
 packages/repl/src/lib/workers/bundler/index.ts    | 11 ++++++-----
 packages/site-kit/src/lib/search/SearchBox.svelte |  5 +++--
 5 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts
index e1d4ffc832..ba222b1ffd 100644
--- a/apps/svelte.dev/vite.config.ts
+++ b/apps/svelte.dev/vite.config.ts
@@ -76,6 +76,9 @@ const config: UserConfig = {
 	ssr: {
 		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
 		external: ['shiki', '@shikijs/twoslash']
+	},
+	worker: {
+		format: 'es'
 	}
 };
 
diff --git a/packages/editor/src/lib/compile-worker/index.ts b/packages/editor/src/lib/compile-worker/index.ts
index a6b1eada70..65c6be59a0 100644
--- a/packages/editor/src/lib/compile-worker/index.ts
+++ b/packages/editor/src/lib/compile-worker/index.ts
@@ -1,5 +1,4 @@
 import { BROWSER } from 'esm-env';
-import CompileWorker from './worker?worker';
 import type { Compiled, File } from '../Workspace.svelte';
 
 const callbacks = new Map<string, Map<number, (compiled: Compiled) => void>>();
@@ -9,7 +8,9 @@ let worker: Worker;
 let uid = 1;
 
 if (BROWSER) {
-	worker = new CompileWorker();
+	worker = new Worker(new URL('./worker', import.meta.url), {
+		type: 'module'
+	});
 
 	worker.addEventListener('message', (event) => {
 		const { filename, id, payload } = event.data;
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
index 0a0ca2d25d..a861c2a686 100644
--- a/packages/repl/src/lib/Bundler.ts
+++ b/packages/repl/src/lib/Bundler.ts
@@ -1,6 +1,4 @@
-import type { CompileOptions } from 'svelte/compiler';
 import type { BundleResult } from './workers/bundler';
-import Worker from './workers/bundler/index.js?worker';
 import type { BundleMessageData } from './workers/workers';
 import type { File } from 'editor';
 
@@ -27,7 +25,10 @@ export default class Bundler {
 		this.hash = `${packages_url}:${svelte_version}`;
 
 		if (!workers.has(this.hash)) {
-			const worker = new Worker();
+			const worker = new Worker(new URL('./workers/bundler/index', import.meta.url), {
+				type: 'module'
+			});
+
 			worker.postMessage({ type: 'init', packages_url, svelte_version });
 			workers.set(this.hash, worker);
 		}
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index c408da3b83..44c0479ecb 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -1,5 +1,4 @@
 import '@sveltejs/site-kit/polyfills';
-import * as tailwindcss from 'tailwindcss';
 import { walk } from 'zimmerframe';
 import '../patch_window';
 import { sleep } from '../../utils';
@@ -23,10 +22,6 @@ import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
-import tailwind_preflight from 'tailwindcss/preflight.css?raw';
-import tailwind_theme from 'tailwindcss/theme.css?raw';
-import tailwind_utilities from 'tailwindcss/utilities.css?raw';
-
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -259,6 +254,12 @@ let previous: {
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
 
 async function init_tailwind() {
+	const tailwindcss = await import('tailwindcss');
+
+	const { default: tailwind_preflight } = await import('tailwindcss/preflight.css?raw');
+	const { default: tailwind_theme } = await import('tailwindcss/theme.css?raw');
+	const { default: tailwind_utilities } = await import('tailwindcss/utilities.css?raw');
+
 	const tailwind_files: Record<string, string> = {
 		'tailwindcss/theme.css': tailwind_theme,
 		'tailwindcss/preflight.css': tailwind_preflight,
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 1da198857b..0e55e10e33 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -10,7 +10,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	import { focusable_children, forcefocus, trap } from '../actions/focus.js';
 	import Icon from '../components/Icon.svelte';
 	import SearchResults from './SearchResults.svelte';
-	import SearchWorker from './search-worker.js?worker';
 	import { page } from '$app/stores';
 
 	interface Props {
@@ -37,7 +36,9 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	const pending = new Set();
 
 	onMount(async () => {
-		worker = new SearchWorker();
+		worker = new Worker(new URL('./search-worker', import.meta.url), {
+			type: 'module'
+		});
 
 		worker.addEventListener('message', (event) => {
 			const { type, payload } = event.data;

From abb842cb6ed51299ec44166d5ea305ce89234d25 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 27 Mar 2025 20:01:43 -0700
Subject: [PATCH 352/453] Sync `kit` docs (#1213)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/40-best-practices/06-icons.md   | 12 ++++++++++++
 .../content/docs/kit/40-best-practices/07-images.md  |  6 ------
 .../docs/kit/98-reference/10-@sveltejs-kit.md        |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/kit/40-best-practices/06-icons.md

diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/06-icons.md b/apps/svelte.dev/content/docs/kit/40-best-practices/06-icons.md
new file mode 100644
index 0000000000..e928642705
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/06-icons.md
@@ -0,0 +1,12 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Icons
+---
+
+## CSS
+
+A great way to use icons is to define them purely via CSS. Iconify offers support for [many popular icon sets](https://icon-sets.iconify.design/) that [can be included via CSS](https://iconify.design/docs/usage/css/). This method can also be used with popular CSS frameworks by leveraging the Iconify [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). As opposed to libraries based on Svelte components, it doesn't require each icon to be imported into your `.svelte` file.
+
+## Svelte
+
+There are many [icon libraries for Svelte](https://www.sveltesociety.dev/packages?category=icons). When choosing an icon library, it is recommended to avoid those that provide a `.svelte` file per icon as these libraries can have thousands of `.svelte` files which really slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html). This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index 245486209e..750470cb1f 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -153,12 +153,6 @@ Using a content delivery network (CDN) can allow you to optimize these images dy
 
 CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
 
-## Icons
-
-A great way to use icons is to define them purely in CSS. Iconify offers a huge set of icons [available via CSS](https://iconify.design/docs/usage/css/).
-
-For icons defined in `.svelte` files, it is recommended to avoid libraries that provide a `.svelte` file per icon. These libraries can have thousands of `.svelte` files which really slow down Vite's dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
-
 ## Best practices
 
 - For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 0d1c666f13..81f247ff42 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -497,7 +497,7 @@ type: Exclude<NavigationType, 'leave'>;
 <div class="ts-block-property-details">
 
 The type of navigation:
-- `enter`: The app has hydrated
+- `enter`: The app has hydrated/started
 - `form`: The user submitted a `<form>`
 - `link`: Navigation was triggered by a link click
 - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
@@ -1650,7 +1650,7 @@ The URL that is navigated to
 
 ## NavigationType
 
-- `enter`: The app has hydrated
+- `enter`: The app has hydrated/started
 - `form`: The user submitted a `<form>` with a GET method
 - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
 - `link`: Navigation was triggered by a link click

From 1e50a41eab6f64244fbfe46db0e485fc3ccc5a74 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 31 Mar 2025 16:14:59 -0400
Subject: [PATCH 353/453] Sync `svelte` docs (#1212)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/01-introduction/02-getting-started.md       | 6 ++++--
 apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md       | 2 +-
 .../docs/svelte/98-reference/.generated/compile-errors.md   | 6 ++++++
 .../content/docs/svelte/98-reference/30-compiler-errors.md  | 6 ++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
index 34ec87a291..683eb6e344 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Getting started
 ---
 
-We recommend using [SvelteKit](../kit), the official application framework from the Svelte team powered by [Vite](https://vite.dev/):
+We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
 
 ```bash
 npx sv create myapp
@@ -16,7 +16,9 @@ Don't worry if you don't know Svelte yet! You can ignore all the nice features S
 
 ## Alternatives to SvelteKit
 
-You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+
+>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).
 
 There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
index f38a2b5582..8f5310bb31 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
@@ -97,7 +97,7 @@ However, you can use any router library. A lot of people use [page.js](https://g
 
 If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
 
-If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
+If you need hash-based routing on the client side, check out the [hash option](https://svelte.dev/docs/kit/configuration#router) in SvelteKit, [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router), or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
 
 [Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index ea116014e7..a8c39aaf97 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -660,6 +660,12 @@ Cannot access a computed property of a rune
 `%name%` is not a valid rune
 ```
 
+### rune_invalid_spread
+
+```
+`%rune%` cannot be called with a spread argument
+```
+
 ### rune_invalid_usage
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index b3423d020e..8d6ea53010 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -665,6 +665,12 @@ Cannot access a computed property of a rune
 `%name%` is not a valid rune
 ```
 
+### rune_invalid_spread
+
+```
+`%rune%` cannot be called with a spread argument
+```
+
 ### rune_invalid_usage
 
 ```

From 4db0ba0842757a4265cb24c7a6760864ba0cdc93 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 31 Mar 2025 16:50:47 -0400
Subject: [PATCH 354/453] fix rss.xml headers (#1239)

---
 apps/svelte.dev/src/routes/blog/rss.xml/+server.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
index d1fa7f53c0..571ca61c1b 100644
--- a/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
+++ b/apps/svelte.dev/src/routes/blog/rss.xml/+server.js
@@ -62,8 +62,7 @@ const get_rss = async (posts) => {
 export async function GET() {
 	return new Response(await get_rss(index.blog.children), {
 		headers: {
-			'Cache-Control': `max-age=${30 * 60 * 1e3}`,
-			'Content-Type': 'application/rss+xml'
+			'Content-Type': 'application/xml'
 		}
 	});
 }

From 029a461fe118f39f9b5bbc2d158d220c93126ffa Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 31 Mar 2025 17:01:05 -0400
Subject: [PATCH 355/453] bump shiki and twoslash (#1240)

---
 packages/site-kit/package.json |   4 +-
 pnpm-lock.yaml                 | 181 ++++++++++++++++++++++++++++++++-
 2 files changed, 179 insertions(+), 6 deletions(-)

diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 2e594c3cf5..98e0fab722 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -38,10 +38,10 @@
 		"@fontsource/fira-sans": "^5.1.0",
 		"@lezer/common": "^1.0.4",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@shikijs/twoslash": "^1.22.0",
+		"@shikijs/twoslash": "^3.2.1",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
-		"shiki": "^1.22.0"
+		"shiki": "^3.2.1"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.20.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 565ad85b01..954338e930 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -477,8 +477,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
       '@shikijs/twoslash':
-        specifier: ^1.22.0
-        version: 1.22.0(typescript@5.5.4)
+        specifier: ^3.2.1
+        version: 3.2.1(typescript@5.5.4)
       esm-env:
         specifier: ^1.0.0
         version: 1.2.1
@@ -486,8 +486,8 @@ importers:
         specifier: ^2.2.3
         version: 2.2.3
       shiki:
-        specifier: ^1.22.0
-        version: 1.22.0
+        specifier: ^3.2.1
+        version: 3.2.1
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.20.0
@@ -1560,18 +1560,44 @@ packages:
   '@shikijs/core@1.22.0':
     resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==}
 
+  '@shikijs/core@3.2.1':
+    resolution: {integrity: sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==}
+
   '@shikijs/engine-javascript@1.22.0':
     resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==}
 
+  '@shikijs/engine-javascript@3.2.1':
+    resolution: {integrity: sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==}
+
   '@shikijs/engine-oniguruma@1.22.0':
     resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==}
 
+  '@shikijs/engine-oniguruma@3.2.1':
+    resolution: {integrity: sha512-wZZAkayEn6qu2+YjenEoFqj0OyQI64EWsNR6/71d1EkG4sxEOFooowKivsWPpaWNBu3sxAG+zPz5kzBL/SsreQ==}
+
+  '@shikijs/langs@3.2.1':
+    resolution: {integrity: sha512-If0iDHYRSGbihiA8+7uRsgb1er1Yj11pwpX1c6HLYnizDsKAw5iaT3JXj5ZpaimXSWky/IhxTm7C6nkiYVym+A==}
+
+  '@shikijs/themes@3.2.1':
+    resolution: {integrity: sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ==}
+
   '@shikijs/twoslash@1.22.0':
     resolution: {integrity: sha512-r5F/x4GTh18XzhAREehgT9lCDFZlISBSIsOFZQQaqjiOLG81PIqJN1I1D6XY58UN9OJt+3mffuKq19K4FOJKJA==}
 
+  '@shikijs/twoslash@3.2.1':
+    resolution: {integrity: sha512-2ZiL9xXY8JRXHG5BdJXE9KoIeSsyH9/yK+YTN90/SUIKkq7Nf5dWqXp5wJ6+4SL0FQO8mq2HUutwqU+gamOgOA==}
+    peerDependencies:
+      typescript: '>=5.5.0'
+
   '@shikijs/types@1.22.0':
     resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==}
 
+  '@shikijs/types@3.2.1':
+    resolution: {integrity: sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@shikijs/vscode-textmate@9.3.0':
     resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
 
@@ -1745,6 +1771,11 @@ packages:
     peerDependencies:
       typescript: '*'
 
+  '@typescript/vfs@1.6.1':
+    resolution: {integrity: sha512-JwoxboBh7Oz1v38tPbkrZ62ZXNHAk9bJ7c9x0eI5zBfBnBYGhURdbnh7Z4smN/MV48Y5OCcZb58n972UtbazsA==}
+    peerDependencies:
+      typescript: '*'
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -2161,6 +2192,9 @@ packages:
   electron-to-chromium@1.5.73:
     resolution: {integrity: sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==}
 
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
 
@@ -2350,6 +2384,9 @@ packages:
   hast-util-to-html@9.0.3:
     resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
@@ -2682,6 +2719,12 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  oniguruma-parser@0.5.4:
+    resolution: {integrity: sha512-yNxcQ8sKvURiTwP0mV6bLQCYE7NKfKRRWunhbZnXgxSmB1OXa1lHrN3o4DZd+0Si0kU5blidK7BcROO8qv5TZA==}
+
+  oniguruma-to-es@4.1.0:
+    resolution: {integrity: sha512-SNwG909cSLo4vPyyPbU/VJkEc9WOXqu2ycBlfd1UCXLqk1IijcQktSBb2yRQ2UFPsDhpkaf+C1dtT3PkLK/yWA==}
+
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
@@ -2830,6 +2873,9 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
+
   publint@0.2.12:
     resolution: {integrity: sha512-YNeUtCVeM4j9nDiTT2OPczmlyzOkIXNtdDZnSuajAxS/nZ6j3t7Vs9SUB4euQNddiltIwu7Tdd3s+hr08fAsMw==}
     engines: {node: '>=16'}
@@ -2864,9 +2910,18 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
   regex@4.3.3:
     resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
 
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -2940,6 +2995,9 @@ packages:
   shiki@1.22.0:
     resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==}
 
+  shiki@3.2.1:
+    resolution: {integrity: sha512-VML/2o1/KGYkEf/stJJ+s9Ypn7jUKQPomGLGYso4JJFMFxVDyPNsjsI3MB3KLjlMOeH44gyaPdXC6rik2WXvUQ==}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -3163,11 +3221,19 @@ packages:
   twoslash-protocol@0.2.12:
     resolution: {integrity: sha512-5qZLXVYfZ9ABdjqbvPc4RWMr7PrpPaaDSeaYY55vl/w1j6H6kzsWK/urAEIXlzYlyrFmyz1UbwIt+AA0ck+wbg==}
 
+  twoslash-protocol@0.3.1:
+    resolution: {integrity: sha512-BMePTL9OkuNISSyyMclBBhV2s9++DiOCyhhCoV5Kaht6eaWLwVjCCUJHY33eZJPsyKeZYS8Wzz0h+XI01VohVw==}
+
   twoslash@0.2.12:
     resolution: {integrity: sha512-tEHPASMqi7kqwfJbkk7hc/4EhlrKCSLcur+TcvYki3vhIfaRMXnXjaYFgXpoZRbT6GdprD4tGuVBEmTpUgLBsw==}
     peerDependencies:
       typescript: '*'
 
+  twoslash@0.3.1:
+    resolution: {integrity: sha512-OGqMTGvqXTcb92YQdwGfEdK0nZJA64Aj/ChLOelbl3TfYch2IoBST0Yx4C0LQ7Lzyqm9RpgcpgDxeXQIz4p2Kg==}
+    peerDependencies:
+      typescript: ^5.5.0
+
   typescript@5.5.4:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
@@ -4378,17 +4444,43 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.3
 
+  '@shikijs/core@3.2.1':
+    dependencies:
+      '@shikijs/types': 3.2.1
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@1.22.0':
     dependencies:
       '@shikijs/types': 1.22.0
       '@shikijs/vscode-textmate': 9.3.0
       oniguruma-to-js: 0.4.3
 
+  '@shikijs/engine-javascript@3.2.1':
+    dependencies:
+      '@shikijs/types': 3.2.1
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.1.0
+
   '@shikijs/engine-oniguruma@1.22.0':
     dependencies:
       '@shikijs/types': 1.22.0
       '@shikijs/vscode-textmate': 9.3.0
 
+  '@shikijs/engine-oniguruma@3.2.1':
+    dependencies:
+      '@shikijs/types': 3.2.1
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.2.1':
+    dependencies:
+      '@shikijs/types': 3.2.1
+
+  '@shikijs/themes@3.2.1':
+    dependencies:
+      '@shikijs/types': 3.2.1
+
   '@shikijs/twoslash@1.22.0(typescript@5.5.4)':
     dependencies:
       '@shikijs/core': 1.22.0
@@ -4398,11 +4490,27 @@ snapshots:
       - supports-color
       - typescript
 
+  '@shikijs/twoslash@3.2.1(typescript@5.5.4)':
+    dependencies:
+      '@shikijs/core': 3.2.1
+      '@shikijs/types': 3.2.1
+      twoslash: 0.3.1(typescript@5.5.4)
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@shikijs/types@1.22.0':
     dependencies:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
+  '@shikijs/types@3.2.1':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@shikijs/vscode-textmate@9.3.0': {}
 
   '@shuding/opentype.js@1.4.0-beta.0':
@@ -4655,6 +4763,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript/vfs@1.6.1(typescript@5.5.4)':
+    dependencies:
+      debug: 4.4.0
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@vercel/analytics@1.3.2':
@@ -5007,6 +5122,8 @@ snapshots:
 
   electron-to-chromium@1.5.73: {}
 
+  emoji-regex-xs@1.0.0: {}
+
   emoji-regex@10.3.0: {}
 
   emoji-regex@8.0.0: {}
@@ -5274,6 +5391,20 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -5580,6 +5711,15 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  oniguruma-parser@0.5.4: {}
+
+  oniguruma-to-es@4.1.0:
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      oniguruma-parser: 0.5.4
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
   oniguruma-to-js@0.4.3:
     dependencies:
       regex: 4.3.3
@@ -5693,6 +5833,8 @@ snapshots:
 
   property-information@6.5.0: {}
 
+  property-information@7.0.0: {}
+
   publint@0.2.12:
     dependencies:
       npm-packlist: 5.1.3
@@ -5728,8 +5870,18 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
   regex@4.3.3: {}
 
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
   resolve-from@5.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -5842,6 +5994,17 @@ snapshots:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
+  shiki@3.2.1:
+    dependencies:
+      '@shikijs/core': 3.2.1
+      '@shikijs/engine-javascript': 3.2.1
+      '@shikijs/engine-oniguruma': 3.2.1
+      '@shikijs/langs': 3.2.1
+      '@shikijs/themes': 3.2.1
+      '@shikijs/types': 3.2.1
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
@@ -6038,6 +6201,8 @@ snapshots:
 
   twoslash-protocol@0.2.12: {}
 
+  twoslash-protocol@0.3.1: {}
+
   twoslash@0.2.12(typescript@5.5.4):
     dependencies:
       '@typescript/vfs': 1.6.0(typescript@5.5.4)
@@ -6046,6 +6211,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  twoslash@0.3.1(typescript@5.5.4):
+    dependencies:
+      '@typescript/vfs': 1.6.1(typescript@5.5.4)
+      twoslash-protocol: 0.3.1
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
   typescript@5.5.4: {}
 
   ultrahtml@1.5.3: {}

From ce8edeb8dea2230e43e5b0b39988620b20aed6ed Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Mon, 31 Mar 2025 17:08:50 -0400
Subject: [PATCH 356/453] fix: Automate year in footer (#1172)

---
 apps/svelte.dev/src/routes/_home/Footer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/_home/Footer.svelte b/apps/svelte.dev/src/routes/_home/Footer.svelte
index dccbd88faf..4e2f965b09 100644
--- a/apps/svelte.dev/src/routes/_home/Footer.svelte
+++ b/apps/svelte.dev/src/routes/_home/Footer.svelte
@@ -4,7 +4,7 @@
 
 <Section>
 	<p class="copyright">
-		© 2024 Svelte contributors. Svelte is <a href="https://github.com/sveltejs/svelte"
+		© {new Date().getFullYear()} Svelte contributors. Svelte is <a href="https://github.com/sveltejs/svelte"
 			>free and open source software</a
 		> released under the MIT license.
 	</p>

From 510a001e8c6a5924397ef5b0dbbf3c054dcacc4f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 31 Mar 2025 20:59:29 -0400
Subject: [PATCH 357/453] insert `<wbr>` elements to break package names
 (#1241)

* insert `<wbr>` elements to break package names

* drive-by

* oops
---
 apps/svelte.dev/src/routes/_home/Footer.svelte         | 6 +++---
 apps/svelte.dev/src/routes/docs/[...path]/+page.svelte | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Footer.svelte b/apps/svelte.dev/src/routes/_home/Footer.svelte
index 4e2f965b09..2c5b26215b 100644
--- a/apps/svelte.dev/src/routes/_home/Footer.svelte
+++ b/apps/svelte.dev/src/routes/_home/Footer.svelte
@@ -4,9 +4,9 @@
 
 <Section>
 	<p class="copyright">
-		© {new Date().getFullYear()} Svelte contributors. Svelte is <a href="https://github.com/sveltejs/svelte"
-			>free and open source software</a
-		> released under the MIT license.
+		© {new Date().getFullYear()} Svelte contributors. Svelte is
+		<a href="https://github.com/sveltejs/svelte">free and open source software</a> released under the
+		MIT license.
 	</p>
 </Section>
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 2f1ad1b9d8..664faf8e04 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -7,6 +7,7 @@
 	import Breadcrumbs from './Breadcrumbs.svelte';
 	import PageControls from '$lib/components/PageControls.svelte';
 	import { goto } from '$app/navigation';
+	import { escape_html } from '$lib/utils/escape';
 
 	let { data } = $props();
 
@@ -69,7 +70,7 @@
 <div id="docs-content" use:legacy_details>
 	<header>
 		<Breadcrumbs breadcrumbs={data.document.breadcrumbs.slice(1)} />
-		<h1>{data.document.metadata.title}</h1>
+		<h1>{@html escape_html(data.document.metadata.title).replaceAll('/', '/<wbr>')}</h1>
 	</header>
 
 	<OnThisPage {content} document={data.document} />

From abac5a380e1378aba7dd4e1cd0f996bcc9467cc4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 1 Apr 2025 20:30:53 -0700
Subject: [PATCH 358/453] Sync `kit` docs (#1249)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../kit/25-build-and-deploy/20-adapters.md    |   3 +-
 .../60-adapter-cloudflare.md                  | 142 ++++++++++++++----
 .../70-adapter-cloudflare-workers.md          |   8 +-
 3 files changed, 120 insertions(+), 33 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
index 44bd9347de..a9ef8e6397 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/20-adapters.md
@@ -7,8 +7,7 @@ Before you can deploy your SvelteKit app, you need to _adapt_ it for your deploy
 
 Official adapters exist for a variety of platforms — these are documented on the following pages:
 
-- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Pages
-- [`@sveltejs/adapter-cloudflare-workers`](adapter-cloudflare-workers) for Cloudflare Workers
+- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Workers and Cloudflare Pages
 - [`@sveltejs/adapter-netlify`](adapter-netlify) for Netlify
 - [`@sveltejs/adapter-node`](adapter-node) for Node servers
 - [`@sveltejs/adapter-static`](adapter-static) for static site generation (SSG)
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index ec32319f4d..8db56e4d7b 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -3,22 +3,21 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Cloudflare Pages
 ---
 
-To deploy to [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
+To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
 
-This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare Pages, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
+This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
 
 ## Comparisons
 
-- `adapter-cloudflare` – supports all SvelteKit features; builds for [Cloudflare Pages](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/)
-- `adapter-cloudflare-workers` – supports all SvelteKit features; builds for Cloudflare Workers
-- `adapter-static` – only produces client-side static assets; compatible with Cloudflare Pages
+- `adapter-cloudflare` – supports all SvelteKit features; builds for Cloudflare Workers Static Assets and Cloudflare Pages
+- `adapter-cloudflare-workers` – deprecated. Supports all SvelteKit features; builds for Cloudflare Workers Sites
+- `adapter-static` – only produces client-side static assets; compatible with Cloudflare Workers Static Assets and Cloudflare Pages
 
 ## Usage
 
 Install with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to your `svelte.config.js`:
 
 ```js
-// @errors: 2307
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-cloudflare';
 
@@ -26,14 +25,16 @@ export default {
 	kit: {
 		adapter: adapter({
 			// See below for an explanation of these options
-			routes: {
-				include: ['/*'],
-				exclude: ['<all>']
-			},
+			config: undefined,
 			platformProxy: {
 				configPath: undefined,
 				environment: undefined,
 				persist: undefined
+			},
+			fallback: 'plaintext',
+			routes: {
+				include: ['/*'],
+				exclude: ['<all>']
 			}
 		})
 	}
@@ -42,9 +43,31 @@ export default {
 
 ## Options
 
+### config
+
+Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.
+
+### platformProxy
+
+Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.
+
+### fallback
+
+Whether to render a plaintext 404.html page or a rendered SPA fallback page for non-matching asset requests.
+
+For Cloudflare Workers, the default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) Wrangler configuration setting is set to `"404-page"`, this page will be served if a request fails to match an asset. If `assets.not_found_handling` is set to `"single-page-application"`, the adapter will render a SPA fallback index.html page regardless of the `fallback` option specified.
+
+For Cloudflare Pages, this page will only be served when a request that matches an entry in `routes.exclude` fails to match an asset.
+
+Most of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually
+exclude a set of prerendered pages without exceeding the 100 route limit, you may wish to
+use `spa` instead to avoid showing an unstyled 404 page to users.
+
+See Cloudflare Pages' [Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info.
+
 ### routes
 
-Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
+Only for Cloudflare Pages. Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
 
 - `include` defines routes that will invoke a function, and defaults to `['/*']`
 - `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:
@@ -55,23 +78,52 @@ Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/p
 
 You can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `<prerendered>` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`.
 
-### platformProxy
+## Cloudflare Workers
 
-Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.
+### Basic configuration
+
+When building for Cloudflare Workers, this adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"name": "<any-name-you-want>",
+	"main": ".svelte-kit/cloudflare/_worker.js",
+	"compatibility_date": "2025-01-01",
+	"assets": {
+		"binding": "ASSETS",
+		"directory": ".svelte-kit/cloudflare",
+	}
+}
+```
+
+### Deployment
+
+Please follow the [framework guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/) for Cloudflare Workers to begin.
+
+## Cloudflare Pages
 
-## Deployment
+### Deployment
 
 Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.
 
-When configuring your project settings, you must use the following settings:
+If you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:
 
 - **Framework preset** – SvelteKit
 - **Build command** – `npm run build` or `vite build`
 - **Build output directory** – `.svelte-kit/cloudflare`
 
+### Further reading
+
+You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site on Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).
+
+### Notes
+
+Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).
+
 ## Runtime APIs
 
-The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
+The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
 
 ```js
 // @errors: 7031
@@ -102,26 +154,20 @@ declare global {
 export {};
 ```
 
-### Testing Locally
-
-Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/pages/functions/bindings/) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/pages/functions/wrangler-configuration/#local-development) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
+### Testing locally
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
+Cloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-## Notes
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
 
-Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).
+## Headers and redirects
 
-The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the project root folder.
+The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.
 
 However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
 
 ## Troubleshooting
 
-### Further reading
-
-You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).
-
 ### Node.js compatibility
 
 If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:
@@ -140,3 +186,45 @@ When deploying your application, the server generated by SvelteKit is bundled in
 ### Accessing the file system
 
 You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.
+
+## Migrating from Workers Sites to Workers Static Assets
+
+Cloudflare no longer recommends using [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) and instead recommends using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). To migrate, replace `@sveltejs/adapter-cloudflare-workers` with `@sveltejs/adapter-cloudflare` and remove all `site` configuration settings from your Wrangler configuration file, then add the `assets.directory` and `assets.binding` configuration settings:
+
+### svelte.config.js
+
+```js
+/// file: svelte.config.js
+---import adapter from '@sveltejs/adapter-cloudflare-workers';---
++++import adapter from '@sveltejs/adapter-cloudflare';+++
+
+export default {
+	kit: {
+		adapter: adapter()
+	}
+};
+```
+
+### wrangler.toml
+
+```toml
+/// file: wrangler.toml
+---site.bucket = ".cloudflare/public"---
++++assets.directory = ".cloudflare/public"
+assets.binding = "ASSETS"+++
+```
+
+### wrangler.jsonc
+
+```jsonc
+/// file: wrangler.jsonc
+{
+---	"site": {
+		"bucket": ".cloudflare/public"
+	},---
++++	"assets": {
+		"directory": ".cloudflare/public",
+		"binding": "ASSETS"
+	}+++
+}
+```
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index b09e438ac9..f89f486987 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -3,9 +3,9 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Cloudflare Workers
 ---
 
-To deploy to [Cloudflare Workers](https://workers.cloudflare.com/), use [`adapter-cloudflare-workers`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare-workers).
+> [!NOTE] `adapter-cloudflare-workers` has been deprecated in favour of [`adapter-cloudflare`](adapter-cloudflare). We recommend using `adapter-cloudflare` to deploy to Cloudflare Workers with [Static Assets](https://developers.cloudflare.com/workers/static-assets/) since Cloudflare Workers Sites will be deprecated in favour of it.
 
-> [!NOTE] Unless you have a specific reason to use `adapter-cloudflare-workers`, it's recommended that you use [`adapter-cloudflare`](adapter-cloudflare) instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
+To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) with [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/), use `adapter-cloudflare-workers`.
 
 ## Usage
 
@@ -29,7 +29,7 @@ export default {
 
 ### config
 
-Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, you can specify it using this option.
+Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.
 
 ### platformProxy
 
@@ -113,7 +113,7 @@ export {};
 
 Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler dev`.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev`.
 
 ## Troubleshooting
 

From 5d263428a4a738c6850409357ddf9cd2ef155fdc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 1 Apr 2025 20:53:13 -0700
Subject: [PATCH 359/453] Sync `kit` docs (#1250)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 8db56e4d7b..94baab3e9d 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -187,7 +187,7 @@ When deploying your application, the server generated by SvelteKit is bundled in
 
 You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.
 
-## Migrating from Workers Sites to Workers Static Assets
+## Migrating from Workers Sites
 
 Cloudflare no longer recommends using [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) and instead recommends using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). To migrate, replace `@sveltejs/adapter-cloudflare-workers` with `@sveltejs/adapter-cloudflare` and remove all `site` configuration settings from your Wrangler configuration file, then add the `assets.directory` and `assets.binding` configuration settings:
 

From 9f8883dd923aa13a85857b65c12d83599349e823 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 2 Apr 2025 15:32:33 -0400
Subject: [PATCH 360/453] squelch warnings (#1251)

---
 .../src/lib/components/ModalDropdown.svelte   |  4 ----
 .../src/routes/(authed)/apps/+page.svelte     |  5 +----
 .../playground/[id]/AppControls.svelte        |  8 -------
 .../src/routes/_home/Community.svelte         |  3 ++-
 .../src/routes/_home/Companies.svelte         | 22 +++++++++----------
 .../src/routes/_home/Supporters/index.svelte  |  1 +
 .../src/routes/_home/Testimonials.svelte      |  1 +
 apps/svelte.dev/src/routes/docs/+page.svelte  |  2 ++
 .../routes/tutorial/[...slug]/+page.svelte    |  2 ++
 .../src/lib/components/Dropdown.svelte        |  1 +
 10 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
index 0284f4e88e..03ac2caced 100644
--- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
+++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte
@@ -93,10 +93,6 @@
 			outline: 2px solid var(--sk-fg-accent);
 			border-radius: var(--sk-border-radius);
 		}
-
-		span {
-			pointer-events: none;
-		}
 	}
 
 	summary {
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index fb9a3ec416..27a96673a5 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -197,10 +197,6 @@
 		height: 100%;
 	}
 
-	.controls input,
-	.controls button {
-	}
-
 	.controls input[type='search'] {
 		position: relative;
 		width: 100%;
@@ -283,6 +279,7 @@
 
 	li.selected {
 		filter: drop-shadow(1px 2px 4px hsla(205.7, 63.6%, 30.8%, 0.1));
+		transform: var(--safari-fix);
 		-webkit-transform: var(--safari-fix);
 	}
 
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 2e3af6c7a7..c5f494c381 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -281,14 +281,6 @@
 				background-image: url(http://github.com/$lib/icons/user-dark.svg);
 			}
 		}
-
-		&.download {
-			background-image: url(http://github.com/$lib/icons/download-light.svg);
-
-			:root.dark & {
-				background-image: url(http://github.com/$lib/icons/download-dark.svg);
-			}
-		}
 	}
 
 	.icon:hover,
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index e6945d75a3..1223f99b5d 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -12,6 +12,7 @@
 
 	<figure>
 		<enhanced:img
+			class="collage"
 			src="http://github.com/summit.png?w=800;1200;2000;2800;4400"
 			alt="Photos by Marcel Cutts from the 2022 Svelte Summit in Stockholm"
 		/>
@@ -40,7 +41,7 @@
 		}
 	}
 
-	img {
+	.collage {
 		width: 100%;
 		height: auto;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Companies.svelte b/apps/svelte.dev/src/routes/_home/Companies.svelte
index 03b9c2261a..a64e4a074c 100644
--- a/apps/svelte.dev/src/routes/_home/Companies.svelte
+++ b/apps/svelte.dev/src/routes/_home/Companies.svelte
@@ -1,21 +1,21 @@
 <div class="companies">
 	<div class="wing">
 		<div class="logos">
-			<enhanced:img src="http://github.com/companies/mullvad.svg" alt="Mullvad logo" />
-			<enhanced:img src="http://github.com/companies/stack-overflow.svg" alt="Stack Overflow logo" />
-			<enhanced:img src="http://github.com/companies/yelp.svg" alt="Yelp logo" />
-			<enhanced:img src="http://github.com/companies/square.svg" alt="Square logo" />
-			<enhanced:img src="http://github.com/companies/apple.svg" alt="Apple logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/mullvad.svg" alt="Mullvad logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/stack-overflow.svg" alt="Stack Overflow logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/yelp.svg" alt="Yelp logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/square.svg" alt="Square logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/apple.svg" alt="Apple logo" />
 		</div>
 	</div>
 	<h2>used by companies you’ve heard of</h2>
 	<div class="wing">
 		<div class="logos">
-			<enhanced:img src="http://github.com/companies/spotify.svg" alt="Spotify logo" />
-			<enhanced:img src="http://github.com/companies/nyt.svg" alt="New York Times logo" />
-			<enhanced:img src="http://github.com/companies/ikea.svg" alt="Ikea logo" />
-			<enhanced:img src="http://github.com/companies/decathlon.svg" alt="Decathlon logo" />
-			<enhanced:img src="http://github.com/companies/1password.svg" alt="1password logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/spotify.svg" alt="Spotify logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/nyt.svg" alt="New York Times logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/ikea.svg" alt="Ikea logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/decathlon.svg" alt="Decathlon logo" />
+			<enhanced:img class="logo" src="http://github.com/companies/1password.svg" alt="1password logo" />
 		</div>
 	</div>
 </div>
@@ -53,7 +53,7 @@
 		gap: 4rem;
 		opacity: 0.5;
 
-		img {
+		.logo {
 			height: 100%;
 			width: auto;
 		}
diff --git a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
index 5fcf90bb22..ecb9a55954 100644
--- a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
+++ b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
@@ -98,6 +98,7 @@
 		background: no-repeat;
 		background-size: auto 102%;
 		filter: grayscale(1) opacity(0.7);
+		transform: var(--safari-fix);
 		-webkit-transform: var(--safari-fix);
 		order: calc((var(--columns) * (var(--row) - 1)) + var(--column));
 
diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 8968ea0c2b..96a4802c76 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -132,6 +132,7 @@
 			object-fit: contain;
 			border-radius: var(--sk-border-radius);
 			transition: filter 0.2s;
+			transform: var(--safari-fix);
 			-webkit-transform: var(--safari-fix);
 
 			@media all and not (hover: none) {
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index c338b6caa8..4d9e6f0602 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -141,7 +141,9 @@
 			background-color: var(--sk-bg-2);
 			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
 			text-decoration: none;
+			transform: var(--safari-fix);
 			-webkit-transform: var(--safari-fix);
+
 			h2 {
 				text-decoration: underline;
 			}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index d7cbda89aa..af809395a3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -170,6 +170,7 @@
 	let a = $derived(create_files(data.exercise.a));
 	let b = $derived(create_files({ ...data.exercise.a, ...data.exercise.b }));
 
+	// svelte-ignore state_referenced_locally
 	const workspace = new Workspace(Object.values(a), {
 		initial: data.exercise.focus,
 		onupdate(file) {
@@ -180,6 +181,7 @@
 		}
 	});
 
+	// svelte-ignore state_referenced_locally
 	solution.set(b);
 
 	// for the things we can't do with media queries
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 7e6c5decf7..866c47137e 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -35,6 +35,7 @@
 		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
 		z-index: 999;
+		transform: var(--safari-fix);
 		-webkit-transform: var(--safari-fix);
 		will-change: opacity;
 

From 0ee15d101c52de127dbd5171a32a24df0b986b9a Mon Sep 17 00:00:00 2001
From: Dani Sandoval <accounts@dreamindani.com>
Date: Wed, 2 Apr 2025 16:51:17 -0600
Subject: [PATCH 361/453] docs: "What's new in Svelte" April newsletter (#1236)

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...25-04-01-whats-new-in-svelte-april-2025.md | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-04-01-whats-new-in-svelte-april-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-04-01-whats-new-in-svelte-april-2025.md b/apps/svelte.dev/content/blog/2025-04-01-whats-new-in-svelte-april-2025.md
new file mode 100644
index 0000000000..1de8218fed
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-04-01-whats-new-in-svelte-april-2025.md
@@ -0,0 +1,96 @@
+---
+title: "What's new in Svelte: April 2025"
+description: 'Writable $derived statements, async reroute and better request event access'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+With a couple minor releases of SvelteKit in the last month and a few more from Svelte itself, there's a lot to be excited about this month. From new helper functions to new configuration options, we've got a lot to cover...
+
+So let's dive in!
+
+## What's new in Svelte
+
+- The new `idPrefix` option for `render` makes client-side ID generation more reliable in the rare cases that multiple Svelte runtimes exist on a page (**5.22.0**, [Docs](https://svelte.dev/docs/svelte/svelte-server#render), [#15428](https://github.com/sveltejs/svelte/pull/15428))
+- State created in deriveds/effects can now be written/read locally without self-invalidation - reducing the number of "unsafe read"s significantly (**5.24.0**, [#15553](https://github.com/sveltejs/svelte/pull/15553))
+- Derived statements are now writable (**5.25.0/5.25.2**, [Docs](https://svelte.dev/docs/svelte/$derived#Overriding-derived-values), [#15570](https://github.com/sveltejs/svelte/pull/15570) and [#15581](https://github.com/sveltejs/svelte/pull/15581))
+- The Svelte CLI also got an upgrade to its code generation for more intuitive formatting (**0.7.0**, [#380](https://github.com/sveltejs/cli/pull/380))
+- `eslint-plugin-svelte` v3 has been released. The main update is improved support for Svelte 5. Check out the [CHANGELOG](https://github.com/sveltejs/eslint-plugin-svelte/releases) for more details.
+
+There were also quite a few [fixes](https://github.com/sveltejs/language-tools/releases/tag/extensions-109.5.3) to the language tools earlier in the month - so be sure to keep your plugins up to date!
+
+## What's new in SvelteKit
+
+- `reroute` can now be called async - with an option to `fetch` if you need to pass along cookies or other request context (**2.18.0/2.19.0**, [Docs](https://svelte.dev/docs/kit/@sveltejs-kit#Reroute), [#13520](https://github.com/sveltejs/kit/pull/13520) and [#13549](https://github.com/sveltejs/kit/pull/13549))
+- The new `normalizeUrl` helper provides people a way to normalize a raw URL that could contain SvelteKit-internal data (**2.18.0**, [Docs](https://svelte.dev/docs/kit/@sveltejs-kit#normalizeUrl), [#13539](https://github.com/sveltejs/kit/pull/13539))
+- `getRequestEvent` is a new function in `$app/server` that returns the current `RequestEvent` (**2.20.0**, [Docs](https://svelte.dev/docs/kit/$app-server#getRequestEvent), [#13582](https://github.com/sveltejs/kit/pull/13582))
+- Updates to the `cloudflare-adapter` brings Wrangler 4 support, improved `_headers` and `_redirects` files, and support for specifically building for Cloudflare Workers Static Assets (**5.1.0-7.0.0**, [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/adapter-cloudflare/CHANGELOG.md))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Fusion](https://github.com/0x2E/fusion) is a lightweight, self-hosted friendly RSS aggregator and reader
+- [Brooks’ Law simulator](https://www.alci.dev/en/tools/brooks-law-simulator) visualizes how communication complexity grows as team size grows
+- [ai-chatbot-svelte](https://github.com/vercel/ai-chatbot-svelte) is a full-featured, hackable SvelteKit AI chatbot built by Vercel
+- [raymarching-webgpu](https://github.com/Hugo-Dz/raymarching-webgpu) is a ray marching implementation using WebGPU and Svelte 5, shaders written in WGSL
+- [Eurlexa](https://www.eurlexa.com/) lets you access and search EU regulations and directives instantly
+- [Lars](https://www.wsj.com/personal-finance/taxes/taxes-tax-season-ai-chatbot-lars-ebf9b410?st=hk828B) is the Wall Street Journal's AI Tax Bot - built with Svelte and embedded into a React frontend
+- [RT](https://github.com/Kyagara/rt/) is a lightweight, ad-free Twitch frontend built with Tauri, Rust & SvelteKit
+- [Atom Clicker](https://github.com/Ayfri/Atom-Clicker-Svelte) is an engaging incremental game where you'll build your own atomic empire
+- [peasy](https://peasy.so/) provides modern web analytics without the clutter
+- [svelte-lexical](https://svelte-lexical.vercel.app/) is a rich-text editor for Svelte and SvelteKit
+- [sveltekit-epub-writer](https://github.com/doolijb/sveltekit-epub-writer) is an ergonomic book editor that lets you export to EPUB in one click
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Why re-renders hurt performance and how you can fix them in Svelte 5](https://www.youtube.com/watch?v=bAAwVpvdy_g) by Stanislav Khromov
+- [Runes and Global state: do's and don'ts](https://mainmatter.com/blog/2025/03/11/global-state-in-svelte-5/) by Paolo Ricciuti
+- [Learn How To Make Interactive 3D Apps With Svelte And Threlte](https://www.youtube.com/watch?v=tfq8OrvORYE) by Joy of Code
+- [Svelte London - March 2025](https://www.youtube.com/watch?v=R4FA-W1QCa0) featuring:
+  - SvelteKit and SST by Andrico Karoulla
+  - Mythbusters! Svelte Ecosystem Edition by Willow (GHOST)
+
+_This Week in Svelte_
+
+- [Ep. 96](https://www.youtube.com/watch?v=HnpvpWTcaVI) — durable objects
+- [Ep. 97](https://www.youtube.com/watch?v=RaQLAiEP7sc) — stick to botton
+- [Ep. 97](https://www.youtube.com/watch?v=0YH1RraeXFU) — Changelog
+- [Ep. 99](https://www.youtube.com/watch?v=Wzd_FG-rymQ) — Custom Select
+
+_To Watch_
+
+- [Deploying Svelte Kit on DigitalOcean App Platform (awesome Vercel alternative) + Tailwind](https://www.youtube.com/watch?v=9FrC0kTTw64) by Elans Builds
+
+_To Read_
+
+- [Recursive Svelte Components](https://scriptraccoon.dev/blog/recursive-svelte-components) by Martin Brandenburg
+- [Building a Real-time Dashboard with FastAPI and Svelte](https://testdriven.io/blog/fastapi-svelte/) by Amir Tadrisi Amir Tadrisi
+- [A short guide to Async Components in Svelte 5](https://dev.to/digitaldrreamer/a-short-guide-to-async-components-in-svelte-5-57l4) by Abdullah Bashir
+- [SvelteKit 5: How to make code-based router, instead of file-based router](https://dev.to/maxcore/sveltekit-5-how-to-make-code-based-router-instead-of-file-based-router-1jf) by Max Core
+- [Integrating tRPC with SvelteKit](https://dev.to/wobsoriano/integrating-trpc-with-sveltekit-4271) by Robert Soriano
+
+### Libraries, Tools & Components
+
+- [Bun has added](https://github.com/oven-sh/bun/pull/17735) official support for Svelte as a frontend framework for their bundler
+- [Skeleton v3.0](https://www.skeleton.dev/) is now available - including Svelte 5 support, Tailwind 4 and a more modular structure
+- [SaapsUI](https://github.com/sappsdev/sappsui) is a comprehensive Svelte component library designed for creating responsive, accessible, and beautiful user interfaces with minimal effort
+- [SVAR Svelte v2.1](https://svar.dev/svelte/) has added new UI components - including DataGrid and Gantt charts
+- [cnblocks](https://github.com/SikandarJODD/cnblocks) provides 50+ UI & Marketing blocks using Svelte 5, Tailwind CSS v4 and Shadcn Svelte
+- [Edra](https://www.reddit.com/r/sveltejs/comments/1jdyyjv/shadeditor_evolves_to_edra_a_headless/) is a Headless & ShadCN-Powered Rich Text Editor for Svelte Developers
+- [Paraglide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/changelog#paraglide-js-20-), the i18n library for supporting multiple languages in your Svelte app, release their 2.0 version
+- [oRPC](https://github.com/unnoq/orpc) helps you build type-safe APIs for Svelte and TanStack Svelte Query
+- [Sveltepress](https://github.com/SveltePress/sveltepress) is a content centered site build tool, built on top of Sveltekit
+- [Konva.js](https://konvajs.org/docs/svelte/index.html) is a declarative 2D Canvas for Svelte apps
+- [Svelte Inspect Value](https://inspect.eirik.space/) is a "JSON tree"-like value inspector
+- [Svelte 5 Snippets](https://marketplace.visualstudio.com/items?itemName=thonymg.svelte-5-kit-snippets) offers reusable code templates to accelerate development and ensure consistent coding practices in VS Code
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

From 41b1bd74b5d535835e517c2d9f02d51f2a3f0b50 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Apr 2025 18:06:23 -0400
Subject: [PATCH 362/453] download packages directly from npm (#1248)

* WIP

* fix

* tidy up

* tidy up

* put npm stuff in separate file

* tidy up

* remove ./

* tidy up

* fix

* lint

* fix

* always use same svelte version

* fix pkg.pr.new versions

* use jsDelivr for more stuff

* remove packages_url stuff

* lint

* gah

* fix `local`

* lint

* gah shut up typescript

* remove unused stuff

* tidy up

* simplify some stuff

* unused

* only create tutorial bundler once

* lint

* tidy up

* unused

* move packages/editor into packages/repl, where it belongs

* lint

* DRY out

* less reliance on globals

* simplify

* tighten up

* tidy up

* fix

* bundler already discards stale results

* drive-by fix

* migrate component

* get rid of `$bundle` store

* tidy up

* better status message

* lint

* reinstate imports array

* lint

* use jsDelivr API instead of fetching package.json

* better error messages

* use onversion mechanism

* remove

* use raw state

* fix

* explanatory comment
---
 apps/svelte.dev/package.json                  |   1 -
 .../tutorial/adapters/rollup/index.svelte.ts  |  27 +-
 .../adapters/webcontainer/index.svelte.ts     |   2 +-
 apps/svelte.dev/src/lib/tutorial/index.d.ts   |   2 +-
 .../(authed)/playground/[id]/+page.svelte     |  29 +-
 .../playground/[id]/AppControls.svelte        |   3 +-
 .../playground/[id]/embed/+page.svelte        |  23 +-
 .../routes/tutorial/[...slug]/+page.svelte    |   4 +-
 .../routes/tutorial/[...slug]/Controls.svelte |   2 +-
 .../tutorial/[...slug]/ImageViewer.svelte     |   2 +-
 .../routes/tutorial/[...slug]/Output.svelte   |   2 +-
 .../tutorial/[...slug]/OutputRollup.svelte    |   9 +-
 .../tutorial/[...slug]/adapter.svelte.ts      |   6 +-
 .../tutorial/[...slug]/filetree/File.svelte   |   2 +-
 .../[...slug]/filetree/Filetree.svelte        |   2 +-
 .../tutorial/[...slug]/filetree/Folder.svelte |   2 +-
 .../tutorial/[...slug]/filetree/context.js    |   6 +-
 .../routes/tutorial/[...slug]/state.svelte.ts |   2 +-
 packages/editor/.gitignore                    |  22 -
 packages/editor/.npmrc                        |   1 -
 packages/editor/.prettierignore               |   4 -
 packages/editor/.prettierrc                   |   8 -
 packages/editor/README.md                     |  58 --
 packages/editor/package.json                  |  69 --
 packages/editor/src/app.d.ts                  |  13 -
 packages/editor/src/app.html                  |  12 -
 packages/editor/src/lib/index.ts              |   2 -
 packages/editor/src/routes/+page.svelte       |   3 -
 packages/editor/static/favicon.png            | Bin 1571 -> 0 bytes
 packages/editor/svelte.config.js              |  18 -
 packages/editor/tsconfig.json                 |  15 -
 packages/editor/vite.config.ts                |   6 -
 packages/repl/package.json                    |  18 +-
 packages/repl/src/lib/Bundler.svelte.ts       |  59 ++
 packages/repl/src/lib/Bundler.ts              |  80 ---
 .../index.ts => repl/src/lib/Compiler.ts}     |   4 +-
 .../lib => repl/src/lib/Editor}/Editor.svelte |   2 +-
 .../src/lib/Editor}/close-dark.svg            |   0
 .../src/lib/Editor}/close-light.svg           |   0
 .../src/lib/Editor}/codemirror.css            |   0
 .../src/lib/Input/ComponentSelector.svelte    |   2 +-
 packages/repl/src/lib/Output/AstView.svelte   |   2 +-
 .../src/lib/Output/CompilerOptions.svelte     |   2 +-
 packages/repl/src/lib/Output/Output.svelte    |   9 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte  |   1 -
 packages/repl/src/lib/Output/Viewer.svelte    | 150 +++--
 packages/repl/src/lib/Repl.svelte             |  36 +-
 .../src/lib/Workspace.svelte.ts               |   4 +-
 packages/repl/src/lib/index.ts                |   1 -
 packages/repl/src/lib/public.d.ts             |  12 +
 packages/{editor => repl}/src/lib/theme.ts    |   0
 packages/repl/src/lib/types.d.ts              |  19 +-
 .../repl/src/lib/workers/bundler/index.ts     | 636 +++++++-----------
 .../src/lib/workers/compiler/index.ts}        |  76 +--
 packages/repl/src/lib/workers/constants.ts    |   2 +
 packages/repl/src/lib/workers/npm.ts          | 221 ++++++
 packages/repl/src/lib/workers/workers.d.ts    |   6 +-
 pnpm-lock.yaml                                | 111 +--
 58 files changed, 730 insertions(+), 1080 deletions(-)
 delete mode 100644 packages/editor/.gitignore
 delete mode 100644 packages/editor/.npmrc
 delete mode 100644 packages/editor/.prettierignore
 delete mode 100644 packages/editor/.prettierrc
 delete mode 100644 packages/editor/README.md
 delete mode 100644 packages/editor/package.json
 delete mode 100644 packages/editor/src/app.d.ts
 delete mode 100644 packages/editor/src/app.html
 delete mode 100644 packages/editor/src/lib/index.ts
 delete mode 100644 packages/editor/src/routes/+page.svelte
 delete mode 100644 packages/editor/static/favicon.png
 delete mode 100644 packages/editor/svelte.config.js
 delete mode 100644 packages/editor/tsconfig.json
 delete mode 100644 packages/editor/vite.config.ts
 create mode 100644 packages/repl/src/lib/Bundler.svelte.ts
 delete mode 100644 packages/repl/src/lib/Bundler.ts
 rename packages/{editor/src/lib/compile-worker/index.ts => repl/src/lib/Compiler.ts} (90%)
 rename packages/{editor/src/lib => repl/src/lib/Editor}/Editor.svelte (97%)
 rename packages/{editor/src/lib => repl/src/lib/Editor}/close-dark.svg (100%)
 rename packages/{editor/src/lib => repl/src/lib/Editor}/close-light.svg (100%)
 rename packages/{editor/src/lib => repl/src/lib/Editor}/codemirror.css (100%)
 rename packages/{editor => repl}/src/lib/Workspace.svelte.ts (99%)
 create mode 100644 packages/repl/src/lib/public.d.ts
 rename packages/{editor => repl}/src/lib/theme.ts (100%)
 rename packages/{editor/src/lib/compile-worker/worker.ts => repl/src/lib/workers/compiler/index.ts} (52%)
 create mode 100644 packages/repl/src/lib/workers/constants.ts
 create mode 100644 packages/repl/src/lib/workers/npm.ts

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 5efe141419..d78ba2ba66 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -38,7 +38,6 @@
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
 		"do-not-zip": "^1.0.0",
-		"editor": "workspace:*",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 53e59cfd97..6346a241a8 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -2,44 +2,31 @@ import Bundler from '@sveltejs/repl/bundler';
 // @ts-ignore package exports don't have types
 import * as yootils from 'yootils';
 import type { Adapter } from '$lib/tutorial';
-import type { File, Item } from 'editor';
+import type { File, Item } from '@sveltejs/repl/workspace';
 
-/** Rollup bundler singleton */
-let bundler: Bundler;
+let done = false;
 
 export const state = new (class RollupState {
 	progress = $state.raw({ value: 0, text: 'initialising' });
-	bundle = $state.raw<any>(null);
-})();
-
-/**
- * @returns {Promise<import('$lib/tutorial').Adapter>}
- */
-export async function create(): Promise<Adapter> {
-	bundler?.destroy();
-
-	state.progress = { value: 0, text: 'loading files' };
-
-	let done = false;
-
 	bundler = new Bundler({
-		packages_url: 'https://unpkg.com/',
 		svelte_version: 'latest',
-		onstatus(val) {
+		onstatus: (val) => {
 			if (!done && val === null) {
 				done = true;
-				state.progress = { value: 1, text: 'ready' };
+				this.progress = { value: 1, text: 'ready' };
 			}
 		}
 	});
+})();
 
+export async function create(): Promise<Adapter> {
 	state.progress = { value: 0.5, text: 'loading svelte compiler' };
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_files: Item[] = [];
 
 	async function compile() {
-		state.bundle = await bundler.bundle(
+		state.bundler.bundle(
 			current_files
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
index 6580c581f0..7682697847 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
@@ -7,7 +7,7 @@ import { get_depth } from '../../../utils/path.js';
 import { escape_html } from '../../../utils/escape.js';
 import { ready } from '../common/index.js';
 import type { Adapter } from '$lib/tutorial';
-import type { Item, File } from 'editor';
+import type { Item, File } from '@sveltejs/repl/workspace';
 
 const converter = new AnsiToHtml({
 	fg: 'var(--sk-fg-3)'
diff --git a/apps/svelte.dev/src/lib/tutorial/index.d.ts b/apps/svelte.dev/src/lib/tutorial/index.d.ts
index efc4f9a43c..487d7c9c2c 100644
--- a/apps/svelte.dev/src/lib/tutorial/index.d.ts
+++ b/apps/svelte.dev/src/lib/tutorial/index.d.ts
@@ -1,5 +1,5 @@
 import type { Writable } from 'svelte/store';
-import type { File, Directory, Item } from 'editor';
+import type { File, Directory, Item } from '@sveltejs/repl/workspace';
 
 export interface Adapter {
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 00579ed7a0..187436fd8f 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -10,7 +10,7 @@
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
 	import { page } from '$app/state';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	let { data } = $props();
 
@@ -23,30 +23,11 @@
 
 	// svelte-ignore non_reactive_update
 	let version = page.url.searchParams.get('version') || 'latest';
-	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
 
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
 	const can_escape = browser && !page.url.hash;
 
-	if (version !== 'local' && !is_pr_or_commit_version) {
-		$effect(() => {
-			fetch(`https://unpkg.com/svelte@${version}/package.json`)
-				.then((r) => r.json())
-				.then((pkg) => {
-					if (pkg.version !== version) {
-						version = pkg.version;
-
-						let url = `/playground/${data.gist.id}?version=${version}`;
-						if (location.hash) {
-							url += location.hash;
-						}
-						replaceState(url, {});
-					}
-				});
-		});
-	}
-
 	afterNavigate(() => {
 		name = data.gist.name;
 		set_files();
@@ -244,6 +225,14 @@
 				{onchange}
 				{download}
 				previewTheme={theme.current}
+				onversion={(v) => {
+					if (version === (version = v)) return;
+
+					const url = new URL(location.href);
+					url.searchParams.set('version', v);
+
+					replaceState(url, {});
+				}}
 			/>
 		</div>
 	{/if}
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index c5f494c381..918b34fb32 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -7,9 +7,8 @@
 	import type { Gist, User } from '$lib/db/types';
 	import { browser } from '$app/environment';
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
-	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 	import type { Repl } from '@sveltejs/repl';
 
 	interface Props {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index ab843d9ad3..0edfbedc7e 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -6,26 +6,13 @@
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
 	import { decode_and_decompress_text } from '../gzip.js';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	let { data } = $props();
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
 	let version = page.url.searchParams.get('version') || 'latest';
-	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
-
-	if (version !== 'local' && !is_pr_or_commit_version) {
-		$effect(() => {
-			fetch(`https://unpkg.com/svelte@${version}/package.json`)
-				.then((r) => r.json())
-				.then((pkg) => {
-					if (pkg.version !== data.version) {
-						replaceState(`/playground/${data.gist.id}/embed?version=${pkg.version}`, {});
-					}
-				});
-		});
-	}
 
 	// TODO make this munging unnecessary
 	function munge(data: any): File {
@@ -85,6 +72,14 @@
 			injectedJS={mapbox_setup}
 			previewTheme={theme.current}
 			embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
+			onversion={(v) => {
+				if (version === v) return;
+
+				const url = new URL(location.href);
+				url.searchParams.set('version', v);
+
+				replaceState(url, {});
+			}}
 		/>
 	{/if}
 </div>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index af809395a3..ff5bdb9a5c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -2,7 +2,7 @@
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import * as adapter from './adapter.svelte';
-	import { Editor, Workspace } from 'editor';
+	import { Workspace, type Item } from '@sveltejs/repl/workspace';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import ImageViewer from './ImageViewer.svelte';
@@ -14,7 +14,7 @@
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/state';
 	import Controls from './Controls.svelte';
-	import type { Item } from 'editor';
+	import Editor from '@sveltejs/repl/editor';
 	import type { Snapshot } from './$types.js';
 
 	interface Props {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 003db02d6e..a825b1d990 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -4,7 +4,7 @@
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Checkbox, Icon, Toolbox } from '@sveltejs/site-kit/components';
-	import type { Workspace } from 'editor';
+	import type { Workspace } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		index: PartStub[];
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
index 8d69298a05..65c65c8a3f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-	/** @type {import('editor').File | null} */
+	/** @type {import('@sveltejs/repl/workspace').File | null} */
 	export let selected;
 
 	const image_types = new Map([
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index f9fccd8e60..72a9bf8c2f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -11,7 +11,7 @@
 	import Loading from './Loading.svelte';
 	import { adapter_state, subscribe, reset } from './adapter.svelte';
 	import type { Exercise } from '$lib/tutorial';
-	import type { Workspace } from 'editor';
+	import type { Workspace } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		exercise: Exercise;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 71992c3d0a..5a3da4434f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	// @ts-expect-error TODO types
 	import Viewer from '@sveltejs/repl/viewer';
-	// @ts-expect-error TODO types
 	import Console, { type Log } from '@sveltejs/repl/console';
 	import { theme } from '@sveltejs/site-kit/state';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { adapter_state, update } from './adapter.svelte';
-	import { toStore } from 'svelte/store';
-
-	const bundle = toStore(() => adapter_state.bundle);
 
 	let terminal_visible = $state(false);
 	let logs = $state<Log[]>([]);
@@ -36,9 +31,11 @@
 			relaxed
 			can_escape
 			onLog={(l: Log[]) => (logs = l)}
-			{bundle}
+			bundler={adapter_state.bundler}
 			theme={theme.current}
 			injectedCSS="@import 'http://github.com/tutorial/shared.css';"
+			error={null}
+			status={null}
 		/>
 	{/if}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
index 350f8c039e..a959be1c52 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
@@ -3,7 +3,7 @@ import { page } from '$app/stores';
 import type { state as WCState } from '$lib/tutorial/adapters/webcontainer/index.svelte';
 import type { state as RollupState } from '$lib/tutorial/adapters/rollup/index.svelte';
 import type { Adapter } from '$lib/tutorial';
-import type { File, Item } from 'editor';
+import type { File, Item } from '@sveltejs/repl/workspace';
 import { needs_webcontainers } from './shared';
 
 let initial_load = true;
@@ -21,8 +21,8 @@ export const adapter_state = new (class {
 	/** Logs from the web container instance. Irrelevant for Rollup */
 	logs = $derived(wc_state.logs || []);
 
-	/** Result of a rollup compile. Irrelevant for web containers */
-	bundle = $derived(rollup_state.bundle);
+	/** Irrelevant for web containers */
+	bundler = $derived(rollup_state.bundler);
 
 	/** Startup progress */
 	progress = $derived(
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index 9bb3067204..5da9f62bc1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -4,7 +4,7 @@
 	import file_icon from '$lib/icons/file.svg';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		file: File;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index a82ff49a99..d4cfe306e9 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -6,7 +6,7 @@
 	import { solution } from '../state.svelte';
 	import { afterNavigate } from '$app/navigation';
 	import type { Exercise } from '$lib/tutorial';
-	import type { Workspace, Item } from 'editor';
+	import type { Workspace, Item } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		exercise: Exercise;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index 9495998d21..c16bd233a5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -8,7 +8,7 @@
 	import folder_open from '$lib/icons/folder-open.svg';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
-	import type { Directory, File as IFile, Item as IItem } from 'editor';
+	import type { Directory, File as IFile, Item as IItem } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		directory: Directory;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
index d4e7c578c3..2462c83a48 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
@@ -4,10 +4,10 @@ import { setContext, getContext } from 'svelte';
  * @typedef {{
  *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
- *   rename: (stub: import('editor').Item, name: string) => Promise<void>;
- *   remove: (stub: import('editor').Item) => Promise<void>;
+ *   rename: (stub: import('@sveltejs/repl/workspace').Item, name: string) => Promise<void>;
+ *   remove: (stub: import('@sveltejs/repl/workspace').Item) => Promise<void>;
  *   select: (name: string) => void;
- *   workspace: import('editor').Workspace
+ *   workspace: import('@sveltejs/repl/workspace').Workspace
  * }} FileTreeContext
  */
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
index cd0ae03614..c2eaf7f1b7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
-import type { Item } from 'editor';
+import type { Item } from '@sveltejs/repl/workspace';
 
 export const solution = writable({} as Record<string, Item>);
diff --git a/packages/editor/.gitignore b/packages/editor/.gitignore
deleted file mode 100644
index 715b548f7b..0000000000
--- a/packages/editor/.gitignore
+++ /dev/null
@@ -1,22 +0,0 @@
-node_modules
-
-# Output
-.output
-.vercel
-/.svelte-kit
-/build
-/dist
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Env
-.env
-.env.*
-!.env.example
-!.env.test
-
-# Vite
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
diff --git a/packages/editor/.npmrc b/packages/editor/.npmrc
deleted file mode 100644
index b6f27f1359..0000000000
--- a/packages/editor/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-engine-strict=true
diff --git a/packages/editor/.prettierignore b/packages/editor/.prettierignore
deleted file mode 100644
index ab78a95ddd..0000000000
--- a/packages/editor/.prettierignore
+++ /dev/null
@@ -1,4 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
diff --git a/packages/editor/.prettierrc b/packages/editor/.prettierrc
deleted file mode 100644
index 95730232b6..0000000000
--- a/packages/editor/.prettierrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
diff --git a/packages/editor/README.md b/packages/editor/README.md
deleted file mode 100644
index 69f4875945..0000000000
--- a/packages/editor/README.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# create-svelte
-
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
diff --git a/packages/editor/package.json b/packages/editor/package.json
deleted file mode 100644
index 17651a37c3..0000000000
--- a/packages/editor/package.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-	"name": "editor",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check .",
-		"format": "prettier --write .",
-		"prepare": "svelte-kit sync"
-	},
-	"exports": {
-		".": {
-			"types": "./src/lib/index.ts",
-			"svelte": "./src/lib/index.ts"
-		}
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"src",
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@codemirror/autocomplete": "^6.9.0",
-		"@codemirror/commands": "^6.2.5",
-		"@codemirror/lang-css": "^6.2.1",
-		"@codemirror/lang-html": "^6.4.6",
-		"@codemirror/lang-javascript": "^6.2.1",
-		"@codemirror/language": "^6.10.3",
-		"@codemirror/lint": "^6.8.2",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.5.0",
-		"@codemirror/view": "^6.35.3",
-		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@replit/codemirror-vim": "^6.0.14",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.20.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/repl": "workspace:*",
-		"@sveltejs/site-kit": "workspace:*",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"codemirror": "^6.0.1",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.3.2",
-		"publint": "^0.2.12",
-		"svelte": "^5.23.0",
-		"svelte-check": "^4.1.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.11"
-	},
-	"type": "module",
-	"dependencies": {
-		"@lezer/highlight": "^1.2.1",
-		"esm-env": "^1.0.0",
-		"tarparser": "^0.0.4"
-	}
-}
diff --git a/packages/editor/src/app.d.ts b/packages/editor/src/app.d.ts
deleted file mode 100644
index 743f07b2e5..0000000000
--- a/packages/editor/src/app.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};
diff --git a/packages/editor/src/app.html b/packages/editor/src/app.html
deleted file mode 100644
index f22aeaad5e..0000000000
--- a/packages/editor/src/app.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="http://github.com/%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
diff --git a/packages/editor/src/lib/index.ts b/packages/editor/src/lib/index.ts
deleted file mode 100644
index 962edd774b..0000000000
--- a/packages/editor/src/lib/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Editor } from './Editor.svelte';
-export * from './Workspace.svelte';
diff --git a/packages/editor/src/routes/+page.svelte b/packages/editor/src/routes/+page.svelte
deleted file mode 100644
index 0a45b69f09..0000000000
--- a/packages/editor/src/routes/+page.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev/">kit.svelte.dev</a> to read the documentation</p>
diff --git a/packages/editor/static/favicon.png b/packages/editor/static/favicon.png
deleted file mode 100644
index 825b9e65af7c104cfb07089bb28659393b4f2097..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1571
zcmV+;2Hg3HP)<h;3K|Lk000e1NJLTq004jh004jp1ONa4X*a1r00001b5ch_0Itp)
z=>Px)-AP12RCwC$UE6KzI1p6{F2N<Fgp}YCTtZ542`(WexCEDw|A=A)1A-t30wEX>
z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z
zg<YDbY-gN-C@$NXr>j#$x=!~7LGqHW?IO8+*oE1MyDp!G=L<gz=E*n%PA*mnuaD-%
zU>0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH
z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;|
zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f
z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb
zghxQU22N}F51}^yfDSt7<V*0Nvi!iKPY@n`1~$se=LwHTOE7`*@+};uU_gT$1{Nib
z9&~5~nc4J(EWez%_f0Ty7T;wB{7s*oNO=9p8(o}N*_V>86oMTc!W&V;d?76)9KXX1
z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFN<oPlV?qzG@=jl`t@|E8zV8
zJ4}It4e%+dFPWw16u{sAX42jlFu{_e!AKZE75iV2&Q7>gpIod~R{>@#@5x9zJK<vg
zI0+@80NMa{gtNoRhsR-w%piFI3d-5xrN)R}H!WtK=Gp%dC5(a`Q0V4_vS-mj<((Z~
zbV*PucDY#zFVglY>EHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe
ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2`
zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F
z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL
z@iUO?SBBG-0cQuo+an4TsL<j(YStU%^TNkjEqg808>y-g-x;8P4UVwk|D8{W@U1Zi
z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y
zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA
zI8U?CWdY@}cRq6{5~y+<zzg4N+!Mudx;=&$zSp?cjRmyF-+404b-P66DA17$<$H}=
z7$P4)QXt>)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!<qA9l$G~6DRxiCy7Vo
zOl^oK!S3XbayWz&p33NSw$lxR1fm)O*rCE0^ZNmk0wnax!!?%g599+O37!666~F(y
z5fq?5T*Fm{^%YR^PiM%z#%x`fAC+;C&`X5JXN_40SieIEXoaUU=*}=c0OC7@a*rFE
z3xr3yyFB~zRl(lNY&B@$Fia%81M!xeIuTYNz!Dz6eBKONjL<@dJdT$H?ShKl6$p=F
ze!fdgzelJI&n`Hk9f}>BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6
zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6
zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`<ao$!3dCkTn3@aF0ny6VrToO6qA
z-~&2=w&2nT&o5u>**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5
zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH<v&YL5FIcieFm_zQ2O
VHuiSbmk|H}002ovPDHLkV1f%e^4kCa

diff --git a/packages/editor/svelte.config.js b/packages/editor/svelte.config.js
deleted file mode 100644
index 4a82086e24..0000000000
--- a/packages/editor/svelte.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
-};
-
-export default config;
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
deleted file mode 100644
index c4a014bac3..0000000000
--- a/packages/editor/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"module": "preserve",
-		"moduleResolution": "bundler"
-	}
-}
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
deleted file mode 100644
index bbf8c7da43..0000000000
--- a/packages/editor/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 500b9c3758..6a40fe14de 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -24,16 +24,28 @@
 	"homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/repl/#readme",
 	"exports": {
 		".": {
+			"types": "./src/lib/public.d.ts",
 			"svelte": "./src/lib/index.ts",
 			"default": "./src/lib/index.ts"
 		},
 		"./bundler": {
-			"default": "./src/lib/Bundler.ts"
+			"types": "./src/lib/Bundler.svelte.ts",
+			"default": "./src/lib/Bundler.svelte.ts"
+		},
+		"./editor": {
+			"types": "./src/lib/Editor/Editor.svelte",
+			"svelte": "./src/lib/Editor/Editor.svelte"
 		},
 		"./viewer": {
+			"types": "./src/lib/Output/Viewer.svelte",
 			"svelte": "./src/lib/Output/Viewer.svelte"
 		},
+		"./workspace": {
+			"types": "./src/lib/Workspace.svelte.ts",
+			"svelte": "./src/lib/Workspace.svelte.ts"
+		},
 		"./console": {
+			"types": "./src/lib/Output/console/Console.svelte",
 			"svelte": "./src/lib/Output/console/Console.svelte"
 		}
 	},
@@ -64,6 +76,7 @@
 		"@codemirror/autocomplete": "^6.16.0",
 		"@codemirror/commands": "^6.5.0",
 		"@codemirror/lang-css": "^6.2.1",
+		"@codemirror/lang-html": "^6.4.6",
 		"@codemirror/lang-javascript": "^6.2.2",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-markdown": "^6.2.5",
@@ -72,6 +85,7 @@
 		"@codemirror/state": "^6.5.0",
 		"@codemirror/view": "^6.35.3",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
+		"@lezer/highlight": "^1.2.1",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@rich_harris/svelte-split-pane": "^2.0.0",
@@ -79,7 +93,7 @@
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/svelte-json-tree": "^2.2.1",
 		"acorn": "^8.11.3",
-		"editor": "workspace:*",
+		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",
 		"locate-character": "^3.0.0",
diff --git a/packages/repl/src/lib/Bundler.svelte.ts b/packages/repl/src/lib/Bundler.svelte.ts
new file mode 100644
index 0000000000..4a36df3724
--- /dev/null
+++ b/packages/repl/src/lib/Bundler.svelte.ts
@@ -0,0 +1,59 @@
+import type { BundleResult } from './public';
+import type { File } from './Workspace.svelte';
+
+let uid = 1;
+
+export default class Bundler {
+	#worker: Worker;
+
+	result = $state.raw<BundleResult | null>(null);
+
+	constructor({
+		svelte_version,
+		onstatus,
+		onversion,
+		onerror
+	}: {
+		svelte_version: string;
+		onstatus: (val: string | null) => void;
+		onversion?: (version: string) => void;
+		onerror?: (message: string) => void;
+	}) {
+		this.#worker = new Worker(new URL('./workers/bundler/index', import.meta.url), {
+			type: 'module'
+		});
+
+		this.#worker.onmessage = (event) => {
+			if (event.data.type === 'status') {
+				onstatus(event.data.message);
+				return;
+			}
+
+			if (event.data.type === 'version') {
+				onversion?.(event.data.message);
+				return;
+			}
+
+			if (event.data.type === 'error') {
+				onerror?.(event.data.message);
+				return;
+			}
+
+			onstatus(null);
+			this.result = event.data;
+		};
+
+		this.#worker.postMessage({ type: 'init', svelte_version });
+	}
+
+	bundle(files: File[], options: { tailwind?: boolean }) {
+		this.#worker.postMessage({
+			uid,
+			type: 'bundle',
+			files,
+			options
+		});
+
+		uid += 1;
+	}
+}
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
deleted file mode 100644
index a861c2a686..0000000000
--- a/packages/repl/src/lib/Bundler.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { BundleResult } from './workers/bundler';
-import type { BundleMessageData } from './workers/workers';
-import type { File } from 'editor';
-
-const workers = new Map();
-
-let uid = 1;
-
-export default class Bundler {
-	hash: string;
-	worker: Worker;
-	handlers: Map<number, (data: BundleMessageData) => void>;
-
-	constructor({
-		packages_url,
-		svelte_version,
-		onstatus,
-		onerror
-	}: {
-		packages_url: string;
-		svelte_version: string;
-		onstatus: (val: string | null) => void;
-		onerror?: (message: string) => void;
-	}) {
-		this.hash = `${packages_url}:${svelte_version}`;
-
-		if (!workers.has(this.hash)) {
-			const worker = new Worker(new URL('./workers/bundler/index', import.meta.url), {
-				type: 'module'
-			});
-
-			worker.postMessage({ type: 'init', packages_url, svelte_version });
-			workers.set(this.hash, worker);
-		}
-
-		this.worker = workers.get(this.hash);
-
-		this.handlers = new Map();
-
-		this.worker.addEventListener('message', (event: MessageEvent<BundleMessageData>) => {
-			const handler = this.handlers.get(event.data.uid);
-
-			if (handler) {
-				// if no handler, was meant for a different REPL
-				if (event.data.type === 'status') {
-					onstatus(event.data.message);
-					return;
-				}
-
-				if (event.data.type === 'error') {
-					onerror?.(event.data.message);
-					return;
-				}
-
-				onstatus(null);
-				handler(event.data);
-				this.handlers.delete(event.data.uid);
-			}
-		});
-	}
-
-	bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
-		return new Promise<any>((fulfil) => {
-			this.handlers.set(uid, fulfil);
-			this.worker.postMessage({
-				uid,
-				type: 'bundle',
-				files,
-				options
-			});
-
-			uid += 1;
-		});
-	}
-
-	destroy() {
-		this.worker.terminate();
-		workers.delete(this.hash);
-	}
-}
diff --git a/packages/editor/src/lib/compile-worker/index.ts b/packages/repl/src/lib/Compiler.ts
similarity index 90%
rename from packages/editor/src/lib/compile-worker/index.ts
rename to packages/repl/src/lib/Compiler.ts
index 65c6be59a0..471689d895 100644
--- a/packages/editor/src/lib/compile-worker/index.ts
+++ b/packages/repl/src/lib/Compiler.ts
@@ -1,5 +1,5 @@
 import { BROWSER } from 'esm-env';
-import type { Compiled, File } from '../Workspace.svelte';
+import type { Compiled, File } from './Workspace.svelte';
 
 const callbacks = new Map<string, Map<number, (compiled: Compiled) => void>>();
 
@@ -8,7 +8,7 @@ let worker: Worker;
 let uid = 1;
 
 if (BROWSER) {
-	worker = new Worker(new URL('./worker', import.meta.url), {
+	worker = new Worker(new URL('./workers/compiler/index', import.meta.url), {
 		type: 'module'
 	});
 
diff --git a/packages/editor/src/lib/Editor.svelte b/packages/repl/src/lib/Editor/Editor.svelte
similarity index 97%
rename from packages/editor/src/lib/Editor.svelte
rename to packages/repl/src/lib/Editor/Editor.svelte
index a017f9e8c5..fbf981f20d 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/repl/src/lib/Editor/Editor.svelte
@@ -2,7 +2,7 @@
 	import { BROWSER } from 'esm-env';
 	import { setDiagnostics } from '@codemirror/lint';
 	import { EditorView } from '@codemirror/view';
-	import { Workspace, type File } from './Workspace.svelte.js';
+	import { Workspace, type File } from '../Workspace.svelte';
 	import './codemirror.css';
 
 	interface Props {
diff --git a/packages/editor/src/lib/close-dark.svg b/packages/repl/src/lib/Editor/close-dark.svg
similarity index 100%
rename from packages/editor/src/lib/close-dark.svg
rename to packages/repl/src/lib/Editor/close-dark.svg
diff --git a/packages/editor/src/lib/close-light.svg b/packages/repl/src/lib/Editor/close-light.svg
similarity index 100%
rename from packages/editor/src/lib/close-light.svg
rename to packages/repl/src/lib/Editor/close-light.svg
diff --git a/packages/editor/src/lib/codemirror.css b/packages/repl/src/lib/Editor/codemirror.css
similarity index 100%
rename from packages/editor/src/lib/codemirror.css
rename to packages/repl/src/lib/Editor/codemirror.css
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index b7fb95b3fa..f6bb459244 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import RunesInfo from './RunesInfo.svelte';
-	import type { Workspace, File } from 'editor';
+	import type { Workspace, File } from '../Workspace.svelte';
 	import { tick } from 'svelte';
 	import { Checkbox, Toolbox } from '@sveltejs/site-kit/components';
 
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index b14d998c6f..9d9f05e29e 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -3,7 +3,7 @@
 	import Message from '../Message.svelte';
 	import AstNode from './AstNode.svelte';
 	import type { CompileResult } from 'svelte/compiler';
-	import type { Workspace } from 'editor';
+	import type { Workspace } from '../Workspace.svelte';
 
 	type Ast = CompileResult['ast'];
 
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index b67f20f4dd..4dd49ab647 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { Workspace } from 'editor';
 	import { Checkbox } from '@sveltejs/site-kit/components';
+	import type { Workspace } from '../Workspace.svelte';
 
 	let { workspace }: { workspace: Workspace } = $props();
 </script>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 008511c753..bccdfc064b 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -5,8 +5,9 @@
 	import CompilerOptions from './CompilerOptions.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import Viewer from './Viewer.svelte';
-	import { Editor, Workspace, type File } from 'editor';
-	import { tick, untrack } from 'svelte';
+	import { Workspace, type File } from '../Workspace.svelte';
+	import Editor from '../Editor/Editor.svelte';
+	import { untrack } from 'svelte';
 	import { decode, type SourceMapSegment } from '@jridgewell/sourcemap-codec';
 
 	interface Props {
@@ -279,10 +280,6 @@
 		}
 	}
 
-	div[slot] {
-		height: 100%;
-	}
-
 	.tab-content {
 		position: absolute;
 		width: 100%;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 06820ac20c..d0750694ff 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -118,7 +118,6 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: 0.5rem 0.5rem 0.5rem 1rem;
-		cursor: pointer;
 	}
 
 	.panel-body {
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 9ab087e4a3..8f973970e6 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { get_repl_context } from '../context';
 	import { BROWSER } from 'esm-env';
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import Message from '../Message.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import ReplProxy from './ReplProxy.js';
@@ -11,47 +11,63 @@
 	import srcdoc_styles from './srcdoc/styles.css?raw';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	import type { CompileError } from 'svelte/compiler';
-	import type { Bundle } from '../types';
-	import type { Writable } from 'svelte/store';
-
-	export let error: Error | null;
-	/** status by Bundler class instance */
-	export let status: string | null;
-	/** sandbox allow-same-origin */
-	export let relaxed = false;
-	/** sandbox allow-popups-to-escape-sandbox (i.e. links within the REPL to other pages work) */
-	export let can_escape = false;
-	/** Any additional JS you may want to inject */
-	export let injectedJS = '';
-	/** Any additional CSS you may want to inject */
-	export let injectedCSS = '';
-	export let theme: 'light' | 'dark';
-	/** A store containing the current bundle result. Takes precedence over REPL context, if set */
-	export let bundle: Writable<Bundle | null> | undefined = undefined;
-	/** Called everytime a log is pushed. If this is set, the built-in console coming with the Viewer isn't shown */
-	export let onLog: ((logs: Log[]) => void) | undefined = undefined;
-
-	const context = get_repl_context();
-	bundle = bundle ?? context.bundle;
-
-	let logs: Log[] = [];
+	import type Bundler from '../Bundler.svelte';
+	import type { BundleResult } from '../public';
+
+	interface Props {
+		error: Error | null;
+		/** status by Bundler class instance */
+		status: string | null;
+		/** sandbox allow-same-origin */
+		relaxed?: boolean;
+		/** sandbox allow-popups-to-escape-sandbox (i.e. links within the REPL to other pages work) */
+		can_escape?: boolean;
+		/** Any additional JS you may want to inject */
+		injectedJS?: string;
+		/** Any additional CSS you may want to inject */
+		injectedCSS?: string;
+		theme: 'light' | 'dark';
+		/** The current bundler. Takes precedence over REPL context, if set */
+		bundler?: Bundler;
+		/** Called everytime a log is pushed. If this is set, the built-in console coming with the Viewer isn't shown */
+		onLog?: ((logs: Log[]) => void) | undefined;
+	}
+
+	let {
+		error = $bindable(),
+		status,
+		relaxed = false,
+		can_escape = false,
+		injectedJS = '',
+		injectedCSS = '',
+		theme,
+		bundler,
+		onLog = undefined
+	}: Props = $props();
+
+	let context = get_repl_context();
+	let bundle = $derived((bundler ?? context?.bundler)?.result);
+
+	let logs: Log[] = $state.raw([]); // we don't want to proxify the logged values
 	let log_group_stack: Log[][] = [];
+
+	// svelte-ignore state_referenced_locally
 	let current_log_group = logs;
 
-	let iframe: HTMLIFrameElement;
-	let pending_imports = 0;
+	let iframe = $state.raw<HTMLIFrameElement>();
+	let pending_imports = $state(0);
 	let pending = false;
 
-	let proxy: ReplProxy | null = null;
-	let ready = false;
-	let inited = false;
+	let proxy: ReplProxy | null = $state.raw(null);
+	let ready = $state(false);
+	let inited = $state(false);
 
 	let log_height = 90;
 	let prev_height: number;
 	let last_console_event: Log;
 
 	onMount(() => {
-		proxy = new ReplProxy(iframe, {
+		proxy = new ReplProxy(iframe!, {
 			on_fetch_progress: (progress) => {
 				pending_imports = progress;
 			},
@@ -89,7 +105,7 @@
 			}
 		});
 
-		iframe.addEventListener('load', () => {
+		iframe!.addEventListener('load', () => {
 			proxy?.handle_links();
 			ready = true;
 		});
@@ -99,15 +115,19 @@
 		};
 	});
 
-	$: if (ready) proxy?.iframe_command('set_theme', { theme });
+	$effect(() => {
+		if (ready) {
+			proxy?.iframe_command('set_theme', { theme });
+		}
+	});
 
-	async function apply_bundle($bundle: Bundle | null | undefined) {
-		if (!$bundle) return;
+	async function apply_bundle(bundle: BundleResult | null) {
+		if (!bundle) return;
 
 		try {
 			clear_logs();
 
-			if (!$bundle.error) {
+			if (!bundle.error) {
 				await proxy?.eval(
 					`
 					${injectedJS}
@@ -157,7 +177,7 @@
 						window._svelteTransitionManager = null;
 					}
 
-					const __repl_exports = ${$bundle.client?.code};
+					const __repl_exports = ${bundle.client?.code};
 					{
 						const { mount, unmount, App, untrack } = __repl_exports;
 
@@ -186,7 +206,7 @@
 					}
 					//# sourceURL=playground:output
 				`,
-					$bundle?.tailwind ?? srcdoc_styles
+					bundle?.tailwind ?? srcdoc_styles
 				);
 				error = null;
 			}
@@ -198,20 +218,31 @@
 		inited = true;
 	}
 
-	$: if (ready) apply_bundle($bundle);
+	$effect(() => {
+		if (ready) {
+			const b = bundle;
 
-	$: if (injectedCSS && proxy && ready) {
-		proxy.eval(
-			`{
-				const style = document.createElement('style');
-				style.textContent = ${JSON.stringify(injectedCSS)};
-				document.head.appendChild(style);
-			}`
-		);
-	}
+			// TODO tidy up
+			untrack(() => {
+				apply_bundle(b);
+			});
+		}
+	});
+
+	$effect(() => {
+		if (injectedCSS && proxy && ready) {
+			proxy.eval(
+				`{
+					const style = document.createElement('style');
+					style.textContent = ${JSON.stringify(injectedCSS)};
+					document.head.appendChild(style);
+				}`
+			);
+		}
+	});
 
 	function show_error(e: CompileError & { loc: { line: number; column: number } }) {
-		const map = $bundle?.client?.map;
+		const map = bundle?.client?.map;
 
 		// @ts-ignore INVESTIGATE
 		const loc = map && getLocationFromStack(e.stack, map);
@@ -226,7 +257,7 @@
 
 	function push_logs(log: Log) {
 		current_log_group.push((last_console_event = log));
-		logs = logs;
+		logs = [...logs, log];
 		onLog?.(logs);
 	}
 
@@ -236,7 +267,7 @@
 		// TODO: Investigate
 		log_group_stack.push(current_log_group);
 		current_log_group = log.logs;
-		logs = logs;
+		logs = [...logs];
 		onLog?.(logs);
 	}
 
@@ -251,7 +282,7 @@
 
 		if (last_log) {
 			last_log.count = (last_log.count || 1) + 1;
-			logs = logs;
+			logs = [...logs];
 			onLog?.(logs);
 		} else {
 			last_console_event.count = 1;
@@ -292,8 +323,8 @@
 		srcdoc={BROWSER ? srcdoc : ''}
 	></iframe>
 
-	{#if $bundle?.error}
-		<ErrorOverlay error={$bundle.error} />
+	{#if bundle?.error}
+		<ErrorOverlay error={bundle.error} />
 	{/if}
 {/snippet}
 
@@ -301,7 +332,14 @@
 	{#if !onLog}
 		<PaneWithPanel pos="100%" panel="Console" {main}>
 			{#snippet header()}
-				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
+				<button
+					class="raised"
+					disabled={logs.length === 0}
+					onclick={(e) => {
+						e.stopPropagation();
+						clear_logs();
+					}}
+				>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
@@ -320,7 +358,7 @@
 	<div class="overlay">
 		{#if error}
 			<Message kind="error" details={error} />
-		{:else if status || !$bundle}
+		{:else if status || !bundle}
 			<Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message>
 		{/if}
 	</div>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 85bd3f520b..5843fedd65 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -3,15 +3,15 @@
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import { BROWSER } from 'esm-env';
 	import { writable } from 'svelte/store';
-	import Bundler from './Bundler.js';
+	import Bundler from './Bundler.svelte.js';
 	import ComponentSelector from './Input/ComponentSelector.svelte';
 	import Output from './Output/Output.svelte';
 	import { set_repl_context } from './context.js';
-	import { Workspace, Editor, type File } from 'editor';
-	import type { Bundle, ReplContext } from './types.js';
+	import { Workspace, type File } from './Workspace.svelte.js';
+	import Editor from './Editor/Editor.svelte';
+	import type { ReplContext } from './types.js';
 
 	interface Props {
-		packagesUrl?: string;
 		svelteVersion?: string;
 		embedded?: boolean | 'output-only';
 		orientation?: 'columns' | 'rows';
@@ -22,12 +22,12 @@
 		injectedJS?: string;
 		injectedCSS?: string;
 		previewTheme?: 'light' | 'dark';
+		onversion?: (version: string) => void;
 		onchange?: () => void;
 		download?: () => void;
 	}
 
 	let {
-		packagesUrl = 'https://unpkg.com/',
 		svelteVersion = 'latest',
 		embedded = false,
 		orientation = 'columns',
@@ -38,6 +38,7 @@
 		injectedJS = '',
 		injectedCSS = '',
 		previewTheme = 'light',
+		onversion,
 		onchange = () => {},
 		download
 	}: Props = $props();
@@ -66,7 +67,7 @@
 	// TODO get rid
 	export function toJSON() {
 		return {
-			imports: $bundle?.imports ?? [],
+			imports: bundler!.result?.imports ?? [],
 			files: workspace.files,
 			tailwind: workspace.tailwind
 		};
@@ -82,24 +83,12 @@
 		workspace.mark_saved();
 	}
 
-	const bundle: ReplContext['bundle'] = writable(null);
 	const toggleable: ReplContext['toggleable'] = writable(false);
 
-	set_repl_context({
-		bundle,
-		toggleable,
-		workspace,
-		svelteVersion
-	});
-
-	let current_token: Symbol;
-
 	async function rebundle() {
-		const token = (current_token = Symbol());
-		const result = await bundler!.bundle(workspace.files as File[], {
+		bundler!.bundle(workspace.files as File[], {
 			tailwind: workspace.tailwind
 		});
-		if (token === current_token) $bundle = result as Bundle;
 	}
 
 	async function migrate() {
@@ -122,8 +111,8 @@
 
 	const bundler = BROWSER
 		? new Bundler({
-				packages_url: packagesUrl,
 				svelte_version: svelteVersion,
+				onversion,
 				onstatus: (message) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to
@@ -146,6 +135,13 @@
 			})
 		: null;
 
+	set_repl_context({
+		bundler,
+		toggleable,
+		workspace,
+		svelteVersion
+	});
+
 	function before_unload(event: BeforeUnloadEvent) {
 		if (Object.keys(workspace.modified).length > 0) {
 			event.preventDefault();
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
similarity index 99%
rename from packages/editor/src/lib/Workspace.svelte.ts
rename to packages/repl/src/lib/Workspace.svelte.ts
index a4ec178e02..f1af3a5837 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -1,6 +1,6 @@
 import type { CompileError, CompileResult } from 'svelte/compiler';
 import { Compartment, EditorState, StateEffect, StateField } from '@codemirror/state';
-import { compile_file } from './compile-worker';
+import { compile_file } from './Compiler';
 import { BROWSER } from 'esm-env';
 import { basicSetup, EditorView } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
@@ -489,7 +489,7 @@ export class Workspace {
 
 		localStorage.setItem('vim', String(value));
 
-		// @ts-expect-error jfc CodeMirror is a struggle
+		// @ts-ignore jfc CodeMirror is a struggle
 		let vim_extension_index = default_extensions.findIndex((ext) => ext.compartment === vim_mode);
 
 		let extension: any = [];
diff --git a/packages/repl/src/lib/index.ts b/packages/repl/src/lib/index.ts
index a730b23f10..e46b51da04 100644
--- a/packages/repl/src/lib/index.ts
+++ b/packages/repl/src/lib/index.ts
@@ -1,2 +1 @@
 export { default as Repl } from './Repl.svelte';
-export type { File } from './types';
diff --git a/packages/repl/src/lib/public.d.ts b/packages/repl/src/lib/public.d.ts
new file mode 100644
index 0000000000..cfed938d44
--- /dev/null
+++ b/packages/repl/src/lib/public.d.ts
@@ -0,0 +1,12 @@
+import type { OutputChunk, RollupError } from '@rollup/browser';
+
+export interface BundleResult {
+	uid: number;
+	error: (RollupError & CompileError) | null;
+	client: OutputChunk | null;
+	server: OutputChunk | null;
+	tailwind: string | null;
+	imports: string[];
+}
+
+export * from './index';
diff --git a/packages/editor/src/lib/theme.ts b/packages/repl/src/lib/theme.ts
similarity index 100%
rename from packages/editor/src/lib/theme.ts
rename to packages/repl/src/lib/theme.ts
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index a46e9f0766..d8f8ba70c0 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -2,7 +2,8 @@ import type { EditorState } from '@codemirror/state';
 import { OutputChunk, RollupError } from '@rollup/browser';
 import type { Readable, Writable } from 'svelte/store';
 import type { CompileError } from 'svelte/compiler';
-import type { Workspace } from 'editor';
+import type { Workspace } from './Workspace.svelte';
+import type { BundleResult } from './public';
 
 export type Lang = 'js' | 'svelte' | 'json' | 'md' | 'css' | (string & Record<never, never>);
 
@@ -21,16 +22,6 @@ export type MessageDetails = {
 
 export type Warning = MessageDetails;
 
-export type Bundle = {
-	uid: number;
-	client: OutputChunk | null;
-	error: (RollupError & CompileError) | null;
-	server: OutputChunk | null;
-	tailwind?: string;
-	imports: string[];
-	warnings: Warning[];
-};
-
 export type File = {
 	name: string;
 	source: string;
@@ -39,13 +30,13 @@ export type File = {
 };
 
 export type ReplState = {
-	bundle: Bundle | null;
-	bundler: import('./Bundler').default | null;
+	bundle: BundleResult | null;
+	bundler: import('./Bundler.svelte').default | null;
 	toggleable: boolean;
 };
 
 export type ReplContext = {
-	bundle: Writable<ReplState['bundle']>;
+	bundler: Bundler;
 	toggleable: Writable<ReplState['toggleable']>;
 	workspace: Workspace;
 	svelteVersion: string;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 44c0479ecb..ee0468dc64 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -1,10 +1,8 @@
 import '@sveltejs/site-kit/polyfills';
 import { walk } from 'zimmerframe';
 import '../patch_window';
-import { sleep } from '../../utils';
 import { rollup } from '@rollup/browser';
 import { DEV } from 'esm-env';
-import * as resolve from 'resolve.exports';
 import commonjs from './plugins/commonjs';
 import glsl from './plugins/glsl';
 import json from './plugins/json';
@@ -17,101 +15,68 @@ import type { Plugin, RollupCache, TransformResult } from '@rollup/browser';
 import type { BundleMessageData, BundleOptions } from '../workers';
 import type { Warning } from '../../types';
 import type { CompileError, CompileResult } from 'svelte/compiler';
-import type { File } from 'editor';
+import type { File } from '../../Workspace.svelte';
 import type { Node } from 'estree';
-import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
+import { NPM, VIRTUAL } from '../constants';
+import {
+	add_suffix,
+	fetch_package,
+	load_svelte,
+	parse_npm_url,
+	resolve_local,
+	resolve_subpath,
+	resolve_version
+} from '../npm';
+import type { BundleResult } from '$lib/public';
 
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
 
-let packages_url: string;
-let svelte_url: string;
-let version: string;
-let current_id: number;
-
-let inited = Promise.withResolvers<typeof svelte>();
-
-let can_use_experimental_async = false;
-
-async function init(v: string, packages_url: string) {
-	const match = /^(pr|commit|branch)-(.+)/.exec(v);
-
-	let tarball: FileDescription[] | undefined;
-
-	if (match) {
-		const response = await fetch(`https://pkg.pr.new/svelte@${match[2]}`);
-
-		if (!response.ok) {
-			throw new Error(
-				`impossible to fetch the compiler from this ${match[1] === 'pr' ? 'PR' : 'commit'}`
-			);
-		}
-
-		tarball = await parseTar(await response.arrayBuffer());
-
-		const json = tarball.find((file) => file.name === 'package/package.json')!.text;
-		version = JSON.parse(json).version;
-
-		svelte_url = `svelte://svelte@${version}`;
-
-		for (const file of tarball) {
-			const url = `${svelte_url}/${file.name.slice('package/'.length)}`;
-			FETCH_CACHE.set(url, Promise.resolve({ url, body: file.text }));
-		}
-	} else if (v === 'local') {
-		version = v;
-		svelte_url = `/svelte`;
-	} else {
-		const response = await fetch(`${packages_url}/svelte@${v}/package.json`);
-		const pkg = await response.json();
-		version = pkg.version;
-		svelte_url = `${packages_url}/svelte@${version}`;
-	}
-
-	console.log(`Using Svelte compiler version ${version}`);
-
-	const entry = version.startsWith('3.')
-		? 'compiler.js'
-		: version.startsWith('4.')
-			? 'compiler.cjs'
-			: 'compiler/index.js';
-
-	const compiler = tarball
-		? tarball.find((file) => file.name === `package/${entry}`)!.text
-		: await fetch(`${svelte_url}/${entry}`).then((r) => r.text());
-
-	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
+const ENTRYPOINT = '__entry.js';
+const STYLES = '__styles.js';
+const ESM_ENV = '__esm-env.js';
 
-	try {
-		self.svelte.compileModule('', {
-			generate: 'client',
-			// @ts-expect-error
-			experimental: {
-				async: true
-			}
-		});
-
-		can_use_experimental_async = true;
-	} catch (e) {
-		// do nothing
-	}
+let current_id: number;
 
-	return svelte;
-}
+let ready: ReturnType<typeof load_svelte>;
 
 self.addEventListener('message', async (event: MessageEvent<BundleMessageData>) => {
 	switch (event.data.type) {
 		case 'init': {
-			packages_url = event.data.packages_url;
-			init(event.data.svelte_version, packages_url).then(inited.resolve, inited.reject);
+			ready = load_svelte(event.data.svelte_version, (version) => {
+				self.postMessage({
+					type: 'version',
+					message: version
+				});
+			});
+
 			break;
 		}
 
 		case 'bundle': {
 			try {
-				await inited.promise;
+				const { svelte, version: svelte_version, can_use_experimental_async } = await ready;
+				const { uid, files, options } = event.data;
+
+				current_id = uid;
+
+				setTimeout(async () => {
+					if (current_id !== uid) return;
+
+					const result = await bundle(
+						svelte,
+						svelte_version,
+						uid,
+						files,
+						options,
+						can_use_experimental_async
+					);
+
+					if (JSON.stringify(result.error) === JSON.stringify(ABORT)) return;
+					if (result && uid === current_id) postMessage(result);
+				});
 			} catch (e) {
 				self.postMessage({
 					type: 'error',
@@ -119,20 +84,6 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 					message: `Error loading the compiler: ${(e as Error).message}`
 				});
 			}
-			const { uid, files, options } = event.data;
-
-			if (files.length === 0) return;
-
-			current_id = uid;
-
-			setTimeout(async () => {
-				if (current_id !== uid) return;
-
-				const result = await bundle({ uid, files, options });
-
-				if (JSON.stringify(result.error) === JSON.stringify(ABORT)) return;
-				if (result && uid === current_id) postMessage(result);
-			});
 
 			break;
 		}
@@ -141,111 +92,6 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 
 const ABORT = { aborted: true };
 
-const FETCH_CACHE: Map<string, Promise<{ url: string; body: string }>> = new Map();
-
-async function fetch_if_uncached(url: string, uid: number) {
-	if (FETCH_CACHE.has(url)) {
-		return FETCH_CACHE.get(url);
-	}
-
-	// TODO: investigate whether this is necessary
-	await sleep(50);
-	if (uid !== current_id) throw ABORT;
-
-	const promise = fetch(url)
-		.then(async (r) => {
-			if (!r.ok) throw new Error(await r.text());
-
-			return {
-				url: r.url,
-				body: await r.text()
-			};
-		})
-		.catch((err) => {
-			FETCH_CACHE.delete(url);
-			throw err;
-		});
-
-	FETCH_CACHE.set(url, promise);
-	return promise;
-}
-
-async function follow_redirects(url: string, uid: number) {
-	const res = await fetch_if_uncached(url, uid);
-	return res?.url;
-}
-
-async function resolve_from_pkg(
-	pkg: Record<string, unknown>,
-	subpath: string,
-	uid: number,
-	pkg_url_base: string
-) {
-	// match legacy Rollup logic — pkg.svelte takes priority over pkg.exports
-	if (typeof pkg.svelte === 'string' && subpath === '.') {
-		return pkg.svelte;
-	}
-
-	// modern
-	if (pkg.exports) {
-		try {
-			const resolved = resolve.exports(pkg, subpath, {
-				browser: true,
-				conditions: ['svelte', 'module', 'browser', 'development']
-			});
-
-			return resolved?.[0];
-		} catch {
-			throw `no matched export path was found in "${pkg.name}/package.json"`;
-		}
-	}
-
-	// legacy
-	if (subpath === '.') {
-		let resolved_id = resolve.legacy(pkg, {
-			fields: ['browser', 'module', 'main']
-		});
-
-		if (typeof resolved_id === 'object' && !Array.isArray(resolved_id)) {
-			const subpath = resolved_id['.'];
-			if (subpath === false) return 'data:text/javascript,export {}';
-
-			resolved_id =
-				subpath ??
-				resolve.legacy(pkg, {
-					fields: ['module', 'main']
-				});
-		}
-
-		if (!resolved_id) {
-			// last ditch — try to match index.js/index.mjs
-			for (const index_file of ['index.mjs', 'index.js']) {
-				try {
-					const indexUrl = new URL(index_file, `${pkg_url_base}/`).href;
-					return (await follow_redirects(indexUrl, uid)) ?? '';
-				} catch {
-					// maybe the next option will be successful
-				}
-			}
-
-			throw `could not find entry point in "${pkg.name}/package.json"`;
-		}
-
-		return resolved_id;
-	}
-
-	if (typeof pkg.browser === 'object') {
-		// this will either return `pkg.browser[subpath]` or `subpath`
-		return resolve.legacy(pkg, {
-			browser: subpath
-		});
-	}
-
-	return subpath;
-}
-
-const versions = Object.create(null);
-
 let previous: {
 	key: string;
 	cache: RollupCache | undefined;
@@ -281,10 +127,13 @@ async function init_tailwind() {
 }
 
 async function get_bundle(
+	svelte: typeof import('svelte/compiler'),
+	svelte_version: string,
 	uid: number,
 	mode: 'client' | 'server',
-	local_files_lookup: Map<string, File>,
-	options: BundleOptions
+	virtual: Map<string, File>,
+	options: BundleOptions,
+	can_use_experimental_async: boolean
 ) {
 	let bundle;
 
@@ -321,144 +170,115 @@ async function get_bundle(
 		async resolveId(importee, importer) {
 			if (uid !== current_id) throw ABORT;
 
-			if (importee === 'esm-env') return importee;
-
-			if (importee === shared_file) return importee;
+			// entrypoint
+			if (!importer) return `${VIRTUAL}/${ENTRYPOINT}`;
 
-			// importing from another file in REPL
-			if (local_files_lookup.has(importee) && (!importer || local_files_lookup.has(importer)))
-				return importee;
-			if (local_files_lookup.has(importee + '.js')) return importee + '.js';
-			if (local_files_lookup.has(importee + '.json')) return importee + '.json';
-
-			// remove trailing slash
-			if (importee.endsWith('/')) importee = importee.slice(0, -1);
+			// special case
+			if (importee === 'esm-env') return `${VIRTUAL}/${ESM_ENV}`;
 
 			// importing from a URL
-			if (/^https?:/.test(importee)) return importee;
-
-			if (importee.startsWith('.')) {
-				if (importer && local_files_lookup.has(importer)) {
-					// relative import in a REPL file
-					// should've matched above otherwise importee doesn't exist
-					console.error(`Cannot find file "${importee}" imported by "${importer}" in the REPL`);
-					return;
-				} else {
-					// relative import in an external file
-					const url = new URL(importee, importer).href;
-					self.postMessage({ type: 'status', uid, message: `resolving ${url}` });
-					return await follow_redirects(url, uid);
-				}
-			} else {
-				// fetch from unpkg
-				self.postMessage({ type: 'status', uid, message: `resolving ${importee}` });
-
-				const match = /^((?:@[^/]+\/)?[^/@]+)(?:@([^/]+))?(\/.+)?$/.exec(importee);
-				if (!match) {
-					return console.error(`Invalid import "${importee}"`);
-				}
+			if (/^[a-z]+:/.test(importee)) return importee;
 
-				const pkg_name = match[1];
+			// importing a relative file
+			if (importee[0] === '.') {
+				if (importer.startsWith(VIRTUAL)) {
+					const url = new URL(importee, importer);
 
-				let default_version = 'latest';
+					for (const suffix of ['', '.js', '.json']) {
+						const with_suffix = `${url.pathname.slice(1)}${suffix}`;
+						const file = virtual.get(with_suffix);
 
-				if (importer?.startsWith(packages_url)) {
-					const path = importer.slice(packages_url.length + 1);
-					const parts = path.split('/').slice(0, 2);
-					if (!parts[0].startsWith('@')) parts.pop();
-
-					const importer_name_and_version = parts.join('/');
-					const importer_name = importer_name_and_version.slice(
-						0,
-						importer_name_and_version.indexOf('@', 1)
-					);
-
-					const default_versions = (versions[importer_name_and_version] ??= Object.create(null));
-
-					if (!default_versions[pkg_name]) {
-						const pkg_json_url = `${packages_url}/${importer_name_and_version}/package.json`;
-						const pkg_json = (await fetch_if_uncached(pkg_json_url, uid))?.body;
-						const pkg = JSON.parse(pkg_json ?? '""');
-
-						if (importer_name === pkg_name) {
-							default_versions[pkg_name] = pkg.version;
-						} else {
-							const version =
-								pkg.devDependencies?.[pkg_name] ??
-								pkg.peerDependencies?.[pkg_name] ??
-								pkg.dependencies?.[pkg_name];
-
-							default_versions[pkg_name] = max(version);
+						if (file) {
+							return url.href + suffix;
 						}
 					}
 
-					default_version = default_versions[pkg_name];
+					throw new Error(
+						`'${importee}' (imported by ${importer.replace(VIRTUAL + '/', '')}) does not exist`
+					);
 				}
 
-				const pkg_url =
-					pkg_name === 'svelte'
-						? `${svelte_url}/package.json`
-						: `${packages_url}/${pkg_name}@${match[2] ?? default_version}/package.json`;
-				const subpath = `.${match[3] ?? ''}`;
+				if (importer.startsWith(NPM)) {
+					const { name, version } = parse_npm_url(http://github.com/importer);
 
-				// if this was imported by one of our files, add it to the `imports` set
-				if (importer && local_files_lookup.has(importer)) {
-					imports.add(pkg_name);
+					const pkg = await fetch_package(name, name === 'svelte' ? svelte_version : version);
+					const path = new URL(importee, importer).pathname.replace(`/${name}@${version}/`, '');
+
+					return add_suffix(pkg, path);
 				}
 
-				const fetch_package_info = async (pkg_url: string) => {
-					try {
-						const redirected = await follow_redirects(pkg_url, uid);
+				return new URL(importee, importer).href;
+			}
 
-						if (!redirected) throw new Error();
+			// importing an external package -> `npm://$/<name>@<version>/<path>`
+			const match = /^((?:@[^/]+\/)?[^/@]+)(?:@([^/]+))?(\/.+)?$/.exec(importee);
+			if (!match) throw new Error(`Invalid import "${importee}"`);
 
-						const pkg_json = (await fetch_if_uncached(redirected, uid))?.body;
-						const pkg = JSON.parse(pkg_json ?? '""');
+			const pkg_name = match[1];
 
-						const pkg_url_base = redirected.replace(/\/package\.json$/, '');
+			if (pkg_name === 'svelte' && svelte_version === 'local') {
+				return await resolve_local(importee);
+			}
 
-						return {
-							pkg,
-							pkg_url_base
-						};
-					} catch (_e) {
-						throw new Error(`Error fetching "${pkg_name}" from unpkg. Does the package exist?`);
-					}
-				};
+			let default_version = 'latest';
 
-				const { pkg, pkg_url_base } = await fetch_package_info(pkg_url);
+			if (importer.startsWith(NPM)) {
+				// use the version specified in importer's package.json, not `latest`
+				const { name, version } = parse_npm_url(http://github.com/importer);
 
-				try {
-					const resolved_id = await resolve_from_pkg(pkg, subpath, uid, pkg_url_base);
-					return new URL(resolved_id + '', `${pkg_url_base}/`).href;
-				} catch (reason) {
-					throw new Error(`Cannot import "${importee}": ${reason}.`);
+				const { meta } = await fetch_package(name, name === 'svelte' ? svelte_version : version);
+
+				if (meta.name === pkg_name) {
+					default_version = meta.version;
+				} else {
+					default_version = max(
+						meta.devDependencies?.[pkg_name] ??
+							meta.peerDependencies?.[pkg_name] ??
+							meta.dependencies?.[pkg_name]
+					);
 				}
 			}
+
+			if (importer.startsWith(VIRTUAL)) {
+				// if this was imported by one of our files, add it to the `imports` set
+				imports.add(pkg_name);
+			}
+
+			const v = await resolve_version(match[1], match[2] ?? default_version);
+			const pkg = await fetch_package(pkg_name, pkg_name === 'svelte' ? svelte_version : v);
+			const subpath = resolve_subpath(pkg, '.' + (match[3] ?? ''));
+
+			return add_suffix(pkg, subpath.slice(2));
 		},
 		async load(resolved) {
 			if (uid !== current_id) throw ABORT;
 
-			if (resolved === 'esm-env') {
-				return `export const BROWSER = true; export const DEV = true`;
+			if (resolved.startsWith(VIRTUAL)) {
+				const file = virtual.get(resolved.slice(VIRTUAL.length + 1))!;
+				return file.contents;
 			}
 
-			const cached_file = local_files_lookup.get(resolved);
-			if (cached_file) {
-				return cached_file.contents;
-			}
+			if (resolved.startsWith(NPM)) {
+				let [, name, v, subpath] = /^npm:\/\/\$\/((?:@[^/]+\/)?[^/@]+)(?:@([^/]+))?\/(.+)$/.exec(
+					resolved
+				)!;
 
-			if (!FETCH_CACHE.has(resolved)) {
-				self.postMessage({ type: 'status', uid, message: `fetching ${resolved}` });
+				const pkg = await fetch_package(name, name === 'svelte' ? svelte_version : v);
+
+				const file = pkg.contents[subpath];
+				if (file) return file.text;
 			}
 
-			const res = await fetch_if_uncached(resolved, uid);
-			return res?.body;
+			const response = await fetch(resolved);
+			if (response.ok) return response.text();
+
+			throw new Error(`Could not load ${resolved}`);
 		},
 		transform(code, id) {
 			if (uid !== current_id) throw ABORT;
 
-			self.postMessage({ type: 'status', uid, message: `bundling ${id}` });
+			const message = `bundling ${id.replace(VIRTUAL + '/', '').replace(NPM + '/', '')}`;
+			self.postMessage({ type: 'status', message });
 
 			if (!/\.(svelte|js)$/.test(id)) return null;
 
@@ -498,13 +318,13 @@ async function get_bundle(
 				if (result.css?.code) {
 					// resolve local files by inlining them
 					result.css.code = result.css.code.replace(
-						/url\(['"]?(\..+?\.(svg|webp|png))['"]?\)/g,
+						/url\(['"]?\.\/(.+?\.(svg|webp|png))['"]?\)/g,
 						(match, $1, $2) => {
-							if (local_files_lookup.has($1)) {
+							if (virtual.has($1)) {
 								if ($2 === 'svg') {
-									return `url('data:image/svg+xml;base64,${btoa(local_files_lookup.get($1)!.contents)}')`;
+									return `url('data:image/svg+xml;base64,${btoa(virtual.get($1)!.contents)}')`;
 								} else {
-									return `url('data:image/${$2};base64,${local_files_lookup.get($1)!.contents}')`;
+									return `url('data:image/${$2};base64,${virtual.get($1)!.contents}')`;
 								}
 							} else {
 								return match;
@@ -515,7 +335,7 @@ async function get_bundle(
 					result.js.code +=
 						'\n\n' +
 						`
-					import { styles as $$_styles } from '${shared_file}';
+					import { styles as $$_styles } from '${VIRTUAL}/${STYLES}';
 					const $$__style = document.createElement('style');
 					$$__style.textContent = ${JSON.stringify(result.css.code)};
 					document.head.append($$__style);
@@ -561,76 +381,67 @@ async function get_bundle(
 		}
 	};
 
-	try {
-		const key = JSON.stringify(options);
-
-		bundle = await rollup({
-			input: './__entry.js',
-			cache: previous?.key === key && previous.cache,
-			plugins: [
-				repl_plugin,
-				commonjs,
-				json,
-				svg,
-				mp3,
-				image,
-				glsl,
-				loop_protect,
-				replace({
-					'process.env.NODE_ENV': JSON.stringify('production')
-				}),
-				options.tailwind && {
-					name: 'tailwind-extract',
-					transform(code, id) {
-						// TODO tidy this up
-						if (id.startsWith(svelte_url)) return;
-						if (id.endsWith('.svelte')) return;
-						if (id === './__entry.js') return;
-						if (id === 'esm-env') return;
-						if (id === shared_file) return;
-						if (id.startsWith('https://unpkg.com/clsx@')) return;
-
-						add_tailwind_candidates(this.parse(code));
-					}
+	const key = JSON.stringify(options);
+
+	bundle = await rollup({
+		input: './__entry.js',
+		cache: previous?.key === key && previous.cache,
+		plugins: [
+			repl_plugin,
+			commonjs,
+			json,
+			svg,
+			mp3,
+			image,
+			glsl,
+			loop_protect,
+			replace({
+				'process.env.NODE_ENV': JSON.stringify('production')
+			}),
+			options.tailwind && {
+				name: 'tailwind-extract',
+				transform(code, id) {
+					// TODO tidy this up
+					if (id.startsWith(`${NPM}/svelte@`)) return;
+					if (id.startsWith(`${NPM}/clsx@`)) return;
+					if (id === `${VIRTUAL}/${ENTRYPOINT}`) return;
+					if (id === `${VIRTUAL}/${STYLES}`) return;
+					if (id === `${VIRTUAL}/${ESM_ENV}`) return;
+					if (id.endsWith('.svelte')) return;
+
+					add_tailwind_candidates(this.parse(code));
 				}
-			],
-			onwarn(warning) {
-				all_warnings.push({
-					message: warning.message
-				});
 			}
-		});
-
-		previous = { key, cache: bundle.cache };
+		],
+		onwarn(warning) {
+			all_warnings.push({
+				message: warning.message
+			});
+		}
+	});
 
-		return {
-			bundle,
-			tailwind: options.tailwind
-				? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
-				: undefined,
-			imports: Array.from(imports),
-			error: null,
-			warnings,
-			all_warnings
-		};
-	} catch (error) {
-		return { error, imports: null, bundle: null, warnings, all_warnings };
-	}
+	previous = { key, cache: bundle.cache };
+
+	return {
+		bundle,
+		tailwind: options.tailwind
+			? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
+			: undefined,
+		imports: Array.from(imports),
+		error: null,
+		warnings,
+		all_warnings
+	};
 }
 
-export type BundleResult = ReturnType<typeof bundle>;
-
-const shared_file = '$$__shared__.js';
-
-async function bundle({
-	uid,
-	files,
-	options
-}: {
-	uid: number;
-	files: File[];
-	options: BundleOptions;
-}) {
+async function bundle(
+	svelte: typeof import('svelte/compiler'),
+	svelte_version: string,
+	uid: number,
+	files: File[],
+	options: BundleOptions,
+	can_use_experimental_async: boolean
+): Promise<BundleResult> {
 	if (!DEV) {
 		console.clear();
 		console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold');
@@ -638,15 +449,15 @@ async function bundle({
 
 	const lookup: Map<string, File> = new Map();
 
-	lookup.set('./__entry.js', {
+	lookup.set(ENTRYPOINT, {
 		type: 'file',
-		name: '__entry.js',
-		basename: '__entry.js',
+		name: ENTRYPOINT,
+		basename: ENTRYPOINT,
 		contents:
-			version.split('.')[0] >= '5'
+			svelte.VERSION.split('.')[0] >= '5'
 				? `
 			import { unmount as u } from 'svelte';
-			import { styles } from '${shared_file}';
+			import { styles } from '${VIRTUAL}/${STYLES}';
 			export { mount, untrack } from 'svelte';
 			export {default as App} from './App.svelte';
 			export function unmount(component) {
@@ -655,7 +466,7 @@ async function bundle({
 			}
 		`
 				: `
-			import { styles } from '${shared_file}';
+			import { styles } from '${VIRTUAL}/${STYLES}';
 			export {default as App} from './App.svelte';
 			export function mount(component, options) {
 				return new component(options);
@@ -671,32 +482,41 @@ async function bundle({
 		text: true
 	});
 
-	lookup.set(shared_file, {
+	lookup.set(STYLES, {
 		type: 'file',
-		name: shared_file,
-		basename: shared_file,
+		name: STYLES,
+		basename: STYLES,
 		contents: `
 			export let styles = [];
 		`,
 		text: true
 	});
 
-	files.forEach((file) => {
-		const path = `./${file.name}`;
-		lookup.set(path, file);
+	lookup.set(ESM_ENV, {
+		type: 'file',
+		name: STYLES,
+		basename: STYLES,
+		contents: `
+			export const BROWSER = true;
+			export const DEV = true;
+		`,
+		text: true
 	});
 
-	let client: Awaited<ReturnType<typeof get_bundle>> = await get_bundle(
-		uid,
-		'client',
-		lookup,
-		options
-	);
+	files.forEach((file) => {
+		lookup.set(file.name, file);
+	});
 
 	try {
-		if (client.error) {
-			throw client.error;
-		}
+		let client: Awaited<ReturnType<typeof get_bundle>> = await get_bundle(
+			svelte,
+			svelte_version,
+			uid,
+			'client',
+			lookup,
+			options,
+			can_use_experimental_async
+		);
 
 		const client_result = (
 			await client.bundle?.generate({
@@ -708,13 +528,17 @@ async function bundle({
 		)?.output[0];
 
 		const server = false // TODO how can we do SSR?
-			? await get_bundle(uid, 'server', lookup, options)
+			? await get_bundle(
+					svelte,
+					svelte_version,
+					uid,
+					'server',
+					lookup,
+					options,
+					can_use_experimental_async
+				)
 			: null;
 
-		if (server?.error) {
-			throw server.error;
-		}
-
 		const server_result = server
 			? (
 					await server.bundle?.generate({
@@ -728,26 +552,24 @@ async function bundle({
 
 		return {
 			uid,
+			error: null,
 			client: client_result,
 			server: server_result,
 			tailwind: client.tailwind,
-			imports: client.imports,
-			// Svelte 5 returns warnings as error objects with a toJSON method, prior versions return a POJO
-			warnings: client.warnings.map((w: any) => w.toJSON?.() ?? w),
-			error: null
+			imports: client.imports
 		};
 	} catch (err) {
 		console.error(err);
 
-		const e = err as CompileError;
+		const e = err as CompileError; // TODO could be a non-Svelte error?
 
 		return {
 			uid,
+			error: { ...e, message: e.message }, // not all Svelte versions return an enumerable message property
 			client: null,
 			server: null,
-			imports: null,
-			warnings: client.warnings,
-			error: { ...e, message: e.message } // not all Svelte versions return an enumerable message property
+			tailwind: null,
+			imports: null
 		};
 	}
 }
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/repl/src/lib/workers/compiler/index.ts
similarity index 52%
rename from packages/editor/src/lib/compile-worker/worker.ts
rename to packages/repl/src/lib/workers/compiler/index.ts
index d5fd227096..e0cdc4e9b6 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -1,8 +1,7 @@
 import '@sveltejs/site-kit/polyfills';
-import { parseTar } from 'tarparser';
 import type { CompileResult } from 'svelte/compiler';
-import type { ExposedCompilerOptions, File } from '../Workspace.svelte';
-import type { FileDescription } from 'tarparser';
+import type { ExposedCompilerOptions, File } from '../../Workspace.svelte';
+import { load_svelte } from '../npm';
 
 // hack for magic-string and Svelte 4 compiler
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -10,75 +9,18 @@ self.window = self;
 
 declare var self: Window & typeof globalThis & { svelte: typeof import('svelte/compiler') };
 
-let inited: PromiseWithResolvers<typeof self.svelte>;
-
-let can_use_experimental_async = false;
-
-async function init(v: string) {
-	const svelte_url = v === 'local' ? '/svelte' : `https://unpkg.com/svelte@${v}`;
-	const match = /^(?:pr|commit|branch)-(.+)/.exec(v);
-
-	let tarball: FileDescription[] | undefined;
-	let version: string;
-
-	if (match) {
-		const response = await fetch(`https://pkg.pr.new/svelte@${match[1]}`);
-
-		if (!response.ok) {
-			throw new Error('Could not fetch tarball');
-		}
-
-		tarball = await parseTar(await response.arrayBuffer());
-
-		const json = tarball.find((file) => file.name === 'package/package.json')!.text;
-		version = JSON.parse(json).version;
-	} else {
-		version = (await fetch(`${svelte_url}/package.json`).then((r) => r.json())).version;
-	}
-
-	const entry = version.startsWith('3.')
-		? 'compiler.js'
-		: version.startsWith('4.')
-			? 'compiler.cjs'
-			: 'compiler/index.js';
-
-	const compiler = tarball
-		? tarball.find((file) => file.name === `package/${entry}`)!.text
-		: await fetch(`${svelte_url}/${entry}`).then((r) => r.text());
-
-	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
-
-	try {
-		self.svelte.compileModule('', {
-			generate: 'client',
-			// @ts-expect-error
-			experimental: {
-				async: true
-			}
-		});
-
-		can_use_experimental_async = true;
-	} catch (e) {
-		// do nothing
-	}
-
-	return self.svelte;
-}
+const cache: Record<string, any> = {};
 
 addEventListener('message', async (event) => {
-	if (!inited) {
-		inited = Promise.withResolvers();
-		init(event.data.version).then(inited.resolve, inited.reject);
-	}
-
-	const svelte = await inited.promise;
-
-	const { id, file, options } = event.data as {
+	const { id, file, version, options } = event.data as {
 		id: number;
 		file: File;
+		version: string;
 		options: ExposedCompilerOptions;
 	};
 
+	const { can_use_experimental_async, svelte } = (cache[version] ??= await load_svelte(version));
+
 	if (!file.name.endsWith('.svelte') && !svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
@@ -147,13 +89,10 @@ addEventListener('message', async (event) => {
 			payload: {
 				error: null,
 				result: {
-					// @ts-expect-error Svelte 3/4 doesn't contain this field
 					metadata: { runes: false },
 					...result,
 					warnings: result.warnings.map((w) => {
-						// @ts-expect-error This exists on Svelte 3/4 and is required to be deleted, otherwise postMessage won't work
 						delete w.toString;
-						// @ts-expect-error https://github.com/sveltejs/svelte/issues/13628 (fixed in 5.0, but was like that for most of the preview phase)
 						return { message: w.message, ...w };
 					})
 				},
@@ -165,7 +104,6 @@ addEventListener('message', async (event) => {
 			id,
 			filename: file.name,
 			payload: {
-				// @ts-expect-error
 				error: { message: e.message, ...e },
 				result: null,
 				migration: null
diff --git a/packages/repl/src/lib/workers/constants.ts b/packages/repl/src/lib/workers/constants.ts
new file mode 100644
index 0000000000..dd2fad619f
--- /dev/null
+++ b/packages/repl/src/lib/workers/constants.ts
@@ -0,0 +1,2 @@
+export const VIRTUAL = 'virtual://$';
+export const NPM = 'npm://$';
diff --git a/packages/repl/src/lib/workers/npm.ts b/packages/repl/src/lib/workers/npm.ts
new file mode 100644
index 0000000000..93967f471a
--- /dev/null
+++ b/packages/repl/src/lib/workers/npm.ts
@@ -0,0 +1,221 @@
+import * as resolve from 'resolve.exports';
+import { parseTar, type FileDescription } from 'tarparser';
+import { NPM } from './constants';
+
+interface Package {
+	meta: any; // package.json contents
+	contents: Record<string, FileDescription>;
+}
+
+/** map of `pkg-name@1` -> `1.2.3` */
+const versions = new Map<string, Promise<string>>();
+const packages = new Map<string, Promise<Package>>();
+
+const pkg_pr_new_regex = /^(pr|commit|branch)-(.+)/;
+
+export async function load_svelte(version: string, onresolve?: (resolved: string) => void) {
+	if (version === 'local') {
+		await import(/* @vite-ignore */ `${location.origin}/svelte/compiler/index.js`);
+	} else {
+		if (!pkg_pr_new_regex.test(version)) {
+			version = await resolve_version('svelte', version);
+			onresolve?.(version);
+		}
+
+		const pkg = await fetch_package('svelte', version);
+
+		const entry = version.startsWith('3.')
+			? 'compiler.js'
+			: version.startsWith('4.')
+				? 'compiler.cjs'
+				: 'compiler/index.js';
+
+		const compiler = pkg.contents[entry].text;
+
+		(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
+	}
+
+	console.log(`Using Svelte compiler version ${version}`);
+
+	let can_use_experimental_async = false;
+
+	try {
+		svelte.compileModule('', {
+			generate: 'client',
+			// @ts-expect-error
+			experimental: {
+				async: true
+			}
+		});
+
+		can_use_experimental_async = true;
+	} catch (e) {
+		// do nothing
+	}
+
+	return {
+		svelte,
+		version,
+		can_use_experimental_async
+	};
+}
+
+export async function resolve_version(name: string, version: string): Promise<string> {
+	if (pkg_pr_new_regex.test(version)) {
+		return version;
+	}
+
+	const key = `${name}@${version}`;
+
+	if (!versions.has(key)) {
+		const promise = fetch(
+			`https://data.jsdelivr.com/v1/packages/npm/${name}/resolved?specifier=${version}`
+		).then(async (r) => {
+			if (!r.ok) {
+				versions.delete(key);
+				throw new Error(`Failed to import ${key}. Are you sure the package exists?`);
+			}
+
+			return (await r.json()).version;
+		});
+
+		versions.set(key, promise);
+	}
+
+	return await versions.get(key)!;
+}
+
+export async function fetch_package(name: string, version: string): Promise<Package> {
+	const key = `${name}@${version}`;
+
+	if (!packages.has(key)) {
+		const match = pkg_pr_new_regex.exec(version);
+
+		const url = match
+			? `https://pkg.pr.new/svelte@${match[2]}`
+			: `https://registry.npmjs.org/${name}/-/${name.split('/').pop()}-${version}.tgz`;
+
+		const promise = fetch(url).then(async (r) => {
+			if (!r.ok) {
+				packages.delete(url);
+				throw new Error(`Failed to fetch ${url}`);
+			}
+
+			const contents: Record<string, FileDescription> = {};
+
+			for (const file of await parseTar(await r.arrayBuffer())) {
+				if (file.type === 'file') {
+					contents[file.name.slice(8)] = file; // remove `package/` prefix
+				}
+			}
+
+			const meta = JSON.parse(contents['package.json'].text);
+
+			return { meta, contents };
+		});
+
+		packages.set(key, promise);
+	}
+
+	return packages.get(key)!;
+}
+
+export function resolve_subpath(pkg: Package, subpath: string): string {
+	// match legacy Rollup logic — pkg.svelte takes priority over pkg.exports
+	if (typeof pkg.meta.svelte === 'string' && subpath === '.') {
+		return `./${pkg.meta.svelte.replace('./', '')}`;
+	}
+
+	// modern
+	if (pkg.meta.exports) {
+		try {
+			const resolved = resolve.exports(pkg.meta, subpath, {
+				browser: true,
+				conditions: ['svelte', 'module', 'browser', 'development']
+			});
+
+			return resolved?.[0] as string;
+		} catch {
+			throw new Error(
+				`No matched export path was found for "${subpath}" in "${pkg.meta.name}/package.json"`
+			);
+		}
+	}
+
+	// legacy
+	if (subpath === '.') {
+		let resolved_id = resolve.legacy(pkg.meta, {
+			fields: ['browser', 'module', 'main']
+		});
+
+		if (typeof resolved_id === 'object' && !Array.isArray(resolved_id)) {
+			const subpath = resolved_id['.'];
+			if (subpath === false) return 'data:text/javascript,export {}';
+
+			resolved_id =
+				subpath ??
+				resolve.legacy(pkg.meta, {
+					fields: ['module', 'main']
+				});
+		}
+
+		if (!resolved_id) {
+			// last ditch — try to match index.js/index.mjs
+			if (pkg.contents['index.mjs']) return './index.mjs';
+			if (pkg.contents['index.js']) return './index.js';
+
+			throw new Error(`Could not find entry point in "${pkg.meta.name}/package.json"`);
+		}
+
+		return resolved_id as string;
+	}
+
+	if (typeof pkg.meta.browser === 'object') {
+		// this will either return `pkg.browser[subpath]` or `subpath`
+		return resolve.legacy(pkg, {
+			browser: subpath
+		}) as string;
+	}
+
+	return subpath;
+}
+
+export function add_suffix(pkg: Package, path: string) {
+	for (const suffix of ['', '.js', '.mjs', '.cjs', '/index.js', '/index.mjs', '/index.cjs']) {
+		const with_suffix = path + suffix;
+		const file = pkg.contents[with_suffix];
+
+		if (file && file.type === 'file') {
+			return `${NPM}/${pkg.meta.name}@${pkg.meta.version}/${with_suffix}`;
+		}
+	}
+
+	throw new Error(`Could not find ${path} in ${pkg.meta.name}@${pkg.meta.version}`);
+}
+
+const LOCAL_PKG_URL = `${location.origin}/svelte/package.json`;
+let local_svelte_pkg: Promise<any>;
+
+export async function resolve_local(specifier: string) {
+	const pkg = await (local_svelte_pkg ??= fetch(LOCAL_PKG_URL).then((r) => r.json()));
+
+	const subpath = resolve.exports(pkg, specifier.replace('svelte', '.'), {
+		browser: true
+	})![0] as string;
+
+	return new URL(subpath, LOCAL_PKG_URL).href;
+}
+
+export function parse_npm_url(/service/href: string) {
+	const match = /^npm:\/\/\$\/((?:@[^/]+\/)?[^/@]+)(?:@([^/]+))?(\/.+)?$/.exec(href);
+
+	if (!match) {
+		throw new Error(`${href} is not a valid npm URL`);
+	}
+
+	return {
+		name: match[1],
+		version: match[2],
+		subpath: match[3]
+	};
+}
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index 59710fa266..169a328bc1 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -1,5 +1,6 @@
 import type { CompileError, CompileOptions, CompileResult, Warning } from 'svelte/compiler';
-import type { File } from 'editor';
+import type { File } from '../Workspace.svelte';
+import type { MessageDetails } from '$lib/types';
 
 export type CompilerCommand =
 	| {
@@ -54,9 +55,8 @@ export interface BundleOptions {
 
 export type BundleMessageData = {
 	uid: number;
-	type: 'init' | 'bundle' | 'status' | 'error';
+	type: 'init' | 'bundle' | 'status' | 'error' | 'version';
 	message: string;
-	packages_url: string;
 	svelte_version: string;
 	files: File[];
 	options: BundleOptions;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 954338e930..cdf82b235f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,9 +80,6 @@ importers:
       do-not-zip:
         specifier: ^1.0.0
         version: 1.0.0
-      editor:
-        specifier: workspace:*
-        version: link:../../packages/editor
       flexsearch:
         specifier: ^0.7.43
         version: 0.7.43
@@ -208,97 +205,6 @@ importers:
         specifier: ^7.0.4
         version: 7.0.4(rollup@4.21.2)
 
-  packages/editor:
-    dependencies:
-      '@lezer/highlight':
-        specifier: ^1.2.1
-        version: 1.2.1
-      esm-env:
-        specifier: ^1.0.0
-        version: 1.2.1
-      tarparser:
-        specifier: ^0.0.4
-        version: 0.0.4
-    devDependencies:
-      '@codemirror/autocomplete':
-        specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)
-      '@codemirror/commands':
-        specifier: ^6.2.5
-        version: 6.5.0
-      '@codemirror/lang-css':
-        specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.35.3)
-      '@codemirror/lang-html':
-        specifier: ^6.4.6
-        version: 6.4.9
-      '@codemirror/lang-javascript':
-        specifier: ^6.2.1
-        version: 6.2.2
-      '@codemirror/language':
-        specifier: ^6.10.3
-        version: 6.10.3
-      '@codemirror/lint':
-        specifier: ^6.8.2
-        version: 6.8.2
-      '@codemirror/search':
-        specifier: ^6.5.6
-        version: 6.5.6
-      '@codemirror/state':
-        specifier: ^6.5.0
-        version: 6.5.0
-      '@codemirror/view':
-        specifier: ^6.35.3
-        version: 6.35.3
-      '@replit/codemirror-lang-svelte':
-        specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
-      '@replit/codemirror-vim':
-        specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
-      '@sveltejs/adapter-auto':
-        specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
-      '@sveltejs/kit':
-        specifier: ^2.20.0
-        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@sveltejs/package':
-        specifier: ^2.0.0
-        version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
-      '@sveltejs/repl':
-        specifier: workspace:*
-        version: link:../repl
-      '@sveltejs/site-kit':
-        specifier: workspace:*
-        version: link:../site-kit
-      '@sveltejs/vite-plugin-svelte':
-        specifier: ^4.0.0
-        version: 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      codemirror:
-        specifier: ^6.0.1
-        version: 6.0.1(@lezer/common@1.2.2)
-      prettier:
-        specifier: ^3.1.1
-        version: 3.3.2
-      prettier-plugin-svelte:
-        specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
-      publint:
-        specifier: ^0.2.12
-        version: 0.2.12
-      svelte:
-        specifier: ^5.23.0
-        version: 5.23.0
-      svelte-check:
-        specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
-      typescript:
-        specifier: ^5.0.0
-        version: 5.5.4
-      vite:
-        specifier: ^5.0.11
-        version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
-
   packages/repl:
     dependencies:
       '@codemirror/autocomplete':
@@ -310,6 +216,9 @@ importers:
       '@codemirror/lang-css':
         specifier: ^6.2.1
         version: 6.2.1(@codemirror/view@6.35.3)
+      '@codemirror/lang-html':
+        specifier: ^6.4.6
+        version: 6.4.9
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
@@ -334,6 +243,9 @@ importers:
       '@jridgewell/sourcemap-codec':
         specifier: ^1.4.15
         version: 1.5.0
+      '@lezer/highlight':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
         version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
@@ -355,9 +267,9 @@ importers:
       acorn:
         specifier: ^8.11.3
         version: 8.14.0
-      editor:
-        specifier: workspace:*
-        version: link:../editor
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.2)
       esm-env:
         specifier: ^1.0.0
         version: 1.2.1
@@ -4569,11 +4481,6 @@ snapshots:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
-    dependencies:
-      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      import-meta-resolve: 4.1.0
-
   '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))

From 93f01c48b6efbf4764f2499f05505cc0fa5314eb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 08:44:50 -0400
Subject: [PATCH 363/453] remove console.clear (#1243)

---
 packages/repl/src/lib/workers/bundler/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index ee0468dc64..9c5d29b3e6 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -443,7 +443,6 @@ async function bundle(
 	can_use_experimental_async: boolean
 ): Promise<BundleResult> {
 	if (!DEV) {
-		console.clear();
 		console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold');
 	}
 

From e370ab5a4999b43c3a2fa8784bccece53d3fc57f Mon Sep 17 00:00:00 2001
From: Leenus <96665978+Leenus533@users.noreply.github.com>
Date: Fri, 4 Apr 2025 14:01:04 +0100
Subject: [PATCH 364/453] fix: adjust right padding in OnThisPage component to
 fix text overflow (#1206)

* fix: adjust right padding in OnThisPage component to fix text overflow

* tweak styles

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 2e1b840b81..22bec4e816 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -217,7 +217,11 @@
 				overflow-y: auto;
 				scrollbar-width: none;
 				margin-left: -1rem; /* negative margin avoids focus rings being cut off */
-				padding: 0 0 var(--sk-page-padding-top) 1rem;
+				padding: 0 var(--sk-page-padding-side) var(--sk-page-padding-top) 1rem;
+
+				li {
+					text-indent: 1ch hanging;
+				}
 
 				li:first-child {
 					display: list-item;

From ef11caee532cb80ff8d6859514b10dccf5e90571 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 11:42:31 -0400
Subject: [PATCH 365/453] update adapter-vercel (#1255)

* update adapter-vercel

* bump

* try this
---
 apps/svelte.dev/package.json |  2 +-
 pnpm-lock.yaml               | 78 +++++++++---------------------------
 2 files changed, 21 insertions(+), 59 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index d78ba2ba66..8a2d7ab59c 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -51,7 +51,7 @@
 		"@cloudflare/workers-types": "^4.20241127.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
-		"@sveltejs/adapter-vercel": "^5.5.2",
+		"@sveltejs/adapter-vercel": "https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e",
 		"@sveltejs/enhanced-img": "^0.4.3",
 		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/site-kit": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cdf82b235f..243c0b702e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,8 +115,8 @@ importers:
         specifier: ^2.43.4
         version: 2.43.4
       '@sveltejs/adapter-vercel':
-        specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        specifier: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e
+        version: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
         version: 0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -1245,8 +1245,8 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@mapbox/node-pre-gyp@2.0.0-rc.0':
-    resolution: {integrity: sha512-nhSMNprz3WmeRvd8iUs5JqkKr0Ncx46JtPxM3AhXes84XpSJfmIwKeWXRpsr53S7kqPkQfPhzrMFUxSNb23qSA==}
+  '@mapbox/node-pre-gyp@2.0.0':
+    resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1550,8 +1550,9 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/adapter-vercel@5.5.2':
-    resolution: {integrity: sha512-6NpumKJ3m9Y6mkSFw4Z8YnaJZc42OWLkSFCk5hD6pLrS4f+b9JVBaXpKB/xkxf1Kf7JpzZtNZKbAaoRrTtJ+Hw==}
+  '@sveltejs/adapter-vercel@https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e':
+    resolution: {tarball: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e}
+    version: 5.6.3
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
@@ -1702,9 +1703,9 @@ packages:
       react:
         optional: true
 
-  '@vercel/nft@0.27.9':
-    resolution: {integrity: sha512-pTs7OchHQmSYJPR0puVQCWw/NqzuvAtnAhBurz21lq4Y4KqWoMpYKqmikkETG5r1bHNCM/hQMZ5JiRr9mhOkyg==}
-    engines: {node: '>=16'}
+  '@vercel/nft@0.29.2':
+    resolution: {integrity: sha512-A/Si4mrTkQqJ6EXJKv5EYCDQ3NL6nJXxG8VGXePsaiQigsomHYQC9xSpX8qGk7AEZk4b1ssbYIqJ0ISQQ7bfcA==}
+    engines: {node: '>=18'}
     hasBin: true
 
   '@vercel/speed-insights@1.1.0':
@@ -1882,9 +1883,6 @@ packages:
   bmp-ts@1.0.9:
     resolution: {integrity: sha512-cTEHk2jLrPyi+12M3dhpEbnnPOsaZuq7C45ylbbQIiWgDFZq4UVYPEY5mlqjvsj/6gJv9qX5sa+ebDzLXT28Vw==}
 
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-
   brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
@@ -1988,9 +1986,6 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
   consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2263,10 +2258,6 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
@@ -2544,9 +2535,6 @@ packages:
     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-
   minimatch@5.1.6:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
@@ -2698,10 +2686,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -4178,7 +4162,7 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@mapbox/node-pre-gyp@2.0.0-rc.0':
+  '@mapbox/node-pre-gyp@2.0.0':
     dependencies:
       consola: 3.2.3
       detect-libc: 2.0.3
@@ -4481,10 +4465,10 @@ snapshots:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      '@vercel/nft': 0.27.9(rollup@4.21.2)
+      '@vercel/nft': 0.29.2(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
       - encoding
@@ -4683,16 +4667,16 @@ snapshots:
     dependencies:
       server-only: 0.0.1
 
-  '@vercel/nft@0.27.9(rollup@4.21.2)':
+  '@vercel/nft@0.29.2(rollup@4.21.2)':
     dependencies:
-      '@mapbox/node-pre-gyp': 2.0.0-rc.0
+      '@mapbox/node-pre-gyp': 2.0.0
       '@rollup/pluginutils': 5.1.3(rollup@4.21.2)
-      acorn: 8.14.0
-      acorn-import-attributes: 1.9.5(acorn@8.14.0)
+      acorn: 8.14.1
+      acorn-import-attributes: 1.9.5(acorn@8.14.1)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
-      glob: 7.2.3
+      glob: 10.4.5
       graceful-fs: 4.2.11
       node-gyp-build: 4.8.4
       picomatch: 4.0.2
@@ -4751,9 +4735,9 @@ snapshots:
 
   abbrev@2.0.0: {}
 
-  acorn-import-attributes@1.9.5(acorn@8.14.0):
+  acorn-import-attributes@1.9.5(acorn@8.14.1):
     dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
 
   acorn@8.14.0: {}
 
@@ -4830,11 +4814,6 @@ snapshots:
 
   bmp-ts@1.0.9: {}
 
-  brace-expansion@1.1.11:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-
   brace-expansion@2.0.1:
     dependencies:
       balanced-match: 1.0.2
@@ -4947,8 +4926,6 @@ snapshots:
 
   commander@7.2.0: {}
 
-  concat-map@0.0.1: {}
-
   consola@3.2.3: {}
 
   cookie@0.6.0: {}
@@ -5248,15 +5225,6 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   glob@8.1.0:
     dependencies:
       fs.realpath: 1.0.0
@@ -5551,10 +5519,6 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimatch@3.1.2:
-    dependencies:
-      brace-expansion: 1.1.11
-
   minimatch@5.1.6:
     dependencies:
       brace-expansion: 2.0.1
@@ -5680,8 +5644,6 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@3.1.1: {}
 
   path-scurry@1.11.1:

From f06b95e21ebd5ee50a3dfabd32377086e06b3af6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 12:56:23 -0400
Subject: [PATCH 366/453] use adapter-vercel@5.7.0 (#1256)

---
 apps/svelte.dev/package.json |  2 +-
 pnpm-lock.yaml               | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 8a2d7ab59c..2cfa8e1336 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -51,7 +51,7 @@
 		"@cloudflare/workers-types": "^4.20241127.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
-		"@sveltejs/adapter-vercel": "https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e",
+		"@sveltejs/adapter-vercel": "^5.7.0",
 		"@sveltejs/enhanced-img": "^0.4.3",
 		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/site-kit": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 243c0b702e..96b73e5354 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,8 +115,8 @@ importers:
         specifier: ^2.43.4
         version: 2.43.4
       '@sveltejs/adapter-vercel':
-        specifier: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e
-        version: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        specifier: ^5.7.0
+        version: 5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
         version: 0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -1550,9 +1550,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/adapter-vercel@https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e':
-    resolution: {tarball: https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e}
-    version: 5.6.3
+  '@sveltejs/adapter-vercel@5.7.0':
+    resolution: {integrity: sha512-Bd/loKugyr12I576NaktLzIHa0PinS638wuWgVq4ctPg/qmkeU459jurWjs3NiRN/pbBpXOlk8i8HXgQF+dsUg==}
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
@@ -4465,7 +4464,7 @@ snapshots:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@https://pkg.pr.new/@sveltejs/adapter-vercel@280b6711dc415ad7db23128d9cbb945983bbcd7e(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
       '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.29.2(rollup@4.21.2)

From bf037192351e9d31eb8e964f95ca44b2bd175241 Mon Sep 17 00:00:00 2001
From: Marat Mukhutdinov <72585665+Marat5@users.noreply.github.com>
Date: Fri, 4 Apr 2025 21:15:30 +0400
Subject: [PATCH 367/453] fix: diff highlighting for specific example in
 tutorial (#1148)

* Fix diff highlighting for specific example

* Update apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md

* drive-by fix

* revert this bit

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../tutorial/01-svelte/05-events/04-component-events/index.md  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
index 820517cdb3..b6161e3adb 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
@@ -7,7 +7,7 @@ You can pass event handlers to components like any other prop. In `Stepper.svelt
 ```svelte
 /// file: Stepper.svelte
 <script>
-	let { +++increment, decrement+++ } = $props();
+	let +++{ increment, decrement }+++ = $props();
 </script>
 ```
 
@@ -22,6 +22,7 @@ You can pass event handlers to components like any other prop. In `Stepper.svelt
 In `App.svelte`, define the handlers:
 
 ```svelte
+/// file: App.svelte
 <Stepper
 	+++increment={() => value += 1}+++
 	+++decrement={() => value -= 1}+++

From ee3d65dab57d3e841ce19e4884adcc6bf2cc1455 Mon Sep 17 00:00:00 2001
From: Scott Wu <sw@scottwu.ca>
Date: Sat, 5 Apr 2025 01:44:32 +0800
Subject: [PATCH 368/453] docs: add missing config files to tutorial (#1141)

* add samples

* add config files

* Update apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md

* Apply suggestions from code review

* remove shadowed files

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../content/tutorial/+assets/package.json          |  2 +-
 .../content/tutorial/+assets/svelte.config.js      |  6 ++++++
 .../content/tutorial/+assets/vite.config.js        |  6 ++++++
 .../create-tutorial-zip/common/svelte.config.js    | 11 -----------
 .../create-tutorial-zip/common/vite.config.js      | 14 --------------
 5 files changed, 13 insertions(+), 26 deletions(-)
 create mode 100644 apps/svelte.dev/content/tutorial/+assets/svelte.config.js
 create mode 100644 apps/svelte.dev/content/tutorial/+assets/vite.config.js
 delete mode 100644 apps/svelte.dev/scripts/create-tutorial-zip/common/svelte.config.js
 delete mode 100644 apps/svelte.dev/scripts/create-tutorial-zip/common/vite.config.js

diff --git a/apps/svelte.dev/content/tutorial/+assets/package.json b/apps/svelte.dev/content/tutorial/+assets/package.json
index 5b46802a49..57e6ecf031 100644
--- a/apps/svelte.dev/content/tutorial/+assets/package.json
+++ b/apps/svelte.dev/content/tutorial/+assets/package.json
@@ -11,7 +11,7 @@
 		"@sveltejs/kit": "^2.20.0",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
-		"vite": "^5.4"
+		"vite": "^6"
 	},
 	"type": "module"
 }
diff --git a/apps/svelte.dev/content/tutorial/+assets/svelte.config.js b/apps/svelte.dev/content/tutorial/+assets/svelte.config.js
new file mode 100644
index 0000000000..821c14379e
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/+assets/svelte.config.js
@@ -0,0 +1,6 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {}
+};
+
+export default config;
diff --git a/apps/svelte.dev/content/tutorial/+assets/vite.config.js b/apps/svelte.dev/content/tutorial/+assets/vite.config.js
new file mode 100644
index 0000000000..bbf8c7da43
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/+assets/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/svelte.config.js b/apps/svelte.dev/scripts/create-tutorial-zip/common/svelte.config.js
deleted file mode 100644
index 29ce35b4be..0000000000
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/svelte.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	kit: {
-		// For the tutorial, we need to disable CSRF protection.
-		// Don't do this in your own apps unless you know what you're doing!
-		// See https://kit.svelte.dev/docs/configuration#csrf for more info.
-		csrf: false
-	}
-};
-
-export default config;
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/vite.config.js b/apps/svelte.dev/scripts/create-tutorial-zip/common/vite.config.js
deleted file mode 100644
index a92242bb7a..0000000000
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/vite.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()],
-
-	// Normally this would be unnecessary, but we
-	// need it for learn.svelte.dev
-	server: {
-		fs: {
-			strict: false
-		}
-	}
-});

From 9ed447e5e2593af1cae66fecd222cb18305f4a58 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Sat, 5 Apr 2025 02:53:42 +0900
Subject: [PATCH 369/453] fix: correct redirection for examples/[...path]
 (#1130)

* fix: correct redirection for examples/[...path]

* Update apps/svelte.dev/src/hooks.server.js

* move redirect-logic to hooks

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 apps/svelte.dev/src/hooks.server.js                          | 5 +++++
 .../svelte.dev/src/routes/examples/[...path]/+page.server.ts | 5 -----
 2 files changed, 5 insertions(+), 5 deletions(-)
 delete mode 100644 apps/svelte.dev/src/routes/examples/[...path]/+page.server.ts

diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js
index 0afe0a3c11..63fdd32416 100644
--- a/apps/svelte.dev/src/hooks.server.js
+++ b/apps/svelte.dev/src/hooks.server.js
@@ -61,6 +61,11 @@ export async function handle({ event, resolve }) {
 		redirect(307, event.url.pathname.replace('/repl', '/playground'));
 	}
 
+	// For examples
+	if (event.url.pathname.startsWith('/examples')) {
+		redirect(307, event.url.pathname.replace('/examples', '/playground'));
+	}
+
 	// Best effort to redirect from Svelte 3 tutorial to new tutorial
 	if (event.url.pathname.startsWith('/tutorial/') && event.url.pathname.split('/').length === 2) {
 		redirect(307, event.url.pathname.replace('/tutorial/', '/tutorial/svelte/'));
diff --git a/apps/svelte.dev/src/routes/examples/[...path]/+page.server.ts b/apps/svelte.dev/src/routes/examples/[...path]/+page.server.ts
deleted file mode 100644
index d9af5351d8..0000000000
--- a/apps/svelte.dev/src/routes/examples/[...path]/+page.server.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export function load({ url }) {
-	throw redirect(307, url.href.replace('/examples', '/playground'));
-}

From 00cdeb10641eadf562024e9f4e32fd63e65692e3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 14:15:58 -0400
Subject: [PATCH 370/453] note that redirect throws (#1257)

---
 .../03-sveltekit/09-errors-and-redirects/04-redirects/index.md  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
index 46cb804ab1..8ec88f936a 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/index.md
@@ -24,3 +24,5 @@ The most common status codes you'll use:
 - `303` — for form actions, following a successful submission
 - `307` — for temporary redirects
 - `308` — for permanent redirects
+
+> [!NOTE] `redirect(...)` throws, like `error(...)`, meaning no code _after_ the redirect will run.

From 0574cc7061b6f1a96244970028169e040efa8afc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 15:21:47 -0400
Subject: [PATCH 371/453] prevent iframe from stealing focus from editor
 (#1258)

* prevent iframe from stealing focus from editor

* dual mechanism
---
 .../repl/src/lib/Output/srcdoc/index.html     | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index f89f687249..07d900ac0e 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -43,6 +43,15 @@
 							}
 
 							(0, eval)(data.args.script);
+
+							// hand focus back to the editor if it's taken in an effect
+							// that runs immediately (for focuses in effects, this is
+							// more effective than listening for the focusin event)
+							Promise.resolve().then(() => {
+								if (document.activeElement !== null && document.activeElement !== document.body) {
+									send({ type: 'iframe_took_focus' });
+								}
+							});
 						}
 
 						if (action === 'catch_clicks') {
@@ -244,6 +253,26 @@
 						original(...args);
 					};
 				}
+
+				// Focus management
+				let can_focus = false;
+
+				window.addEventListener('pointerdown', (e) => (can_focus = true));
+				window.addEventListener('pointerup', (e) => (can_focus = false));
+				window.addEventListener('keydown', (e) => (can_focus = true));
+				window.addEventListener('keyup', (e) => (can_focus = false));
+
+				window.addEventListener('focusin', (e) => {
+					// if focusin happened as a result of a mouse/keyboard event, allow it
+					if (can_focus) return;
+
+					// if `e.target` is the `<body>` and there's a `relatedTarget`,
+					// assume the focusin was the result of a user navigation — allow it
+					if (e.target.tagName === 'BODY' && e.relatedTarget) return;
+
+					// otherwise, broadcast an event that causes the editor to reclaim focus
+					send({ type: 'iframe_took_focus' });
+				});
 			})();
 		</script>
 	</head>

From 8e6fe8002a619de42c70e37aa4e00c0429d72c92 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 15:22:46 -0400
Subject: [PATCH 372/453] simplify Canvas.svelte in actions tutorial (#1259)

---
 .../+assets/app-a/src/lib/Canvas.svelte        | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/08-actions/01-actions/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/01-svelte/08-actions/01-actions/+assets/app-a/src/lib/Canvas.svelte
index 4768f17c1f..194166efc1 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/08-actions/01-actions/+assets/app-a/src/lib/Canvas.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/08-actions/01-actions/+assets/app-a/src/lib/Canvas.svelte
@@ -7,21 +7,17 @@
 
 	$effect(() => {
 		context = canvas.getContext('2d');
-
-		function resize() {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
-		}
-
-		window.addEventListener('resize', resize);
 		resize();
-
-		return () => {
-			window.removeEventListener('resize', resize);
-		};
 	});
+
+	function resize() {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	}
 </script>
 
+<svelte:window onresize={resize} />
+
 <canvas
 	bind:this={canvas}
 	onpointerdown={(e) => {

From 5dbae29146d0e609aef486daec9bb412ccc64404 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?=
 =?UTF-8?q?=D0=9A=D1=80=D0=B0=D0=BC=D0=B0=D1=80=D0=B5=D0=B2?=
 <pochemuto@gmail.com>
Date: Fri, 4 Apr 2025 21:28:42 +0200
Subject: [PATCH 373/453] docs:Update App.svelte in Clock example according new
 rune syntax (#1127)

Update App.svelte
---
 .../content/examples/12-svg/01-clock/+assets/App.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte
index 3d0d85f3fd..1c47f30634 100644
--- a/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte
+++ b/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte
@@ -4,7 +4,7 @@
 	let time = $state(new Date());
 
 	// these automatically update when `time`
-	// changes, because of the `$:` prefix
+	// changes, because of the $derived
 	let hours = $derived(time.getHours());
 	let minutes = $derived(time.getMinutes());
 	let seconds = $derived(time.getSeconds());

From af8ada526bf4722decf074bfa0545125142a56a2 Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Fri, 4 Apr 2025 14:45:15 -0600
Subject: [PATCH 374/453] feat: Support TypeScript in the playground! (#1221)

* typescript

* checkpoint

* final not final

* nasty fix

* convert to JSDoc

* tidy up

* only strip types from .ts files

* only attempt to migrate .svelte files

* add prettier

* prettier

* snake_case

* small drive-by fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/vite.config.ts                |  2 +-
 packages/repl/package.json                    |  4 +-
 packages/repl/src/lib/Workspace.svelte.ts     |  4 +
 .../repl/src/lib/workers/bundler/index.ts     | 14 ++--
 .../bundler/plugins/typescript-strip-types.ts | 18 ++++
 .../repl/src/lib/workers/compiler/index.ts    |  8 +-
 packages/typestript/.gitignore                |  1 +
 packages/typestript/package.json              | 28 +++++++
 packages/typestript/src/index.js              | 84 +++++++++++++++++++
 packages/typestript/tsconfig.json             | 16 ++++
 pnpm-lock.yaml                                | 34 ++++++++
 11 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
 create mode 100644 packages/typestript/.gitignore
 create mode 100644 packages/typestript/package.json
 create mode 100644 packages/typestript/src/index.js
 create mode 100644 packages/typestript/tsconfig.json

diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts
index ba222b1ffd..a2295cbf4d 100644
--- a/apps/svelte.dev/vite.config.ts
+++ b/apps/svelte.dev/vite.config.ts
@@ -71,7 +71,7 @@ const config: UserConfig = {
 		}
 	},
 	optimizeDeps: {
-		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser']
+		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser', 'typestript']
 	},
 	ssr: {
 		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 6a40fe14de..9706f32a27 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -64,6 +64,7 @@
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
+		"magic-string": "^0.30.11",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
@@ -102,6 +103,7 @@
 		"svelte": "5.23.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
-		"zimmerframe": "^1.1.2"
+		"zimmerframe": "^1.1.2",
+		"typestript": "workspace:*"
 	}
 }
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index f1af3a5837..b210539428 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -589,6 +589,10 @@ export class Workspace {
 				extensions.push(javascript());
 				break;
 
+			case 'ts':
+				extensions.push(javascript({ typescript: true }));
+				break;
+
 			case 'html':
 				extensions.push(html());
 				break;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 9c5d29b3e6..ed37a38065 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -3,6 +3,7 @@ import { walk } from 'zimmerframe';
 import '../patch_window';
 import { rollup } from '@rollup/browser';
 import { DEV } from 'esm-env';
+import strip_types from './plugins/typescript-strip-types';
 import commonjs from './plugins/commonjs';
 import glsl from './plugins/glsl';
 import json from './plugins/json';
@@ -184,7 +185,7 @@ async function get_bundle(
 				if (importer.startsWith(VIRTUAL)) {
 					const url = new URL(importee, importer);
 
-					for (const suffix of ['', '.js', '.json']) {
+					for (const suffix of ['', '.js', '.ts', '.json']) {
 						const with_suffix = `${url.pathname.slice(1)}${suffix}`;
 						const file = virtual.get(with_suffix);
 
@@ -280,15 +281,15 @@ async function get_bundle(
 			const message = `bundling ${id.replace(VIRTUAL + '/', '').replace(NPM + '/', '')}`;
 			self.postMessage({ type: 'status', message });
 
-			if (!/\.(svelte|js)$/.test(id)) return null;
+			if (!/\.(svelte|js|ts)$/.test(id)) return null;
 
-			const name = id.split('/').pop()?.split('.')[0];
+			const filename = id.split('/').pop()!;
 
 			let result: CompileResult;
 
 			if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
-					filename: name + '.svelte',
+					filename,
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
 				};
@@ -342,9 +343,9 @@ async function get_bundle(
 					$$_styles.push($$__style);
 				`.replace(/\t/g, '');
 				}
-			} else if (id.endsWith('.svelte.js')) {
+			} else if (/\.svelte\.(js|ts)$/.test(id)) {
 				const compilerOptions: any = {
-					filename: name + '.js',
+					filename,
 					generate: 'client',
 					dev: true
 				};
@@ -387,6 +388,7 @@ async function get_bundle(
 		input: './__entry.js',
 		cache: previous?.key === key && previous.cache,
 		plugins: [
+			strip_types,
 			repl_plugin,
 			commonjs,
 			json,
diff --git a/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts b/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
new file mode 100644
index 0000000000..7499203829
--- /dev/null
+++ b/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
@@ -0,0 +1,18 @@
+import type { Plugin } from '@rollup/browser';
+import { stripTypes } from 'typestript';
+
+const plugin: Plugin = {
+	name: 'typescript-strip-types',
+	transform: (code, id) => {
+		if (!id.endsWith('.ts')) return;
+
+		const s = stripTypes(code);
+
+		return {
+			code: s.toString(),
+			map: s.generateMap({ hires: true })
+		};
+	}
+};
+
+export default plugin;
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
index e0cdc4e9b6..7c13626a97 100644
--- a/packages/repl/src/lib/workers/compiler/index.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -1,6 +1,7 @@
 import '@sveltejs/site-kit/polyfills';
 import type { CompileResult } from 'svelte/compiler';
 import type { ExposedCompilerOptions, File } from '../../Workspace.svelte';
+import { stripTypes } from 'typestript';
 import { load_svelte } from '../npm';
 
 // hack for magic-string and Svelte 4 compiler
@@ -21,7 +22,7 @@ addEventListener('message', async (event) => {
 
 	const { can_use_experimental_async, svelte } = (cache[version] ??= await load_svelte(version));
 
-	if (!file.name.endsWith('.svelte') && !svelte.compileModule) {
+	if (!file.name.endsWith('.svelte') && !file.name.includes('.svelte.') && !svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
 			id,
@@ -37,7 +38,7 @@ addEventListener('message', async (event) => {
 
 	let migration = null;
 
-	if (svelte.migrate) {
+	if (file.name.endsWith('.svelte') && svelte.migrate) {
 		try {
 			migration = svelte.migrate(file.contents, { filename: file.name });
 		} catch (e) {
@@ -80,7 +81,8 @@ addEventListener('message', async (event) => {
 				compilerOptions.experimental = { async: true };
 			}
 
-			result = svelte.compileModule(file.contents, compilerOptions);
+			const code = file.name.endsWith('.ts') ? stripTypes(file.contents).toString() : file.contents;
+			result = svelte.compileModule(code, compilerOptions);
 		}
 
 		postMessage({
diff --git a/packages/typestript/.gitignore b/packages/typestript/.gitignore
new file mode 100644
index 0000000000..53c37a1660
--- /dev/null
+++ b/packages/typestript/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/packages/typestript/package.json b/packages/typestript/package.json
new file mode 100644
index 0000000000..fe56c2ebd0
--- /dev/null
+++ b/packages/typestript/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "typestript",
+	"private": true,
+	"scripts": {
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./src/index.js",
+			"default": "./src/index.js"
+		}
+	},
+	"files": [
+		"src"
+	],
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/acorn-typescript": "^1.0.5",
+		"acorn": "^8.11.3",
+		"magic-string": "^0.30.11",
+		"zimmerframe": "^1.1.2"
+	},
+	"devDependencies": {
+		"@typescript-eslint/types": "^8.28.0",
+		"prettier": "^3.3.2"
+	}
+}
diff --git a/packages/typestript/src/index.js b/packages/typestript/src/index.js
new file mode 100644
index 0000000000..272fcd27f5
--- /dev/null
+++ b/packages/typestript/src/index.js
@@ -0,0 +1,84 @@
+/** @import { TSESTree } from '@typescript-eslint/types' */
+import * as acorn from 'acorn';
+import { tsPlugin } from '@sveltejs/acorn-typescript';
+import { walk } from 'zimmerframe';
+import MagicString from 'magic-string';
+
+const TSParser = acorn.Parser.extend(tsPlugin());
+
+/**
+ * @param {string} content
+ * @returns {MagicString}
+ */
+export function stripTypes(content) {
+	const ast = /** @type {unknown} */ (
+		TSParser.parse(content, {
+			sourceType: 'module',
+			ecmaVersion: 13,
+			locations: true
+		})
+	);
+
+	const s = new MagicString(content);
+
+	walk(/** @type {TSESTree.Node & { start: number, end: number }} */ (ast), null, {
+		_: (node, context) => {
+			if (
+				node.type.startsWith('TS') &&
+				!['TSAsExpression', 'TSSatisfiesExpression', 'TSNonNullExpression'].includes(node.type)
+			) {
+				const { start, end } = node;
+				s.overwrite(start, end, ' '.repeat(end - start));
+			} else {
+				context.next();
+			}
+		},
+		TSAsExpression: (node) => {
+			handle_type_expression(node, s);
+		},
+		TSSatisfiesExpression: (node) => {
+			handle_type_expression(node, s);
+		},
+		TSNonNullExpression: (node, context) => {
+			s.overwrite(node.end - 1, node.end, ' ');
+			context.next();
+		},
+		ImportDeclaration: (node, context) => {
+			if (
+				node.importKind === 'type' ||
+				node.specifiers.every(
+					(specifier) => specifier.type === 'ImportSpecifier' && specifier.importKind === 'type'
+				)
+			) {
+				const { start, end } = node;
+				s.overwrite(start, end, ' '.repeat(end - start));
+			} else {
+				context.next();
+			}
+		},
+		ImportSpecifier: (node, context) => {
+			if (node.importKind === 'type') {
+				const { start, end } = node;
+				s.overwrite(start, end, ' '.repeat(end - start));
+			} else {
+				context.next();
+			}
+		}
+	});
+
+	return s;
+}
+
+/**
+ * @param {TSESTree.Node} node
+ * @param {MagicString} s
+ */
+function handle_type_expression(node, s) {
+	// @ts-ignore
+	const start = node.expression.end;
+
+	// @ts-ignore
+	const end = node.typeAnnotation.end;
+
+	s.overwrite(start, end, ' '.repeat(end - start));
+}
diff --git a/packages/typestript/tsconfig.json b/packages/typestript/tsconfig.json
new file mode 100644
index 0000000000..3b16fea544
--- /dev/null
+++ b/packages/typestript/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"outDir": "dist",
+		"allowJs": true,
+		"checkJs": true,
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"lib": ["esnext", "DOM", "DOM.Iterable"],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"target": "esnext",
+		"declaration": true,
+		"declarationMap": true
+	},
+	"include": ["src/**/*.ts"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96b73e5354..67b24c894e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -294,6 +294,9 @@ importers:
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
+      typestript:
+        specifier: workspace:*
+        version: link:../typestript
       zimmerframe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -316,6 +319,9 @@ importers:
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
+      magic-string:
+        specifier: ^0.30.11
+        version: 0.30.12
       prettier:
         specifier: ^3.3.2
         version: 3.3.2
@@ -435,6 +441,28 @@ importers:
         specifier: ^5.4.3
         version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
+  packages/typestript:
+    dependencies:
+      '@sveltejs/acorn-typescript':
+        specifier: ^1.0.5
+        version: 1.0.5(acorn@8.14.1)
+      acorn:
+        specifier: ^8.11.3
+        version: 8.14.1
+      magic-string:
+        specifier: ^0.30.11
+        version: 0.30.12
+      zimmerframe:
+        specifier: ^1.1.2
+        version: 1.1.2
+    devDependencies:
+      '@typescript-eslint/types':
+        specifier: ^8.28.0
+        version: 8.28.0
+      prettier:
+        specifier: ^3.3.2
+        version: 3.3.2
+
 packages:
 
   '@ampproject/remapping@2.3.0':
@@ -1678,6 +1706,10 @@ packages:
   '@types/ws@8.5.10':
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
 
+  '@typescript-eslint/types@8.28.0':
+    resolution: {integrity: sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript/vfs@1.6.0':
     resolution: {integrity: sha512-hvJUjNVeBMp77qPINuUvYXj4FyWeeMMKZkxEATEU3hqBAQ7qdTBCUFT7Sp0Zu0faeEtFf+ldXxMEDr/bk73ISg==}
     peerDependencies:
@@ -4646,6 +4678,8 @@ snapshots:
     dependencies:
       '@types/node': 20.14.2
 
+  '@typescript-eslint/types@8.28.0': {}
+
   '@typescript/vfs@1.6.0(typescript@5.5.4)':
     dependencies:
       debug: 4.4.0

From 0c11d9884e15470b309af696361a514f477a9750 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 16:54:21 -0400
Subject: [PATCH 375/453] Revert "feat: Support TypeScript in the playground!"
 (#1260)

Revert "feat: Support TypeScript in the playground! (#1221)"

This reverts commit af8ada526bf4722decf074bfa0545125142a56a2.
---
 apps/svelte.dev/vite.config.ts                |  2 +-
 packages/repl/package.json                    |  4 +-
 packages/repl/src/lib/Workspace.svelte.ts     |  4 -
 .../repl/src/lib/workers/bundler/index.ts     | 14 ++--
 .../bundler/plugins/typescript-strip-types.ts | 18 ----
 .../repl/src/lib/workers/compiler/index.ts    |  8 +-
 packages/typestript/.gitignore                |  1 -
 packages/typestript/package.json              | 28 -------
 packages/typestript/src/index.js              | 84 -------------------
 packages/typestript/tsconfig.json             | 16 ----
 pnpm-lock.yaml                                | 34 --------
 11 files changed, 11 insertions(+), 202 deletions(-)
 delete mode 100644 packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
 delete mode 100644 packages/typestript/.gitignore
 delete mode 100644 packages/typestript/package.json
 delete mode 100644 packages/typestript/src/index.js
 delete mode 100644 packages/typestript/tsconfig.json

diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts
index a2295cbf4d..ba222b1ffd 100644
--- a/apps/svelte.dev/vite.config.ts
+++ b/apps/svelte.dev/vite.config.ts
@@ -71,7 +71,7 @@ const config: UserConfig = {
 		}
 	},
 	optimizeDeps: {
-		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser', 'typestript']
+		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser']
 	},
 	ssr: {
 		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 9706f32a27..6a40fe14de 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -64,7 +64,6 @@
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/estree": "^1.0.5",
-		"magic-string": "^0.30.11",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
@@ -103,7 +102,6 @@
 		"svelte": "5.23.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
-		"zimmerframe": "^1.1.2",
-		"typestript": "workspace:*"
+		"zimmerframe": "^1.1.2"
 	}
 }
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index b210539428..f1af3a5837 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -589,10 +589,6 @@ export class Workspace {
 				extensions.push(javascript());
 				break;
 
-			case 'ts':
-				extensions.push(javascript({ typescript: true }));
-				break;
-
 			case 'html':
 				extensions.push(html());
 				break;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index ed37a38065..9c5d29b3e6 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -3,7 +3,6 @@ import { walk } from 'zimmerframe';
 import '../patch_window';
 import { rollup } from '@rollup/browser';
 import { DEV } from 'esm-env';
-import strip_types from './plugins/typescript-strip-types';
 import commonjs from './plugins/commonjs';
 import glsl from './plugins/glsl';
 import json from './plugins/json';
@@ -185,7 +184,7 @@ async function get_bundle(
 				if (importer.startsWith(VIRTUAL)) {
 					const url = new URL(importee, importer);
 
-					for (const suffix of ['', '.js', '.ts', '.json']) {
+					for (const suffix of ['', '.js', '.json']) {
 						const with_suffix = `${url.pathname.slice(1)}${suffix}`;
 						const file = virtual.get(with_suffix);
 
@@ -281,15 +280,15 @@ async function get_bundle(
 			const message = `bundling ${id.replace(VIRTUAL + '/', '').replace(NPM + '/', '')}`;
 			self.postMessage({ type: 'status', message });
 
-			if (!/\.(svelte|js|ts)$/.test(id)) return null;
+			if (!/\.(svelte|js)$/.test(id)) return null;
 
-			const filename = id.split('/').pop()!;
+			const name = id.split('/').pop()?.split('.')[0];
 
 			let result: CompileResult;
 
 			if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
-					filename,
+					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
 				};
@@ -343,9 +342,9 @@ async function get_bundle(
 					$$_styles.push($$__style);
 				`.replace(/\t/g, '');
 				}
-			} else if (/\.svelte\.(js|ts)$/.test(id)) {
+			} else if (id.endsWith('.svelte.js')) {
 				const compilerOptions: any = {
-					filename,
+					filename: name + '.js',
 					generate: 'client',
 					dev: true
 				};
@@ -388,7 +387,6 @@ async function get_bundle(
 		input: './__entry.js',
 		cache: previous?.key === key && previous.cache,
 		plugins: [
-			strip_types,
 			repl_plugin,
 			commonjs,
 			json,
diff --git a/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts b/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
deleted file mode 100644
index 7499203829..0000000000
--- a/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Plugin } from '@rollup/browser';
-import { stripTypes } from 'typestript';
-
-const plugin: Plugin = {
-	name: 'typescript-strip-types',
-	transform: (code, id) => {
-		if (!id.endsWith('.ts')) return;
-
-		const s = stripTypes(code);
-
-		return {
-			code: s.toString(),
-			map: s.generateMap({ hires: true })
-		};
-	}
-};
-
-export default plugin;
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
index 7c13626a97..e0cdc4e9b6 100644
--- a/packages/repl/src/lib/workers/compiler/index.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -1,7 +1,6 @@
 import '@sveltejs/site-kit/polyfills';
 import type { CompileResult } from 'svelte/compiler';
 import type { ExposedCompilerOptions, File } from '../../Workspace.svelte';
-import { stripTypes } from 'typestript';
 import { load_svelte } from '../npm';
 
 // hack for magic-string and Svelte 4 compiler
@@ -22,7 +21,7 @@ addEventListener('message', async (event) => {
 
 	const { can_use_experimental_async, svelte } = (cache[version] ??= await load_svelte(version));
 
-	if (!file.name.endsWith('.svelte') && !file.name.includes('.svelte.') && !svelte.compileModule) {
+	if (!file.name.endsWith('.svelte') && !svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
 			id,
@@ -38,7 +37,7 @@ addEventListener('message', async (event) => {
 
 	let migration = null;
 
-	if (file.name.endsWith('.svelte') && svelte.migrate) {
+	if (svelte.migrate) {
 		try {
 			migration = svelte.migrate(file.contents, { filename: file.name });
 		} catch (e) {
@@ -81,8 +80,7 @@ addEventListener('message', async (event) => {
 				compilerOptions.experimental = { async: true };
 			}
 
-			const code = file.name.endsWith('.ts') ? stripTypes(file.contents).toString() : file.contents;
-			result = svelte.compileModule(code, compilerOptions);
+			result = svelte.compileModule(file.contents, compilerOptions);
 		}
 
 		postMessage({
diff --git a/packages/typestript/.gitignore b/packages/typestript/.gitignore
deleted file mode 100644
index 53c37a1660..0000000000
--- a/packages/typestript/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-dist
\ No newline at end of file
diff --git a/packages/typestript/package.json b/packages/typestript/package.json
deleted file mode 100644
index fe56c2ebd0..0000000000
--- a/packages/typestript/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-	"name": "typestript",
-	"private": true,
-	"scripts": {
-		"lint": "prettier --check .",
-		"format": "prettier --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./src/index.js",
-			"default": "./src/index.js"
-		}
-	},
-	"files": [
-		"src"
-	],
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/acorn-typescript": "^1.0.5",
-		"acorn": "^8.11.3",
-		"magic-string": "^0.30.11",
-		"zimmerframe": "^1.1.2"
-	},
-	"devDependencies": {
-		"@typescript-eslint/types": "^8.28.0",
-		"prettier": "^3.3.2"
-	}
-}
diff --git a/packages/typestript/src/index.js b/packages/typestript/src/index.js
deleted file mode 100644
index 272fcd27f5..0000000000
--- a/packages/typestript/src/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/** @import { TSESTree } from '@typescript-eslint/types' */
-import * as acorn from 'acorn';
-import { tsPlugin } from '@sveltejs/acorn-typescript';
-import { walk } from 'zimmerframe';
-import MagicString from 'magic-string';
-
-const TSParser = acorn.Parser.extend(tsPlugin());
-
-/**
- * @param {string} content
- * @returns {MagicString}
- */
-export function stripTypes(content) {
-	const ast = /** @type {unknown} */ (
-		TSParser.parse(content, {
-			sourceType: 'module',
-			ecmaVersion: 13,
-			locations: true
-		})
-	);
-
-	const s = new MagicString(content);
-
-	walk(/** @type {TSESTree.Node & { start: number, end: number }} */ (ast), null, {
-		_: (node, context) => {
-			if (
-				node.type.startsWith('TS') &&
-				!['TSAsExpression', 'TSSatisfiesExpression', 'TSNonNullExpression'].includes(node.type)
-			) {
-				const { start, end } = node;
-				s.overwrite(start, end, ' '.repeat(end - start));
-			} else {
-				context.next();
-			}
-		},
-		TSAsExpression: (node) => {
-			handle_type_expression(node, s);
-		},
-		TSSatisfiesExpression: (node) => {
-			handle_type_expression(node, s);
-		},
-		TSNonNullExpression: (node, context) => {
-			s.overwrite(node.end - 1, node.end, ' ');
-			context.next();
-		},
-		ImportDeclaration: (node, context) => {
-			if (
-				node.importKind === 'type' ||
-				node.specifiers.every(
-					(specifier) => specifier.type === 'ImportSpecifier' && specifier.importKind === 'type'
-				)
-			) {
-				const { start, end } = node;
-				s.overwrite(start, end, ' '.repeat(end - start));
-			} else {
-				context.next();
-			}
-		},
-		ImportSpecifier: (node, context) => {
-			if (node.importKind === 'type') {
-				const { start, end } = node;
-				s.overwrite(start, end, ' '.repeat(end - start));
-			} else {
-				context.next();
-			}
-		}
-	});
-
-	return s;
-}
-
-/**
- * @param {TSESTree.Node} node
- * @param {MagicString} s
- */
-function handle_type_expression(node, s) {
-	// @ts-ignore
-	const start = node.expression.end;
-
-	// @ts-ignore
-	const end = node.typeAnnotation.end;
-
-	s.overwrite(start, end, ' '.repeat(end - start));
-}
diff --git a/packages/typestript/tsconfig.json b/packages/typestript/tsconfig.json
deleted file mode 100644
index 3b16fea544..0000000000
--- a/packages/typestript/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-	"compilerOptions": {
-		"outDir": "dist",
-		"allowJs": true,
-		"checkJs": true,
-		"verbatimModuleSyntax": true,
-		"isolatedModules": true,
-		"lib": ["esnext", "DOM", "DOM.Iterable"],
-		"moduleResolution": "bundler",
-		"module": "esnext",
-		"target": "esnext",
-		"declaration": true,
-		"declarationMap": true
-	},
-	"include": ["src/**/*.ts"]
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67b24c894e..96b73e5354 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -294,9 +294,6 @@ importers:
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
-      typestript:
-        specifier: workspace:*
-        version: link:../typestript
       zimmerframe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -319,9 +316,6 @@ importers:
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
-      magic-string:
-        specifier: ^0.30.11
-        version: 0.30.12
       prettier:
         specifier: ^3.3.2
         version: 3.3.2
@@ -441,28 +435,6 @@ importers:
         specifier: ^5.4.3
         version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  packages/typestript:
-    dependencies:
-      '@sveltejs/acorn-typescript':
-        specifier: ^1.0.5
-        version: 1.0.5(acorn@8.14.1)
-      acorn:
-        specifier: ^8.11.3
-        version: 8.14.1
-      magic-string:
-        specifier: ^0.30.11
-        version: 0.30.12
-      zimmerframe:
-        specifier: ^1.1.2
-        version: 1.1.2
-    devDependencies:
-      '@typescript-eslint/types':
-        specifier: ^8.28.0
-        version: 8.28.0
-      prettier:
-        specifier: ^3.3.2
-        version: 3.3.2
-
 packages:
 
   '@ampproject/remapping@2.3.0':
@@ -1706,10 +1678,6 @@ packages:
   '@types/ws@8.5.10':
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
 
-  '@typescript-eslint/types@8.28.0':
-    resolution: {integrity: sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript/vfs@1.6.0':
     resolution: {integrity: sha512-hvJUjNVeBMp77qPINuUvYXj4FyWeeMMKZkxEATEU3hqBAQ7qdTBCUFT7Sp0Zu0faeEtFf+ldXxMEDr/bk73ISg==}
     peerDependencies:
@@ -4678,8 +4646,6 @@ snapshots:
     dependencies:
       '@types/node': 20.14.2
 
-  '@typescript-eslint/types@8.28.0': {}
-
   '@typescript/vfs@1.6.0(typescript@5.5.4)':
     dependencies:
       debug: 4.4.0

From 9a524d9921579dfb87fbfd2576b1acb0e7ed1ddb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 17:08:28 -0400
Subject: [PATCH 376/453] respect browser overrides (#1261)

---
 packages/repl/src/lib/workers/npm.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/workers/npm.ts b/packages/repl/src/lib/workers/npm.ts
index 93967f471a..32519bbc48 100644
--- a/packages/repl/src/lib/workers/npm.ts
+++ b/packages/repl/src/lib/workers/npm.ts
@@ -172,7 +172,7 @@ export function resolve_subpath(pkg: Package, subpath: string): string {
 
 	if (typeof pkg.meta.browser === 'object') {
 		// this will either return `pkg.browser[subpath]` or `subpath`
-		return resolve.legacy(pkg, {
+		return resolve.legacy(pkg.meta, {
 			browser: subpath
 		}) as string;
 	}
@@ -182,7 +182,12 @@ export function resolve_subpath(pkg: Package, subpath: string): string {
 
 export function add_suffix(pkg: Package, path: string) {
 	for (const suffix of ['', '.js', '.mjs', '.cjs', '/index.js', '/index.mjs', '/index.cjs']) {
-		const with_suffix = path + suffix;
+		let with_suffix = path + suffix;
+
+		if (pkg.meta.browser) {
+			with_suffix = pkg.meta.browser[`./${with_suffix}`]?.replace('./', '') ?? with_suffix;
+		}
+
 		const file = pkg.contents[with_suffix];
 
 		if (file && file.type === 'file') {

From 7bb232ae4d1744a5802f853d7559f0ff24ea13ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Apr 2025 17:09:31 -0400
Subject: [PATCH 377/453] rename add_suffix to something less misleading

---
 packages/repl/src/lib/workers/bundler/index.ts | 6 +++---
 packages/repl/src/lib/workers/npm.ts           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 9c5d29b3e6..d1fcbe479b 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -20,7 +20,7 @@ import type { Node } from 'estree';
 import { max } from './semver';
 import { NPM, VIRTUAL } from '../constants';
 import {
-	add_suffix,
+	normalize_path,
 	fetch_package,
 	load_svelte,
 	parse_npm_url,
@@ -204,7 +204,7 @@ async function get_bundle(
 					const pkg = await fetch_package(name, name === 'svelte' ? svelte_version : version);
 					const path = new URL(importee, importer).pathname.replace(`/${name}@${version}/`, '');
 
-					return add_suffix(pkg, path);
+					return normalize_path(pkg, path);
 				}
 
 				return new URL(importee, importer).href;
@@ -248,7 +248,7 @@ async function get_bundle(
 			const pkg = await fetch_package(pkg_name, pkg_name === 'svelte' ? svelte_version : v);
 			const subpath = resolve_subpath(pkg, '.' + (match[3] ?? ''));
 
-			return add_suffix(pkg, subpath.slice(2));
+			return normalize_path(pkg, subpath.slice(2));
 		},
 		async load(resolved) {
 			if (uid !== current_id) throw ABORT;
diff --git a/packages/repl/src/lib/workers/npm.ts b/packages/repl/src/lib/workers/npm.ts
index 32519bbc48..1b2d71871f 100644
--- a/packages/repl/src/lib/workers/npm.ts
+++ b/packages/repl/src/lib/workers/npm.ts
@@ -180,7 +180,7 @@ export function resolve_subpath(pkg: Package, subpath: string): string {
 	return subpath;
 }
 
-export function add_suffix(pkg: Package, path: string) {
+export function normalize_path(pkg: Package, path: string) {
 	for (const suffix of ['', '.js', '.mjs', '.cjs', '/index.js', '/index.mjs', '/index.cjs']) {
 		let with_suffix = path + suffix;
 

From 55d8003b6910a42abeb1a22a59e17ae4252e16f5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Apr 2025 12:09:40 -0400
Subject: [PATCH 378/453] squelch some warnings (#1268)

* squelch some warnings

* maybe this?

* oops, errant git clean
---
 apps/svelte.dev/src/lib/db/client.js                        | 6 ++----
 .../src/routes/tutorial/[...slug]/ImageViewer.svelte        | 3 +--
 .../routes/tutorial/[...slug]/image-viewer-background.svg   | 1 +
 packages/site-kit/src/lib/markdown/renderer.ts              | 2 +-
 packages/site-kit/src/lib/markdown/utils.ts                 | 2 +-
 5 files changed, 6 insertions(+), 8 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/image-viewer-background.svg

diff --git a/apps/svelte.dev/src/lib/db/client.js b/apps/svelte.dev/src/lib/db/client.js
index 634e1342d1..0f3dd5a40a 100644
--- a/apps/svelte.dev/src/lib/db/client.js
+++ b/apps/svelte.dev/src/lib/db/client.js
@@ -2,9 +2,7 @@ import { building } from '$app/environment';
 import { env } from '$env/dynamic/private';
 import { createClient } from '@supabase/supabase-js';
 
-const enabled = !building && env.SUPABASE_URL && env.SUPABASE_KEY;
-
-if (!enabled) {
+if (!building && (!env.SUPABASE_URL || !env.SUPABASE_KEY)) {
 	console.warn(
 		`Missing SUPABASE_URL and SUPABASE_KEY environment variables. Loading and saving in the playground is disabled`
 	);
@@ -15,7 +13,7 @@ if (!enabled) {
  */
 // @ts-ignore-line
 export const client =
-	enabled &&
+	!building &&
 	createClient(env.SUPABASE_URL, env.SUPABASE_KEY, {
 		global: { fetch },
 		auth: { persistSession: false }
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
index 65c65c8a3f..d426a3c025 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
@@ -32,8 +32,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: white
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" height="20px" width="20px"><g><rect fill="hsl(240, 8%, 95%)" width="10" height="10"></rect><rect fill="hsl(240, 8%, 95%)" x="10" y="10" width="10" height="10"></rect></g></svg>');
+		background: white url(http://github.com/image-viewer-background.svg);
 	}
 
 	img {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/image-viewer-background.svg b/apps/svelte.dev/src/routes/tutorial/[...slug]/image-viewer-background.svg
new file mode 100644
index 0000000000..b01de8f26f
--- /dev/null
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/image-viewer-background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" height="20px" width="20px"><g><rect fill="hsl(240, 8%, 95%)" width="10" height="10"></rect><rect fill="hsl(240, 8%, 95%)" x="10" y="10" width="10" height="10"></rect></g></svg>
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index d39b68545e..c453ed2b6c 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -1,5 +1,5 @@
 import MagicString from 'magic-string';
-import { createHash, Hash } from 'node:crypto';
+import { createHash, type Hash } from 'node:crypto';
 import fs from 'node:fs';
 import process from 'node:process';
 import path from 'node:path';
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 71bafd9f90..559d507456 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -1,4 +1,4 @@
-import { Marked, Renderer, type TokenizerObject, type MarkedExtension } from 'marked';
+import { Marked, type Renderer, type TokenizerObject, type MarkedExtension } from 'marked';
 import json5 from 'json5';
 
 export const SHIKI_LANGUAGE_MAP = {

From 42b1a5e7846c33001340ee111c5299237b84463d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Apr 2025 16:01:17 -0400
Subject: [PATCH 379/453] remove shiki@1 (#1269)

* remove shiki@1

* WIP

* i think it works?
---
 apps/svelte.dev/package.json                  |   2 -
 apps/svelte.dev/vite.config.ts                |  18 ++-
 packages/site-kit/package.json                |   1 +
 .../site-kit/src/lib/markdown/renderer.ts     |  24 ++-
 pnpm-lock.yaml                                | 139 +-----------------
 5 files changed, 39 insertions(+), 145 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 2cfa8e1336..febfe8548f 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -21,7 +21,6 @@
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
 		"@rich_harris/svelte-split-pane": "^2.0.0",
-		"@shikijs/twoslash": "^1.22.0",
 		"@sveltejs/amp": "^1.1.4",
 		"@sveltejs/repl": "workspace:*",
 		"@testing-library/dom": "^10.4.0",
@@ -41,7 +40,6 @@
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",
-		"shiki": "^1.22.0",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.9",
 		"ws": "^8.18.0",
diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts
index ba222b1ffd..197ee79ab5 100644
--- a/apps/svelte.dev/vite.config.ts
+++ b/apps/svelte.dev/vite.config.ts
@@ -59,7 +59,20 @@ const config: UserConfig = {
 		}
 	},
 	build: {
-		cssMinify: 'lightningcss'
+		cssMinify: 'lightningcss',
+		rollupOptions: {
+			output: {
+				banner: (chunk) => {
+					// this monstrosity is required for twoslash (which uses `require`) to work during prerendering.
+					// it is brittle and may not work in perpetuity but i'm not sure what a better solution would be
+					if (chunk.type === 'chunk' && chunk.name === 'renderer') {
+						return `import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);`;
+					}
+
+					return '';
+				}
+			}
+		}
 	},
 	server: {
 		fs: { allow: ['../../packages', '../../../KIT/kit/packages/kit'] },
@@ -74,8 +87,7 @@ const config: UserConfig = {
 		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser']
 	},
 	ssr: {
-		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
-		external: ['shiki', '@shikijs/twoslash']
+		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl']
 	},
 	worker: {
 		format: 'es'
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 98e0fab722..37cdab652c 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -38,6 +38,7 @@
 		"@fontsource/fira-sans": "^5.1.0",
 		"@lezer/common": "^1.0.4",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
+		"@shikijs/langs": "^3.2.1",
 		"@shikijs/twoslash": "^3.2.1",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index c453ed2b6c..3190094eed 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -5,7 +5,9 @@ import process from 'node:process';
 import path from 'node:path';
 import ts from 'typescript';
 import * as marked from 'marked';
-import { codeToHtml, createCssVariablesTheme } from 'shiki';
+import { createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import { createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
 
@@ -43,6 +45,20 @@ if (!fs.existsSync(original_file)) {
 hash_graph(hash, original_file);
 const digest = hash.digest().toString('base64').replace(/\//g, '-');
 
+const highlighter = await createHighlighterCore({
+	themes: [],
+	langs: [
+		import('@shikijs/langs/javascript'),
+		import('@shikijs/langs/typescript'),
+		import('@shikijs/langs/html'),
+		import('@shikijs/langs/css'),
+		import('@shikijs/langs/bash'),
+		import('@shikijs/langs/yaml'),
+		import('@shikijs/langs/svelte')
+	],
+	engine: createOnigurumaEngine(import('shiki/wasm'))
+});
+
 /**
  * Utility function to work with code snippet caching.
  *
@@ -722,7 +738,7 @@ async function syntax_highlight({
 
 	if (/^(dts|yaml|yml)/.test(language)) {
 		html = replace_blank_lines(
-			await codeToHtml(source, {
+			highlighter.codeToHtml(source, {
 				lang: language === 'dts' ? 'ts' : language,
 				theme
 			})
@@ -737,7 +753,7 @@ async function syntax_highlight({
 		});
 
 		try {
-			html = await codeToHtml(prelude + redacted, {
+			html = highlighter.codeToHtml(prelude + redacted, {
 				lang: language,
 				theme,
 				transformers: check
@@ -833,7 +849,7 @@ async function syntax_highlight({
 
 		html = replace_blank_lines(html);
 	} else {
-		const highlighted = await codeToHtml(source, {
+		const highlighted = highlighter.codeToHtml(source, {
 			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP],
 			theme
 		});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96b73e5354..cb6412a4b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,6 @@ importers:
       '@rich_harris/svelte-split-pane':
         specifier: ^2.0.0
         version: 2.0.0(svelte@5.23.0)
-      '@shikijs/twoslash':
-        specifier: ^1.22.0
-        version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.4
         version: 1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
@@ -89,9 +86,6 @@ importers:
       port-authority:
         specifier: ^2.0.1
         version: 2.0.1
-      shiki:
-        specifier: ^1.22.0
-        version: 1.22.0
       topojson-client:
         specifier: ^3.1.0
         version: 3.1.0
@@ -388,6 +382,9 @@ importers:
       '@replit/codemirror-lang-svelte':
         specifier: ^6.0.0
         version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+      '@shikijs/langs':
+        specifier: ^3.2.1
+        version: 3.2.1
       '@shikijs/twoslash':
         specifier: ^3.2.1
         version: 3.2.1(typescript@5.5.4)
@@ -1469,21 +1466,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.22.0':
-    resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==}
-
   '@shikijs/core@3.2.1':
     resolution: {integrity: sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==}
 
-  '@shikijs/engine-javascript@1.22.0':
-    resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==}
-
   '@shikijs/engine-javascript@3.2.1':
     resolution: {integrity: sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==}
 
-  '@shikijs/engine-oniguruma@1.22.0':
-    resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==}
-
   '@shikijs/engine-oniguruma@3.2.1':
     resolution: {integrity: sha512-wZZAkayEn6qu2+YjenEoFqj0OyQI64EWsNR6/71d1EkG4sxEOFooowKivsWPpaWNBu3sxAG+zPz5kzBL/SsreQ==}
 
@@ -1493,26 +1481,17 @@ packages:
   '@shikijs/themes@3.2.1':
     resolution: {integrity: sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ==}
 
-  '@shikijs/twoslash@1.22.0':
-    resolution: {integrity: sha512-r5F/x4GTh18XzhAREehgT9lCDFZlISBSIsOFZQQaqjiOLG81PIqJN1I1D6XY58UN9OJt+3mffuKq19K4FOJKJA==}
-
   '@shikijs/twoslash@3.2.1':
     resolution: {integrity: sha512-2ZiL9xXY8JRXHG5BdJXE9KoIeSsyH9/yK+YTN90/SUIKkq7Nf5dWqXp5wJ6+4SL0FQO8mq2HUutwqU+gamOgOA==}
     peerDependencies:
       typescript: '>=5.5.0'
 
-  '@shikijs/types@1.22.0':
-    resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==}
-
   '@shikijs/types@3.2.1':
     resolution: {integrity: sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==}
 
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
-  '@shikijs/vscode-textmate@9.3.0':
-    resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
-
   '@shuding/opentype.js@1.4.0-beta.0':
     resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
     engines: {node: '>= 8.0.0'}
@@ -1678,11 +1657,6 @@ packages:
   '@types/ws@8.5.10':
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
 
-  '@typescript/vfs@1.6.0':
-    resolution: {integrity: sha512-hvJUjNVeBMp77qPINuUvYXj4FyWeeMMKZkxEATEU3hqBAQ7qdTBCUFT7Sp0Zu0faeEtFf+ldXxMEDr/bk73ISg==}
-    peerDependencies:
-      typescript: '*'
-
   '@typescript/vfs@1.6.1':
     resolution: {integrity: sha512-JwoxboBh7Oz1v38tPbkrZ62ZXNHAk9bJ7c9x0eI5zBfBnBYGhURdbnh7Z4smN/MV48Y5OCcZb58n972UtbazsA==}
     peerDependencies:
@@ -2283,9 +2257,6 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  hast-util-to-html@9.0.3:
-    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
-
   hast-util-to-html@9.0.5:
     resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
@@ -2624,9 +2595,6 @@ packages:
   oniguruma-to-es@4.1.0:
     resolution: {integrity: sha512-SNwG909cSLo4vPyyPbU/VJkEc9WOXqu2ycBlfd1UCXLqk1IijcQktSBb2yRQ2UFPsDhpkaf+C1dtT3PkLK/yWA==}
 
-  oniguruma-to-js@0.4.3:
-    resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
-
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -2765,9 +2733,6 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  property-information@6.5.0:
-    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
-
   property-information@7.0.0:
     resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
 
@@ -2811,9 +2776,6 @@ packages:
   regex-utilities@2.3.0:
     resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
-  regex@4.3.3:
-    resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
-
   regex@6.0.1:
     resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
@@ -2887,9 +2849,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@1.22.0:
-    resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==}
-
   shiki@3.2.1:
     resolution: {integrity: sha512-VML/2o1/KGYkEf/stJJ+s9Ypn7jUKQPomGLGYso4JJFMFxVDyPNsjsI3MB3KLjlMOeH44gyaPdXC6rik2WXvUQ==}
 
@@ -3113,17 +3072,9 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  twoslash-protocol@0.2.12:
-    resolution: {integrity: sha512-5qZLXVYfZ9ABdjqbvPc4RWMr7PrpPaaDSeaYY55vl/w1j6H6kzsWK/urAEIXlzYlyrFmyz1UbwIt+AA0ck+wbg==}
-
   twoslash-protocol@0.3.1:
     resolution: {integrity: sha512-BMePTL9OkuNISSyyMclBBhV2s9++DiOCyhhCoV5Kaht6eaWLwVjCCUJHY33eZJPsyKeZYS8Wzz0h+XI01VohVw==}
 
-  twoslash@0.2.12:
-    resolution: {integrity: sha512-tEHPASMqi7kqwfJbkk7hc/4EhlrKCSLcur+TcvYki3vhIfaRMXnXjaYFgXpoZRbT6GdprD4tGuVBEmTpUgLBsw==}
-    peerDependencies:
-      typescript: '*'
-
   twoslash@0.3.1:
     resolution: {integrity: sha512-OGqMTGvqXTcb92YQdwGfEdK0nZJA64Aj/ChLOelbl3TfYch2IoBST0Yx4C0LQ7Lzyqm9RpgcpgDxeXQIz4p2Kg==}
     peerDependencies:
@@ -4330,15 +4281,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.2':
     optional: true
 
-  '@shikijs/core@1.22.0':
-    dependencies:
-      '@shikijs/engine-javascript': 1.22.0
-      '@shikijs/engine-oniguruma': 1.22.0
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
-
   '@shikijs/core@3.2.1':
     dependencies:
       '@shikijs/types': 3.2.1
@@ -4346,23 +4288,12 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@1.22.0':
-    dependencies:
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-      oniguruma-to-js: 0.4.3
-
   '@shikijs/engine-javascript@3.2.1':
     dependencies:
       '@shikijs/types': 3.2.1
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.1.0
 
-  '@shikijs/engine-oniguruma@1.22.0':
-    dependencies:
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-
   '@shikijs/engine-oniguruma@3.2.1':
     dependencies:
       '@shikijs/types': 3.2.1
@@ -4376,15 +4307,6 @@ snapshots:
     dependencies:
       '@shikijs/types': 3.2.1
 
-  '@shikijs/twoslash@1.22.0(typescript@5.5.4)':
-    dependencies:
-      '@shikijs/core': 1.22.0
-      '@shikijs/types': 1.22.0
-      twoslash: 0.2.12(typescript@5.5.4)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@shikijs/twoslash@3.2.1(typescript@5.5.4)':
     dependencies:
       '@shikijs/core': 3.2.1
@@ -4394,11 +4316,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@shikijs/types@1.22.0':
-    dependencies:
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-
   '@shikijs/types@3.2.1':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
@@ -4406,8 +4323,6 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
-  '@shikijs/vscode-textmate@9.3.0': {}
-
   '@shuding/opentype.js@1.4.0-beta.0':
     dependencies:
       fflate: 0.7.4
@@ -4646,13 +4561,6 @@ snapshots:
     dependencies:
       '@types/node': 20.14.2
 
-  '@typescript/vfs@1.6.0(typescript@5.5.4)':
-    dependencies:
-      debug: 4.4.0
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript/vfs@1.6.1(typescript@5.5.4)':
     dependencies:
       debug: 4.4.0
@@ -5251,20 +5159,6 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  hast-util-to-html@9.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.0
-      property-information: 6.5.0
-      space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.4
-      zwitch: 2.0.4
-
   hast-util-to-html@9.0.5:
     dependencies:
       '@types/hast': 3.0.4
@@ -5590,10 +5484,6 @@ snapshots:
       regex: 6.0.1
       regex-recursion: 6.0.2
 
-  oniguruma-to-js@0.4.3:
-    dependencies:
-      regex: 4.3.3
-
   os-tmpdir@1.0.2: {}
 
   outdent@0.5.0: {}
@@ -5699,8 +5589,6 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  property-information@6.5.0: {}
-
   property-information@7.0.0: {}
 
   publint@0.2.12:
@@ -5744,8 +5632,6 @@ snapshots:
 
   regex-utilities@2.3.0: {}
 
-  regex@4.3.3: {}
-
   regex@6.0.1:
     dependencies:
       regex-utilities: 2.3.0
@@ -5853,15 +5739,6 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@1.22.0:
-    dependencies:
-      '@shikijs/core': 1.22.0
-      '@shikijs/engine-javascript': 1.22.0
-      '@shikijs/engine-oniguruma': 1.22.0
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-
   shiki@3.2.1:
     dependencies:
       '@shikijs/core': 3.2.1
@@ -6067,18 +5944,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  twoslash-protocol@0.2.12: {}
-
   twoslash-protocol@0.3.1: {}
 
-  twoslash@0.2.12(typescript@5.5.4):
-    dependencies:
-      '@typescript/vfs': 1.6.0(typescript@5.5.4)
-      twoslash-protocol: 0.2.12
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - supports-color
-
   twoslash@0.3.1(typescript@5.5.4):
     dependencies:
       '@typescript/vfs': 1.6.1(typescript@5.5.4)

From 40203494fa099a0ef730d38e40100a5c9577ad10 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 16:20:11 -0400
Subject: [PATCH 380/453] Sync `kit` docs (#1266)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
index 5fb3b8b4b0..13c45a05d4 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
@@ -18,7 +18,7 @@ Available since 2.20.0
 
 </blockquote>
 
-Returns the current `RequestEvent`. Can be used inside `handle`, `load` and actions (and functions called by them).
+Returns the current `RequestEvent`. Can be used inside server hooks, server `load` functions, actions, and endpoints (and functions called by them).
 
 In environments without [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage), this must be called synchronously (i.e. not after an `await`).
 

From b9b182bad815221c3da6cbbb3e8ad627d67566ed Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 16:28:50 -0400
Subject: [PATCH 381/453] Sync `svelte` docs (#1270)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md b/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
index 0cc6e0074f..2128c5ab89 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/08-$host.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: $host
 ---
 
-When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
 
 <!-- prettier-ignore -->
 ```svelte

From 47b8b8cbf0f067834194d75209e09fe0047f389d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 17:14:23 -0400
Subject: [PATCH 382/453] Sync `svelte` docs (#1271)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 4b3ab273c9..71ec80e91a 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -95,7 +95,7 @@ interface User {}
 // ---cut---
 import { getContext, setContext } from 'svelte';
 
-let key = {};
+const key = {};
 
 /** @param {User} user */
 export function setUserContext(user) {

From ff06072888a09cce00f9c4d94f26479f4fc55631 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 8 Apr 2025 09:20:02 -0400
Subject: [PATCH 383/453] use more compatible URL manipulation (#1274)

use more compatible URL manipulation - fixes #1264
---
 packages/repl/src/lib/workers/bundler/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index d1fcbe479b..77b213abae 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -185,7 +185,7 @@ async function get_bundle(
 					const url = new URL(importee, importer);
 
 					for (const suffix of ['', '.js', '.json']) {
-						const with_suffix = `${url.pathname.slice(1)}${suffix}`;
+						const with_suffix = `${url.href.slice(VIRTUAL.length + 1)}${suffix}`;
 						const file = virtual.get(with_suffix);
 
 						if (file) {
@@ -202,7 +202,7 @@ async function get_bundle(
 					const { name, version } = parse_npm_url(http://github.com/importer);
 
 					const pkg = await fetch_package(name, name === 'svelte' ? svelte_version : version);
-					const path = new URL(importee, importer).pathname.replace(`/${name}@${version}/`, '');
+					const path = new URL(importee, importer).href.replace(`${NPM}/${name}@${version}/`, '');
 
 					return normalize_path(pkg, path);
 				}

From 855e6676f4e058c9467ba8268f686303c3d985e1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 8 Apr 2025 09:25:23 -0400
Subject: [PATCH 384/453] default to runes mode in tutorial (#1273)

---
 .../src/lib/tutorial/adapters/rollup/index.svelte.ts           | 1 +
 packages/repl/src/lib/Bundler.svelte.ts                        | 3 ++-
 packages/repl/src/lib/workers/bundler/index.ts                 | 3 ++-
 packages/repl/src/lib/workers/workers.d.ts                     | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 6346a241a8..0b4ddff71c 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -33,6 +33,7 @@ export async function create(): Promise<Adapter> {
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
 				// TODO support Tailwind here?
+				runes: true
 			}
 		);
 	}
diff --git a/packages/repl/src/lib/Bundler.svelte.ts b/packages/repl/src/lib/Bundler.svelte.ts
index 4a36df3724..611cc29658 100644
--- a/packages/repl/src/lib/Bundler.svelte.ts
+++ b/packages/repl/src/lib/Bundler.svelte.ts
@@ -1,4 +1,5 @@
 import type { BundleResult } from './public';
+import type { BundleOptions } from './workers/workers';
 import type { File } from './Workspace.svelte';
 
 let uid = 1;
@@ -46,7 +47,7 @@ export default class Bundler {
 		this.#worker.postMessage({ type: 'init', svelte_version });
 	}
 
-	bundle(files: File[], options: { tailwind?: boolean }) {
+	bundle(files: File[], options: BundleOptions) {
 		this.#worker.postMessage({
 			uid,
 			type: 'bundle',
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 77b213abae..da4343177b 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -290,7 +290,8 @@ async function get_bundle(
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
-					dev: true
+					dev: true,
+					runes: options.runes
 				};
 
 				if (can_use_experimental_async) {
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index 169a328bc1..700a43f04d 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -50,7 +50,8 @@ export interface MigrateOutput {
 }
 
 export interface BundleOptions {
-	tailwind: boolean;
+	tailwind?: boolean;
+	runes?: boolean;
 }
 
 export type BundleMessageData = {

From da86feecd385d2604840e32a41f3364d50886ceb Mon Sep 17 00:00:00 2001
From: Anshul Shah <34605141+anshll@users.noreply.github.com>
Date: Tue, 8 Apr 2025 06:34:03 -0700
Subject: [PATCH 385/453] docs: Improve explanation of 05-keyed-each-blocks in
 tutorial (#1252)

* Update index.md

I personally was very confused with the previous explanation as to what it meant that the other list items were updated. Explaining it that egg replaced the name attribute for the doughnut, and doughnut replaced the name attribute for the car node, helped me understand what Svelte was actually doing.

* Apply suggestions from code review

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .../tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
index a02e764d26..65f7f3abc7 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
@@ -2,14 +2,14 @@
 title: Keyed each blocks
 ---
 
-By default, when you modify the value of an `each` block, it will add and remove DOM nodes at the _end_ of the block, and update any values that have changed. That might not be what you want.
+By default, updating the value of an `each` block will add or remove DOM nodes at the _end_ of the block if the size changes, and update the remaining DOM. That might not be what you want.
 
 It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant.
 
 Click the 'Remove first thing' button a few times, and notice what happens:
 
 1. It removes the last component.
-2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
+2. It then updates the `name` value in the remaining DOM nodes (the text node containing 'doughnut' now contains 'egg', and so on), but not the emoji.
 
 > [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
 

From fa82e823b3e8344b16cfb37cd61575789d5d36c5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 8 Apr 2025 09:46:39 -0400
Subject: [PATCH 386/453] only create supabase client when env vars are present
 (#1275)

---
 apps/svelte.dev/src/lib/db/client.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/svelte.dev/src/lib/db/client.js b/apps/svelte.dev/src/lib/db/client.js
index 0f3dd5a40a..a374ab2605 100644
--- a/apps/svelte.dev/src/lib/db/client.js
+++ b/apps/svelte.dev/src/lib/db/client.js
@@ -14,6 +14,8 @@ if (!building && (!env.SUPABASE_URL || !env.SUPABASE_KEY)) {
 // @ts-ignore-line
 export const client =
 	!building &&
+	env.SUPABASE_URL &&
+	env.SUPABASE_KEY &&
 	createClient(env.SUPABASE_URL, env.SUPABASE_KEY, {
 		global: { fetch },
 		auth: { persistSession: false }

From b37676e6a977858d116b721550ec3bb9c3a3ecbf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 8 Apr 2025 18:07:47 -0400
Subject: [PATCH 387/453] Sync `svelte` docs (#1279)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../svelte/98-reference/.generated/client-warnings.md     | 8 ++------
 .../docs/svelte/98-reference/30-runtime-warnings.md       | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 284e9a7c3e..77d1df4cdd 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -161,7 +161,7 @@ Tried to unmount a component that was not mounted
 ### ownership_invalid_binding
 
 ```
-%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
 ```
 
 Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
@@ -171,11 +171,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 ### ownership_invalid_mutation
 
 ```
-Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-```
-
-```
-%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 ```
 
 Consider the following code:
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 51853aa42d..8554eb52d5 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -168,7 +168,7 @@ Tried to unmount a component that was not mounted
 ### ownership_invalid_binding
 
 ```
-%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
 ```
 
 Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
@@ -178,11 +178,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 ### ownership_invalid_mutation
 
 ```
-Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-```
-
-```
-%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 ```
 
 Consider the following code:

From a3dde04d63ad2628e62803a04c1d0a71565d0eaf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 9 Apr 2025 09:24:48 -0400
Subject: [PATCH 388/453] Sync `svelte` docs (#1280)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../01-introduction/04-svelte-js-files.md     |  2 +-
 .../content/docs/svelte/02-runes/02-$state.md | 80 +++++++++++++++++++
 .../docs/svelte/02-runes/04-$effect.md        | 55 ++++++++-----
 .../03-template-syntax/13-transition.md       |  8 +-
 4 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md b/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
index d34bcc8528..d8ecbac33b 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/04-svelte-js-files.md
@@ -5,7 +5,7 @@ title: .svelte.js and .svelte.ts files
 
 Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.
 
-These behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app.
+These behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app (though note that you [cannot export reassigned state]($state#Passing-state-across-modules)).
 
 > [!LEGACY]
 > This is a concept that didn't exist prior to Svelte 5
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index 509efb007b..14083f6a81 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -251,3 +251,83 @@ console.log(total.value); // 7
 ```
 
 ...though if you find yourself writing code like that, consider using [classes](#Classes) instead.
+
+## Passing state across modules
+
+You can declare state in `.svelte.js` and `.svelte.ts` files, but you can only _export_ that state if it's not directly reassigned. In other words you can't do this:
+
+```js
+/// file: state.svelte.js
+export let count = $state(0);
+
+export function increment() {
+	count += 1;
+}
+```
+
+That's because every reference to `count` is transformed by the Svelte compiler — the code above is roughly equivalent to this:
+
+```js
+/// file: state.svelte.js (compiler output)
+// @filename: index.ts
+interface Signal<T> {
+	value: T;
+}
+
+interface Svelte {
+	state<T>(value?: T): Signal<T>;
+	get<T>(source: Signal<T>): T;
+	set<T>(source: Signal<T>, value: T): void;
+}
+declare const $: Svelte;
+// ---cut---
+export let count = $.state(0);
+
+export function increment() {
+	$.set(count, $.get(count) + 1);
+}
+```
+
+> [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground).
+
+Since the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`:
+
+```js
+// @filename: state.svelte.js
+export let count = 0;
+
+// @filename: index.js
+// ---cut---
+import { count } from './state.svelte.js';
+
+console.log(typeof count); // 'object', not 'number'
+```
+
+This leaves you with two options for sharing state between modules — either don't reassign it...
+
+```js
+// This is allowed — since we're updating
+// `counter.count` rather than `counter`,
+// Svelte doesn't wrap it in `$.state`
+export const counter = $state({
+	count: 0
+});
+
+export function increment() {
+	counter.count += 1;
+}
+```
+
+...or don't directly export it:
+
+```js
+let count = $state(0);
+
+export function getCount() {
+	return count;
+}
+
+export function increment() {
+	count += 1;
+}
+```
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index decb34866a..4ef2f23275 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -26,7 +26,7 @@ You can create an effect with the `$effect` rune ([demo](/playground/untitled#H4
 	});
 </script>
 
-<canvas bind:this={canvas} width="100" height="100" />
+<canvas bind:this={canvas} width="100" height="100"></canvas>
 ```
 
 When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
@@ -136,19 +136,33 @@ An effect only reruns when the object it reads changes, not when a property insi
 
 An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.
 
-For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3VQzWrDMAx-FdUU4kBp71li6EPstOxge0ox8-QQK2PD-N1nLy2F0Z2Evj9_chKkP1B04pnYscc3cRCT8xhF95IEf8-Vq0DBr8rzPB_jJ3qumNERH-E2ECNxiRF9tIubWY00lgcYNAywj6wZJS8rtk83wjwgCrXHaULLUrYwKEgVGrnkx-Dx6MNFNstK5OjSbFGbwE0gdXuT_zGYrjmAuco515Hr1p_uXak3K3MgCGS9s-9D2grU-judlQYXIencnzad-tdR79qZrMyvw9wd5Z8Yv1h09dz8mn8AkM7Pfo0BAAA=).
+For instance, if `condition` is `true` in the code snippet below, the code inside the `if` block will run and `color` will be evaluated. As such, changes to either `condition` or `color` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).
 
-Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes.
+Conversely, if `condition` is `false`, `color` will not be evaluated, and the effect will _only_ re-run again when `condition` changes.
 
 ```ts
-let a = false;
-let b = false;
+// @filename: ambient.d.ts
+declare module 'canvas-confetti' {
+	interface ConfettiOptions {
+		colors: string[];
+	}
+
+	function confetti(opts?: ConfettiOptions): void;
+	export default confetti;
+}
+
+// @filename: index.js
 // ---cut---
-$effect(() => {
-	console.log('running');
+import confetti from 'canvas-confetti';
 
-	if (a) {
-		console.log('b:', b);
+let condition = $state(true);
+let color = $state('#ff3e00');
+
+$effect(() => {
+	if (condition) {
+		confetti({ colors: [color] });
+	} else {
+		confetti();
 	}
 });
 ```
@@ -212,20 +226,19 @@ It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svel
 
 The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
 
-```svelte
-<script>
-	let count = $state(0);
+```js
+const destroy = $effect.root(() => {
+	$effect(() => {
+		// setup
+	});
 
-	const cleanup = $effect.root(() => {
-		$effect(() => {
-			console.log(count);
-		});
+	return () => {
+		// cleanup
+	};
+});
 
-		return () => {
-			console.log('effect root cleanup');
-		};
-	});
-</script>
+// later...
+destroy();
 ```
 
 ## When not to use `$effect`
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
index 88776441c4..96a265f28b 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
@@ -23,10 +23,6 @@ The `transition:` directive indicates a _bidirectional_ transition, which means
 {/if}
 ```
 
-## Built-in transitions
-
-A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
-
 ## Local vs global
 
 Transitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
@@ -41,6 +37,10 @@ Transitions are local by default. Local transitions only play when the block the
 {/if}
 ```
 
+## Built-in transitions
+
+A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
+
 ## Transition parameters
 
 Transitions can have parameters.

From e2d99ea1bb1087fcc58537d616260f3e97bf9f02 Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Wed, 9 Apr 2025 13:55:39 -0600
Subject: [PATCH 389/453] feat: Support TypeScript in the playground (#1277)

* typescript

* checkpoint

* final not final

* nasty fix

* use ts-blank-space

* remove unnecessary stuff

* fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/.gitignore                    |  2 ++
 packages/repl/package.json                    |  1 +
 packages/repl/src/lib/Workspace.svelte.ts     | 19 +++++++++++++------
 .../repl/src/lib/workers/bundler/index.ts     |  8 +++++---
 .../bundler/plugins/typescript-strip-types.ts | 16 ++++++++++++++++
 .../repl/src/lib/workers/compiler/index.ts    | 11 ++++++++++-
 pnpm-lock.yaml                                | 18 ++++++++++++++++++
 7 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts

diff --git a/apps/svelte.dev/.gitignore b/apps/svelte.dev/.gitignore
index 82cbd2da73..a3079a3c21 100644
--- a/apps/svelte.dev/.gitignore
+++ b/apps/svelte.dev/.gitignore
@@ -14,3 +14,5 @@
 
 # TODO remove this after https://github.com/sveltejs/kit/pull/12718 is merged
 /content/docs/kit/50-reference
+.vercel
+.env*.local
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 6a40fe14de..ae41a13a38 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -102,6 +102,7 @@
 		"svelte": "5.23.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
+		"ts-blank-space": "^0.6.1",
 		"zimmerframe": "^1.1.2"
 	}
 }
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index f1af3a5837..6b9d9f31fa 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -140,14 +140,17 @@ export class Workspace {
 				to: error.position![1],
 				message: error.message,
 				renderMessage: () => {
-					const span = document.createElement('span');
-					span.innerHTML = `${error.message
+					let html = error.message
 						.replace(/&/g, '&amp;')
 						.replace(/</g, '&lt;')
-						.replace(
-							/`(.+?)`/g,
-							`<code>$1</code>`
-						)} (<a href="http://github.com/docs/svelte/compiler-errors#${error.code}">${error.code}</a>)`;
+						.replace(/`(.+?)`/g, `<code>$1</code>`);
+
+					if (error.code) {
+						html += ` (<a href="http://github.com/docs/svelte/compiler-errors#${error.code}">${error.code}</a>)`;
+					}
+
+					const span = document.createElement('span');
+					span.innerHTML = html;
 
 					return span;
 				}
@@ -589,6 +592,10 @@ export class Workspace {
 				extensions.push(javascript());
 				break;
 
+			case 'ts':
+				extensions.push(javascript({ typescript: true }));
+				break;
+
 			case 'html':
 				extensions.push(html());
 				break;
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index da4343177b..8f483d0cdd 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -3,6 +3,7 @@ import { walk } from 'zimmerframe';
 import '../patch_window';
 import { rollup } from '@rollup/browser';
 import { DEV } from 'esm-env';
+import typescript_strip_types from './plugins/typescript-strip-types';
 import commonjs from './plugins/commonjs';
 import glsl from './plugins/glsl';
 import json from './plugins/json';
@@ -184,7 +185,7 @@ async function get_bundle(
 				if (importer.startsWith(VIRTUAL)) {
 					const url = new URL(importee, importer);
 
-					for (const suffix of ['', '.js', '.json']) {
+					for (const suffix of ['', '.js', '.json', '.ts']) {
 						const with_suffix = `${url.href.slice(VIRTUAL.length + 1)}${suffix}`;
 						const file = virtual.get(with_suffix);
 
@@ -280,7 +281,7 @@ async function get_bundle(
 			const message = `bundling ${id.replace(VIRTUAL + '/', '').replace(NPM + '/', '')}`;
 			self.postMessage({ type: 'status', message });
 
-			if (!/\.(svelte|js)$/.test(id)) return null;
+			if (!/\.(svelte|js|ts)$/.test(id)) return null;
 
 			const name = id.split('/').pop()?.split('.')[0];
 
@@ -343,7 +344,7 @@ async function get_bundle(
 					$$_styles.push($$__style);
 				`.replace(/\t/g, '');
 				}
-			} else if (id.endsWith('.svelte.js')) {
+			} else if (/\.svelte\.(js|ts)$/.test(id)) {
 				const compilerOptions: any = {
 					filename: name + '.js',
 					generate: 'client',
@@ -388,6 +389,7 @@ async function get_bundle(
 		input: './__entry.js',
 		cache: previous?.key === key && previous.cache,
 		plugins: [
+			typescript_strip_types,
 			repl_plugin,
 			commonjs,
 			json,
diff --git a/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts b/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
new file mode 100644
index 0000000000..3f4991cbae
--- /dev/null
+++ b/packages/repl/src/lib/workers/bundler/plugins/typescript-strip-types.ts
@@ -0,0 +1,16 @@
+import type { Plugin } from '@rollup/browser';
+import tsBlankSpace from 'ts-blank-space';
+
+const plugin: Plugin = {
+	name: 'typescript-strip-types',
+	transform: (code, id) => {
+		const match = id.endsWith('.ts');
+		if (!match) return;
+
+		return {
+			code: tsBlankSpace(code)
+		};
+	}
+};
+
+export default plugin;
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
index e0cdc4e9b6..89091f0236 100644
--- a/packages/repl/src/lib/workers/compiler/index.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -1,5 +1,6 @@
 import '@sveltejs/site-kit/polyfills';
 import type { CompileResult } from 'svelte/compiler';
+import tsBlankSpace from 'ts-blank-space';
 import type { ExposedCompilerOptions, File } from '../../Workspace.svelte';
 import { load_svelte } from '../npm';
 
@@ -80,7 +81,8 @@ addEventListener('message', async (event) => {
 				compilerOptions.experimental = { async: true };
 			}
 
-			result = svelte.compileModule(file.contents, compilerOptions);
+			const content = tsBlankSpace(file.contents);
+			result = svelte.compileModule(content, compilerOptions);
 		}
 
 		postMessage({
@@ -100,6 +102,13 @@ addEventListener('message', async (event) => {
 			}
 		});
 	} catch (e) {
+		if (!e.position && e.loc) {
+			// this came from tsBlankSpace. Workspace expects a
+			// `position` property from a Svelte compile error;
+			// this is a hacky but pragmatic way to solve it
+			e.position = [e.pos, e.raisedAt];
+		}
+
 		postMessage({
 			id,
 			filename: file.name,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb6412a4b5..bd33498f58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -288,6 +288,9 @@ importers:
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
+      ts-blank-space:
+        specifier: ^0.6.1
+        version: 0.6.1
       zimmerframe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -3064,6 +3067,10 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
+  ts-blank-space@0.6.1:
+    resolution: {integrity: sha512-LcM3W5HEyzTaXUeQITV8ploUOGe+zuuoFYsCfPscFLhx3bZn2sSfHMKxsULVG/zA7an9UhReiHv4Kk/6QzlpXQ==}
+    engines: {node: '>=18.0.0'}
+
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
@@ -3085,6 +3092,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   ultrahtml@1.5.3:
     resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==}
 
@@ -5935,6 +5947,10 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
+  ts-blank-space@0.6.1:
+    dependencies:
+      typescript: 5.8.2
+
   tslib@2.6.3: {}
 
   tsx@4.19.0:
@@ -5956,6 +5972,8 @@ snapshots:
 
   typescript@5.5.4: {}
 
+  typescript@5.8.2: {}
+
   ultrahtml@1.5.3: {}
 
   undici-types@5.26.5: {}

From 6cc451b2904d6e61a966bf43b0ad4820b07956cf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Apr 2025 16:41:31 -0400
Subject: [PATCH 390/453] summarize docs (#1285)

---
 apps/svelte.dev/src/lib/server/content.ts              | 10 +++++++++-
 .../src/routes/docs/[...path]/+layout.server.ts        |  4 ++--
 packages/site-kit/src/lib/docs/DocsContents.svelte     |  4 ++--
 packages/site-kit/src/lib/types.d.ts                   |  9 +++++++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index 01c84c2ad6..88dd3e177b 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -1,5 +1,5 @@
 import { read } from '$app/server';
-import type { Document } from '@sveltejs/site-kit';
+import type { Document, DocumentSummary } from '@sveltejs/site-kit';
 import { create_index } from '@sveltejs/site-kit/server/content';
 
 const documents = import.meta.glob<string>('../../../content/**/*.md', {
@@ -123,6 +123,14 @@ function create_docs() {
 	return docs;
 }
 
+export function create_summary(document: Document): DocumentSummary {
+	return {
+		slug: document.slug,
+		metadata: document.metadata,
+		children: document.children.map(create_summary)
+	};
+}
+
 export const docs = create_docs();
 
 export const examples = index.examples.children;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts b/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
index 5ff346304f..41019d898e 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
@@ -1,4 +1,4 @@
-import { docs } from '$lib/server/content';
+import { create_summary, docs } from '$lib/server/content';
 import { redirect } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
 
@@ -20,6 +20,6 @@ export async function load({ params }) {
 	}
 
 	return {
-		sections: document.children
+		sections: document.children.map(create_summary)
 	};
 }
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 86bd2dc2e2..84240e6caf 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import type { Document } from '../types';
+	import type { Document, DocumentSummary } from '../types';
 
 	interface Props {
-		contents: Document[];
+		contents: DocumentSummary[];
 		show_ts_toggle?: boolean;
 	}
 
diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts
index b980161cc1..81f22adf1b 100644
--- a/packages/site-kit/src/lib/types.d.ts
+++ b/packages/site-kit/src/lib/types.d.ts
@@ -32,6 +32,15 @@ export interface Document {
 	prev: null | { slug: string; title: string };
 }
 
+export interface DocumentSummary {
+	slug: string;
+	metadata: {
+		title: string;
+		[key: string]: any;
+	};
+	children: DocumentSummary[];
+}
+
 export interface Section {
 	slug: string;
 	title: string;

From 041bdfac2223d8173c555857d95bd818e16d7364 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Apr 2025 18:16:20 -0400
Subject: [PATCH 391/453] Better docs invalidation (#1286)

* make invalidation more granular

* avoid invalidating root layout on every navigation

* fix

* lint
---
 apps/svelte.dev/src/routes/+layout.server.ts  | 37 +++++++------------
 apps/svelte.dev/src/routes/+layout.svelte     | 16 ++++++--
 .../src/routes/docs/[topic]/+page.server.ts   |  8 ++++
 .../{ => [topic]}/[...path]/+layout.server.ts |  7 +---
 .../{ => [topic]}/[...path]/+layout.svelte    |  0
 .../{ => [topic]}/[...path]/+page.server.js   |  2 +-
 .../docs/{ => [topic]}/[...path]/+page.svelte |  0
 .../[...path]/Breadcrumbs.svelte              |  0
 .../{ => [topic]}/[...path]/OnThisPage.svelte |  0
 .../[...path]/llms.txt/+server.ts             |  7 +++-
 packages/site-kit/src/global.d.ts             |  4 +-
 11 files changed, 41 insertions(+), 40 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/docs/[topic]/+page.server.ts
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/+layout.server.ts (72%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/+layout.svelte (100%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/+page.server.js (82%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/+page.svelte (100%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/Breadcrumbs.svelte (100%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/OnThisPage.svelte (100%)
 rename apps/svelte.dev/src/routes/docs/{ => [topic]}/[...path]/llms.txt/+server.ts (75%)

diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index 9145c88a40..509e4b0034 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -51,32 +51,21 @@ const nav_links: NavigationLink[] = [
 	}
 ];
 
-const sections: Record<string, string> = {
-	docs: 'Docs',
-	playground: 'Playground',
-	blog: 'Blog',
-	tutorial: 'Tutorial',
-	search: 'Search'
-};
-
-const banner: BannerData = {
-	id: 'adventofsvelte2024',
-	start: new Date('1 December, 2024 00:00:00 UTC'),
-	end: new Date('25 December, 2024 23:59:59 UTC'),
-	arrow: true,
-	content: {
-		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
-		sm: 'Advent of Svelte 2024'
-	},
-	href: '/blog/advent-of-svelte'
-};
-
-export const load = async ({ url }) => {
-	const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
+// const banner: BannerData = {
+// 	id: 'adventofsvelte2024',
+// 	start: new Date('1 December, 2024 00:00:00 UTC'),
+// 	end: new Date('25 December, 2024 23:59:59 UTC'),
+// 	arrow: true,
+// 	content: {
+// 		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
+// 		sm: 'Advent of Svelte 2024'
+// 	},
+// 	href: '/blog/advent-of-svelte'
+// };
 
+export const load = async () => {
 	return {
-		nav_title,
 		nav_links,
-		banner
+		banner: undefined
 	};
 };
diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 1ebf609a8e..54a2d4c8fb 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '@sveltejs/site-kit/styles/index.css';
 	import { browser, dev } from '$app/environment';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { Shell, Banner } from '@sveltejs/site-kit/components';
 	import { Nav } from '@sveltejs/site-kit/nav';
 	import { SearchBox } from '@sveltejs/site-kit/search';
@@ -28,19 +28,27 @@
 	});
 
 	let { data, children: layout_children } = $props();
+
+	const sections: Record<string, string> = {
+		docs: 'Docs',
+		playground: 'Playground',
+		blog: 'Blog',
+		tutorial: 'Tutorial',
+		search: 'Search'
+	};
 </script>
 
 <svelte:head>
-	{#if !$page.route.id?.startsWith('/blog/')}
+	{#if !page.route.id?.startsWith('/blog/')}
 		<meta name="twitter:card" content="summary" />
 		<meta name="twitter:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 		<meta name="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 	{/if}
 </svelte:head>
 
-<Shell nav_visible={$page.route.id !== '/(authed)/playground/[id]/embed'}>
+<Shell nav_visible={page.route.id !== '/(authed)/playground/[id]/embed'}>
 	{#snippet top_nav()}
-		<Nav title={data.nav_title} links={data.nav_links} />
+		<Nav title={sections[page.url.pathname.split('/')[1]!] ?? ''} links={data.nav_links} />
 	{/snippet}
 
 	{#snippet children()}
diff --git a/apps/svelte.dev/src/routes/docs/[topic]/+page.server.ts b/apps/svelte.dev/src/routes/docs/[topic]/+page.server.ts
new file mode 100644
index 0000000000..d1654748a6
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/[topic]/+page.server.ts
@@ -0,0 +1,8 @@
+import { docs } from '$lib/server/content';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ params }) {
+	const document = docs.topics[`docs/${params.topic}`];
+
+	redirect(307, `/${document.children[0].children[0].slug}`);
+}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.server.ts
similarity index 72%
rename from apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.server.ts
index 41019d898e..7c2a97e867 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.server.ts
@@ -3,8 +3,7 @@ import { redirect } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	const topic = params.path.split('/')[0];
-	const document = docs.topics[`docs/${topic}`];
+	const document = docs.topics[`docs/${params.topic}`];
 
 	if (!document) {
 		// in many cases, https://svelte.dev/docs/foo is now https://svelte.dev/docs/svelte/foo
@@ -15,10 +14,6 @@ export async function load({ params }) {
 		error(404, 'Not found');
 	}
 
-	if (params.path === topic) {
-		redirect(307, `/${document.children[0].children[0].slug}`);
-	}
-
 	return {
 		sections: document.children.map(create_summary)
 	};
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.server.js b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.server.js
similarity index 82%
rename from apps/svelte.dev/src/routes/docs/[...path]/+page.server.js
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.server.js
index 286d0d0d8e..1461edfa2b 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.server.js
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.server.js
@@ -3,7 +3,7 @@ import { render_content } from '$lib/server/renderer';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	const document = docs.pages[`docs/${params.path}`];
+	const document = docs.pages[`docs/${params.topic}/${params.path}`];
 
 	if (!document) {
 		error(404);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/Breadcrumbs.svelte
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/Breadcrumbs.svelte
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
similarity index 75%
rename from apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts
rename to apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
index d757e502e0..5ff7e9ff0c 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/llms.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
@@ -4,11 +4,14 @@ import { generate_llm_content, get_documentation_title, sections } from '$lib/se
 export const prerender = true;
 
 export function entries() {
-	return sections.map((section) => ({ path: section.slug }));
+	return sections.map((section) => {
+		const [topic, ...rest] = section.slug.split('/');
+		return { topic, path: rest.join('/') };
+	});
 }
 
 export function GET({ params }) {
-	const pkg = params.path;
+	const pkg = params.path ? `${params.topic}/${params.path}` : params.topic;
 
 	const section = sections.find((s) => s.slug === pkg);
 
diff --git a/packages/site-kit/src/global.d.ts b/packages/site-kit/src/global.d.ts
index a3e64bed49..405bfe2150 100644
--- a/packages/site-kit/src/global.d.ts
+++ b/packages/site-kit/src/global.d.ts
@@ -2,9 +2,7 @@
 
 declare global {
 	namespace App {
-		interface PageData {
-			nav_title: string;
-		}
+		interface PageData {}
 	}
 }
 

From 6b2e6033c902173403c6cb6c7ea502f292c378bc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 9 Apr 2025 18:16:56 -0400
Subject: [PATCH 392/453] Sync `svelte` docs (#1284)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/98-reference/.generated/client-errors.md        | 2 +-
 .../content/docs/svelte/98-reference/30-runtime-errors.md       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
index fd9419176d..32348bb781 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md
@@ -21,7 +21,7 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5
+Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
 ```
 
 See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index ef6627c1c7..9ae0f652da 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -28,7 +28,7 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5
+Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
 ```
 
 See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.

From 5756c13ecea49bd370279ed7b9cb537f29e2607c Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Thu, 10 Apr 2025 01:51:55 +0300
Subject: [PATCH 393/453] fix: set default selection color (#1282)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 packages/repl/src/lib/Editor/codemirror.css         | 1 +
 packages/site-kit/src/lib/styles/tokens/colours.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/repl/src/lib/Editor/codemirror.css b/packages/repl/src/lib/Editor/codemirror.css
index 847197aaa9..08d3bf5cbb 100644
--- a/packages/repl/src/lib/Editor/codemirror.css
+++ b/packages/repl/src/lib/Editor/codemirror.css
@@ -119,6 +119,7 @@
 
 	.cm-selectionBackground {
 		border-radius: 2px;
+		background-color: var(--sk-bg-unfocused-selection);
 	}
 
 	.cm-selectionMatch {
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index c4b0d3ebe3..1726138ff3 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -22,6 +22,7 @@
 	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+	--sk-bg-unfocused-selection: hsla(204, 50%, 63%, 0.2);
 	--sk-bg-highlight: hsl(60, 100%, 80%);
 
 	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */

From 0fe69636a33e3ef5bf389ef52a3c45802a0cd8c9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Apr 2025 11:49:35 -0400
Subject: [PATCH 394/453] use class-based reacgtivity for logs in playground
 (#1290)

---
 .../tutorial/[...slug]/OutputRollup.svelte    |  2 +-
 packages/repl/package.json                    |  4 ++--
 packages/repl/src/lib/Output/Viewer.svelte    | 22 +++++++++----------
 .../src/lib/Output/console/Console.svelte     | 19 +---------------
 .../src/lib/Output/console/ConsoleLine.svelte |  2 +-
 .../repl/src/lib/Output/console/Log.svelte.ts | 22 +++++++++++++++++++
 packages/repl/src/lib/Output/console/index.ts |  2 ++
 7 files changed, 39 insertions(+), 34 deletions(-)
 create mode 100644 packages/repl/src/lib/Output/console/Log.svelte.ts
 create mode 100644 packages/repl/src/lib/Output/console/index.ts

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 5a3da4434f..d562d82b39 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import Viewer from '@sveltejs/repl/viewer';
-	import Console, { type Log } from '@sveltejs/repl/console';
+	import { Console, type Log } from '@sveltejs/repl/console';
 	import { theme } from '@sveltejs/site-kit/state';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
diff --git a/packages/repl/package.json b/packages/repl/package.json
index ae41a13a38..3bd9bada03 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -45,8 +45,8 @@
 			"svelte": "./src/lib/Workspace.svelte.ts"
 		},
 		"./console": {
-			"types": "./src/lib/Output/console/Console.svelte",
-			"svelte": "./src/lib/Output/console/Console.svelte"
+			"types": "./src/lib/Output/console/index.ts",
+			"svelte": "./src/lib/Output/console/index.ts"
 		}
 	},
 	"files": [
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 8f973970e6..846a8c65f2 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -5,7 +5,7 @@
 	import Message from '../Message.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import ReplProxy from './ReplProxy.js';
-	import Console, { type Log } from './console/Console.svelte';
+	import Console from './console/Console.svelte';
 	import getLocationFromStack from './get-location-from-stack';
 	import srcdoc from './srcdoc/index.html?raw';
 	import srcdoc_styles from './srcdoc/styles.css?raw';
@@ -13,6 +13,7 @@
 	import type { CompileError } from 'svelte/compiler';
 	import type Bundler from '../Bundler.svelte';
 	import type { BundleResult } from '../public';
+	import { Log } from './console/Log.svelte';
 
 	interface Props {
 		error: Error | null;
@@ -48,7 +49,7 @@
 	let context = get_repl_context();
 	let bundle = $derived((bundler ?? context?.bundler)?.result);
 
-	let logs: Log[] = $state.raw([]); // we don't want to proxify the logged values
+	let logs: Log[] = $state([]);
 	let log_group_stack: Log[][] = [];
 
 	// svelte-ignore state_referenced_locally
@@ -255,19 +256,18 @@
 		error = e;
 	}
 
-	function push_logs(log: Log) {
+	function push_logs(data: any) {
+		const log = new Log(data);
 		current_log_group.push((last_console_event = log));
-		logs = [...logs, log];
 		onLog?.(logs);
 	}
 
-	function group_logs(log: Log) {
-		log.logs = [];
+	function group_logs(data: any) {
+		const log = new Log(data);
 		current_log_group.push(log);
 		// TODO: Investigate
 		log_group_stack.push(current_log_group);
 		current_log_group = log.logs;
-		logs = [...logs];
 		onLog?.(logs);
 	}
 
@@ -278,14 +278,12 @@
 	}
 
 	function increment_duplicate_log() {
-		const last_log = current_log_group[current_log_group.length - 1];
+		last_console_event.count += 1;
 
-		if (last_log) {
-			last_log.count = (last_log.count || 1) + 1;
-			logs = [...logs];
+		if (current_log_group.includes(last_console_event)) {
 			onLog?.(logs);
 		} else {
-			last_console_event.count = 1;
+			// console was cleared
 			push_logs(last_console_event);
 		}
 	}
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index 4c27f3ecec..1d05afa0b3 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -1,23 +1,6 @@
-<script module lang="ts">
-	export type Log = {
-		command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
-		action?: 'console';
-		args?: any[];
-		collapsed?: boolean;
-		expanded?: boolean;
-		count?: number;
-		logs?: Log[];
-		stack?: Array<{
-			label?: string;
-			location?: string;
-		}>;
-		data?: any;
-		columns?: string[];
-	};
-</script>
-
 <script lang="ts">
 	import ConsoleLine from './ConsoleLine.svelte';
+	import type { Log } from './Log.svelte';
 
 	export let logs: Log[];
 </script>
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 07273506a0..7cce4e0b9d 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import JSONNode from '@sveltejs/svelte-json-tree';
 	import ConsoleTable from './ConsoleTable.svelte';
-	import type { Log } from './Console.svelte';
+	import type { Log } from './Log.svelte';
 
 	export let log: Log;
 	export let depth = 0;
diff --git a/packages/repl/src/lib/Output/console/Log.svelte.ts b/packages/repl/src/lib/Output/console/Log.svelte.ts
new file mode 100644
index 0000000000..9e165ec5b7
--- /dev/null
+++ b/packages/repl/src/lib/Output/console/Log.svelte.ts
@@ -0,0 +1,22 @@
+type Command = 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
+
+export class Log {
+	command: Command;
+	args?: any[];
+	stack?: Array<{
+		label?: string;
+		location?: string;
+	}>;
+	data?: any;
+	columns?: string[];
+
+	collapsed = $state(false);
+	expanded = $state(false);
+	count = $state(1);
+	logs = $state([]);
+
+	constructor(data: any) {
+		this.command = data.command;
+		Object.assign(this, data);
+	}
+}
diff --git a/packages/repl/src/lib/Output/console/index.ts b/packages/repl/src/lib/Output/console/index.ts
new file mode 100644
index 0000000000..463db6060d
--- /dev/null
+++ b/packages/repl/src/lib/Output/console/index.ts
@@ -0,0 +1,2 @@
+export { default as Console } from './Console.svelte';
+export { Log } from './Log.svelte';

From 31d923d2d8174bdfc7e2a1a30f7def994ea69188 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Apr 2025 11:58:50 -0400
Subject: [PATCH 395/453] tidy up a few things (#1291)

---
 .../routes/tutorial/[...slug]/OutputRollup.svelte |  1 -
 packages/repl/src/lib/Output/Viewer.svelte        | 15 +--------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index d562d82b39..1f29eab123 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -71,7 +71,6 @@
 		width: 100%;
 		height: 80%;
 		font: var(--sk-font-mono);
-		padding: 1rem;
 		background: var(--sk-bg-1);
 		border-top: 1px solid var(--sk-border);
 		transform: translate(0, 100%);
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 846a8c65f2..9e8dd5c152 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -51,9 +51,9 @@
 
 	let logs: Log[] = $state([]);
 	let log_group_stack: Log[][] = [];
-
 	// svelte-ignore state_referenced_locally
 	let current_log_group = logs;
+	let last_console_event: Log;
 
 	let iframe = $state.raw<HTMLIFrameElement>();
 	let pending_imports = $state(0);
@@ -63,10 +63,6 @@
 	let ready = $state(false);
 	let inited = $state(false);
 
-	let log_height = 90;
-	let prev_height: number;
-	let last_console_event: Log;
-
 	onMount(() => {
 		proxy = new ReplProxy(iframe!, {
 			on_fetch_progress: (progress) => {
@@ -288,15 +284,6 @@
 		}
 	}
 
-	function on_toggle_console() {
-		if (log_height < 90) {
-			prev_height = log_height;
-			log_height = 90;
-		} else {
-			log_height = prev_height || 45;
-		}
-	}
-
 	function clear_logs() {
 		current_log_group = logs = [];
 		onLog?.(logs);

From c6d8f64568e0a5a9be81a1ef1d72ca89becda467 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Thu, 10 Apr 2025 19:11:32 +0300
Subject: [PATCH 396/453] fix: prevent lifecycle_double_unmount warning in REPL
 (#1288)

* fix: prevent lifecycle_double_unmount warning

* prevent warning after error in a module

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 packages/repl/src/lib/Output/Viewer.svelte | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 9e8dd5c152..ddb224bf81 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -193,12 +193,17 @@
 								return untrack(() => original[method].apply(this, v));
 							}
 						}
-						const component = mount(App, { target: document.body });
-						window.__unmount_previous = () => {
-							for (const method of console_methods) {
-								console[method] = original[method];
+						let component;
+						try {
+							component = mount(App, { target: document.body });
+						} finally {
+							window.__unmount_previous = () => {
+								for (const method of console_methods) {
+									console[method] = original[method];
+								}
+								if (component) unmount(component);
+								window.__unmount_previous = null;
 							}
-							unmount(component);
 						}
 					}
 					//# sourceURL=playground:output

From 390c3fe1eaa8fe5f54d91d7e3e75c57be58ea486 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 10 Apr 2025 22:35:20 -0400
Subject: [PATCH 397/453] Sync `svelte` docs (#1293)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/98-reference/.generated/shared-errors.md    | 6 ++++++
 .../content/docs/svelte/98-reference/30-runtime-errors.md   | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
index 0102aafcbc..4c81d7b894 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
@@ -30,6 +30,12 @@ This error would be thrown in a setup like this:
 
 Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
 
+### invalid_snippet_arguments
+
+```
+A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+```
+
 ### lifecycle_outside_component
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index 9ae0f652da..d5a35008da 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -214,6 +214,12 @@ This error would be thrown in a setup like this:
 
 Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
 
+### invalid_snippet_arguments
+
+```
+A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+```
+
 ### lifecycle_outside_component
 
 ```

From e98dc711c133698b010688a9db3e413eac8ad7b6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 11 Apr 2025 10:14:37 -0400
Subject: [PATCH 398/453] Sync `svelte` docs (#1294)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../svelte/98-reference/.generated/compile-warnings.md   | 9 +++++----
 .../docs/svelte/98-reference/21-svelte-compiler.md       | 2 ++
 .../docs/svelte/98-reference/30-compiler-warnings.md     | 9 +++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 57396bd7fd..0e94cbadb2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -823,15 +823,16 @@ See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more
 ### state_referenced_locally
 
 ```
-State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
 ```
 
 This warning is thrown when the compiler detects the following:
+
 - A reactive variable is declared
-- the variable is reassigned
-- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+- ...and later reassigned...
+- ...and referenced in the same scope
 
-In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:
 
 ```svelte
 <!--- file: Parent.svelte --->
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 5cbbff0806..0cab56af7f 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -1035,6 +1035,8 @@ css: null | {
 	code: string;
 	/** A source map */
 	map: SourceMap;
+	/** Whether or not the CSS includes global rules */
+	hasGlobal: boolean;
 };
 ```
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 155e05e6a8..a93bd42919 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -844,15 +844,16 @@ See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more
 ### state_referenced_locally
 
 ```
-State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
 ```
 
 This warning is thrown when the compiler detects the following:
+
 - A reactive variable is declared
-- the variable is reassigned
-- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+- ...and later reassigned...
+- ...and referenced in the same scope
 
-In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:
 
 ```svelte
 <!--- file: Parent.svelte --->

From e7100f0e2423f82cfb7a8d565672f18b2f2bf58a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 11 Apr 2025 16:47:56 -0400
Subject: [PATCH 399/453] Sync `svelte` docs (#1296)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/01-introduction/xx-props.md   | 140 -----------------
 .../xx-reactivity-fundamentals.md             | 145 ------------------
 .../03-template-syntax/xx-control-flow.md     | 112 --------------
 .../03-template-syntax/xx-data-fetching.md    |  21 ---
 .../svelte/07-misc/xx-reactivity-indepth.md   |   7 -
 5 files changed, 425 deletions(-)
 delete mode 100644 apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
 delete mode 100644 apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
 delete mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
 delete mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
 delete mode 100644 apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md

diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
deleted file mode 100644
index 58a3dd3177..0000000000
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-props.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Public API of a component
----
-
-### Public API of a component
-
-Svelte uses the `$props` rune to declare _properties_ or _props_, which means describing the public interface of the component which becomes accessible to consumers of the component.
-
-> [!NOTE] `$props` is one of several runes, which are special hints for Svelte's compiler to make things reactive.
-
-```svelte
-<script>
-	let { foo, bar, baz } = $props();
-
-	// Values that are passed in as props
-	// are immediately available
-	console.log({ foo, bar, baz });
-</script>
-```
-
-You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
-
-```svelte
-<script>
-	let { foo = 'optional default initial value' } = $props();
-</script>
-```
-
-To get all properties, use rest syntax:
-
-```svelte
-<script>
-	let { a, b, c, ...everythingElse } = $props();
-</script>
-```
-
-You can use reserved words as prop names.
-
-```svelte
-<script>
-	// creates a `class` property, even
-	// though it is a reserved word
-	let { class: className } = $props();
-</script>
-```
-
-If you're using TypeScript, you can declare the prop types:
-
-```svelte
-<script lang="ts">
-	interface Props {
-		required: string;
-		optional?: number;
-		[key: string]: unknown;
-	}
-
-	let { required, optional, ...everythingElse }: Props = $props();
-</script>
-```
-
-If you're using JavaScript, you can declare the prop types using JSDoc:
-
-```svelte
-<script>
-	/** @type {{ x: string }} */
-	let { x } = $props();
-
-	// or use @typedef if you want to document the properties:
-
-	/**
-	 * @typedef {Object} MyProps
-	 * @property {string} y Some documentation
-	 */
-
-	/** @type {MyProps} */
-	let { y } = $props();
-</script>
-```
-
-If you export a `const`, `class` or `function`, it is readonly from outside the component.
-
-```svelte
-<script>
-	export const thisIs = 'readonly';
-
-	export function greet(name) {
-		alert(`hello ${name}!`);
-	}
-</script>
-```
-
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
-
-### Reactive variables
-
-To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
-
-Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	function handleClick() {
-		// calling this function will trigger an
-		// update if the markup references `count`
-		count = count + 1;
-	}
-</script>
-```
-
-Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates.
-
-```svelte
-<script>
-	let { person } = $props();
-	// this will only set `name` on component creation
-	// it will not update when `person` does
-	let { name } = person;
-</script>
-```
-
-If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	let double = $derived(count * 2);
-
-	$effect(() => {
-		if (count > 10) {
-			alert('Too high!');
-		}
-	});
-</script>
-```
-
-For more information on reactivity, read the documentation around runes.
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
deleted file mode 100644
index 01af210c7b..0000000000
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/xx-reactivity-fundamentals.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Reactivity fundamentals
----
-
-Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems.
-
-## Runes
-
-Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
-
-Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
-
-The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
-
-## `$state`
-
-Reactive state is declared with the `$state` rune:
-
-```svelte
-<script>
-	let count = $state(0);
-</script>
-
-<button onclick={() => count++}>
-	clicks: {count}
-</button>
-```
-
-You can also use `$state` in class fields (whether public or private):
-
-```js
-// @errors: 7006 2554
-class Todo {
-	done = $state(false);
-	text = $state();
-
-	constructor(text) {
-		this.text = text;
-	}
-}
-```
-
-> [!LEGACY]
-> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
->
-> ```svelte
-> <script>
-> 	let count = 0;
-> </script>
->
-> <button on:click={() => count++}>
-> 	clicks: {count}
-> </button>
-> ```
-
-## `$derived`
-
-Derived state is declared with the `$derived` rune:
-
-```svelte
-<script>
-	let count = $state(0);
-	let doubled = $derived(count * 2);
-</script>
-
-<button onclick={() => count++}>
-	{doubled}
-</button>
-
-<p>{count} doubled is {doubled}</p>
-```
-
-The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
-
-As with `$state`, you can mark class fields as `$derived`.
-
-> [!LEGACY]
-> In Svelte 4, you could use reactive statements for this.
->
-> ```svelte
-> <script>
-> 	let count = 0;
-> 	$: doubled = count * 2;
-> </script>
->
-> <button on:click={() => count++}>
-> 	{doubled}
-> </button>
->
-> <p>{count} doubled is {doubled}</p>
-> ```
->
-> This only worked at the top level of a component.
-
-## `$effect`
-
-To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
-
-```svelte
-<script>
-	let size = $state(50);
-	let color = $state('#ff3e00');
-
-	let canvas;
-
-	$effect(() => {
-		const context = canvas.getContext('2d');
-		context.clearRect(0, 0, canvas.width, canvas.height);
-
-		// this will re-run whenever `color` or `size` change
-		context.fillStyle = color;
-		context.fillRect(0, 0, size, size);
-	});
-</script>
-
-<canvas bind:this={canvas} width="100" height="100" />
-```
-
-The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
-
-> [!LEGACY]
-> In Svelte 4, you could use reactive statements for this.
->
-> ```svelte
-> <script>
-> 	let size = 50;
-> 	let color = '#ff3e00';
->
-> 	let canvas;
->
-> 	$: {
-> 		const context = canvas.getContext('2d');
-> 		context.clearRect(0, 0, canvas.width, canvas.height);
->
-> 		// this will re-run whenever `color` or `size` change
-> 		context.fillStyle = color;
-> 		context.fillRect(0, 0, size, size);
-> 	}
-> </script>
->
-> <canvas bind:this={canvas} width="100" height="100" />
-> ```
->
-> This only worked at the top level of a component.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
deleted file mode 100644
index 4d163ea3f1..0000000000
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-control-flow.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Control flow
----
-
-- if
-- each
-- await (or move that into some kind of data loading section?)
-- NOT: key (move into transition section, because that's the common use case)
-
-Svelte augments HTML with control flow blocks to be able to express conditionally rendered content or lists.
-
-The syntax between these blocks is the same:
-
-- `{#` denotes the start of a block
-- `{:` denotes a different branch part of the block. Depending on the block, there can be multiple of these
-- `{/` denotes the end of a block
-
-## {#if ...}
-
-## {#each ...}
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name, index}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name (key)}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name, index (key)}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name}...{:else}...{/each}
-```
-
-Iterating over lists of values can be done with an each block.
-
-```svelte
-<h1>Shopping list</h1>
-<ul>
-	{#each items as item}
-		<li>{item.name} x {item.qty}</li>
-	{/each}
-</ul>
-```
-
-You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
-
-An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
-
-```svelte
-{#each items as item, i}
-	<li>{i + 1}: {item.name} x {item.qty}</li>
-{/each}
-```
-
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
-
-```svelte
-{#each items as item (item.id)}
-	<li>{item.name} x {item.qty}</li>
-{/each}
-
-<!-- or with additional index value -->
-{#each items as item, i (item.id)}
-	<li>{i + 1}: {item.name} x {item.qty}</li>
-{/each}
-```
-
-You can freely use destructuring and rest patterns in each blocks.
-
-```svelte
-{#each items as { id, name, qty }, i (id)}
-	<li>{i + 1}: {name} x {qty}</li>
-{/each}
-
-{#each objects as { id, ...rest }}
-	<li><span>{id}</span><MyComponent {...rest} /></li>
-{/each}
-
-{#each items as [id, ...rest]}
-	<li><span>{id}</span><MyComponent values={rest} /></li>
-{/each}
-```
-
-An each block can also have an `{:else}` clause, which is rendered if the list is empty.
-
-```svelte
-{#each todos as todo}
-	<p>{todo.text}</p>
-{:else}
-	<p>No tasks today!</p>
-{/each}
-```
-
-It is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
-
-## Other block types
-
-Svelte also provides [`#snippet`](snippets), [`#key`](transitions-and-animations) and [`#await`](data-fetching) blocks. You can find out more about them in their respective sections.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
deleted file mode 100644
index df860650a3..0000000000
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/xx-data-fetching.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Data fetching
----
-
-Fetching data is a fundamental part of apps interacting with the outside world. Svelte is unopinionated with how you fetch your data. The simplest way would be using the built-in `fetch` method:
-
-```svelte
-<script>
-	let response = $state();
-	fetch('http://github.com/api/data').then(async (r) => (response = r.json()));
-</script>
-```
-
-While this works, it makes working with promises somewhat unergonomic. Svelte alleviates this problem using the `#await` block.
-
-## {#await ...}
-
-## SvelteKit loaders
-
-Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](../kit).
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md b/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md
deleted file mode 100644
index 91cc35b5c7..0000000000
--- a/apps/svelte.dev/content/docs/svelte/07-misc/xx-reactivity-indepth.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Reactivity in depth
----
-
-- how to think about Runes ("just JavaScript" with added reactivity, what this means for keeping reactivity alive across boundaries)
-- signals

From 52811d560952bc03a34dcb212f252ab49febe1d3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Apr 2025 09:10:35 -0400
Subject: [PATCH 400/453] Sync `cli` docs (#1298)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/cli/20-commands/10-sv-create.md     | 12 +++++++++++-
 .../content/docs/cli/20-commands/20-sv-add.md        |  3 ++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
index ccfa2ab287..a3db1d8f57 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/10-sv-create.md
@@ -36,9 +36,19 @@ Prevent typechecking from being added. Not recommended!
 
 Run the command without the interactive add-ons prompt
 
+### `--install <package-manager>`
+
+Installs dependencies with a specified package manager:
+
+- `npm`
+- `pnpm`
+- `yarn`
+- `bun`
+- `deno`
+
 ### `--no-install`
 
-Skip dependency installation
+Prevents installing dependencies.
 
 <!-- ## Programmatic interface
 
diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
index 4963f5f171..b0a7a185ef 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -21,7 +21,8 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 
 - `-C`, `--cwd` — path to the root of your Svelte(Kit) project
 - `--no-preconditions` — skip checking preconditions <!-- TODO what does this mean? -->
-- `--no-install` — skip dependency installation
+- `--install` — installs dependencies with a specified package manager
+- `--no-install` — prevents installing dependencies
 
 ## Official add-ons
 

From f9fab98c9b6abc4dcc30623ac52c1b91b931c8d1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Apr 2025 09:11:39 -0400
Subject: [PATCH 401/453] Sync `svelte` docs (#1299)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md | 4 ++--
 .../docs/svelte/03-template-syntax/01-basic-markup.md     | 2 ++
 .../content/docs/svelte/03-template-syntax/06-snippet.md  | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
index b0307c98a0..bd71a2267b 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md
@@ -38,7 +38,7 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
 
 ## Fallback values
 
-Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
+Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):
 
 ```js
 let { adjective = 'happy' } = $props();
@@ -220,4 +220,4 @@ This is useful for linking elements via attributes like `for` and `aria-labelled
 	<label for="{uid}-lastname">Last Name: </label>
 	<input id="{uid}-lastname" type="text" />
 </form>
-```
\ No newline at end of file
+```
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
index a73f0e29e6..bc98d60573 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -155,6 +155,8 @@ A JavaScript expression can be included as text by surrounding it with curly bra
 {expression}
 ```
 
+Expressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).
+
 Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.
 
 If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
index b58995b84a..9d19570975 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md
@@ -113,6 +113,8 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
 
 ## Passing snippets to components
 
+### Explicit props
+
 Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
 
 ```svelte
@@ -145,6 +147,8 @@ Within the template, snippets are values just like any other. As such, they can
 
 Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
 
+### Implicit props
+
 As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
 
 ```svelte
@@ -166,6 +170,8 @@ As an authoring convenience, snippets declared directly _inside_ a component imp
 </Table>
 ```
 
+### Implicit `children` snippet
+
 Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
 
 ```svelte
@@ -185,6 +191,8 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 
 > [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
 
+### Optional snippet props
+
 You can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...
 
 ```svelte

From 31cbd488dedb72d5ab20fdd650833ad0e236857d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Apr 2025 22:23:02 -0400
Subject: [PATCH 402/453] Consolidate icons (#1302)

* WIP use masks for icons

* more

* unused

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more consistent colours

* more

* tweak

* optimise SVGs
---
 apps/svelte.dev/package.json                  |  1 +
 apps/svelte.dev/src/lib/icons/arrow-left.svg  | 11 -----
 .../svelte.dev/src/lib/icons/bluesky-dark.svg |  3 --
 apps/svelte.dev/src/lib/icons/chevron.svg     |  3 --
 apps/svelte.dev/src/lib/icons/contents.svg    | 29 -----------
 .../svelte.dev/src/lib/icons/discord-dark.svg |  1 -
 .../src/lib/icons/download-dark.svg           |  1 -
 .../src/lib/icons/download-light.svg          |  1 -
 apps/svelte.dev/src/lib/icons/external.svg    |  3 --
 apps/svelte.dev/src/lib/icons/file-dark.svg   |  3 --
 .../src/lib/icons/file-edit-inline-dark.svg   |  3 --
 apps/svelte.dev/src/lib/icons/file-edit.svg   |  3 --
 apps/svelte.dev/src/lib/icons/file.svg        |  3 --
 apps/svelte.dev/src/lib/icons/github-dark.svg |  1 -
 apps/svelte.dev/src/lib/icons/lightbulb.svg   |  1 -
 apps/svelte.dev/src/lib/icons/terminal.svg    |  7 ---
 apps/svelte.dev/src/lib/icons/user-dark.svg   |  1 -
 .../playground/[id]/AppControls.svelte        | 15 +++---
 apps/svelte.dev/src/routes/_home/Video.svelte | 12 ++---
 apps/svelte.dev/src/routes/_home/cc-off.svg   | 22 ---------
 apps/svelte.dev/src/routes/_home/cc-on.svg    | 14 ------
 apps/svelte.dev/src/routes/_home/plus.svg     | 11 -----
 apps/svelte.dev/src/routes/_home/up-small.svg | 11 -----
 apps/svelte.dev/src/routes/docs/+page.svelte  | 21 ++++++--
 .../docs/[topic]/[...path]/OnThisPage.svelte  | 11 +++--
 .../svelte.dev/src/routes/search/+page.svelte |  2 +-
 .../routes/tutorial/[...slug]/Chrome.svelte   | 18 +++----
 .../routes/tutorial/[...slug]/Sidebar.svelte  | 27 +++++------
 .../tutorial/[...slug]/filetree/File.svelte   |  2 +-
 .../tutorial/[...slug]/filetree/Folder.svelte |  4 +-
 .../tutorial/[...slug]/filetree/Item.svelte   | 24 +++++-----
 apps/svelte.dev/static/icons/check.svg        |  1 -
 apps/svelte.dev/static/icons/chevron.svg      |  1 -
 apps/svelte.dev/static/icons/collapse.svg     |  1 -
 apps/svelte.dev/static/icons/download.svg     |  1 -
 apps/svelte.dev/static/icons/dropdown.svg     |  1 -
 apps/svelte.dev/static/icons/edit.svg         |  1 -
 apps/svelte.dev/static/icons/expand.svg       |  1 -
 apps/svelte.dev/static/icons/flip.svg         |  1 -
 apps/svelte.dev/static/icons/fork.svg         |  1 -
 apps/svelte.dev/static/icons/link.svg         | 19 --------
 apps/svelte.dev/static/icons/loading.svg      |  6 ---
 apps/svelte.dev/static/icons/save.svg         |  1 -
 .../icons/icons}/arrow-right.svg              |  0
 .../icons/icons/bluesky.svg                   |  0
 packages/icons/icons/cc-off.svg               |  1 +
 packages/icons/icons/cc-on.svg                |  1 +
 .../check-light.svg => icons/icons/check.svg} |  0
 .../src/lib => icons}/icons/chevron.svg       |  0
 .../close-light.svg => icons/icons/close.svg} |  0
 packages/icons/icons/contents.svg             |  1 +
 .../icons/copy-to-clipboard.svg}              |  0
 .../lib => packages/icons}/icons/delete.svg   |  0
 .../icons/icons/discord.svg                   |  0
 packages/icons/icons/document.svg             |  1 +
 .../icons/icons}/external-link.svg            |  0
 .../lib => packages/icons}/icons/file-new.svg |  0
 .../src/lib/Input => icons/icons}/file.svg    |  0
 .../icons}/icons/folder-new.svg               |  0
 .../icons}/icons/folder-open.svg              |  0
 .../lib => packages/icons}/icons/folder.svg   |  0
 .../icons/font-boring.svg}                    |  0
 .../icons/font-elegant.svg}                   |  0
 .../icons/icons/github.svg                    |  0
 packages/icons/icons/hash.svg                 |  1 +
 packages/icons/icons/lightbulb.svg            |  1 +
 .../_home => packages/icons/icons}/pause.svg  |  0
 .../_home => packages/icons/icons}/play.svg   |  0
 .../lib => packages/icons}/icons/refresh.svg  |  0
 .../lib => packages/icons}/icons/rename.svg   |  0
 .../icons/runes-off.svg}                      |  0
 .../icons/runes-on.svg}                       |  0
 .../icons}/icons/search.svg                   |  0
 packages/icons/icons/terminal.svg             |  1 +
 .../icons}/icons/theme-dark.svg               |  0
 .../icons}/icons/theme-light.svg              |  0
 .../icons/icons/user.svg                      |  0
 .../icons/icons}/volume-high.svg              |  0
 .../icons/icons}/volume-off.svg               |  0
 .../icons/wrench.svg}                         |  0
 packages/icons/package.json                   | 10 ++++
 packages/icons/types.d.ts                     |  2 +
 packages/repl/package.json                    |  1 +
 packages/repl/src/lib/Editor/close-dark.svg   |  1 -
 packages/repl/src/lib/Editor/codemirror.css   | 43 ++++++++++-------
 .../src/lib/Input/ComponentSelector.svelte    | 14 ++++--
 packages/repl/src/lib/Input/RunesInfo.svelte  | 19 ++++----
 packages/repl/src/lib/Input/file-new.svg      |  3 --
 .../repl/src/lib/Input/runes-off-dark.svg     |  1 -
 packages/repl/src/lib/Input/runes-on-dark.svg |  1 -
 packages/site-kit/package.json                |  3 +-
 .../src/lib/components/FontToggle.svelte      | 27 ++++-------
 .../site-kit/src/lib/components/Text.svelte   | 48 ++++++++-----------
 .../src/lib/components/ThemeToggle.svelte     | 16 ++++---
 .../src/lib/components/Toolbox.svelte         |  9 +---
 .../site-kit/src/lib/icons/check-dark.svg     |  1 -
 .../src/lib/icons/copy-to-clipboard-dark.svg  |  1 -
 .../site-kit/src/lib/icons/document-dark.svg  | 20 --------
 .../site-kit/src/lib/icons/document-light.svg | 20 --------
 .../src/lib/icons/font-accessible-dark.svg    |  1 -
 .../src/lib/icons/font-accessible-light.svg   |  1 -
 .../src/lib/icons/font-boring-dark.svg        |  1 -
 .../src/lib/icons/font-elegant-dark.svg       |  1 -
 packages/site-kit/src/lib/icons/hash-dark.svg | 23 ---------
 .../site-kit/src/lib/icons/hash-light.svg     | 23 ---------
 packages/site-kit/src/lib/icons/home.svg      |  1 -
 packages/site-kit/src/lib/icons/link.svg      | 19 --------
 packages/site-kit/src/lib/icons/search.svg    |  6 ---
 .../site-kit/src/lib/icons/wrench-dark.svg    | 13 -----
 packages/site-kit/src/lib/nav/Nav.svelte      | 23 +++------
 .../site-kit/src/lib/search/Search.svelte     |  2 +-
 .../src/lib/search/SearchResultList.svelte    | 26 ++++------
 .../site-kit/src/lib/styles/utils/buttons.css | 17 ++++++-
 .../site-kit/src/lib/styles/utils/nav.css     |  4 +-
 pnpm-lock.yaml                                | 11 +++++
 115 files changed, 223 insertions(+), 500 deletions(-)
 delete mode 100644 apps/svelte.dev/src/lib/icons/arrow-left.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/bluesky-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/chevron.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/contents.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/discord-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/download-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/download-light.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/external.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/file-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/file-edit.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/file.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/github-dark.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/lightbulb.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/terminal.svg
 delete mode 100644 apps/svelte.dev/src/lib/icons/user-dark.svg
 delete mode 100644 apps/svelte.dev/src/routes/_home/cc-off.svg
 delete mode 100644 apps/svelte.dev/src/routes/_home/cc-on.svg
 delete mode 100644 apps/svelte.dev/src/routes/_home/plus.svg
 delete mode 100644 apps/svelte.dev/src/routes/_home/up-small.svg
 delete mode 100644 apps/svelte.dev/static/icons/check.svg
 delete mode 100644 apps/svelte.dev/static/icons/chevron.svg
 delete mode 100644 apps/svelte.dev/static/icons/collapse.svg
 delete mode 100644 apps/svelte.dev/static/icons/download.svg
 delete mode 100644 apps/svelte.dev/static/icons/dropdown.svg
 delete mode 100644 apps/svelte.dev/static/icons/edit.svg
 delete mode 100644 apps/svelte.dev/static/icons/expand.svg
 delete mode 100644 apps/svelte.dev/static/icons/flip.svg
 delete mode 100644 apps/svelte.dev/static/icons/fork.svg
 delete mode 100644 apps/svelte.dev/static/icons/link.svg
 delete mode 100644 apps/svelte.dev/static/icons/loading.svg
 delete mode 100644 apps/svelte.dev/static/icons/save.svg
 rename {apps/svelte.dev/src/routes/docs => packages/icons/icons}/arrow-right.svg (100%)
 rename apps/svelte.dev/src/lib/icons/bluesky-light.svg => packages/icons/icons/bluesky.svg (100%)
 create mode 100644 packages/icons/icons/cc-off.svg
 create mode 100644 packages/icons/icons/cc-on.svg
 rename packages/{site-kit/src/lib/icons/check-light.svg => icons/icons/check.svg} (100%)
 rename packages/{site-kit/src/lib => icons}/icons/chevron.svg (100%)
 rename packages/{repl/src/lib/Editor/close-light.svg => icons/icons/close.svg} (100%)
 create mode 100644 packages/icons/icons/contents.svg
 rename packages/{site-kit/src/lib/icons/copy-to-clipboard-light.svg => icons/icons/copy-to-clipboard.svg} (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/delete.svg (100%)
 rename apps/svelte.dev/src/lib/icons/discord-light.svg => packages/icons/icons/discord.svg (100%)
 create mode 100644 packages/icons/icons/document.svg
 rename {apps/svelte.dev/src/routes/docs => packages/icons/icons}/external-link.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/file-new.svg (100%)
 rename packages/{repl/src/lib/Input => icons/icons}/file.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/folder-new.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/folder-open.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/folder.svg (100%)
 rename packages/{site-kit/src/lib/icons/font-boring-light.svg => icons/icons/font-boring.svg} (100%)
 rename packages/{site-kit/src/lib/icons/font-elegant-light.svg => icons/icons/font-elegant.svg} (100%)
 rename apps/svelte.dev/src/lib/icons/github-light.svg => packages/icons/icons/github.svg (100%)
 create mode 100644 packages/icons/icons/hash.svg
 create mode 100644 packages/icons/icons/lightbulb.svg
 rename {apps/svelte.dev/src/routes/_home => packages/icons/icons}/pause.svg (100%)
 rename {apps/svelte.dev/src/routes/_home => packages/icons/icons}/play.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/refresh.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/rename.svg (100%)
 rename packages/{repl/src/lib/Input/runes-off-light.svg => icons/icons/runes-off.svg} (100%)
 rename packages/{repl/src/lib/Input/runes-on-light.svg => icons/icons/runes-on.svg} (100%)
 rename {apps/svelte.dev/static => packages/icons}/icons/search.svg (100%)
 create mode 100644 packages/icons/icons/terminal.svg
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/theme-dark.svg (100%)
 rename {apps/svelte.dev/src/lib => packages/icons}/icons/theme-light.svg (100%)
 rename apps/svelte.dev/src/lib/icons/user-light.svg => packages/icons/icons/user.svg (100%)
 rename {apps/svelte.dev/src/routes/_home => packages/icons/icons}/volume-high.svg (100%)
 rename {apps/svelte.dev/src/routes/_home => packages/icons/icons}/volume-off.svg (100%)
 rename packages/{site-kit/src/lib/icons/wrench-light.svg => icons/icons/wrench.svg} (100%)
 create mode 100644 packages/icons/package.json
 create mode 100644 packages/icons/types.d.ts
 delete mode 100644 packages/repl/src/lib/Editor/close-dark.svg
 delete mode 100644 packages/repl/src/lib/Input/file-new.svg
 delete mode 100644 packages/repl/src/lib/Input/runes-off-dark.svg
 delete mode 100644 packages/repl/src/lib/Input/runes-on-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/check-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/document-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/document-light.svg
 delete mode 100644 packages/site-kit/src/lib/icons/font-accessible-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/font-accessible-light.svg
 delete mode 100644 packages/site-kit/src/lib/icons/font-boring-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/font-elegant-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/hash-dark.svg
 delete mode 100644 packages/site-kit/src/lib/icons/hash-light.svg
 delete mode 100644 packages/site-kit/src/lib/icons/home.svg
 delete mode 100644 packages/site-kit/src/lib/icons/link.svg
 delete mode 100644 packages/site-kit/src/lib/icons/search.svg
 delete mode 100644 packages/site-kit/src/lib/icons/wrench-dark.svg

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index febfe8548f..654248784a 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -39,6 +39,7 @@
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
+		"icons": "workspace:*",
 		"port-authority": "^2.0.1",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.9",
diff --git a/apps/svelte.dev/src/lib/icons/arrow-left.svg b/apps/svelte.dev/src/lib/icons/arrow-left.svg
deleted file mode 100644
index ee413e3551..0000000000
--- a/apps/svelte.dev/src/lib/icons/arrow-left.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_705)">
-<path d="M6 11.9958H18" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 18L6 12L12 6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_705">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/bluesky-dark.svg b/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
deleted file mode 100644
index 690f699a80..0000000000
--- a/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-	<path fill="#d4d4d4" d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/chevron.svg b/apps/svelte.dev/src/lib/icons/chevron.svg
deleted file mode 100644
index 7334ed9673..0000000000
--- a/apps/svelte.dev/src/lib/icons/chevron.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="m6 9 6 6 6-6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/contents.svg b/apps/svelte.dev/src/lib/icons/contents.svg
deleted file mode 100644
index b24fac9f7a..0000000000
--- a/apps/svelte.dev/src/lib/icons/contents.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #676778;
-      }
-
-      .cls-2 {
-        fill: none;
-        stroke: #676778;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-2" d="M9.5,12h11"/>
-      <path class="cls-2" d="M9.5,19h11"/>
-      <path class="cls-2" d="M9.5,5h11"/>
-      <path class="cls-1" d="M5,6.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-      <path class="cls-1" d="M5,13.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-      <path class="cls-1" d="M5,20.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/src/lib/icons/discord-dark.svg b/apps/svelte.dev/src/lib/icons/discord-dark.svg
deleted file mode 100644
index 8a1029d2c4..0000000000
--- a/apps/svelte.dev/src/lib/icons/discord-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#d4d4d4" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/download-dark.svg b/apps/svelte.dev/src/lib/icons/download-dark.svg
deleted file mode 100644
index b769ca5914..0000000000
--- a/apps/svelte.dev/src/lib/icons/download-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#d4d4d4" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/download-light.svg b/apps/svelte.dev/src/lib/icons/download-light.svg
deleted file mode 100644
index a1f28e2b87..0000000000
--- a/apps/svelte.dev/src/lib/icons/download-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#666" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/external.svg b/apps/svelte.dev/src/lib/icons/external.svg
deleted file mode 100644
index 5a16c1ce92..0000000000
--- a/apps/svelte.dev/src/lib/icons/external.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="none" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M10,3H3v18h18v-7 M21,9.5V3h-6.5 M12,12l9-9"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-dark.svg b/apps/svelte.dev/src/lib/icons/file-dark.svg
deleted file mode 100644
index 1496d2264b..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg b/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg
deleted file mode 100644
index 4b7816bd33..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 16.5C21 15.9477 20.5523 15.5 20 15.5C19.4477 15.5 19 15.9477 19 16.5H21ZM15.75 21C15.1977 21 14.75 21.4477 14.75 22C14.75 22.5523 15.1977 23 15.75 23V21ZM19 8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8H19ZM8 23C8.55228 23 9 22.5523 9 22C9 21.4477 8.55228 21 8 21V23ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM10.7228 21.3708C10.3753 21.8001 10.4415 22.4297 10.8708 22.7772C11.3001 23.1247 11.9297 23.0585 12.2772 22.6292L10.7228 21.3708ZM20.7772 12.1292C21.1247 11.6999 21.0585 11.0703 20.6292 10.7228C20.1999 10.3753 19.5703 10.4415 19.2228 10.8708L20.7772 12.1292ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13V11ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11V13ZM19 16.5V21H21V16.5H19ZM19 21V23C20.1046 23 21 22.1046 21 21H19ZM19 21H15.75V23H19V21ZM21 8V3H19V8H21ZM21 3C21 1.89544 20.1046 1 19 1V3H21ZM19 1H5V3H19V1ZM5 1C3.89543 1 3 1.89543 3 3H5V1ZM3 3V21H5V3H3ZM3 21C3 22.1046 3.89544 23 5 23V21H3ZM5 23H8V21H5V23ZM8 9H15V7H8V9ZM12.2772 22.6292L20.7772 12.1292L19.2228 10.8708L10.7228 21.3708L12.2772 22.6292ZM8 13H12V11H8V13Z" fill="#ccc"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-edit.svg b/apps/svelte.dev/src/lib/icons/file-edit.svg
deleted file mode 100644
index faad58f4d8..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 16.5C21 15.9477 20.5523 15.5 20 15.5C19.4477 15.5 19 15.9477 19 16.5H21ZM15.75 21C15.1977 21 14.75 21.4477 14.75 22C14.75 22.5523 15.1977 23 15.75 23V21ZM19 8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8H19ZM8 23C8.55228 23 9 22.5523 9 22C9 21.4477 8.55228 21 8 21V23ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM10.7228 21.3708C10.3753 21.8001 10.4415 22.4297 10.8708 22.7772C11.3001 23.1247 11.9297 23.0585 12.2772 22.6292L10.7228 21.3708ZM20.7772 12.1292C21.1247 11.6999 21.0585 11.0703 20.6292 10.7228C20.1999 10.3753 19.5703 10.4415 19.2228 10.8708L20.7772 12.1292ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13V11ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11V13ZM19 16.5V21H21V16.5H19ZM19 21V23C20.1046 23 21 22.1046 21 21H19ZM19 21H15.75V23H19V21ZM21 8V3H19V8H21ZM21 3C21 1.89544 20.1046 1 19 1V3H21ZM19 1H5V3H19V1ZM5 1C3.89543 1 3 1.89543 3 3H5V1ZM3 3V21H5V3H3ZM3 21C3 22.1046 3.89544 23 5 23V21H3ZM5 23H8V21H5V23ZM8 9H15V7H8V9ZM12.2772 22.6292L20.7772 12.1292L19.2228 10.8708L10.7228 21.3708L12.2772 22.6292ZM8 13H12V11H8V13Z" fill="#676778"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file.svg b/apps/svelte.dev/src/lib/icons/file.svg
deleted file mode 100644
index 5ca191bd44..0000000000
--- a/apps/svelte.dev/src/lib/icons/file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2" stroke="#666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/github-dark.svg b/apps/svelte.dev/src/lib/icons/github-dark.svg
deleted file mode 100644
index 946addd279..0000000000
--- a/apps/svelte.dev/src/lib/icons/github-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#d4d4d4"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/lightbulb.svg b/apps/svelte.dev/src/lib/icons/lightbulb.svg
deleted file mode 100644
index f3c24132ee..0000000000
--- a/apps/svelte.dev/src/lib/icons/lightbulb.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff3e00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/terminal.svg b/apps/svelte.dev/src/lib/icons/terminal.svg
deleted file mode 100644
index ece0700c41..0000000000
--- a/apps/svelte.dev/src/lib/icons/terminal.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 3.5H3C2.44771 3.5 2 3.94771 2 4.5V19.5C2 20.0523 2.44771 20.5 3 20.5H21C21.5523 20.5 22 20.0523 22 19.5V4.5C22 3.94771 21.5523 3.5 21 3.5Z" fill="#676778" stroke="#676778" stroke-width="1.5"/>
-<path d="M8.70703 11.3613L6 10.1836V8.54297L10.3242 10.6758V12.0703L6 14.209V12.5684L8.70703 11.3613Z" fill="white"/>
-<path d="M10.9367 14.1562C10.9367 13.8906 11.0246 13.6719 11.2004 13.5C11.3801 13.3281 11.6125 13.2422 11.8976 13.2422C12.175 13.2422 12.4055 13.3281 12.5891 13.5C12.7726 13.668 12.8644 13.8867 12.8644 14.1562C12.8644 14.4297 12.7707 14.6504 12.5832 14.8184C12.3996 14.9824 12.1711 15.0645 11.8976 15.0645C11.6203 15.0645 11.3898 14.9805 11.2062 14.8125C11.0266 14.6445 10.9367 14.4258 10.9367 14.1562Z" fill="white"/>
-<path d="M13.3621 14.1562C13.3621 13.8906 13.45 13.6719 13.6258 13.5C13.8055 13.3281 14.0379 13.2422 14.323 13.2422C14.6004 13.2422 14.8308 13.3281 15.0144 13.5C15.198 13.668 15.2898 13.8867 15.2898 14.1562C15.2898 14.4297 15.1961 14.6504 15.0086 14.8184C14.825 14.9824 14.5965 15.0645 14.323 15.0645C14.0457 15.0645 13.8152 14.9805 13.6316 14.8125C13.4519 14.6445 13.3621 14.4258 13.3621 14.1562Z" fill="white"/>
-<path d="M15.9015 14.1562C15.9015 13.8906 15.9894 13.6719 16.1652 13.5C16.3449 13.3281 16.5773 13.2422 16.8625 13.2422C17.1398 13.2422 17.3703 13.3281 17.5539 13.5C17.7375 13.668 17.8293 13.8867 17.8293 14.1562C17.8293 14.4297 17.7355 14.6504 17.548 14.8184C17.3644 14.9824 17.1359 15.0645 16.8625 15.0645C16.5851 15.0645 16.3547 14.9805 16.1711 14.8125C15.9914 14.6445 15.9015 14.4258 15.9015 14.1562Z" fill="white"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/user-dark.svg b/apps/svelte.dev/src/lib/icons/user-dark.svg
deleted file mode 100644
index 91402ad157..0000000000
--- a/apps/svelte.dev/src/lib/icons/user-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 918b34fb32..87336ce167 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -272,12 +272,15 @@
 
 		&.login {
 			width: auto;
-			background-image: url(http://github.com/$lib/icons/user-light.svg);
-			background-position: 0.4rem 50%;
-			padding: 0 0.4rem 0 2.8rem;
-
-			:root.dark & {
-				background-image: url(http://github.com/$lib/icons/user-dark.svg);
+			padding: 0 0.4rem;
+
+			&::before {
+				content: '';
+				width: 1.8rem;
+				height: 1.8rem;
+				margin: 0 0.5rem 0 0;
+				background: currentColor;
+				mask: url(http://github.com/icons/user) no-repeat 50% 50%;
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index e10b9a8e2a..d1614ed6f8 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import volume_off from './volume-off.svg';
-	import volume_high from './volume-high.svg';
-	import cc_on from './cc-on.svg';
-	import cc_off from './cc-off.svg';
-	import play from './play.svg';
-	import pause from './pause.svg';
+	import volume_off from 'icons/volume-off';
+	import volume_high from 'icons/volume-high';
+	import cc_on from 'icons/cc-on';
+	import cc_off from 'icons/cc-off';
+	import play from 'icons/play';
+	import pause from 'icons/pause';
 	import vtt from './subtitles.vtt';
 	import { onMount } from 'svelte';
 
diff --git a/apps/svelte.dev/src/routes/_home/cc-off.svg b/apps/svelte.dev/src/routes/_home/cc-off.svg
deleted file mode 100644
index c5d60a43df..0000000000
--- a/apps/svelte.dev/src/routes/_home/cc-off.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;fill:#FFFFFF;}
-	.st1{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M12,3.7L9.9,5.8L12,7.9 M4.3,2.7L3,4l4.7,4.7H3v6h4l5,5V13l4.2,4.3c-0.7,0.5-1.4,0.9-2.2,1.2v2.1
-	c1.4-0.3,2.6-1,3.7-1.8l2,2l1.3-1.3l-9-9 M19,11.7c0,0.9-0.2,1.8-0.5,2.6l1.5,1.5c0.7-1.2,1-2.6,1-4.1c0-4.3-3-7.9-7-8.8V5
-	C16.9,5.9,19,8.6,19,11.7 M16.5,11.7c0-1.8-1-3.3-2.5-4v2.2l2.5,2.4C16.5,12.2,16.5,11.9,16.5,11.7z"/>
-<g>
-	<path class="st1" d="M16.5,13.5l1.2,1.2c0.2-0.2,0.3-0.4,0.3-0.7v-1h-1.5V13.5z"/>
-	<path class="st1" d="M10,13H9.5v0.5h-2v-3h0L6.3,9.3C6.1,9.5,6,9.7,6,10v4c0,0.3,0.1,0.5,0.3,0.7C6.5,14.9,6.7,15,7,15h3
-		c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v0L10,13z"/>
-	<path class="st1" d="M14.5,11.5v-1h2V11H18v-1c0-0.3-0.1-0.5-0.3-0.7C17.5,9.1,17.3,9,17,9h-3c-0.3,0-0.5,0.1-0.7,0.3
-		C13.1,9.5,13,9.7,13,10L14.5,11.5z"/>
-	<path class="st1" d="M20.4,4.6C20,4.2,19.5,4,19,4H5C4.5,4,4,4.2,3.6,4.6C3.2,5,3,5.4,3,6v12c0,0.6,0.2,1,0.6,1.4
-		C4,19.8,4.5,20,5,20h14c0.5,0,1-0.2,1.4-0.6C20.8,19,21,18.5,21,18V6C21,5.5,20.8,5,20.4,4.6z M19.5,5.5v12.8L6.7,5.5H19.5z
-		 M4.5,18.5V5.8l12.7,12.7H4.5z"/>
-</g>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/cc-on.svg b/apps/svelte.dev/src/routes/_home/cc-on.svg
deleted file mode 100644
index e429173f5e..0000000000
--- a/apps/svelte.dev/src/routes/_home/cc-on.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M5,4C4.4,4,4,4.2,3.6,4.6C3.2,5,3,5.4,3,6v12c0,0.6,0.2,1,0.6,1.4C4,19.8,4.4,20,5,20h14c0.5,0,1-0.2,1.4-0.6
-	C20.8,19,21,18.5,21,18V6c0-0.5-0.2-1-0.6-1.4C20,4.2,19.5,4,19,4H5 M4.5,5.5h15v13h-15V5.5 M7,9C6.7,9,6.5,9.1,6.3,9.3
-	C6.1,9.5,6,9.7,6,10v4c0,0.3,0.1,0.5,0.3,0.7C6.5,14.9,6.7,15,7,15h3c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v-1H9.5v0.5h-2
-	v-3h2V11H11v-1c0-0.3-0.1-0.5-0.3-0.7C10.5,9.1,10.3,9,10,9H7 M14,9c-0.3,0-0.5,0.1-0.7,0.3C13.1,9.5,13,9.7,13,10v4
-	c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.4,0.3,0.7,0.3h3c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v-1h-1.5v0.5h-2v-3h2V11H18v-1
-	c0-0.3-0.1-0.5-0.3-0.7C17.5,9.1,17.3,9,17,9H14z"/>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/plus.svg b/apps/svelte.dev/src/routes/_home/plus.svg
deleted file mode 100644
index 4826bcaf2c..0000000000
--- a/apps/svelte.dev/src/routes/_home/plus.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_689)">
-<path d="M12.0303 5L12.012 19" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 12H19" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_689">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/up-small.svg b/apps/svelte.dev/src/routes/_home/up-small.svg
deleted file mode 100644
index f067962cf7..0000000000
--- a/apps/svelte.dev/src/routes/_home/up-small.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_719)">
-<path d="M12.0042 6.05029V18" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6 12L12 6L18 12" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_719">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 4d9e6f0602..d940ab42f7 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -150,13 +150,24 @@
 		}
 
 		h2 {
+			position: relative;
 			padding-right: 4rem;
-			background: url(http://github.com/arrow-right.svg) no-repeat 100% 50%;
-			background-size: 3rem;
 
-			.external & {
-				background-image: url(http://github.com/external-link.svg);
-				background-size: 3rem;
+			&::after {
+				content: '';
+				position: absolute;
+				width: 3rem;
+				height: 3rem;
+				top: 0.2rem;
+				right: 0;
+
+				background: var(--sk-fg-accent);
+				mask: url(http://github.com/icons/arrow-right) no-repeat 100% 50%;
+				mask-size: 100%;
+			}
+
+			.external &::after {
+				mask-image: url(http://github.com/icons/external-link);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
index 22bec4e816..3bad6b262c 100644
--- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
@@ -99,7 +99,7 @@
 				position: relative;
 				display: flex;
 				align-items: center;
-				background: url(http://github.com/$lib/icons/contents.svg) 0 50% no-repeat;
+				background: url(http://github.com/icons/contents) 0 50% no-repeat;
 				background-size: 2rem 2rem;
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
@@ -133,11 +133,12 @@
 				}
 
 				&::after {
-					background: url(http://github.com/$lib/icons/chevron.svg) 50% 50% no-repeat;
-					background-size: 2rem;
+					background: currentColor;
+					mask: url(http://github.com/icons/chevron) 50% 50% no-repeat;
+					mask-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: 0deg;
+					rotate: -90deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -161,7 +162,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 806c79fdf6..fff86da865 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -46,7 +46,7 @@
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
-		background: no-repeat 1rem 50% / 3rem 3rem url(http://github.com/icons/search.svg);
+		background: no-repeat 1rem 50% / 3rem 3rem url(http://github.com/icons/search);
 		color: var(--sk-fg-1);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 3b6a1eb799..d06072bb4a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -52,10 +52,10 @@
 
 	<button
 		disabled={loading || !toggle_terminal}
-		class="terminal icon raised"
+		class="terminal raised"
 		onclick={() => toggle_terminal?.()}
-		aria-label="toggle terminal"
-	></button>
+		aria-label="toggle terminal"><span class="icon"></span></button
+	>
 </div>
 
 <style>
@@ -88,14 +88,15 @@
 
 	.icon,
 	.icon::after {
-		position: relative;
 		width: 3.2rem;
 		aspect-ratio: 1;
 		background-size: 1.8rem;
 	}
 
-	.terminal {
-		background-image: url(http://github.com/$lib/icons/terminal.svg);
+	.terminal .icon {
+		background: currentColor;
+		mask: url(http://github.com/icons/terminal) 50% 50% no-repeat;
+		mask-size: 1.8rem;
 	}
 
 	.reload::after {
@@ -103,8 +104,9 @@
 		position: absolute;
 		left: 0;
 		top: 0;
-		background: url(http://github.com/$lib/icons/refresh.svg) no-repeat 50% 50%;
-		background-size: 1.8rem;
+		background: currentColor;
+		mask: url(http://github.com/icons/refresh) no-repeat 50% 50%;
+		mask-size: 1.8rem;
 		transition: 0.2s ease-out;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index b88621b2a2..e284dc59d5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -122,26 +122,21 @@
 			[data-file],
 			.filename {
 				cursor: pointer;
-				background-image: url(http://github.com/$lib/icons/file.svg);
-				background-repeat: no-repeat;
 
-				:root.dark & {
-					background-image: url(http://github.com/$lib/icons/file-dark.svg);
+				&::before {
+					position: relative;
+					content: '';
+					display: inline-block;
+					width: 1rem;
+					height: 1rem;
+					top: 0.1rem;
+					margin-right: 0.5rem;
+					background: currentColor;
+					mask: url(http://github.com/icons/file) 50% 50% no-repeat;
+					mask-size: 100%;
 				}
 			}
 
-			[data-file] {
-				background-position: 0.5rem 50%;
-				background-size: 1rem 1rem;
-				padding-left: 2rem;
-			}
-
-			.filename {
-				background-position: 0 54%;
-				background-size: 1rem 1rem;
-				padding-left: 1.5rem !important;
-			}
-
 			.desktop {
 				display: none;
 			}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index 5da9f62bc1..7225dc2125 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as context from './context.js';
 	import Item from './Item.svelte';
-	import file_icon from '$lib/icons/file.svg';
+	import file_icon from 'icons/file';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { File } from '@sveltejs/repl/workspace';
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index c16bd233a5..a94a058aa7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -4,8 +4,8 @@
 	import * as context from './context.js';
 	import { get_depth } from '$lib/utils/path.js';
 	import Item from './Item.svelte';
-	import folder_closed from '$lib/icons/folder.svg';
-	import folder_open from '$lib/icons/folder-open.svg';
+	import folder_closed from 'icons/folder';
+	import folder_open from 'icons/folder-open';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { Directory, File as IFile, Item as IItem } from '@sveltejs/repl/workspace';
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index 0d6cf40c48..491f2b9814 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -176,22 +176,22 @@
 	.icon {
 		height: 100%;
 		width: 1.5rem;
-	}
 
-	.icon.rename {
-		background-image: url(http://github.com/$lib/icons/rename.svg);
-	}
+		&.rename {
+			background-image: url(http://github.com/icons/rename);
+		}
 
-	.icon.delete {
-		background-image: url(http://github.com/$lib/icons/delete.svg);
-	}
+		&.delete {
+			background-image: url(http://github.com/icons/delete);
+		}
 
-	.icon.file-new {
-		background-image: url(http://github.com/$lib/icons/file-new.svg);
-	}
+		&.file-new {
+			background-image: url(http://github.com/icons/file-new);
+		}
 
-	.icon.folder-new {
-		background-image: url(http://github.com/$lib/icons/folder-new.svg);
+		&.folder-new {
+			background-image: url(http://github.com/icons/folder-new);
+		}
 	}
 
 	[aria-current='true'] {
diff --git a/apps/svelte.dev/static/icons/check.svg b/apps/svelte.dev/static/icons/check.svg
deleted file mode 100644
index c3e46a42b6..0000000000
--- a/apps/svelte.dev/static/icons/check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21 7-12 12-5.5-5.5 1.41-1.41 4.09 4.08 10.59-10.58z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/chevron.svg b/apps/svelte.dev/static/icons/chevron.svg
deleted file mode 100644
index 9d582fa803..0000000000
--- a/apps/svelte.dev/static/icons/chevron.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2 8 10 8 10-8" fill="none" stroke="#676778" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/collapse.svg b/apps/svelte.dev/static/icons/collapse.svg
deleted file mode 100644
index 795939aec8..0000000000
--- a/apps/svelte.dev/static/icons/collapse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 3.09 1.41 1.41-4.5 4.5h3.59v2h-7v-7h2v3.59zm1.41 16.41-1.41 1.41-4.5-4.5v3.59h-2v-7h7v2h-3.59zm-16.41-16.41 4.5 4.5v-3.59h2v7h-7v-2h3.59l-4.5-4.5zm-1.41 16.41 4.5-4.5h-3.59v-2h7v7h-2v-3.59l-4.5 4.5z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/download.svg b/apps/svelte.dev/static/icons/download.svg
deleted file mode 100644
index b286a882fe..0000000000
--- a/apps/svelte.dev/static/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5 20h14v-2h-14m14-9h-4v-6h-6v6h-4l7 7z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/dropdown.svg b/apps/svelte.dev/static/icons/dropdown.svg
deleted file mode 100644
index 69435856b4..0000000000
--- a/apps/svelte.dev/static/icons/dropdown.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 6h18v2h-18zm0 5h18v2h-18zm0 5h18v2h-18z" fill="#999"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/edit.svg b/apps/svelte.dev/static/icons/edit.svg
deleted file mode 100644
index 760321cd2f..0000000000
--- a/apps/svelte.dev/static/icons/edit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-width="2"><path d="m20 14.66v5.34a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2-2v-14a2 2 0 0 1 2-2h5.34"/><path d="m18 2 4 4-10 10h-4v-4z"/></g></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/expand.svg b/apps/svelte.dev/static/icons/expand.svg
deleted file mode 100644
index a026808da3..0000000000
--- a/apps/svelte.dev/static/icons/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m9.5 13.09 1.41 1.41-4.5 4.5h3.59v2h-7v-7h2v3.59zm1.41-3.59-1.41 1.41-4.5-4.5v3.59h-2v-7h7v2h-3.59zm3.59 3.59 4.5 4.5v-3.59h2v7h-7v-2h3.59l-4.5-4.5zm-1.41-3.59 4.5-4.5h-3.59v-2h7v7h-2v-3.59l-4.5 4.5z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/flip.svg b/apps/svelte.dev/static/icons/flip.svg
deleted file mode 100644
index 3a18d5ffa1..0000000000
--- a/apps/svelte.dev/static/icons/flip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 5c4.97 0 9 2.69 9 6 0 1.68-1.04 3.2-2.71 4.29 1.07-.87 1.71-1.97 1.71-3.16 0-2.84-3.58-5.13-8-5.13v3l-4-4 4-4zm0 14c-4.97 0-9-2.69-9-6 0-1.68 1.04-3.2 2.71-4.29-1.07.87-1.71 1.97-1.71 3.17 0 2.83 3.58 5.12 8 5.12v-3l4 4-4 4z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/fork.svg b/apps/svelte.dev/static/icons/fork.svg
deleted file mode 100644
index 3e21885495..0000000000
--- a/apps/svelte.dev/static/icons/fork.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 4v8.5l3-3 3 3.5c1 1 1 2 1 2v6h4v-7s0-1-.53-2-1.47-2-1.47-2l-3-3.42 2.5-2.58m6.5 0-4.46 4.47.46.53s.93 1 1.47 2c.21.4.33.79.4 1.13l5.13-5.13" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/link.svg b/apps/svelte.dev/static/icons/link.svg
deleted file mode 100644
index 58e745476b..0000000000
--- a/apps/svelte.dev/static/icons/link.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-	<style>
-		path {
-			stroke: #333;
-			fill: none;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			path {
-				stroke: #ccc;
-			}
-		}
-	</style>
-
-	<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
-	<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
-	<path d="M7,12L17,12"/>
-</svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/loading.svg b/apps/svelte.dev/static/icons/loading.svg
deleted file mode 100644
index e54abff1dd..0000000000
--- a/apps/svelte.dev/static/icons/loading.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-  <circle id="spinner" cx="12" cy="12" r="8" fill="none" stroke="white" stroke-width="3" stroke-dasharray="50.2 50" />
-  <animate href="#spinner" attributeName="stroke-dashoffset" values="52;0;52" dur="5s" repeatCount="indefinite" />
-  <animateTransform href="#spinner" attributeName="transform" type="rotate" values="0 12 12;360 12 12;0 12 12" dur="9s" repeatCount="indefinite"/>
-</svg>
diff --git a/apps/svelte.dev/static/icons/save.svg b/apps/svelte.dev/static/icons/save.svg
deleted file mode 100644
index a8a5fa1618..0000000000
--- a/apps/svelte.dev/static/icons/save.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15 9h-10v-4h10m-3 14a3 3 0 0 1 -3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1 -3 3m5-16h-12c-1.11 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-12z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/src/routes/docs/arrow-right.svg b/packages/icons/icons/arrow-right.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/arrow-right.svg
rename to packages/icons/icons/arrow-right.svg
diff --git a/apps/svelte.dev/src/lib/icons/bluesky-light.svg b/packages/icons/icons/bluesky.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/bluesky-light.svg
rename to packages/icons/icons/bluesky.svg
diff --git a/packages/icons/icons/cc-off.svg b/packages/icons/icons/cc-off.svg
new file mode 100644
index 0000000000..d9ca43b7d9
--- /dev/null
+++ b/packages/icons/icons/cc-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="m16.5 13.5 1.2 1.2c.2-.2.3-.4.3-.7v-1h-1.5v.5zM10 13h-.5v.5h-2v-3L6.3 9.3c-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7l-1-1zM14.5 11.5v-1h2v.5H18v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-3c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7l1.5 1.5z"/><path d="M20.4 4.6C20 4.2 19.5 4 19 4H5c-.5 0-1 .2-1.4.6C3.2 5 3 5.4 3 6v12c0 .6.2 1 .6 1.4.4.4.9.6 1.4.6h14c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V6c0-.5-.2-1-.6-1.4zm-.9.9v12.8L6.7 5.5h12.8zm-15 13V5.8l12.7 12.7H4.5z"/></svg>
diff --git a/packages/icons/icons/cc-on.svg b/packages/icons/icons/cc-on.svg
new file mode 100644
index 0000000000..afa28e11de
--- /dev/null
+++ b/packages/icons/icons/cc-on.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 4c-.6 0-1 .2-1.4.6C3.2 5 3 5.4 3 6v12c0 .6.2 1 .6 1.4.4.4.8.6 1.4.6h14c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V6c0-.5-.2-1-.6-1.4-.4-.4-.9-.6-1.4-.6H5m-.5 1.5h15v13h-15v-13M7 9c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3H7m7 0c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-3z" style="fill:#fff"/></svg>
diff --git a/packages/site-kit/src/lib/icons/check-light.svg b/packages/icons/icons/check.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/check-light.svg
rename to packages/icons/icons/check.svg
diff --git a/packages/site-kit/src/lib/icons/chevron.svg b/packages/icons/icons/chevron.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/chevron.svg
rename to packages/icons/icons/chevron.svg
diff --git a/packages/repl/src/lib/Editor/close-light.svg b/packages/icons/icons/close.svg
similarity index 100%
rename from packages/repl/src/lib/Editor/close-light.svg
rename to packages/icons/icons/close.svg
diff --git a/packages/icons/icons/contents.svg b/packages/icons/icons/contents.svg
new file mode 100644
index 0000000000..d19c904525
--- /dev/null
+++ b/packages/icons/icons/contents.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#676778}.cls-2{fill:none;stroke:#676778;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><g id="Layer_1"><path d="M9.5 12h11M9.5 19h11M9.5 5h11" class="cls-2"/><path d="M5 6.5c.8 0 1.5-.7 1.5-1.5S5.8 3.5 5 3.5 3.5 4.2 3.5 5 4.2 6.5 5 6.5ZM5 13.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5ZM5 20.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5Z" class="cls-1"/></g></svg>
diff --git a/packages/site-kit/src/lib/icons/copy-to-clipboard-light.svg b/packages/icons/icons/copy-to-clipboard.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/copy-to-clipboard-light.svg
rename to packages/icons/icons/copy-to-clipboard.svg
diff --git a/apps/svelte.dev/src/lib/icons/delete.svg b/packages/icons/icons/delete.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/delete.svg
rename to packages/icons/icons/delete.svg
diff --git a/apps/svelte.dev/src/lib/icons/discord-light.svg b/packages/icons/icons/discord.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/discord-light.svg
rename to packages/icons/icons/discord.svg
diff --git a/packages/icons/icons/document.svg b/packages/icons/icons/document.svg
new file mode 100644
index 0000000000..d3119e2ee9
--- /dev/null
+++ b/packages/icons/icons/document.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 7v14c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h10m5 5h-5V2m5 5-5-5" style="fill:none;stroke:#000000e0;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/></svg>
diff --git a/apps/svelte.dev/src/routes/docs/external-link.svg b/packages/icons/icons/external-link.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/external-link.svg
rename to packages/icons/icons/external-link.svg
diff --git a/apps/svelte.dev/src/lib/icons/file-new.svg b/packages/icons/icons/file-new.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/file-new.svg
rename to packages/icons/icons/file-new.svg
diff --git a/packages/repl/src/lib/Input/file.svg b/packages/icons/icons/file.svg
similarity index 100%
rename from packages/repl/src/lib/Input/file.svg
rename to packages/icons/icons/file.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder-new.svg b/packages/icons/icons/folder-new.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder-new.svg
rename to packages/icons/icons/folder-new.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder-open.svg b/packages/icons/icons/folder-open.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder-open.svg
rename to packages/icons/icons/folder-open.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder.svg b/packages/icons/icons/folder.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder.svg
rename to packages/icons/icons/folder.svg
diff --git a/packages/site-kit/src/lib/icons/font-boring-light.svg b/packages/icons/icons/font-boring.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/font-boring-light.svg
rename to packages/icons/icons/font-boring.svg
diff --git a/packages/site-kit/src/lib/icons/font-elegant-light.svg b/packages/icons/icons/font-elegant.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/font-elegant-light.svg
rename to packages/icons/icons/font-elegant.svg
diff --git a/apps/svelte.dev/src/lib/icons/github-light.svg b/packages/icons/icons/github.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/github-light.svg
rename to packages/icons/icons/github.svg
diff --git a/packages/icons/icons/hash.svg b/packages/icons/icons/hash.svg
new file mode 100644
index 0000000000..e17f3d5366
--- /dev/null
+++ b/packages/icons/icons/hash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:#000000e0;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><g id="Layer_1"><path d="M8.5 2v20M15.5 2v20M4 8.5l16-.1M4 15.5l16-.1" class="cls-1"/></g></svg>
diff --git a/packages/icons/icons/lightbulb.svg b/packages/icons/icons/lightbulb.svg
new file mode 100644
index 0000000000..d59dbca57e
--- /dev/null
+++ b/packages/icons/icons/lightbulb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff3e00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
diff --git a/apps/svelte.dev/src/routes/_home/pause.svg b/packages/icons/icons/pause.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/pause.svg
rename to packages/icons/icons/pause.svg
diff --git a/apps/svelte.dev/src/routes/_home/play.svg b/packages/icons/icons/play.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/play.svg
rename to packages/icons/icons/play.svg
diff --git a/apps/svelte.dev/src/lib/icons/refresh.svg b/packages/icons/icons/refresh.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/refresh.svg
rename to packages/icons/icons/refresh.svg
diff --git a/apps/svelte.dev/src/lib/icons/rename.svg b/packages/icons/icons/rename.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/rename.svg
rename to packages/icons/icons/rename.svg
diff --git a/packages/repl/src/lib/Input/runes-off-light.svg b/packages/icons/icons/runes-off.svg
similarity index 100%
rename from packages/repl/src/lib/Input/runes-off-light.svg
rename to packages/icons/icons/runes-off.svg
diff --git a/packages/repl/src/lib/Input/runes-on-light.svg b/packages/icons/icons/runes-on.svg
similarity index 100%
rename from packages/repl/src/lib/Input/runes-on-light.svg
rename to packages/icons/icons/runes-on.svg
diff --git a/apps/svelte.dev/static/icons/search.svg b/packages/icons/icons/search.svg
similarity index 100%
rename from apps/svelte.dev/static/icons/search.svg
rename to packages/icons/icons/search.svg
diff --git a/packages/icons/icons/terminal.svg b/packages/icons/icons/terminal.svg
new file mode 100644
index 0000000000..1a79d5dd9c
--- /dev/null
+++ b/packages/icons/icons/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/packages/icons/icons/theme-dark.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/theme-dark.svg
rename to packages/icons/icons/theme-dark.svg
diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/packages/icons/icons/theme-light.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/theme-light.svg
rename to packages/icons/icons/theme-light.svg
diff --git a/apps/svelte.dev/src/lib/icons/user-light.svg b/packages/icons/icons/user.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/user-light.svg
rename to packages/icons/icons/user.svg
diff --git a/apps/svelte.dev/src/routes/_home/volume-high.svg b/packages/icons/icons/volume-high.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/volume-high.svg
rename to packages/icons/icons/volume-high.svg
diff --git a/apps/svelte.dev/src/routes/_home/volume-off.svg b/packages/icons/icons/volume-off.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/volume-off.svg
rename to packages/icons/icons/volume-off.svg
diff --git a/packages/site-kit/src/lib/icons/wrench-light.svg b/packages/icons/icons/wrench.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/wrench-light.svg
rename to packages/icons/icons/wrench.svg
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 0000000000..c4d3ac8c06
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "icons",
+	"private": true,
+	"exports": {
+		"./*": {
+			"types": "./types.d.ts",
+			"default": "./icons/*.svg"
+		}
+	}
+}
diff --git a/packages/icons/types.d.ts b/packages/icons/types.d.ts
new file mode 100644
index 0000000000..63bbc09331
--- /dev/null
+++ b/packages/icons/types.d.ts
@@ -0,0 +1,2 @@
+declare const svg: string;
+export default svg;
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 3bd9bada03..8194c5372d 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -96,6 +96,7 @@
 		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",
+		"icons": "workspace:*",
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
diff --git a/packages/repl/src/lib/Editor/close-dark.svg b/packages/repl/src/lib/Editor/close-dark.svg
deleted file mode 100644
index 46bd16cf54..0000000000
--- a/packages/repl/src/lib/Editor/close-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/repl/src/lib/Editor/codemirror.css b/packages/repl/src/lib/Editor/codemirror.css
index 08d3bf5cbb..320891bccf 100644
--- a/packages/repl/src/lib/Editor/codemirror.css
+++ b/packages/repl/src/lib/Editor/codemirror.css
@@ -57,21 +57,25 @@
 	.cm-gutterElement {
 		position: relative;
 
-		&:where(:has([title='Fold line']), :has([title='Unfold line']))::after {
-			content: '';
-			position: absolute;
-			width: 100%;
-			right: 0;
-			top: 0;
-			height: 2.4rem;
-			background: url(http://github.com/$lib/icons/chevron.svg) no-repeat 50% 50%;
-			background-size: contain;
-			transition: transform 0.2s;
-			cursor: pointer;
+		&:where(:has([title='Fold line']), :has([title='Unfold line'])) {
+			&::after {
+				content: '';
+				position: absolute;
+				width: 100%;
+				right: 0;
+				top: 0;
+				height: 2.4rem;
+				background: currentColor;
+				mask: url(http://github.com/icons/chevron) no-repeat 50% 50%;
+				mask-size: contain;
+				transition: transform 0.2s;
+				cursor: pointer;
+				rotate: 180deg;
+			}
 		}
 
 		&:has([title='Unfold line'])::after {
-			transform: rotate(-90deg);
+			transform: rotate(90deg);
 		}
 
 		span {
@@ -184,12 +188,17 @@
 				aspect-ratio: 1;
 				top: 0.5rem;
 				right: 0.5rem;
-				color: transparent;
-				background: url(http://github.com/close-light.svg) 50% 50% no-repeat;
-				background-size: 1.8rem;
 
-				:root.dark & {
-					background-image: url(http://github.com/close-dark.svg);
+				&::after {
+					content: '';
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					top: 0;
+					background: currentColor;
+					mask: url(http://github.com/icons/close) 50% 50% no-repeat;
+					mask-size: 1.8rem;
 				}
 			}
 
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index f6bb459244..74caa7f96a 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -159,8 +159,8 @@
 		class="raised add-new"
 		onclick={add_new}
 		aria-label="add new component"
-		title="add new component"
-	></button>
+		title="add new component"><span class="icon"></span></button
+	>
 
 	<div class="runes">
 		<RunesInfo {runes} />
@@ -241,7 +241,7 @@
 			position: absolute;
 			left: 0em;
 			top: 0;
-			background: url(http://github.com/file.svg) 50% 50% no-repeat;
+			background: url(http://github.com/icons/file) 50% 50% no-repeat;
 			background-size: 1em;
 		}
 
@@ -303,8 +303,12 @@
 	.add-new {
 		height: 3.2rem;
 		aspect-ratio: 1;
-		background: url(http://github.com/file-new.svg) 50% 50% no-repeat;
-		background-size: 1em;
+
+		.icon {
+			background: currentColor;
+			mask: url(http://github.com/icons/file-new) 50% 50% no-repeat;
+			mask-size: 1.2em;
+		}
 	}
 
 	.runes {
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index d6728b5abe..2bef3449a5 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -73,32 +73,29 @@
 	}
 
 	span.lightning {
-		--icon-size: 1.8rem;
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: url(http://github.com/runes-off-light.svg) no-repeat 50% 50%;
-		background-size: contain;
-
-		:root.dark &:not(.active) {
-			background-image: url(http://github.com/runes-off-dark.svg);
-		}
+		background: var(--sk-fg-4);
+		mask: url(http://github.com/icons/runes-off) no-repeat 50% 50%;
+		mask-size: contain;
 
 		&.active {
-			background-image: url(http://github.com/runes-on-light.svg);
+			background: var(--sk-fg-accent);
+			mask-image: url(http://github.com/icons/runes-on);
 			animation: bump 0.4s;
 		}
 	}
 
 	@keyframes bump {
 		0% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 		50% {
-			background-size: calc(1.3 * var(--icon-size));
+			scale: 1.3;
 		}
 		100% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 	}
 
diff --git a/packages/repl/src/lib/Input/file-new.svg b/packages/repl/src/lib/Input/file-new.svg
deleted file mode 100644
index 6f8b1b14bb..0000000000
--- a/packages/repl/src/lib/Input/file-new.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2M12 10.5V17.5M8.5 14H15.5" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/packages/repl/src/lib/Input/runes-off-dark.svg b/packages/repl/src/lib/Input/runes-off-dark.svg
deleted file mode 100644
index d03bff31fa..0000000000
--- a/packages/repl/src/lib/Input/runes-off-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-on-dark.svg b/packages/repl/src/lib/Input/runes-on-dark.svg
deleted file mode 100644
index 90d811b4d1..0000000000
--- a/packages/repl/src/lib/Input/runes-on-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 37cdab652c..6885952bae 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -41,6 +41,7 @@
 		"@shikijs/langs": "^3.2.1",
 		"@shikijs/twoslash": "^3.2.1",
 		"esm-env": "^1.0.0",
+		"icons": "workspace:*",
 		"json5": "^2.2.3",
 		"shiki": "^3.2.1"
 	},
@@ -103,8 +104,6 @@
 		"./polyfills": {
 			"default": "./src/lib/polyfills/index.ts"
 		},
-		"./icons/link.svg": "./src/lib/icons/link.svg",
-		"./icons/search.svg": "./src/lib/icons/search.svg",
 		"./search": {
 			"default": "./src/lib/search/index.ts",
 			"svelte": "./src/lib/search/index.ts"
diff --git a/packages/site-kit/src/lib/components/FontToggle.svelte b/packages/site-kit/src/lib/components/FontToggle.svelte
index bec698d3c3..6e944beb1a 100644
--- a/packages/site-kit/src/lib/components/FontToggle.svelte
+++ b/packages/site-kit/src/lib/components/FontToggle.svelte
@@ -18,30 +18,21 @@
 
 <button
 	onclick={toggle}
-	class="raised icon"
+	class="raised"
 	type="button"
 	aria-pressed={font === 'boring'}
 	aria-label="Toggle font"
-></button>
+>
+	<span class="icon"></span>
+</button>
 
 <style>
-	button {
-		background-size: 2rem;
+	.icon {
+		mask-size: 2rem;
+		mask-image: url(http://github.com/icons/font-elegant);
 	}
 
-	button[aria-pressed='true'] {
-		background-image: url(http://github.com/icons/font-elegant-light.svg);
-
-		:global(.dark) & {
-			background-image: url(http://github.com/icons/font-elegant-dark.svg);
-		}
-	}
-
-	button[aria-pressed='false'] {
-		background-image: url(http://github.com/icons/font-boring-light.svg);
-
-		:global(.dark) & {
-			background-image: url(http://github.com/icons/font-boring-dark.svg);
-		}
+	button[aria-pressed='false'] .icon {
+		mask-image: url(http://github.com/icons/font-boring);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 0ada4e8bda..ec6f594270 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -229,30 +229,19 @@
 						height: 100%;
 						left: 0;
 						top: 0;
-						background: no-repeat 50% 50% / 1.6rem 1.6rem;
+						background: currentColor;
+						mask: no-repeat 50% 50% / 1.6rem 1.6rem;
 						transition: opacity 0.2s;
 						transition-delay: 0.6s;
 					}
 
 					&::before {
-						background-image: url(http://github.com/icons/copy-to-clipboard-light.svg);
+						mask-image: url(http://github.com/icons/copy-to-clipboard);
 					}
 
 					&::after {
-						background-image: url(http://github.com/icons/check-light.svg);
+						mask-image: url(http://github.com/icons/check);
 						opacity: 0;
-
-						html.dark & {
-							background-image: url(http://github.com/icons/check-dark.svg);
-						}
-					}
-
-					html.dark &::before {
-						background-image: url(http://github.com/icons/copy-to-clipboard-dark.svg);
-					}
-
-					html.dark &::after {
-						background-image: url(http://github.com/icons/check-dark.svg);
 					}
 
 					&:active::before {
@@ -341,8 +330,9 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(http://github.com/icons/hash-light.svg) 50% 50% no-repeat;
-			background-size: 2.4rem 2.4rem;
+			background: var(--sk-fg-1);
+			mask: url(http://github.com/icons/hash) 50% 50% no-repeat;
+			mask-size: 2.4rem 2.4rem;
 			width: 2.6rem;
 			height: 2.2rem;
 			top: calc(50% - 1rem);
@@ -352,10 +342,6 @@
 				scale: 0.8;
 			}
 
-			:root.dark & {
-				background-image: url(http://github.com/icons/hash-dark.svg);
-			}
-
 			@media (min-width: 768px) {
 				left: 1.6rem;
 				opacity: 0;
@@ -422,10 +408,14 @@
 			&.note,
 			&:has(details.legacy) {
 				&::before {
-					content: none;
+					content: '';
+					display: block;
+					width: 2em;
+					height: 2em;
+					top: 0.05em;
+					background: var(--sk-fg-accent);
+					mask: url(http://github.com/icons/lightbulb) no-repeat 0.5rem 0 / 2.6rem;
 				}
-
-				background: url(http://github.com/$lib/icons/lightbulb.svg) no-repeat 0.5rem 0 / 2.6rem;
 			}
 
 			&:first-child {
@@ -500,10 +490,10 @@
 			}
 
 			&::after {
-				background: url(http://github.com/$lib/icons/chevron.svg) 50% 50% no-repeat;
-				background-size: 2rem;
-				rotate: 0deg;
-				transition: rotate 0.2s;
+				background: currentColor;
+				mask: url(http://github.com/icons/chevron) 50% 50% no-repeat;
+				mask-size: 2rem;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 				top: 0.2rem;
 				right: 0.8rem;
@@ -541,7 +531,7 @@
 
 			&[open] {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				& > summary {
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 83189f29ef..236af7fbd6 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -29,19 +29,21 @@
 
 <button
 	onclick={toggle}
-	class="raised icon"
+	class="raised"
 	type="button"
 	aria-pressed={theme.current === 'dark'}
 	aria-label="Toggle dark mode"
-></button>
+>
+	<span class="icon"></span>
+</button>
 
 <style>
-	button {
-		background-image: url(http://github.com/$lib/icons/theme-dark.svg);
-		background-size: 2rem;
+	.icon {
+		mask-image: url(http://github.com/icons/theme-dark);
+		mask-size: 2rem;
 
-		:global(.dark) & {
-			background-image: url(http://github.com/$lib/icons/theme-light.svg);
+		:root.dark & {
+			mask-image: url(http://github.com/icons/theme-light);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Toolbox.svelte b/packages/site-kit/src/lib/components/Toolbox.svelte
index 14e582b961..cb57f4fb51 100644
--- a/packages/site-kit/src/lib/components/Toolbox.svelte
+++ b/packages/site-kit/src/lib/components/Toolbox.svelte
@@ -35,15 +35,10 @@
 	}
 
 	span.wrench {
-		--icon-size: 1.8rem;
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: url(http://github.com/icons/wrench-light.svg) no-repeat 50% 50%;
-		background-size: contain;
-
-		:root.dark & {
-			background-image: url(http://github.com/icons/wrench-dark.svg);
-		}
+		background: currentColor;
+		mask: url(http://github.com/icons/wrench) no-repeat 50% 50% / contain;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/icons/check-dark.svg b/packages/site-kit/src/lib/icons/check-dark.svg
deleted file mode 100644
index 999f787c1c..0000000000
--- a/packages/site-kit/src/lib/icons/check-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21 7-12 12-5.5-5.5 1.41-1.41 4.09 4.08 10.59-10.58z" fill="#ccc"/></svg>
diff --git a/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg b/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg
deleted file mode 100644
index 9749703fea..0000000000
--- a/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="11.2" height="14" x="7.9" y="3" rx="1.5" ry="1.5" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:1.5px"/><path d="M4 7v12.5c0 .8.7 1.5 1.5 1.5h10" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:1.5px;stroke-linecap:round"/></svg>
diff --git a/packages/site-kit/src/lib/icons/document-dark.svg b/packages/site-kit/src/lib/icons/document-dark.svg
deleted file mode 100644
index 6b610950eb..0000000000
--- a/packages/site-kit/src/lib/icons/document-dark.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #ccc;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/document-light.svg b/packages/site-kit/src/lib/icons/document-light.svg
deleted file mode 100644
index 68cfbd95c0..0000000000
--- a/packages/site-kit/src/lib/icons/document-light.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #000000e0;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/font-accessible-dark.svg b/packages/site-kit/src/lib/icons/font-accessible-dark.svg
deleted file mode 100644
index f879017524..0000000000
--- a/packages/site-kit/src/lib/icons/font-accessible-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M10.9 3h2.3l6.9 18h-3.4l-.7-2.9H8.1L7.2 21H4l6.9-18Zm4.3 12.3L12 5.9l-3.2 9.4h6.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-accessible-light.svg b/packages/site-kit/src/lib/icons/font-accessible-light.svg
deleted file mode 100644
index 745a87f96e..0000000000
--- a/packages/site-kit/src/lib/icons/font-accessible-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#666"><path d="M10.9 3h2.3l6.9 18h-3.4l-.7-2.9H8.1L7.2 21H4l6.9-18Zm4.3 12.3L12 5.9l-3.2 9.4h6.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-boring-dark.svg b/packages/site-kit/src/lib/icons/font-boring-dark.svg
deleted file mode 100644
index 38abc6491a..0000000000
--- a/packages/site-kit/src/lib/icons/font-boring-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M10.6 3h2.8l6.7 18h-2.7L16 17.1H7.9L6.5 21H3.8l6.8-18ZM8.7 14.9h6.6L12 5.6l-3.3 9.3Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-elegant-dark.svg b/packages/site-kit/src/lib/icons/font-elegant-dark.svg
deleted file mode 100644
index a48fabd407..0000000000
--- a/packages/site-kit/src/lib/icons/font-elegant-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M3.7 21h-.5c-.1 0-.2-.1-.2-.2s0-.2.2-.3c.1 0 .4-.2.6-.3.5-.1.9-.3 1.3-.6s.7-.7 1-1.4c.5-1.1.9-2.2 1.3-3.1.4-1 .8-1.9 1.2-2.9.4-.9.7-1.9 1.1-2.9.4-1 .8-2.1 1.2-3.3 0-.2.2-.5.2-.7 0-.2.1-.5.1-.8.2 0 .3-.1.5-.2.2 0 .3-.1.5-.2s.3-.3.3-.5.1-.3.2-.4v.6c.4 1.3.9 2.7 1.3 4 .5 1.4.9 2.7 1.3 4 .4 1.3.8 2.4 1.2 3.4.4 1 .6 1.8.8 2.5.2.7.5 1.2.8 1.6.3.3.6.6.9.7.3.1.6.2 1 .3.3 0 .5.1.7.2.1.1.2.2.2.4s0 .2-.2.2H13.3c-.1 0-.2-.1-.2-.2s0-.2.3-.3c.2 0 .4-.1.6-.2.6 0 1-.2 1.2-.4.2-.2.4-.5.4-.7s0-.6-.2-1.1c-.1-.5-.2-1-.4-1.6-.2-.6-.3-1.1-.4-1.5 0-.1-.1-.2-.2-.2H8.8c-.1 0-.2.2-.2.4s-.1.4-.3.8c-.1.4-.2.8-.4 1.2s-.2.8-.3 1.1c0 .3-.1.5-.1.6 0 .4.1.7.4 1 .3.3.7.4 1.1.5.6.2.9.3.9.5s0 .2-.2.2H3.6Zm6-7.5h4c.2 0 .4 0 .4-.1v-.2l-2-6.4c-.1-.3-.2-.5-.2-.5s-.1.1-.2.4l-2.4 6.4v.2s0 .1.1.2h.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/hash-dark.svg b/packages/site-kit/src/lib/icons/hash-dark.svg
deleted file mode 100644
index 8b1a0bf688..0000000000
--- a/packages/site-kit/src/lib/icons/hash-dark.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #ccc;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
-      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
-      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
-      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-light.svg b/packages/site-kit/src/lib/icons/hash-light.svg
deleted file mode 100644
index 205fd7882f..0000000000
--- a/packages/site-kit/src/lib/icons/hash-light.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #000000e0;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
-      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
-      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
-      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/home.svg b/packages/site-kit/src/lib/icons/home.svg
deleted file mode 100644
index 21a4bbb7d9..0000000000
--- a/packages/site-kit/src/lib/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M224 115.55V208a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16v-40a8 8 0 0 0-8-8h-32a8 8 0 0 0-8 8v40a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-92.45a16 16 0 0 1 5.17-11.78l80-75.48l.11-.11a16 16 0 0 1 21.53 0a1.14 1.14 0 0 0 .11.11l80 75.48a16 16 0 0 1 5.08 11.78Z"/></svg>
\ No newline at end of file
diff --git a/packages/site-kit/src/lib/icons/link.svg b/packages/site-kit/src/lib/icons/link.svg
deleted file mode 100644
index 58e745476b..0000000000
--- a/packages/site-kit/src/lib/icons/link.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-	<style>
-		path {
-			stroke: #333;
-			fill: none;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			path {
-				stroke: #ccc;
-			}
-		}
-	</style>
-
-	<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
-	<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
-	<path d="M7,12L17,12"/>
-</svg>
\ No newline at end of file
diff --git a/packages/site-kit/src/lib/icons/search.svg b/packages/site-kit/src/lib/icons/search.svg
deleted file mode 100644
index fc1ccaa1a2..0000000000
--- a/packages/site-kit/src/lib/icons/search.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		fill="#bbb"
-		d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-	/>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/wrench-dark.svg b/packages/site-kit/src/lib/icons/wrench-dark.svg
deleted file mode 100644
index 678bf90c44..0000000000
--- a/packages/site-kit/src/lib/icons/wrench-dark.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke="#d4d4d4"
-	stroke-width="2"
-	stroke-linecap="round"
-	stroke-linejoin="round"
->
-	<path
-		d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-	/>
-</svg>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c20e2d85d4..5076ba3b03 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -377,37 +377,26 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
-				background: no-repeat 50% 50%;
-				background-size: calc(100% - 1rem) auto;
+				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
+				mask: no-repeat 50% 50%;
+				mask-size: calc(100% - 1rem) auto;
 			}
 
 			[data-icon='discord'] {
 				width: 3.4rem;
-				background-image: url(http://github.com/$lib/icons/discord-light.svg);
-
-				:global(.dark) & {
-					background-image: url(http://github.com/$lib/icons/discord-dark.svg);
-				}
+				mask-image: url(http://github.com/icons/discord);
 			}
 
 			[data-icon='bluesky'] {
 				width: 3rem;
-				background-image: url(http://github.com/$lib/icons/bluesky-light.svg);
-
-				:global(.dark) & {
-					background-image: url(http://github.com/$lib/icons/bluesky-dark.svg);
-				}
+				mask-image: url(http://github.com/icons/bluesky);
 			}
 
 			[data-icon='github'] {
 				width: 3rem;
-				background-image: url(http://github.com/$lib/icons/github-light.svg);
-
-				:global(.dark) & {
-					background-image: url(http://github.com/$lib/icons/github-dark.svg);
-				}
+				mask-image: url(http://github.com/icons/github);
 			}
 		}
 
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index df19cd6a44..c3e7297c59 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -71,7 +71,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		height: 3.4rem;
 		border-radius: 5.6rem;
 		background:
-			no-repeat 0.6em 55% / 1.2em 1.2em url(http://github.com/icons/search.svg),
+			no-repeat 0.6em 55% / 1.2em 1.2em url(http://github.com/icons/search),
 			var(--sk-bg-4);
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6f66c40240..ecc230a7c6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -98,14 +98,15 @@
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;
-				background: url(http://github.com/$lib/icons/chevron.svg);
-				background-size: contain;
-				rotate: 0deg;
+				background: currentColor;
+				mask: url(http://github.com/icons/chevron);
+				mask-size: contain;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 			}
 
 			[open] &::after {
-				rotate: 180deg;
+				rotate: 90deg;
 			}
 
 			span:not(:last-child)::after {
@@ -135,22 +136,13 @@
 			top: 0;
 			left: 0;
 			height: 100%;
-			background: url(http://github.com/icons/document-light.svg) no-repeat 50% 50%;
-			background-size: 2rem;
+			background: currentColor;
+			mask: url(http://github.com/icons/document) no-repeat 50% 50%;
+			mask-size: 2rem;
 		}
 
 		&.fragment::before {
-			background-image: url(http://github.com/icons/hash-light.svg);
-		}
-
-		:root.dark & {
-			&::before {
-				background-image: url(http://github.com/icons/document-dark.svg);
-			}
-
-			&.fragment::before {
-				background-image: url(http://github.com/icons/hash-dark.svg);
-			}
+			mask-image: url(http://github.com/icons/hash);
 		}
 
 		&:hover {
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 90b6858292..cca16ba466 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -66,7 +66,10 @@
 	}
 }
 
-.icon {
+button.icon,
+summary.icon,
+button:has(> span.icon) {
+	position: relative;
 	width: 3.2rem;
 	height: 3.2rem;
 	background-repeat: no-repeat;
@@ -74,6 +77,18 @@
 	background-size: 2.3rem 2.3rem;
 }
 
+button > span.icon {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	mask-repeat: no-repeat;
+	mask-position: 50% 50%;
+	mask-size: 2.3rem 2.3rem;
+	background: var(--sk-fg-3);
+}
+
 button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 	--arrow-size: 1rem;
 
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
index 08da0a172b..508901d461 100644
--- a/packages/site-kit/src/lib/styles/utils/nav.css
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -24,13 +24,13 @@
 				left: -2rem;
 				width: 1.8rem;
 				height: 1.8rem;
-				background: url(http://github.com/$lib/icons/chevron.svg) no-repeat 50% 50%;
+				background: url(http://github.com/icons/chevron) no-repeat 50% 50%;
 				background-size: 100%;
 				rotate: -90deg;
 			}
 
 			[open] > &::before {
-				rotate: none;
+				rotate: 180deg;
 			}
 		}
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd33498f58..5d5d55e258 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       flru:
         specifier: ^1.0.2
         version: 1.0.2
+      icons:
+        specifier: workspace:*
+        version: link:../../packages/icons
       port-authority:
         specifier: ^2.0.1
         version: 2.0.1
@@ -199,6 +202,8 @@ importers:
         specifier: ^7.0.4
         version: 7.0.4(rollup@4.21.2)
 
+  packages/icons: {}
+
   packages/repl:
     dependencies:
       '@codemirror/autocomplete':
@@ -270,6 +275,9 @@ importers:
       esrap:
         specifier: ^1.2.2
         version: 1.2.3
+      icons:
+        specifier: workspace:*
+        version: link:../icons
       locate-character:
         specifier: ^3.0.0
         version: 3.0.0
@@ -394,6 +402,9 @@ importers:
       esm-env:
         specifier: ^1.0.0
         version: 1.2.1
+      icons:
+        specifier: workspace:*
+        version: link:../icons
       json5:
         specifier: ^2.2.3
         version: 2.2.3

From 50ef0628da9c298920af322b7a92db75be993e00 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Apr 2025 22:23:27 -0400
Subject: [PATCH 403/453] Sync `svelte` docs (#1301)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../98-reference/.generated/compile-errors.md | 26 ++++++++++++++++++-
 .../svelte/98-reference/30-compiler-errors.md | 26 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index a8c39aaf97..6196a85ade 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -235,7 +235,31 @@ A top-level `:global {...}` block can only contain rules, not declarations
 ### css_global_block_invalid_list
 
 ```
-A `:global` selector cannot be part of a selector list with more than one item
+A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
+```
+
+The following CSS is invalid:
+
+```css
+:global, x {
+    y {
+        color: red;
+    }
+}
+```
+
+This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
+
+```css
+:global {
+    y {
+        color: red;
+    }
+}
+
+x y {
+    color: red;
+}
 ```
 
 ### css_global_block_invalid_modifier
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 8d6ea53010..da266a5e04 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -240,7 +240,31 @@ A top-level `:global {...}` block can only contain rules, not declarations
 ### css_global_block_invalid_list
 
 ```
-A `:global` selector cannot be part of a selector list with more than one item
+A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
+```
+
+The following CSS is invalid:
+
+```css
+:global, x {
+    y {
+        color: red;
+    }
+}
+```
+
+This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
+
+```css
+:global {
+    y {
+        color: red;
+    }
+}
+
+x y {
+    color: red;
+}
 ```
 
 ### css_global_block_invalid_modifier

From 6f50a9fa21a365342d068e7714a25d65038bd5e8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 15 Apr 2025 17:32:01 -0400
Subject: [PATCH 404/453] Sync `kit` docs (#1303)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/10-getting-started/30-project-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md b/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
index ded0561d33..a65b77264a 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md
@@ -56,7 +56,7 @@ The `src` directory contains the meat of your project. Everything except `src/ro
 - `hooks.server.js` contains your server [hooks](hooks)
 - `service-worker.js` contains your [service worker](service-workers)
 
-(Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project. You can switch between JavaScript and TypeScript in the documentation using the toggle at the bottom of this page.)
+(Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project.)
 
 If you added [Vitest](https://vitest.dev) when you set up your project, your unit tests will live in the `src` directory with a `.test.js` extension.
 

From 8834d29d6b3c8e4a6fad67d371c4bd2c8c69a0e5 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Wed, 16 Apr 2025 03:54:23 -0700
Subject: [PATCH 405/453] chore: update REPL autocomplete (#1305)

* update autocomplete stuff to current svelte 5

* update autocomplete

* lint
---
 .../lib/codemirror/autocompletionDataProvider.js    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index e6891efff5..587c78e0ef 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -573,10 +573,22 @@ const is_bindable = (node, context) => {
 	);
 };
 
+/**
+ * @type {import("./types").Test}
+ */
+const is_props_id = (node) => {
+	if (node.parent?.name !== 'VariableDeclaration') return false;
+	if (node.parent?.parent?.name !== 'VariableDeclarator') return false;
+	if (node.parent?.parent?.parent?.name !== 'Program') return false;
+	if (node.parent?.firstChild?.name !== 'Identifier') return false;
+	return true;
+};
+
 export const runes = [
 	{ snippet: '$state(${})', test: is_state },
 	{ snippet: '$state', test: is_state_call },
 	{ snippet: '$props()', test: is_props },
+	{ snippet: '$props.id()', test: is_props_id },
 	{ snippet: '$derived(${});', test: is_state },
 	{ snippet: '$derived', test: is_state_call },
 	{ snippet: '$derived.by(() => {\n\t${}\n});', test: is_state },
@@ -590,6 +602,7 @@ export const runes = [
 	{ snippet: '$state.snapshot(${})' },
 	{ snippet: '$effect.tracking()' },
 	{ snippet: '$inspect(${});', test: is_statement },
+	{ snippet: '$inspect.trace();', test: is_statement },
 	{ snippet: '$inspect.trace(${});', test: is_statement },
 	{ snippet: '$host()' }
 ];

From 38750eb29860aff2cd3d911e07b5d135118bb296 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 16 Apr 2025 12:39:38 -0400
Subject: [PATCH 406/453] Sync `svelte` docs (#1304)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../98-reference/.generated/shared-errors.md  | 37 +++++++++++++++++++
 .../svelte/98-reference/30-runtime-errors.md  | 37 +++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
index 4c81d7b894..6c31aaafd0 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/shared-errors.md
@@ -60,6 +60,43 @@ Certain lifecycle methods can only be used during component initialisation. To f
 <button onclick={handleClick}>click me</button>
 ```
 
+### snippet_without_render_tag
+
+```
+Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+```
+
+A component throwing this error will look something like this (`children` is not being rendered):
+
+```svelte
+<script>
+    let { children } = $props();
+</script>
+
+{children}
+```
+
+...or like this (a parent component is passing a snippet where a non-snippet value is expected):
+
+```svelte
+<!--- file: Parent.svelte --->
+<ChildComponent>
+  {#snippet label()}
+    <span>Hi!</span>
+  {/snippet}
+</ChildComponent>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+  let { label } = $props();
+</script>
+
+<!-- This component doesn't expect a snippet, but the parent provided one -->
+<p>{label}</p>
+```
+
 ### store_invalid_shape
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index d5a35008da..51ab77d1f1 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -244,6 +244,43 @@ Certain lifecycle methods can only be used during component initialisation. To f
 <button onclick={handleClick}>click me</button>
 ```
 
+### snippet_without_render_tag
+
+```
+Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+```
+
+A component throwing this error will look something like this (`children` is not being rendered):
+
+```svelte
+<script>
+    let { children } = $props();
+</script>
+
+{children}
+```
+
+...or like this (a parent component is passing a snippet where a non-snippet value is expected):
+
+```svelte
+<!--- file: Parent.svelte --->
+<ChildComponent>
+  {#snippet label()}
+    <span>Hi!</span>
+  {/snippet}
+</ChildComponent>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+  let { label } = $props();
+</script>
+
+<!-- This component doesn't expect a snippet, but the parent provided one -->
+<p>{label}</p>
+```
+
 ### store_invalid_shape
 
 ```

From d3ff314d878d18f288486e78cc32fda4c83253bb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Apr 2025 14:41:44 -0400
Subject: [PATCH 407/453] a11y tweaks (#1306)

* tweak some focus states

* a11y tweaks

* more tweaks
---
 apps/svelte.dev/src/routes/_home/Video.svelte |  5 +++-
 .../src/lib/Output/CompilerOptions.svelte     |  6 +----
 .../src/lib/components/Checkbox.svelte        | 23 ++++++++---------
 .../site-kit/src/lib/docs/DocsContents.svelte |  6 +++--
 .../site-kit/src/lib/markdown/renderer.ts     | 12 ++++++---
 packages/site-kit/src/lib/nav/Nav.svelte      | 25 +++++++++++++------
 6 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index d1614ed6f8..61a9b1136f 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -197,6 +197,7 @@
 	label {
 		opacity: 0.2;
 		transition: opacity 0.2s;
+		border-radius: var(--sk-border-radius);
 	}
 
 	.top-controls {
@@ -237,12 +238,14 @@
 		border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) var(--sk-border-radius);
 	} */
 
-	.video-player:hover label {
+	.video-player:hover label,
+	.video-player:focus-within label {
 		opacity: 1;
 	}
 
 	.video-player input:focus-visible ~ img {
 		outline: 2px solid var(--sk-fg-accent);
 		outline-offset: 2px;
+		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 4dd49ab647..99d9401d3e 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -27,7 +27,7 @@
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<span style="font-size: 1.2rem">
+		<span style="position: relative; font-size: 1.2rem; top: 0.2em">
 			<Checkbox
 				checked={workspace.compiler_options.dev!}
 				onchange={(dev) => {
@@ -70,10 +70,6 @@
 		color: var(--shiki-token-string);
 	}
 
-	label :global(input[type='checkbox']) {
-		top: -1px;
-	}
-
 	input[type='radio'] {
 		position: absolute;
 		top: auto;
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index d2e61797ad..a9953c5a02 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -9,15 +9,15 @@
 
 <style>
 	input[type='checkbox'] {
+		--thumb-size: 1em;
+		--track-padding: 2px;
 		/* display: block; */
 		position: relative;
-		height: 1em;
-		width: 2em;
-		top: -2px;
+		height: calc(var(--thumb-size) + 2 * var(--track-padding));
+		width: calc(2 * var(--thumb-size) + 2 * var(--track-padding));
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;
-		outline: none;
 		border: transparent;
 		margin: 0 0.6em 0 0;
 	}
@@ -28,12 +28,11 @@
 		display: block;
 		height: 100%;
 		width: 100%;
-		padding: 2px;
-		border-radius: 1em;
 		top: 0;
 		left: 0;
+		border-radius: 9999px;
 		background: var(--sk-bg-4);
-		box-sizing: content-box;
+		box-sizing: border-box;
 	}
 
 	input[type='checkbox']:checked::before {
@@ -44,10 +43,10 @@
 		content: '';
 		position: absolute;
 		display: block;
-		height: 1em;
-		width: 1em;
-		top: 2px;
-		left: 2px;
+		height: var(--thumb-size);
+		aspect-ratio: 1;
+		top: var(--track-padding);
+		left: var(--track-padding);
 		border-radius: 1em;
 		background: var(--sk-bg-1);
 		box-shadow:
@@ -59,6 +58,6 @@
 	}
 
 	input[type='checkbox']:checked::after {
-		left: calc(100% - 1em + 2px);
+		left: calc(100% - var(--thumb-size) - var(--track-padding));
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 84240e6caf..f74889c2f8 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -72,9 +72,11 @@
 	}
 
 	li {
+		position: relative;
 		display: block;
 		margin: 0;
 		margin-bottom: 4rem;
+		padding-right: 0.5rem; /* leave space for focus ring */
 	}
 
 	li:last-child {
@@ -125,14 +127,14 @@
 			overflow-y: auto;
 		}
 
-		:global(.scrollbars-invisible) [aria-current='page']::after {
+		:global(.scrollbars-invisible) li:has(> [aria-current='page'])::after {
 			--size: 1.8rem;
 			content: '';
 			position: absolute;
 			width: var(--size);
 			height: var(--size);
 			top: calc(1.4rem - var(--size) * 0.5);
-			right: calc(-0.5 * var(--size));
+			right: calc(-0.5rem - 0.5 * var(--size));
 			background-color: var(--sk-bg-1);
 			z-index: 2;
 			position: absolute;
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 3190094eed..20b30d1dd3 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -857,9 +857,15 @@ async function syntax_highlight({
 		html = replace_blank_lines(highlighted);
 	}
 
-	// munge shiki output: put whitespace outside `<span>` elements, so that
-	// highlight delimiters fall outside tokens
-	html = html.replace(/(<span[^>]+?>)(\s+)/g, '$2$1').replace(/(\s+)(<\/span>)/g, '$2$1');
+	// munge shiki output
+	html = html
+		// put whitespace outside `<span>` elements, so that
+		// highlight delimiters fall outside tokens
+		.replace(/(<span[^>]+?>)(\s+)/g, '$2$1')
+		.replace(/(\s+)(<\/span>)/g, '$2$1')
+
+		// remove tabindex
+		.replace(' tabindex="0"', '');
 
 	html = html
 		.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 5076ba3b03..c237c2777b 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -125,14 +125,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			<Search />
 
 			<div class="external-links">
-				<a href="http://github.com/chat" data-icon="discord" aria-label="Discord Chat"></a>
-				<a
-					href="https://bsky.app/profile/sveltesociety.dev"
-					data-icon="bluesky"
-					aria-label="Svelte Society on Bluesky"
-				></a>
-				<a href="https://github.com/sveltejs/svelte" data-icon="github" aria-label="GitHub Repo"
-				></a>
+				<a href="http://github.com/chat" aria-label="Discord Chat">
+					<span data-icon="discord"></span>
+				</a>
+
+				<a href="https://bsky.app/profile/sveltesociety.dev" aria-label="Svelte Society on Bluesky">
+					<span data-icon="bluesky"></span>
+				</a>
+
+				<a href="https://github.com/sveltejs/svelte" aria-label="GitHub Repo">
+					<span data-icon="github"></span>
+				</a>
 			</div>
 
 			<FontToggle />
@@ -281,6 +284,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: flex;
 			height: 100%;
 			margin: 0 0.5rem;
+
+			a {
+				outline-offset: -2px;
+			}
 		}
 	}
 
@@ -377,9 +384,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
+				display: flex;
 				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
+				aspect-ratio: 1;
 				mask: no-repeat 50% 50%;
 				mask-size: calc(100% - 1rem) auto;
 			}

From 777de784832b68844dae4002ebcfec80cc32d7d2 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Wed, 16 Apr 2025 23:33:50 -0700
Subject: [PATCH 408/453] fix: fix autocomplete for `$props.id()` (#1307)

* update autocomplete stuff to current svelte 5

* update autocomplete

* lint

* fix autocomplete for `$props.id()`

* lint

* add file type check

* fix file check, the types were a lie
---
 .../codemirror/autocompletionDataProvider.js  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index 587c78e0ef..31e414eada 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -576,11 +576,20 @@ const is_bindable = (node, context) => {
 /**
  * @type {import("./types").Test}
  */
-const is_props_id = (node) => {
-	if (node.parent?.name !== 'VariableDeclaration') return false;
-	if (node.parent?.parent?.name !== 'VariableDeclarator') return false;
-	if (node.parent?.parent?.parent?.name !== 'Program') return false;
-	if (node.parent?.firstChild?.name !== 'Identifier') return false;
+const is_props_id_call = (node, context, selected) => {
+	if (!selected.match(/\.svelte$/)) return false;
+	if (!is_state_call(node, context, selected)) return false;
+	if (node.parent?.parent?.name !== 'Script') return false;
+	return true;
+};
+
+/**
+ * @type {import("./types").Test}
+ */
+const is_props_id = (node, context, selected) => {
+	if (!selected.match(/\.svelte$/)) return false;
+	if (!is_state(node, context, selected)) return false;
+	if (node.parent?.parent?.name !== 'Script') return false;
 	return true;
 };
 
@@ -588,6 +597,7 @@ export const runes = [
 	{ snippet: '$state(${})', test: is_state },
 	{ snippet: '$state', test: is_state_call },
 	{ snippet: '$props()', test: is_props },
+	{ snippet: '$props.id', test: is_props_id_call },
 	{ snippet: '$props.id()', test: is_props_id },
 	{ snippet: '$derived(${});', test: is_state },
 	{ snippet: '$derived', test: is_state_call },

From aa7c9f252d90f76c47bcf048c70b23a3097e9bb0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 07:43:23 -0400
Subject: [PATCH 409/453] Sync `svelte` docs (#1308)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
index 454df3f0ef..ae1a439043 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -239,7 +239,7 @@ property and can contain any type of data.
 The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
 ```ts
 const dispatch = createEventDispatcher<{
- loaded: never; // does not take a detail argument
+ loaded: null; // does not take a detail argument
  change: string; // takes a detail argument of type string, which is required
  optional: number | null; // takes an optional detail argument of type number
 }>();

From 21613365cc64992f1d3a42c0ac90d36578519de1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 17 Apr 2025 07:46:50 -0400
Subject: [PATCH 410/453] fix `$props()` and `$props.id()` autocompletion
 (#1309)

---
 .../codemirror/autocompletionDataProvider.js  | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index 31e414eada..4176fc0d93 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -533,7 +533,7 @@ const is_statement = (node) => {
  * @type {import("./types").Test}
  */
 const is_props = (node, _, selected) => {
-	if (selected.type !== 'svelte') return false;
+	if (!selected.endsWith('.svelte')) return false;
 
 	return (
 		node.name === 'VariableName' &&
@@ -577,20 +577,9 @@ const is_bindable = (node, context) => {
  * @type {import("./types").Test}
  */
 const is_props_id_call = (node, context, selected) => {
-	if (!selected.match(/\.svelte$/)) return false;
-	if (!is_state_call(node, context, selected)) return false;
-	if (node.parent?.parent?.name !== 'Script') return false;
-	return true;
-};
-
-/**
- * @type {import("./types").Test}
- */
-const is_props_id = (node, context, selected) => {
-	if (!selected.match(/\.svelte$/)) return false;
-	if (!is_state(node, context, selected)) return false;
-	if (node.parent?.parent?.name !== 'Script') return false;
-	return true;
+	return (
+		is_state_call(node, context, selected) && node.parent?.parent?.parent?.parent?.name === 'Script'
+	);
 };
 
 export const runes = [
@@ -598,7 +587,7 @@ export const runes = [
 	{ snippet: '$state', test: is_state_call },
 	{ snippet: '$props()', test: is_props },
 	{ snippet: '$props.id', test: is_props_id_call },
-	{ snippet: '$props.id()', test: is_props_id },
+	{ snippet: '$props.id()', test: is_props },
 	{ snippet: '$derived(${});', test: is_state },
 	{ snippet: '$derived', test: is_state_call },
 	{ snippet: '$derived.by(() => {\n\t${}\n});', test: is_state },

From 94dc0fa196862d22f955eed070a2ac1475ab1331 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 10:52:12 -0400
Subject: [PATCH 411/453] Sync `svelte` docs (#1310)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../98-reference/21-svelte-reactivity.md      | 174 ++++++++++++++++--
 1 file changed, 155 insertions(+), 19 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
index 401941c542..e847ccf377 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-reactivity.md
@@ -3,25 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: svelte/reactivity
 ---
 
-Svelte provides reactive versions of various built-ins like `SvelteMap`, `SvelteSet` and `SvelteURL`. These can be imported from `svelte/reactivity` and used just like their native counterparts.
-
-```svelte
-<script>
-	import { SvelteURL } from 'svelte/reactivity';
-
-	const url = new SvelteURL('https://example.com/path');
-</script>
-
-<!-- changes to these... -->
-<input bind:value={url.protocol} />
-<input bind:value={url.hostname} />
-<input bind:value={url.pathname} />
-
-<hr />
-
-<!-- will update `href` and vice versa -->
-<input bind:value={url.href} />
-```
+Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.
 
 
 
@@ -89,6 +71,37 @@ constructor(query: string, fallback?: boolean | undefined);
 
 ## SvelteDate
 
+A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
+Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
+in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)
+will cause it to be re-evaluated when the value of the date changes.
+
+```svelte
+<script>
+	import { SvelteDate } from 'svelte/reactivity';
+
+	const date = new SvelteDate();
+
+	const formatter = new Intl.DateTimeFormat(undefined, {
+	  hour: 'numeric',
+	  minute: 'numeric',
+	  second: 'numeric'
+	});
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date.setTime(Date.now());
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<p>The time is {formatter.format(date)}</p>
+```
+
 <div class="ts-block">
 
 ```dts
@@ -108,6 +121,47 @@ constructor(...params: any[]);
 
 ## SvelteMap
 
+A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
+Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)
+will cause it to be re-evaluated as necessary when the map is updated.
+
+Note that values in a reactive map are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).
+
+```svelte
+<script>
+	import { SvelteMap } from 'svelte/reactivity';
+	import { result } from './game.js';
+
+	let board = new SvelteMap();
+	let player = $state('x');
+	let winner = $derived(result(board));
+
+	function reset() {
+		player = 'x';
+		board.clear();
+	}
+</script>
+
+<div class="board">
+	{#each Array(9), i}
+		<button
+			disabled={board.has(i) || winner}
+			onclick={() => {
+				board.set(i, player);
+				player = player === 'x' ? 'o' : 'x';
+			}}
+		>{board.get(i)}</button>
+	{/each}
+</div>
+
+{#if winner}
+	<p>{winner} wins!</p>
+	<button onclick={reset}>reset</button>
+{:else}
+	<p>{player} is next</p>
+{/if}
+```
+
 <div class="ts-block">
 
 ```dts
@@ -136,6 +190,37 @@ set(key: K, value: V): this;
 
 ## SvelteSet
 
+A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)
+will cause it to be re-evaluated as necessary when the set is updated.
+
+Note that values in a reactive set are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).
+
+```svelte
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+	let monkeys = new SvelteSet();
+
+	function toggle(monkey) {
+		if (monkeys.has(monkey)) {
+			monkeys.delete(monkey);
+		} else {
+			monkeys.add(monkey);
+		}
+	}
+</script>
+
+{#each ['🙈', '🙉', '🙊'] as monkey}
+	<button onclick={() => toggle(monkey)}>{monkey}</button>
+{/each}
+
+<button onclick={() => monkeys.clear()}>clear</button>
+
+{#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+```
+
 <div class="ts-block">
 
 ```dts
@@ -164,6 +249,32 @@ add(value: T): this;
 
 ## SvelteURL
 
+A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
+Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)
+will cause it to be re-evaluated as necessary when the URL changes.
+
+The `searchParams` property is an instance of [SvelteURLSearchParams](/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
+
+[Example](/playground/5a694758901b448c83dc40dc31c71f2a):
+
+```svelte
+<script>
+	import { SvelteURL } from 'svelte/reactivity';
+
+	const url = new SvelteURL('https://example.com/path');
+</script>
+
+<!-- changes to these... -->
+<input bind:value={url.protocol} />
+<input bind:value={url.hostname} />
+<input bind:value={url.pathname} />
+
+<hr />
+
+<!-- will update `href` and vice versa -->
+<input bind:value={url.href} size="65" />
+```
+
 <div class="ts-block">
 
 ```dts
@@ -183,6 +294,31 @@ get searchParams(): SvelteURLSearchParams;
 
 ## SvelteURLSearchParams
 
+A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
+Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)
+will cause it to be re-evaluated as necessary when the params are updated.
+
+```svelte
+<script>
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+	const params = new SvelteURLSearchParams('message=hello');
+
+	let key = $state('key');
+	let value = $state('value');
+</script>
+
+<input bind:value={key} />
+<input bind:value={value} />
+<button onclick={() => params.append(key, value)}>append</button>
+
+<p>?{params.toString()}</p>
+
+{#each params as [key, value]}
+	<p>{key}: {value}</p>
+{/each}
+```
+
 <div class="ts-block">
 
 ```dts

From 9aa90c4ea14f4d26f123da47ffec275e16dd5ee1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 17 Apr 2025 12:48:08 -0400
Subject: [PATCH 412/453] feat: support pkg.imports in playground (#1311)

* feat: support pkg.imports in playground

* tidy up
---
 .../repl/src/lib/workers/bundler/index.ts     | 31 +++++++++++++------
 packages/repl/src/lib/workers/npm.ts          | 17 +++++++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 8f483d0cdd..0d2b534b6e 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -27,7 +27,8 @@ import {
 	parse_npm_url,
 	resolve_local,
 	resolve_subpath,
-	resolve_version
+	resolve_version,
+	type Package
 } from '../npm';
 import type { BundleResult } from '$lib/public';
 
@@ -180,6 +181,14 @@ async function get_bundle(
 			// importing from a URL
 			if (/^[a-z]+:/.test(importee)) return importee;
 
+			/** The npm package we're importing from, if any */
+			let current: null | Package;
+
+			if (importer.startsWith(NPM)) {
+				const { name, version } = parse_npm_url(http://github.com/importer);
+				current = await fetch_package(name, name === 'svelte' ? svelte_version : version);
+			}
+
 			// importing a relative file
 			if (importee[0] === '.') {
 				if (importer.startsWith(VIRTUAL)) {
@@ -199,18 +208,22 @@ async function get_bundle(
 					);
 				}
 
-				if (importer.startsWith(NPM)) {
-					const { name, version } = parse_npm_url(http://github.com/importer);
-
-					const pkg = await fetch_package(name, name === 'svelte' ? svelte_version : version);
+				if (current) {
+					const { name, version } = current.meta;
 					const path = new URL(importee, importer).href.replace(`${NPM}/${name}@${version}/`, '');
 
-					return normalize_path(pkg, path);
+					return normalize_path(current, path);
 				}
 
 				return new URL(importee, importer).href;
 			}
 
+			// importing a file from the same package via pkg.imports
+			if (importee[0] === '#' && current) {
+				const subpath = resolve_subpath(current, importee);
+				return normalize_path(current, subpath.slice(2));
+			}
+
 			// importing an external package -> `npm://$/<name>@<version>/<path>`
 			const match = /^((?:@[^/]+\/)?[^/@]+)(?:@([^/]+))?(\/.+)?$/.exec(importee);
 			if (!match) throw new Error(`Invalid import "${importee}"`);
@@ -223,11 +236,9 @@ async function get_bundle(
 
 			let default_version = 'latest';
 
-			if (importer.startsWith(NPM)) {
+			if (current) {
 				// use the version specified in importer's package.json, not `latest`
-				const { name, version } = parse_npm_url(http://github.com/importer);
-
-				const { meta } = await fetch_package(name, name === 'svelte' ? svelte_version : version);
+				const { meta } = current;
 
 				if (meta.name === pkg_name) {
 					default_version = meta.version;
diff --git a/packages/repl/src/lib/workers/npm.ts b/packages/repl/src/lib/workers/npm.ts
index 1b2d71871f..232a0f7dfd 100644
--- a/packages/repl/src/lib/workers/npm.ts
+++ b/packages/repl/src/lib/workers/npm.ts
@@ -2,7 +2,7 @@ import * as resolve from 'resolve.exports';
 import { parseTar, type FileDescription } from 'tarparser';
 import { NPM } from './constants';
 
-interface Package {
+export interface Package {
 	meta: any; // package.json contents
 	contents: Record<string, FileDescription>;
 }
@@ -126,6 +126,21 @@ export function resolve_subpath(pkg: Package, subpath: string): string {
 		return `./${pkg.meta.svelte.replace('./', '')}`;
 	}
 
+	if (subpath[0] === '#') {
+		try {
+			const resolved = resolve.imports(pkg.meta, subpath, {
+				browser: true,
+				conditions: ['svelte', 'module', 'browser', 'development']
+			});
+
+			return resolved?.[0] as string;
+		} catch {
+			throw new Error(
+				`No matched import path was found for "${subpath}" in "${pkg.meta.name}/package.json"`
+			);
+		}
+	}
+
 	// modern
 	if (pkg.meta.exports) {
 		try {

From ddc11a79321777b7ce600251a2c51e64a8bf776b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 20 Apr 2025 10:49:25 -0400
Subject: [PATCH 413/453] Sync `svelte` docs (#1313)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/98-reference/.generated/compile-errors.md   | 6 ++++++
 .../content/docs/svelte/98-reference/30-compiler-errors.md  | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index 6196a85ade..e8669ead53 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -274,6 +274,12 @@ A `:global` selector cannot modify an existing selector
 A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
+### css_global_block_invalid_placement
+
+```
+A `:global` selector cannot be inside a pseudoclass
+```
+
 ### css_global_invalid_placement
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index da266a5e04..a2ebf53216 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -279,6 +279,12 @@ A `:global` selector cannot modify an existing selector
 A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
+### css_global_block_invalid_placement
+
+```
+A `:global` selector cannot be inside a pseudoclass
+```
+
 ### css_global_invalid_placement
 
 ```

From 7b738510cb3db53954a3de6b1bf9bbb2473c7f47 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 20 Apr 2025 10:49:39 -0400
Subject: [PATCH 414/453] Sync `kit` docs (#1314)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 33d93f0fc0..f20da4453e 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -308,7 +308,7 @@ Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for
 // @errors: 2304
 
 /** @type {import('@sveltejs/kit').Reroute} */
-export function reroute({ url, fetch }) {
+export async function reroute({ url, fetch }) {
 	// Ask a special endpoint within your app about the destination
 	if (url.pathname === '/api/reroute') return;
 

From 923674d7f173fc4efd27d5deb046702072902230 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 20 Apr 2025 10:56:37 -0400
Subject: [PATCH 415/453] fix: only set options.runes in svelte >= 5 (#1315)

---
 packages/repl/src/lib/workers/bundler/index.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 0d2b534b6e..b6e0287173 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -299,13 +299,18 @@ async function get_bundle(
 			let result: CompileResult;
 
 			if (id.endsWith('.svelte')) {
+				const is_gt_5 = Number(svelte.VERSION.split('.')[0]) >= 5;
+
 				const compilerOptions: any = {
 					filename: name + '.svelte',
-					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
-					dev: true,
-					runes: options.runes
+					generate: is_gt_5 ? 'client' : 'dom',
+					dev: true
 				};
 
+				if (is_gt_5) {
+					compilerOptions.runes = options.runes;
+				}
+
 				if (can_use_experimental_async) {
 					compilerOptions.experimental = { async: true };
 				}

From d2a44c9b021d04bdd46a49fcdad7e5bacfe2d29e Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 22 Apr 2025 13:31:27 +0200
Subject: [PATCH 416/453] fix: resolve imports for `local` version (#1318)

---
 packages/repl/src/lib/workers/bundler/index.ts |  9 ++++++---
 packages/repl/src/lib/workers/npm.ts           | 11 ++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index b6e0287173..eee445c075 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -219,9 +219,12 @@ async function get_bundle(
 			}
 
 			// importing a file from the same package via pkg.imports
-			if (importee[0] === '#' && current) {
-				const subpath = resolve_subpath(current, importee);
-				return normalize_path(current, subpath.slice(2));
+			if (importee[0] === '#') {
+				if (current) {
+					const subpath = resolve_subpath(current, importee);
+					return normalize_path(current, subpath.slice(2));
+				}
+				return await resolve_local(importee);
 			}
 
 			// importing an external package -> `npm://$/<name>@<version>/<path>`
diff --git a/packages/repl/src/lib/workers/npm.ts b/packages/repl/src/lib/workers/npm.ts
index 232a0f7dfd..bf6a00d3b8 100644
--- a/packages/repl/src/lib/workers/npm.ts
+++ b/packages/repl/src/lib/workers/npm.ts
@@ -219,9 +219,14 @@ let local_svelte_pkg: Promise<any>;
 export async function resolve_local(specifier: string) {
 	const pkg = await (local_svelte_pkg ??= fetch(LOCAL_PKG_URL).then((r) => r.json()));
 
-	const subpath = resolve.exports(pkg, specifier.replace('svelte', '.'), {
-		browser: true
-	})![0] as string;
+	const subpath =
+		specifier[0] === '#'
+			? (resolve.imports(pkg, specifier, {
+					browser: true
+				})![0] as string)
+			: (resolve.exports(pkg, specifier.replace('svelte', '.'), {
+					browser: true
+				})![0] as string);
 
 	return new URL(subpath, LOCAL_PKG_URL).href;
 }

From 4da5106698447ba09146672aacd944f3f31ea2ca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 22 Apr 2025 22:09:04 +0100
Subject: [PATCH 417/453] Sync `kit` docs (#1316)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 94baab3e9d..44ea175a07 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -1,6 +1,6 @@
 ---
 NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
-title: Cloudflare Pages
+title: Cloudflare
 ---
 
 To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).

From 7a837f7482711f79b6498fd28c96b4fe8bdb3a91 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 23 Apr 2025 06:41:28 +0100
Subject: [PATCH 418/453] chore: Add Barcelona banner (#1320)

* barcelona

* Update apps/svelte.dev/src/routes/+layout.server.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 apps/svelte.dev/src/routes/+layout.server.ts | 24 ++++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index 509e4b0034..4fb653d821 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -51,21 +51,21 @@ const nav_links: NavigationLink[] = [
 	}
 ];
 
-// const banner: BannerData = {
-// 	id: 'adventofsvelte2024',
-// 	start: new Date('1 December, 2024 00:00:00 UTC'),
-// 	end: new Date('25 December, 2024 23:59:59 UTC'),
-// 	arrow: true,
-// 	content: {
-// 		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
-// 		sm: 'Advent of Svelte 2024'
-// 	},
-// 	href: '/blog/advent-of-svelte'
-// };
+const banner: BannerData = {
+	id: 'barcelona-2025-tickets',
+	start: new Date('21 April, 2025 00:00:00 UTC'),
+	end: new Date('6 May, 2025 23:59:59 UTC'),
+	arrow: true,
+	content: {
+		lg: 'Svelte Summit Barcelona and online, May 8-9: Last few days to get tickets!',
+		sm: 'Svelte Summit May 8-9'
+	},
+	href: 'https://www.sveltesummit.com/'
+};
 
 export const load = async () => {
 	return {
 		nav_links,
-		banner: undefined
+		banner
 	};
 };

From 5fb4ef85e3bf8ab2188431a6bb53c00605091724 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 25 Apr 2025 09:48:34 +0200
Subject: [PATCH 419/453] chore: provide smaller llms-small.txt (#1321)

Partially automatically summarized with manual tweaks
---
 .../[...path]/llms-small.txt/+server.ts       |  28 +
 .../src/routes/docs/llms/+page.svelte         |  16 +-
 .../src/routes/llms-medium.txt/+server.ts     |  47 +
 .../src/routes/llms-small.txt/+server.ts      |  39 +-
 .../routes/llms-small.txt/content-svelte.md   | 444 +++++++++
 .../llms-small.txt/content-sveltekit.md       | 893 ++++++++++++++++++
 .../src/routes/llms.txt/template.md           |   5 +-
 7 files changed, 1433 insertions(+), 39 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms-small.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
 create mode 100644 apps/svelte.dev/src/routes/llms-small.txt/content-svelte.md
 create mode 100644 apps/svelte.dev/src/routes/llms-small.txt/content-sveltekit.md

diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms-small.txt/+server.ts b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms-small.txt/+server.ts
new file mode 100644
index 0000000000..ab0172d477
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms-small.txt/+server.ts
@@ -0,0 +1,28 @@
+import { error } from '@sveltejs/kit';
+import svelte from '../../../../llms-small.txt/content-svelte.md?raw';
+import sveltekit from '../../../../llms-small.txt/content-sveltekit.md?raw';
+
+export const prerender = true;
+
+export function entries() {
+	return [
+		{ topic: 'svelte', path: '' },
+		{ topic: 'kit', path: '' }
+	];
+}
+
+export function GET({ params }) {
+	if ((params.topic !== 'svelte' && params.topic !== 'kit') || params.path) {
+		error(404, 'Not Found');
+	}
+
+	const content = params.topic === 'kit' ? sveltekit : svelte;
+
+	return new Response(content, {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
diff --git a/apps/svelte.dev/src/routes/docs/llms/+page.svelte b/apps/svelte.dev/src/routes/docs/llms/+page.svelte
index 2d07e49cf2..c68cf5e75c 100644
--- a/apps/svelte.dev/src/routes/docs/llms/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/llms/+page.svelte
@@ -20,16 +20,26 @@
 				the CLI
 			</li>
 			<li>
-				<a href="http://github.com/llms-small.txt">/llms-small.txt</a> — compressed documentation for use with smaller
+				<a href="http://github.com/llms-medium.txt">/llms-medium.txt</a> — compressed documentation for use with medium
 				context windows
 			</li>
+			<li>
+				<a href="http://github.com/llms-small.txt">/llms-small.txt</a> — highly compressed documentation for use with
+				smaller context windows
+			</li>
 		</ul>
 
 		<p>...and package-level documentation:</p>
 
 		<ul>
-			<li><a href="http://github.com/docs/svelte/llms.txt">/docs/svelte/llms.txt</a></li>
-			<li><a href="http://github.com/docs/kit/llms.txt">/docs/kit/llms.txt</a></li>
+			<li>
+				<a href="http://github.com/docs/svelte/llms.txt">/docs/svelte/llms.txt</a> /
+				<a href="http://github.com/docs/svelte/llms-small.txt">/docs/svelte/llms-small.txt</a>
+			</li>
+			<li>
+				<a href="http://github.com/docs/kit/llms.txt">/docs/kit/llms.txt</a> /
+				<a href="http://github.com/docs/kit/llms-small.txt">/docs/kit/llms-small.txt</a>
+			</li>
 			<li><a href="http://github.com/docs/cli/llms.txt">/docs/cli/llms.txt</a></li>
 		</ul>
 	</Text>
diff --git a/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts b/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
new file mode 100644
index 0000000000..63eb51f77e
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
@@ -0,0 +1,47 @@
+import { generate_llm_content, sections } from '$lib/server/llms';
+
+export function GET() {
+	const main_content = generate_llm_content({
+		sections,
+		ignore: [
+			// Svelte ignores
+			'docs/svelte/legacy/**/*',
+			'docs/svelte/misc/custom-elements',
+			'docs/svelte/misc/v4-migration-guide',
+			'docs/svelte/misc/v5-migration-guide',
+			'docs/svelte/misc/faq',
+			'docs/svelte/reference/compiler-errors',
+			'docs/svelte/reference/compiler-warnings',
+			'docs/svelte/reference/runtime-errors',
+			'docs/svelte/reference/runtime-warnings',
+			'docs/svelte/reference/svelte-legacy',
+			'**/xx-*',
+
+			// SvelteKit ignores
+			'docs/kit/advanced/packaging',
+			'docs/kit/appendix/**/*',
+			'docs/kit/best-practices/performance',
+			'docs/kit/build-and-deploy/*adapter-*',
+			'docs/kit/build-and-deploy/writing-adapters'
+		],
+		minimize: {
+			remove_legacy: true,
+			remove_note_blocks: true,
+			remove_details_blocks: true,
+			remove_playground_links: true,
+			remove_prettier_ignore: true,
+			normalize_whitespace: true
+		}
+	});
+	const content = `<SYSTEM>This is the abridged developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${main_content}`;
+
+	return new Response(content, {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8',
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
+}
+
+export const prerender = true;
diff --git a/apps/svelte.dev/src/routes/llms-small.txt/+server.ts b/apps/svelte.dev/src/routes/llms-small.txt/+server.ts
index 63eb51f77e..2862027785 100644
--- a/apps/svelte.dev/src/routes/llms-small.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/llms-small.txt/+server.ts
@@ -1,39 +1,10 @@
-import { generate_llm_content, sections } from '$lib/server/llms';
+import svelte from './content-svelte.md?raw';
+import sveltekit from './content-sveltekit.md?raw';
 
 export function GET() {
-	const main_content = generate_llm_content({
-		sections,
-		ignore: [
-			// Svelte ignores
-			'docs/svelte/legacy/**/*',
-			'docs/svelte/misc/custom-elements',
-			'docs/svelte/misc/v4-migration-guide',
-			'docs/svelte/misc/v5-migration-guide',
-			'docs/svelte/misc/faq',
-			'docs/svelte/reference/compiler-errors',
-			'docs/svelte/reference/compiler-warnings',
-			'docs/svelte/reference/runtime-errors',
-			'docs/svelte/reference/runtime-warnings',
-			'docs/svelte/reference/svelte-legacy',
-			'**/xx-*',
-
-			// SvelteKit ignores
-			'docs/kit/advanced/packaging',
-			'docs/kit/appendix/**/*',
-			'docs/kit/best-practices/performance',
-			'docs/kit/build-and-deploy/*adapter-*',
-			'docs/kit/build-and-deploy/writing-adapters'
-		],
-		minimize: {
-			remove_legacy: true,
-			remove_note_blocks: true,
-			remove_details_blocks: true,
-			remove_playground_links: true,
-			remove_prettier_ignore: true,
-			normalize_whitespace: true
-		}
-	});
-	const content = `<SYSTEM>This is the abridged developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${main_content}`;
+	const content =
+		'<SYSTEM>This is the abridged developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n' +
+		`# Svelte documentation\n\n${svelte}\n\n# SvelteKit documentation\n\n${sveltekit}`;
 
 	return new Response(content, {
 		status: 200,
diff --git a/apps/svelte.dev/src/routes/llms-small.txt/content-svelte.md b/apps/svelte.dev/src/routes/llms-small.txt/content-svelte.md
new file mode 100644
index 0000000000..175b7e3de0
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms-small.txt/content-svelte.md
@@ -0,0 +1,444 @@
+## Svelte
+
+You **MUST** use the Svelte 5 API unless explicitly tasked to write Svelte 4 syntax. If you don't know about the API yet, below is the most important information about it. Other syntax not explicitly listed like `{#if ...}` blocks stay the same, so you can reuse your Svelte 4 knowledge for these.
+
+- to mark something a state you use the `$state` rune, e.g. instead of `let count = 0` you do `let count = $state(0)`
+- to mark something as a derivation you use the `$derived` rune, e.g. instead of `$: double = count * 2` you do `const double = $derived(count * 2)`
+- to create a side effect you use the `$effect` rune, e.g. instead of `$: console.log(double)`you do`$effect(() => console.log(double))`
+- to create component props you use the `$props` rune, e.g. instead of `export let foo = true; export let bar;` you do `let { foo = true, bar } = $props();`
+- when listening to dom events do not use colons as part of the event name anymore, e.g. instead of `<button on:click={...} />` you do `<button onclick={...} />`
+
+### What are runes?
+
+- Runes are built-in Svelte keywords (prefixed with `$`) that control the compiler. For example, you write `let message = $state('hello');` in a `.svelte` file.
+- Do **NOT** treat runes like regular functions or import them; instead, use them as language keywords.  
+  _In Svelte 4, this syntax did not exist—you relied on reactive declarations and stores; now runes are an integral part of the language._
+
+### $state
+
+- `$state` creates reactive variables that update the UI automatically. For example:
+  ```svelte
+  <script>
+    let count = $state(0);
+  </script>
+  <button onclick={() => count++}>Clicked: {count}</button>
+  ```
+- Do **NOT** complicate state management by wrapping it in custom objects; instead, update reactive variables directly.  
+  _In Svelte 4, you created state with let, e.g. `let count = 0;`, now use the $state rune, e.g. `let count = $state(0);`._
+- Arrays and objects become deeply reactive proxies. For example:
+  ```js
+  let todos = $state([{ done: false, text: 'add more todos' }]);
+  todos[0].done = !todos[0].done;
+  ```
+- Do **NOT** destructure reactive proxies (e.g., `let { done } = todos[0];`), as this breaks reactivity; instead, access properties directly.
+- Use `$state` in class fields for reactive properties. For example:
+  ```js
+  class Todo {
+  	done = $state(false);
+  	text = $state('');
+  	reset = () => {
+  		this.text = '';
+  		this.done = false;
+  	};
+  }
+  ```
+
+### $state.raw
+
+- `$state.raw` creates shallow state where mutations are not tracked. For example:
+
+```js
+let person = $state.raw({ name: 'Heraclitus', age: 49 });
+// Instead of mutating:
+// person.age += 1;  // NO effect
+person = { name: 'Heraclitus', age: 50 }; // Correct way to update
+```
+
+- Do **NOT** attempt to mutate properties on raw state; instead, reassign the entire object to trigger updates.
+
+### $state.snapshot
+
+- `$state.snapshot` produces a plain object copy of reactive state. For example:
+
+```svelte
+<script>
+  let counter = $state({ count: 0 });
+  function logSnapshot() {
+    console.log($state.snapshot(counter));
+  }
+</script>
+```
+
+- **ONLY** use this if you are told there's a problem with passing reactive proxies to external APIs.
+
+### Passing state into functions
+
+- Pass-by-Value Semantics: Use getter functions to ensure functions access the current value of reactive state. For example:
+  ```js
+  function add(getA, getB) {
+  	return () => getA() + getB();
+  }
+  let a = 1,
+  	b = 2;
+  let total = add(
+  	() => a,
+  	() => b
+  );
+  console.log(total());
+  ```
+- Do **NOT** assume that passing a reactive state variable directly maintains live updates; instead, pass getter functions.  
+  _In Svelte 4, you often used stores with subscribe methods; now prefer getter functions with `$state` / `$derived` instead._
+
+### $derived
+
+- `$derived` computes reactive values based on dependencies. For example:
+
+```svelte
+<script>
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+</script>
+<button onclick={() => count++}>{doubled}</button>
+```
+
+- Do **NOT** introduce side effects in derived expressions; instead, keep them pure.  
+  _In Svelte 4 you used `$:` for this, e.g. `$: doubled = count * 2;`, now use the $derived rune instead, e.g `let doubled = $derived(count * 2);`._
+
+#### $derived.by
+
+- Use `$derived.by` for multi-line or complex logic. For example:
+
+```svelte
+<script>
+  let numbers = $state([1, 2, 3]);
+  let total = $derived.by(() => {
+    let sum = 0;
+    for (const n of numbers) sum += n;
+    return sum;
+  });
+</script>
+```
+
+- Do **NOT** force complex logic into a single expression; instead, use `$derived.by` to keep code clear.
+
+#### Overriding derived values
+
+- You can reassign a derived value for features like optimistic UI. It will go back to the `$derived` value once an update in its dependencies happen. For example:
+
+```svelte
+<script>
+  let post = $props().post;
+  let likes = $derived(post.likes);
+  async function onclick() {
+    likes += 1;
+    try { await post.like(); } catch { likes -= 1; }
+  }
+</script>
+```
+
+- Do **NOT** try to override derived state via effects; instead, reassign directly when needed.  
+  _In Svelte 4 you could use `$:` for that, e.g. `$: likes = post.likes; likes = 1`, now use the `$derived` instead, e.g. `let likes = $derived(post.likes); likes = 1;`._
+
+### $effect
+
+- `$effect` executes functions when reactive state changes. For example:
+
+```svelte
+<script>
+  let size = $state(50);
+  $effect(() => {
+    console.log('Size changed:', size);
+  });
+</script>
+```
+
+- Do **NOT** use `$effect` for state synchronization; instead, use it only for side effects like logging or DOM manipulation.  
+  _In Svelte 4, you used reactive statements (`$:`) for similar tasks, .e.g `$: console.log(size)`; now use the `$effect` rune instead, e.g. `$effect(() => console.log(size))` ._
+
+#### Understanding lifecycle (for $effect)
+
+- Effects run after the DOM updates and can return teardown functions. For example:
+
+```svelte
+<script>
+  let count = $state(0);
+  $effect(() => {
+    const interval = setInterval(() => { count += 1; }, 1000);
+    return () => clearInterval(interval);
+  });
+</script>
+```
+
+- **Directive:** Do **NOT** ignore cleanup; instead, always return a teardown function when needed.
+
+#### $effect.pre
+
+- `$effect.pre` works like `$effect` with the only difference that it runs before the DOM updates. For example:
+
+```svelte
+<script>
+  let div = $state();
+  $effect.pre(() => {
+    if (div) console.log('Running before DOM update');
+  });
+</script>
+```
+
+- Do **NOT** use `$effect.pre` for standard post-update tasks; instead, reserve it for pre-DOM manipulation like autoscrolling.
+
+#### $effect.tracking
+
+- `$effect.tracking` indicates if code is running inside a reactive context. For example:
+
+```svelte
+<script>
+  $effect(() => {
+    console.log('Inside effect, tracking:', $effect.tracking());
+  });
+</script>
+```
+
+- Do **NOT** misuse tracking information outside its intended debugging context; instead, use it to enhance reactive debugging.  
+  _In Svelte 4, no equivalent existed; now this feature offers greater insight into reactivity._
+
+#### $effect.root
+
+- `$effect.root` creates a non-tracked scope for nested effects with manual cleanup. For example:
+
+```svelte
+<script>
+  let count = $state(0);
+  const cleanup = $effect.root(() => {
+    $effect(() => {
+      console.log('Count is:', count);
+    });
+    return () => console.log('Root effect cleaned up');
+  });
+</script>
+```
+
+- Do **NOT** expect root effects to auto-cleanup; instead, manage their teardown manually.  
+  _In Svelte 4, manual cleanup required explicit lifecycle hooks; now `$effect.root` centralizes this control._
+
+### $props
+
+- Use `$props` to access component inputs. For example:
+
+```svelte
+<script>
+  let { adjective } = $props();
+</script>
+<p>This component is {adjective}</p>
+```
+
+- Do **NOT** mutate props directly; instead, use callbacks or bindable props to communicate changes.  
+  _In Svelte 4, props were declared with `export let foo`; now you use `$props` rune, e.g. `let { foo } = $props()`._
+- Declare fallback values via destructuring. For example:
+
+```js
+let { adjective = 'happy' } = $props();
+```
+
+- Rename props to avoid reserved keywords. For example:
+
+```js
+let { super: trouper } = $props();
+```
+
+- Use rest syntax to collect all remaining props. For example:
+
+```js
+let { a, b, ...others } = $props();
+```
+
+#### $props.id()
+
+- Generate a unique ID for the component instance. For example:
+
+```svelte
+<script>
+  const uid = $props.id();
+</script>
+<label for="{uid}-firstname">First Name:</label>
+<input id="{uid}-firstname" type="text" />
+```
+
+- Do **NOT** manually generate or guess IDs; instead, rely on `$props.id()` for consistency.
+
+### $bindable
+
+- Mark props as bindable to allow two-way data flow. For example, in `FancyInput.svelte`:
+
+```svelte
+<script>
+  let { value = $bindable() } = $props();
+</script>
+<input bind:value={value} />
+```
+
+- Do **NOT** overuse bindable props; instead, default to one-way data flow unless bi-directionality is truly needed.  
+  _In Svelte 4, all props were implicitly bindable; in Svelte 5 `$bindable` makes this explicit._
+
+### $host
+
+- Only available inside custom elements. Access the host element for custom event dispatching. For example:
+
+```svelte
+<script>
+  function dispatch(type) {
+    $host().dispatchEvent(new CustomEvent(type));
+  }
+</script>
+<button onclick={() => dispatch('increment')}>Increment</button>
+```
+
+- Do **NOT** use this unless you are explicitly tasked to create a custom element using Svelte components
+
+### {#snippet ...}
+
+- **Definition & Usage:**  
+  Snippets allow you to define reusable chunks of markup with parameters inside your component.  
+  _Example:_
+  ```svelte
+  {#snippet figure(image)}
+    <figure>
+      <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
+      <figcaption>{image.caption}</figcaption>
+    </figure>
+  {/snippet}
+  ```
+- **Parameterization:**  
+  Snippets accept multiple parameters with optional defaults and destructuring, but rest parameters are not allowed.  
+  _Example with parameters:_
+  ```svelte
+  {#snippet name(param1, param2)}
+    <!-- snippet markup here -->
+  {/snippet}
+  ```
+
+### Snippet scope
+
+- **Lexical Visibility:**  
+  Snippets can be declared anywhere and reference variables from their outer lexical scope, including script or block-level declarations.  
+  _Example:_
+  ```svelte
+  <script>
+    let { message = "it's great to see you!" } = $props();
+  </script>
+  {#snippet hello(name)}
+    <p>hello {name}! {message}!</p>
+  {/snippet}
+  {@render hello('alice')}
+  ```
+- **Scope Limitations:**  
+  Snippets are only accessible within their lexical scope; siblings and child blocks share scope, but nested snippets cannot be rendered outside.  
+  _Usage caution:_ Do **NOT** attempt to render a snippet outside its declared scope.
+
+### Passing snippets to components
+
+- **As Props:**  
+  Within a template, snippets are first-class values that can be passed to components as props.  
+  _Example:_
+  ```svelte
+  <script>
+    import Table from './Table.svelte';
+    const fruits = [
+      { name: 'apples', qty: 5, price: 2 },
+      { name: 'bananas', qty: 10, price: 1 }
+    ];
+  </script>
+  {#snippet header()}
+    <th>fruit</th>
+    <th>qty</th>
+    <th>price</th>
+    <th>total</th>
+  {/snippet}
+  {#snippet row(d)}
+    <td>{d.name}</td>
+    <td>{d.qty}</td>
+    <td>{d.price}</td>
+    <td>{d.qty * d.price}</td>
+  {/snippet}
+  <Table data={fruits} {header} {row} />
+  ```
+- **Slot-like Behavior:**  
+  Snippets declared inside component tags become implicit props (akin to slots) for the component.  
+  _Svelte 4 used slots for this, e.g. `<Component><p slot="x" let:y>hi {y}</p></Component>`; now use snippets instead, e.g. `<Component>{#snippet x(y)}<p>hi {y}</p>{/snippet}</Component>`._
+- **Content Fallback:**  
+  Content not wrapped in a snippet declaration becomes the `children` snippet, rendering as fallback content.  
+  _Example:_
+  ```svelte
+  <!-- App.svelte -->
+  <Button>click me</Button>
+  <!-- Button.svelte -->
+  <script>
+    let { children } = $props();
+  </script>
+  <button>{@render children()}</button>
+  ```
+
+### Typing snippets
+
+- Snippets implement the `Snippet` interface, enabling strict type checking in TypeScript or JSDoc.  
+  _Example:_
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    data: any[];
+    children: Snippet;
+    row: Snippet<[any]>;
+  }
+  let { data, children, row }: Props = $props();
+</script>
+```
+
+### {@render ...}
+
+- Use the {@render ...} tag to invoke and render a snippet, passing parameters as needed.  
+  _Example:_
+  ```svelte
+  {#snippet sum(a, b)}
+    <p>{a} + {b} = {a + b}</p>
+  {/snippet}
+  {@render sum(1, 2)}
+  ```
+- Do **NOT** call snippets without parentheses when parameters are required; instead, always invoke the snippet correctly.  
+  _In Svelte 4, you used slots for this, e.g. `<slot name="sum" {a} {b} />`; now use `{@render}` instead, e.g. `{@render sum(a,b)}`._
+
+### <svelte:boundary>
+
+- Use error boundary tags to prevent rendering errors in a section from crashing the whole app.
+  _Example:_
+
+  ```svelte
+  <svelte:boundary onerror={(error, reset) => console.error(error)}>
+    <FlakyComponent />
+  </svelte:boundary>
+  ```
+
+- **Failed Snippet for Fallback UI:**  
+  Providing a `failed` snippet renders fallback content when an error occurs and supplies a `reset` function.  
+  _Example:_
+
+  ```svelte
+  <svelte:boundary>
+    <FlakyComponent />
+    {#snippet failed(error, reset)}
+      <button onclick={reset}>Oops! Try again</button>
+    {/snippet}
+  </svelte:boundary>
+  ```
+
+### class
+
+- Svelte 5 allows objects for conditional class assignment using truthy keys. It closely follows the `clsx` syntax  
+  _Example:_
+
+```svelte
+<script>
+  let { cool } = $props();
+</script>
+<div class={{ cool, lame: !cool }}>Content</div>
+```
diff --git a/apps/svelte.dev/src/routes/llms-small.txt/content-sveltekit.md b/apps/svelte.dev/src/routes/llms-small.txt/content-sveltekit.md
new file mode 100644
index 0000000000..f093eb7397
--- /dev/null
+++ b/apps/svelte.dev/src/routes/llms-small.txt/content-sveltekit.md
@@ -0,0 +1,893 @@
+## Project types
+
+SvelteKit supports all rendering modes: SPA, SSR, SSG, and you can mix them within one project.
+
+## Setup
+
+Scaffold a new SvelteKit project using `npx sv create` then follow the instructions. Do NOT use `npm create svelte` anymore, this command is deprecated.
+
+A SvelteKit project needs a `package.json` with the following contents at minimum:
+
+```json
+{
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"svelte": "^5.0.0",
+		"vite": "^6.0.0"
+	}
+}
+```
+
+Do NOT put any of the `devDependencies` listed above into `dependencies`, keep them all in `devDependencies`.
+
+It also needs a `vite.config.js` with the following at minimum:
+
+```js
+import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
+```
+
+It also needs a `svelte.config.js` with the following at minimum:
+
+```js
+import adapter from '@sveltejs/adapter-auto';
+
+export default {
+	kit: {
+		adapter: adapter()
+	}
+};
+```
+
+## Project structure
+
+- **`src/` directory:**
+  - `lib/` for shared code (`$lib`), `lib/server/` for server‑only modules (`$lib/server`), `params/` for matchers, `routes/` for your pages/components, plus `app.html`, `error.html`, `hooks.client.js`, `hooks.server.js`, and `service-worker.js`.
+  - Do **NOT** import server‑only code into client files
+- **Top‑level assets & configs:**
+  - `static/` for public assets; `tests/` (if using Playwright); config files: `package.json` (with `@sveltejs/kit`, `svelte`, `vite` as devDeps), `svelte.config.js`, `tsconfig.json` (or `jsconfig.json`, extending `.svelte-kit/tsconfig.json`), and `vite.config.js`.
+  - Do **NOT** forget `"type": "module"` in `package.json` if using ESM.
+- **Build artifacts:**
+  - `.svelte-kit/` is auto‑generated and safe to ignore or delete; it will be recreated on `dev`/`build`.
+  - Do **NOT** commit `.svelte-kit/` to version control.
+
+## Routing
+
+- **Filesystem router:** `src/routes` maps directories to URL paths: Everything with a `+page.svelte` file inside it becomes a visitable URL, e.g. `src/routes/hello/+page.svelte` becomes `/hello`. `[param]` folders define dynamic segments. Do NOT use other file system router conventions, e.g. `src/routes/hello.svelte` does NOT become available als URL `/hello`
+- **Route files:** Prefix with `+`: all run server‑side; only non‑`+server` run client‑side; `+layout`/`+error` apply recursively.
+- **Best practice:** Do **not** hard‑code routes in code; instead rely on the filesystem convention.
+
+### +page.svelte
+
+- Defines UI for a route, SSR on first load and CSR thereafter
+- Do **not** fetch data inside the component; instead use a `+page.js` or `+page.server.js` `load` function; access its return value through `data` prop via `let { data } = $props()` (typed with `PageProps`).
+
+```svelte
+<script lang="ts">
+  import type { PageProps } from './$types';
+  let { data }: PageProps = $props();
+</script>
+<h1>{data.title}</h1>
+```
+
+### +page.js
+
+- Load data for pages via `export function load({ params })` (typed `PageLoad`), return value is put into `data` prop in component
+- Can export `prerender`, `ssr`, and `csr` consts here to influence how page is rendered.
+- Do **not** include private logic (DB or env vars), can **not** export `actions` from here; if needed, use `+page.server.js`.
+
+```js
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = () => {
+  return {
+    title: 'Hello world!',
+  };
+}
+```
+
+### +page.server.js
+
+- `export async function load(...)` (typed `PageServerLoad`) to access databases or private env; return serializable data.
+- Can also export `actions` for `<form>` handling on the server.
+
+### +error.svelte
+
+- Add `+error.svelte` in a route folder to render an error page, can use `page.status` and `page.error.message` from `$app/state`.
+- SvelteKit walks up routes to find the closest boundary; falls back to `src/error.html` if none.
+
+### +layout.svelte
+
+- Place persistent elements (nav, footer) and include `{@render children()}` to render page content. Example:
+
+```svelte
+<script>
+    import { LayoutProps } from './$types';
+    let { children, data } = $props();
+</script>
+
+<p>Some Content that is shared for all pages below this layout</p>
+<!-- child layouts/page goes here -->
+{@render children()}
+```
+
+- Create subdirectory `+layout.svelte` to scope UI to nested routes, inheriting parent layouts.
+- Use layouts to avoid repeating common markup; do **not** duplicate UI in every `+page.svelte`.
+
+### +layout.js / +layout.server.js
+
+- In `+layout.js` or `+layout.server.js` export `load()` (typed `LayoutLoad`) to supply `data` to the layout and its children; set `prerender`, `ssr`, `csr`.
+- Use `+layout.server.js` (typed `LayoutServerLoad`) for server-only things like DB or env access.
+- Do **not** perform server‑only operations in `+layout.js`; use the server variant.
+
+```js
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = () => {
+	return {
+		sections: [
+			{ slug: 'profile', title: 'Profile' },
+			{ slug: 'notifications', title: 'Notifications' }
+		]
+	};
+}
+```
+
+### +server.js (Endpoints)
+
+- Export HTTP handlers (`GET`, `POST`, etc.) in `+server.js` under `src/routes`; receive `RequestEvent`, return `Response` or use `json()`, `error()`, `redirect()` (exported from `@sveltejs/kit`).
+- export `fallback` to catch all other methods.
+
+```js
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = ({ url }) => {
+	return new Response('hello world');
+}
+```
+
+### $types
+
+- SvelteKit creates `$types.d.ts` with `PageProps`, `LayoutProps`, `RequestHandler`, `PageLoad`, etc., for type‑safe props and loaders.
+- Use them inside `+page.svelte`/`+page.server.js`/`+page.js`/`+layout.svelte`/`+layout.server.js`/`+layout.js` by importing from `./$types`
+
+### Other files
+
+- Any non‑`+` files in route folders are ignored by the router, use this to your advantage to colocate utilities or components.
+- For cross‑route imports, place modules under `src/lib` and import via `$lib`.
+
+## Loading data
+
+### Page data
+
+- `+page.js` exports a `load` (`PageLoad`) whose returned object is available in `+page.svelte` via `let { data } = $props()` (e.g. when you do `return { foo }` from `load` it is available within `let { data } = $props()` in `+page.svelte` as `data.foo`)
+- Universal loads run on SSR and CSR; private or DB‑backed loads belong in `+page.server.js` (`PageServerLoad`) and must return devalue‑serializable data.
+
+Example:
+
+```js
+// file: src/routes/foo/+page.js
+export async function load({ fetch }) {
+	const result = await fetch('http://github.com/data/from/somewhere').then((r) => r.json());
+	return { result }; // return property "result"
+}
+```
+
+```svelte
+<!-- file: src/routes/foo/+page.svelte -->
+<script>
+  // "data" prop contains property "result"
+  let { data } = $props();
+</script>
+{data.result}
+```
+
+### Layout data
+
+- `+layout.js` or `+layout.server.js` exports a `load` (`LayoutLoad`/`LayoutServerLoad`)
+- Layout data flows downward: child layouts and pages see parent data in their `data` prop.
+- Data loading flow (interaction of load function and props) works the same as for `+page(.server).js/svelte`
+
+### page.data
+
+- The `page` object from `$app/state` gives access to all data from `load` functions via `page.data`, usable in any layout or page.
+- Ideal for things like `<svelte:head><title>{page.data.title}</title></svelte:head>`.
+- Types come from `App.PageData`
+- earlier Svelte versions used `$app/stores` for the same concepts, do NOT use `$app/stores` anymore unless prompted to do so
+
+### Universal vs. server loads
+
+- Universal (`+*.js`) run on server first, then in browser; server (`+*.server.js`) always run server‑side and can use secrets, cookies, DB, etc.
+- Both receive `params`, `route`, `url`, `fetch`, `setHeaders`, `parent`, `depends`; server loads additionally get `cookies`, `locals`, `platform`, `request`.
+- Use server loads for private data or non‑serializable items; universal loads for public APIs or returning complex values (like constructors).
+
+### Load function arguments
+
+- `url` is a `URL` object (no `hash` server‑side); `route.id` shows the route pattern; `params` map path segments to values.
+- Query parameters via `url.searchParams` trigger reruns when they change.
+- Use these to branch logic and fetch appropriate data in `load`.
+
+## Making Fetch Requests
+
+Use the provided `fetch` function for enhanced features:
+
+```js
+// src/routes/items/[id]/+page.js
+export async function load({ fetch, params }) {
+	const res = await fetch(`/api/items/${params.id}`);
+	const item = await res.json();
+	return { item };
+}
+```
+
+## Headers and Cookies
+
+Set response headers using `setHeaders`:
+
+```js
+export async function load({ fetch, setHeaders }) {
+	const response = await fetch(url);
+
+	setHeaders({
+		age: response.headers.get('age'),
+		'cache-control': response.headers.get('cache-control')
+	});
+
+	return response.json();
+}
+```
+
+Access cookies in server load functions using `cookies`:
+
+```js
+export async function load({ cookies }) {
+	const sessionid = cookies.get('sessionid');
+	return {
+		user: await db.getUser(sessionid)
+	};
+}
+```
+
+Do not set `set-cookie` via `setHeaders`; use `cookies.set()` instead.
+
+## Using Parent Data
+
+Access data from parent load functions:
+
+```js
+export async function load({ parent }) {
+	const { a } = await parent();
+	return { b: a + 1 };
+}
+```
+
+## Errors and Redirects
+
+Redirect users using `redirect`:
+
+```js
+import { redirect } from '@sveltejs/kit';
+
+export function load({ locals }) {
+	if (!locals.user) {
+		redirect(307, '/login');
+	}
+}
+```
+
+Throw expected errors using `error`:
+
+```js
+import { error } from '@sveltejs/kit';
+
+export function load({ locals }) {
+	if (!locals.user) {
+		error(401, 'not logged in');
+	}
+}
+```
+
+Unexpected exceptions trigger `handleError` hook and a 500 response.
+
+## Streaming with Promises
+
+Server load functions can stream promises as they resolve:
+
+```js
+export async function load({ params }) {
+	return {
+		comments: loadComments(params.slug),
+		post: await loadPost(params.slug)
+	};
+}
+```
+
+```svelte
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>
+
+{#await data.comments}
+  Loading comments...
+{:then comments}
+  {#each comments as comment}
+    <p>{comment.content}</p>
+  {/each}
+{:catch error}
+  <p>error loading comments: {error.message}</p>
+{/await}
+```
+
+## Rerunning Load Functions
+
+Load functions rerun when:
+
+- Referenced params or URL properties change
+- A parent load function reran and `await parent()` was called
+- A dependency was invalidated with `invalidate(url)` or `invalidateAll()`
+
+Manually invalidate load functions:
+
+```js
+// In load function
+export async function load({ fetch, depends }) {
+	depends('app:random');
+	// ...
+}
+
+// In component
+import { invalidate } from '$app/navigation';
+function rerunLoadFunction() {
+	invalidate('app:random');
+}
+```
+
+## Dependency Tracking
+
+Exclude from dependency tracking with `untrack`:
+
+```js
+export async function load({ untrack, url }) {
+	if (untrack(() => url.pathname === '/')) {
+		return { message: 'Welcome!' };
+	}
+}
+```
+
+### Implications for authentication
+
+- Layout loads don’t automatically rerun on CSR; guards in `+layout.server.js` require child pages to await the parent.
+- To avoid missed auth checks and waterfalls, use hooks like `handle` for global protection or per‑page server loads.
+
+### Using getRequestEvent
+
+- `getRequestEvent()` retrieves the current server `RequestEvent`, letting shared functions (e.g. `requireLogin()`) access `locals`, `url`, etc., without parameter passing.
+
+## Using forms
+
+### Form actions
+
+- A `+page.server.js` can export `export const actions: Actions = { default: async (event) => {…} }`; `<form method="POST">` in `+page.svelte` posts to the default action without any JS. `+page.js` or `+layout.js` or `+layout.server.js` can NOT export `actions`
+- Name multiple actions (`login`, `register`) in `actions`, invoke with `action="http://github.com/?/register"` or `button formaction="http://github.com/?/register"`; do NOT use `default` name in this case.
+- Each action gets `{ request, cookies, params }`, uses `await request.formData()`, sets cookies or DB state, and returns an object that appears on the page as `form` (typed via `PageProps`).
+
+Example: Define a default action in `+page.server.js`:
+
+```js
+// file: src/routes/login/+page.server.js
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async (event) => {
+		// TODO log the user in
+	}
+};
+```
+
+Use it with a simple form:
+
+```svelte
+<!-- file: src/routes/login/+page.svelte -->
+<form method="POST">
+	<label>
+		Email
+		<input name="email" type="email">
+	</label>
+	<label>
+		Password
+		<input name="password" type="password">
+	</label>
+	<button>Log in</button>
+</form>
+```
+
+### Validation errors
+
+- Return `fail(400, { field, error: true })` from an action to send back status and data; display via `form?.field` and repopulate inputs with `value={form?.field ?? ''}`.
+- Use `fail` instead of throwing so the nearest `+error.svelte` isn’t invoked and the user can correct their input.
+- `fail` payload must be JSON‑serializable.
+
+### Redirects
+
+- In an action, call `redirect(status, location)` to send a 3xx redirect; this throws and bypasses form re-render.
+- Client-side, use `goto()` from `$app/navigation` for programmatic redirects.
+
+### Loading data after actions
+
+- After an action completes (unless redirected), SvelteKit reruns `load` functions and re‑renders the page, merging the action’s return value into `form`.
+- The `handle` hook runs once before the action; if you modify cookies in your action, you must also update `event.locals` there to keep `load` in sync.
+- Do NOT assume `locals` persists automatically; set `event.locals` inside your action when auth state changes.
+
+### Progressive enhancement
+
+- Apply `use:enhance` from `$app/forms` to `<form>` to intercept submissions, prevent full reloads, update `form`, `page.form`, `page.status`, reset the form, invalidate all data, handle redirects, render errors, and restore focus. Do NOT use onsubmit event for progressive enhancement
+- To customize, provide a callback that runs before submit and returns a handler; use `update()` for default logic or `applyAction(result)` to apply form data without full invalidation.
+- You can also write your own `onsubmit` listener using `fetch`, then `deserialize` the response and `applyAction`/`invalidateAll`; do NOT use `JSON.parse` for action responses.
+
+```svelte
+<script>
+  import type { PageProps } from './$types';
+	import { enhance } from '$app/forms';
+	let { form } = $props();
+</script>
+
+<form method="POST" use:enhance>
+	<!-- form content -->
+</form>
+```
+
+## Page options
+
+#### prerender
+
+- Set `export const prerender = true|false|'auto'` in page or layout modules; `true` generates static HTML, `false` skips, `'auto'` includes in SSR manifest.
+- Applies to pages **and** `+server.js` routes (inherit parent flags); dynamic routes need `entries()` or `config.kit.prerender.entries` to tell the crawler which parameter values to use.
+- Do NOT prerender pages that use form actions or rely on `url.searchParams` server‑side.
+
+#### entries
+
+- In a dynamic route’s `+page(.server).js` or `+server.js`, export `export function entries(): Array<Record<string,string>>` (can be async) to list parameter sets for prerendering.
+- Overrides default crawling to ensure dynamic pages (e.g. `/blog/[slug]`) are generated.
+- Do NOT forget to pair `entries()` with `export const prerender = true`.
+
+### ssr
+
+- `export const ssr = false` disables server-side rendering, sending only an HTML shell and turning the page into a client-only SPA.
+- Use sparingly (e.g. when using browser‑only globals); do NOT set both `ssr` and `csr` to `false` or nothing will render.
+
+#### csr
+
+- `export const csr = false` prevents hydration, omits JS bundle, disables `<script>`s, form enhancements, client routing, and HMR.
+- Ideal for purely static pages (e.g. marketing or blog posts); do NOT disable CSR on pages requiring interactivity.
+
+## State management
+
+- Avoid shared server variables—servers are stateless and shared across users. Authenticate via cookies and persist to a database instead of writing to in‑memory globals.
+- Keep `load` functions pure: no side‑effects or global store writes. Return data from `load` and pass it via `data` or `page.data`.
+- For shared client‑only state across components, use Svelte’s context API (`setContext`/`getContext`) or URL parameters for persistent filters; snapshots for ephemeral UI state tied to navigation history.
+
+## Building your app
+
+- Build runs in two phases: Vite compiles and prerenders (if enabled), then an adapter tailors output for your deployment target.
+- Guard any code that should not execute at build time with `import { building } from '$app/environment'; if (!building) { … }`.
+- Preview your production build locally with `npm run preview` (Node‑only, no adapter hooks).
+
+## Adapters
+
+- Adapters transform the built app into deployable assets for various platforms (Cloudflare, Netlify, Node, static, Vercel, plus community adapters).
+- Configure in `svelte.config.js` under `kit.adapter = adapter(opts)`, importing the adapter module and passing its options.
+- Some adapters expose a `platform` object (e.g. Cloudflare’s `env`); access it via `event.platform` in hooks and server routes.
+
+## Single‑page apps
+
+- Turn your app into a fully CSR SPA by setting `export const ssr = false;` in the root `+layout.js`.
+- For static hosting, use `@sveltejs/adapter-static` with a `fallback` HTML (e.g. `200.html`) so client routing can handle unknown paths.
+- You can still prerender select pages by enabling `prerender = true` and `ssr = true` in their individual `+page.js` or `+layout.js` modules.
+
+## Advanced routing
+
+- Rest parameters (`[...file]`) capture an unknown number of segments (e.g. `src/routes/hello/[...path]` catches all routes under `/hello`) and expose them as a single string; use a catch‑all route `+error.svelte` to render nested custom 404 pages.
+- Optional parameters (`[[lang]]`) make a segment optional, e.g. for `[[lang]]/home` both `/home` and `/en/home` map to the same route; cannot follow a rest parameter.
+- Matchers in `src/params/type.js` let you constrain `[param=type]` (e.g. only “apple” or “orange”), falling back to other routes or a 404 if the test fails.
+
+### Advanced layouts
+
+- Group directories `(app)` or `(marketing)` apply a shared layout without affecting URLs.
+- Break out of the inherited layout chain per page with `+page@segment.svelte` (e.g. `+page@(app).svelte`) or per layout with `+layout@.svelte`.
+- Use grouping judiciously: overuse can complicate nesting; sometimes simple composition or wrapper components suffice.
+
+## Hooks
+
+### Server hooks
+
+- `handle({ event, resolve })`: runs on every request; mutate `event.locals`, bypass routing, or call `resolve(event, { transformPageChunk, filterSerializedResponseHeaders, preload })` to customize HTML, headers, and asset preloading.
+- `handleFetch({ event, request, fetch })`: intercepts server‑side `fetch` calls to rewrite URLs, forward cookies on cross‑origin, or route internal requests directly to handlers.
+- `init()`: runs once at server startup for async setup (e.g. database connections).
+
+### Shared hooks
+
+- `handleError({ error, event, status, message })`: catches unexpected runtime errors on server or client; log via Sentry or similar, return a safe object (e.g. `{ message: 'Oops', errorId }`) for `$page.error`.
+
+### Universal hooks
+
+- `reroute({ url, fetch? })`: map incoming `url.pathname` to a different route ID (without changing the address bar), optionally async and using `fetch`.
+- `transport`: define `encode`/`decode` for custom types (e.g. class instances) to serialize them across server/client boundaries in loads and actions.
+
+## Errors
+
+- Expected errors thrown with `error(status, message|object)` set the response code, render the nearest `+error.svelte` with `page.error`, and let you pass extra props (e.g. `{ code: 'NOT_FOUND' }`).
+- Unexpected exceptions invoke the `handleError` hook, are logged internally, and expose a generic `{ message: 'Internal Error' }` to users; customize reporting or user‑safe messages in `handleError`.
+- Errors in server handlers or `handle` return JSON or your `src/error.html` fallback based on `Accept` headers; errors in `load` render component boundaries as usual. Type‑safe shapes via a global `App.Error` interface.
+
+## Link options
+
+The following are HTML attributes you can put on any HTML element.
+
+- `data-sveltekit-preload-data="hover"|"tap"` preloads `load` on link hover (`touchstart`) or immediate tap; use `"tap"` for fast‑changing data.
+- `data-sveltekit-preload-code="eager"|"viewport"|"hover"|"tap"` preloads JS/CSS aggressively or on scroll/hover/tap to improve load times.
+- `data-sveltekit-reload` forces full-page reload; `data-sveltekit-replacestate` uses `replaceState`; `data-sveltekit-keepfocus` retains focus; `data-sveltekit-noscroll` preserves scroll position; disable any by setting the value to `"false"`.
+
+## Server-only modules
+
+- `$env/static/private` and `$env/dynamic/private` can only be imported into server‑only files (`hooks.server.js`, `+page.server.js`); prevents leaking secrets to the client.
+- `$app/server` (e.g. the `read()` API) is likewise restricted to server‑side code.
+- Make your own modules server‑only by naming them `*.server.js` or placing them in `src/lib/server/`; any public‑facing import chain to these files triggers a build error.
+
+## Shallow routing
+
+- Use `pushState(path, state)` or `replaceState('', state)` from `$app/navigation` to create history entries without full navigation; read/write `page.state` from `$app/state`.
+- Ideal for UI like modals: `if (page.state.showModal) <Modal/>` and dismiss with `history.back()`.
+- To embed a route’s page component without navigation, preload data with `preloadData(href)` then `pushState`, falling back to `goto`; note SSR and initial load have empty `page.state`, and shallow routing requires JS.
+
+## Images
+
+- Vite’s asset handling inlines small files, adds hashes, and lets you `import logo from '...png'` for use in `<img src={logo}>`.
+- Install `@sveltejs/enhanced-img` and add `enhancedImages()` to your Vite config; use `<enhanced:img src="http://github.com/...jpg" alt="…"/>` to auto‑generate `<picture>` tags with AVIF/WebP, responsive `srcset`/`sizes`, and intrinsic dimensions.
+- For CMS or dynamic images, leverage a CDN with Svelte libraries like `@unpic/svelte`; always supply high‑resolution originals (2×), specify `sizes` for LCP images, set `fetchpriority="high"`, constrain layout via CSS to avoid CLS, and include meaningful `alt` text.
+
+## Reference docs
+
+### Imports from `@sveltejs/kit`
+
+- **error**: throw an HTTP error and halt request processing
+
+  ```js
+  import { error } from '@sveltejs/kit';
+  export function load() {
+  	error(404, 'Not found');
+  }
+  ```
+
+- **fail**: return a form action failure without throwing
+
+  ```js
+  import { fail } from '@sveltejs/kit';
+  export const actions = {
+  	default: async ({ request }) => {
+  		const data = await request.formData();
+  		if (!data.get('name')) return fail(400, { missing: true });
+  	}
+  };
+  ```
+
+- **isActionFailure**: type‑guard for failures from `fail`
+
+  ```js
+  import { isActionFailure } from '@sveltejs/kit';
+  if (isActionFailure(result)) {
+  	/* handle invalid form */
+  }
+  ```
+
+- **isHttpError**: type‑guard for errors from `error`
+
+  ```js
+  import { isHttpError } from '@sveltejs/kit';
+  try {
+  	/* … */
+  } catch (e) {
+  	if (isHttpError(e, 404)) console.log('Not found');
+  }
+  ```
+
+- **isRedirect**: type‑guard for redirects from `redirect`
+
+  ```js
+  import { redirect, isRedirect } from '@sveltejs/kit';
+  try {
+  	redirect(302, '/login');
+  } catch (e) {
+  	if (isRedirect(e)) console.log('Redirecting');
+  }
+  ```
+
+- **json**: build a JSON `Response`
+
+  ```js
+  import { json } from '@sveltejs/kit';
+  export function GET() {
+  	return json({ hello: 'world' });
+  }
+  ```
+
+- **normalizeUrl** _(v2.18+)_: strip internal suffixes/trailing slashes
+
+  ```js
+  import { normalizeUrl } from '@sveltejs/kit';
+  const { url, denormalize } = normalizeUrl('/foo/__data.json');
+  url.pathname; // /foo
+  ```
+
+- **redirect**: throw a redirect response
+
+  ```js
+  import { redirect } from '@sveltejs/kit';
+  export function load() {
+  	redirect(303, '/dashboard');
+  }
+  ```
+
+- **text**: build a plain‑text `Response`
+
+  ```js
+  import { text } from '@sveltejs/kit';
+  export function GET() {
+  	return text('Hello, text!');
+  }
+  ```
+
+### Imports from `@sveltejs/kit/hooks`
+
+- **sequence**: compose multiple `handle` hooks into one, merging their options
+
+  ```js
+  import { sequence } from '@sveltejs/kit/hooks';
+  export const handle = sequence(handleOne, handleTwo);
+  ```
+
+### Imports from `$app/forms`
+
+- **applyAction**: apply an `ActionResult` to update `page.form` and `page.status`
+
+  ```js
+  import { applyAction } from '$app/forms';
+  // inside enhance callback:
+  await applyAction(result);
+  ```
+
+- **deserialize**: parse a serialized form action response back into `ActionResult`
+
+  ```js
+  import { deserialize } from '$app/forms';
+  const result = deserialize(await response.text());
+  ```
+
+- **enhance**: progressively enhance a `<form>` for AJAX submissions
+
+  ```svelte
+  <script>
+    import { enhance } from '$app/forms';
+  </script>
+  <form use:enhance on:submit={handle}>
+  ```
+
+### Imports from `$app/navigation`
+
+- **afterNavigate**: run code after every client‑side navigation. Needs to be called at component initialization
+
+  ```js
+  import { afterNavigate } from '$app/navigation';
+  afterNavigate(({ type, to }) => console.log('navigated via', type));
+  ```
+
+- **beforeNavigate**: intercept and optionally cancel upcoming navigations. Needs to be called at component initialization
+
+  ```js
+  import { beforeNavigate } from '$app/navigation';
+  beforeNavigate(({ cancel }) => {
+  	if (!confirm('Leave?')) cancel();
+  });
+  ```
+
+- **disableScrollHandling**: disable automatic scroll resetting after navigation
+
+  ```js
+  import { disableScrollHandling } from '$app/navigation';
+  disableScrollHandling();
+  ```
+
+- **goto**: programmatically navigate within the app
+
+  ```svelte
+  <script>
+    import { goto } from '$app/navigation';
+    function navigate() {
+      goto('/dashboard', { replaceState: true });
+    }
+  </script>
+    <button onclick={navigate}>navigate</button>
+  ```
+
+- **invalidate**: re‑run `load` functions that depend on a given URL or custom key
+
+  ```js
+  import { invalidate } from '$app/navigation';
+  await invalidate('/api/posts');
+  ```
+
+- **invalidateAll**: re‑run every `load` for the current page
+
+  ```js
+  import { invalidateAll } from '$app/navigation';
+  await invalidateAll();
+  ```
+
+- **onNavigate**: hook invoked immediately before client‑side navigations. Needs to be called at component initialization
+
+  ```js
+  import { onNavigate } from '$app/navigation';
+  onNavigate(({ to }) => console.log('about to go to', to.url));
+  ```
+
+- **preloadCode**: import route modules ahead of navigation (no data fetch)
+
+  ```js
+  import { preloadCode } from '$app/navigation';
+  await preloadCode('/about');
+  ```
+
+- **preloadData**: load both code and data for a route ahead of navigation
+
+  ```js
+  import { preloadData } from '$app/navigation';
+  const result = await preloadData('/posts/1');
+  ```
+
+- **pushState**: create a shallow‑routing history entry with custom state
+
+  ```js
+  import { pushState } from '$app/navigation';
+  pushState('', { modalOpen: true });
+  ```
+
+- **replaceState**: replace the current history entry with new custom state
+
+  ```js
+  import { replaceState } from '$app/navigation';
+  replaceState('', { modalOpen: false });
+  ```
+
+### Imports from `$app/paths`
+
+- **assets**: the absolute URL prefix for static assets (`config.kit.paths.assets`)
+
+  ```js
+  import { assets } from '$app/paths';
+  console.log(`<img src="http://github.com/$%7Bassets%7D/logo.png">`);
+  ```
+
+- **base**: the base path for your app (`config.kit.paths.base`)
+
+  ```svelte
+  <a href="http://github.com/%7Bbase%7D/about">About Us</a>
+  ```
+
+- **resolveRoute**: interpolate a route ID with parameters to form a pathname
+
+  ```js
+  import { resolveRoute } from '$app/paths';
+  resolveRoute('/blog/[slug]/[...rest]', {
+  	slug: 'hello',
+  	rest: '2024/updates'
+  });
+  // → "/blog/hello/2024/updates"
+  ```
+
+### Imports from `$app/server`
+
+- **getRequestEvent** _(v2.20+)_: retrieve the current server `RequestEvent`
+
+  ```js
+  import { getRequestEvent } from '$app/server';
+  export function load() {
+  	const event = getRequestEvent();
+  	console.log(event.url);
+  }
+  ```
+
+- **read** _(v2.4+)_: read a static asset imported by Vite as a `Response`
+
+  ```js
+  import { read } from '$app/server';
+  import fileUrl from './data.txt';
+  const res = read(fileUrl);
+  console.log(await res.text());
+  ```
+
+- **navigating**: a read‑only object describing any in‑flight navigation (or `null`)
+
+  ```svelte
+  <script>
+    import { navigating } from '$app/state';
+    console.log(navigating.from, navigating.to);
+  </script>
+  ```
+
+### Imports from `$app/state`
+
+- **page**: read‑only reactive info about the current page (`url`, `params`, `data`, etc.)
+
+  ```svelte
+  <script>
+    import { page } from '$app/state';
+    const path = $derived(page.url.pathname);
+  </script>
+  {path}
+  ```
+
+- **updated**: reactive flag for new app versions; call `updated.check()` to poll immediately
+
+  ```svelte
+  <script>
+    import { updated } from '$app/state';
+    $effect(() => {
+      if (updated.current) {
+        alert('A new version is available. Refresh?');
+      }
+    })
+  </script>
+  ```
+
+### Imports from `$env/dynamic/private`
+
+- **env (dynamic/private)**: runtime private env vars (`process.env…`), not exposed to client
+
+  ```js
+  import { env } from '$env/dynamic/private';
+  console.log(env.SECRET_API_KEY);
+  ```
+
+### Imports from `$env/dynamic/public`
+
+- **env (dynamic/public)**: runtime public env vars (`PUBLIC_…`), safe for client use
+
+  ```js
+  import { env } from '$env/dynamic/public';
+  console.log(env.PUBLIC_BASE_URL);
+  ```
+
+### Imports from `$env/static/private`
+
+- **$env/static/private**: compile‑time private env vars, dead‑code eliminated
+
+  ```js
+  import { DATABASE_URL } from '$env/static/private';
+  console.log(DATABASE_URL);
+  ```
+
+### Imports from `$env/static/public`
+
+- **$env/static/public**: compile‑time public env vars (`PUBLIC_…`), safe on client
+
+  ```js
+  import { PUBLIC_WS_ENDPOINT } from '$env/static/public';
+  console.log(PUBLIC_WS_ENDPOINT);
+  ```
+
+### `$lib` alias
+
+Alias for `src/lib` folder, e.g.
+
+```svelte
+<script>
+  import Button from '$lib/Button.svelte';
+</script>
+<Button>Click me</Button>
+```
+
+means that there's a component at `src/lib/Button.svelte`.
diff --git a/apps/svelte.dev/src/routes/llms.txt/template.md b/apps/svelte.dev/src/routes/llms.txt/template.md
index aa4b32e1ac..7b00a9c84a 100644
--- a/apps/svelte.dev/src/routes/llms.txt/template.md
+++ b/apps/svelte.dev/src/routes/llms.txt/template.md
@@ -4,7 +4,8 @@
 
 ## Documentation Sets
 
-- [Abridged documentation](https://svelte.dev/llms-small.txt): A minimal version of the Svelte and SvelteKit documentation, with examples and non-essential content removed
+- [Abridged documentation](https://svelte.dev/llms-medium.txt): A shorter version of the Svelte and SvelteKit documentation, with examples and non-essential content removed
+- [Compressed documentation](https://svelte.dev/llms-small.txt): A minimal version of the Svelte and SvelteKit documentation, with many examples and non-essential content removed
 - [Complete documentation](https://svelte.dev/llms-full.txt): The complete Svelte and SvelteKit documentation including all examples and additional content
 
 ## Individual Package Documentation
@@ -13,7 +14,7 @@
 
 ## Notes
 
-- The abridged documentation excludes legacy compatibility notes, detailed examples, and supplementary information
+- The abridged and compressed documentation excludes legacy compatibility notes, detailed examples, and supplementary information
 - The complete documentation includes all content from the official documentation
 - Package-specific documentation files contain only the content relevant to that package
 - The content is automatically generated from the same source as the official documentation

From be6db33c1d7a743908ff37c3fd7a757e5f8c8ad2 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 25 Apr 2025 12:46:45 +0200
Subject: [PATCH 420/453] chore: add `/llms.txt` containg raw markdown for each
 docs page (#1322)

That way LLMs have it easier getting a clean version of the docs
---
 .../src/lib/components/PageControls.svelte    | 13 ++++-
 apps/svelte.dev/src/lib/server/llms.ts        | 18 +++----
 .../docs/[topic]/[...path]/+page.svelte       |  1 +
 .../[topic]/[...path]/llms.txt/+server.ts     | 50 ++++++++++++-------
 .../src/routes/llms-full.txt/+server.ts       |  4 +-
 .../src/routes/llms-medium.txt/+server.ts     |  4 +-
 .../svelte.dev/src/routes/llms.txt/+server.ts |  8 +--
 7 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte
index df5f7c5624..ec792c5eb0 100644
--- a/apps/svelte.dev/src/lib/components/PageControls.svelte
+++ b/apps/svelte.dev/src/lib/components/PageControls.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { Icon } from '@sveltejs/site-kit/components';
 
 	interface Props {
 		repo: string;
+		llms?: boolean;
 		prev: null | {
 			path: string;
 			title: string;
@@ -13,13 +15,18 @@
 		};
 	}
 
-	let { repo, prev, next }: Props = $props();
+	let { repo, prev, next, llms }: Props = $props();
 </script>
 
 <p class="edit">
 	<a href={repo}>
 		<Icon name="edit" /> Edit this page on GitHub
 	</a>
+	{#if llms}
+		<a href={page.url.pathname.replace(/\/$/, '') + '/llms.txt'}>
+			<Icon name="contents" /> llms.txt
+		</a>
+	{/if}
 </p>
 
 <div class="controls">
@@ -44,9 +51,13 @@
 		position: relative;
 		margin: 6rem 0 2rem 0;
 		font: var(--sk-font-ui-small);
+		display: flex;
 
 		a {
 			text-decoration: none;
+			&:first-of-type {
+				margin-right: 5rem;
+			}
 		}
 
 		:global(svg) {
diff --git a/apps/svelte.dev/src/lib/server/llms.ts b/apps/svelte.dev/src/lib/server/llms.ts
index 3008cff916..4892c2728f 100644
--- a/apps/svelte.dev/src/lib/server/llms.ts
+++ b/apps/svelte.dev/src/lib/server/llms.ts
@@ -5,7 +5,7 @@ import { index } from './content';
 interface GenerateLlmContentOptions {
 	ignore?: string[];
 	minimize?: Partial<MinimizeOptions>;
-	sections: Section[];
+	topics: Topic[];
 }
 
 interface MinimizeOptions {
@@ -17,7 +17,7 @@ interface MinimizeOptions {
 	normalize_whitespace: boolean;
 }
 
-interface Section {
+interface Topic {
 	slug: string;
 	title: string;
 }
@@ -34,13 +34,13 @@ const defaults: MinimizeOptions = {
 export function generate_llm_content(options: GenerateLlmContentOptions): string {
 	let content = '';
 
-	for (const section of options.sections) {
-		if (options.sections.length > 1) {
-			content += `# Start of ${section.title} documentation\n\n`;
+	for (const topic of options.topics) {
+		if (options.topics.length > 1) {
+			content += `# Start of ${topic.title} documentation\n\n`;
 		}
 
 		for (const [path, document] of Object.entries(index)) {
-			if (!path.startsWith(`docs/${section.slug}`)) continue;
+			if (!path.startsWith(`docs/${topic.slug}`)) continue;
 
 			if (options.ignore?.some((pattern) => minimatch(path, pattern))) {
 				if (dev) console.log(`❌ Ignored by pattern: ${path}`);
@@ -61,14 +61,14 @@ export function generate_llm_content(options: GenerateLlmContentOptions): string
 	return content;
 }
 
-export const sections: Section[] = [
+export const topics: Topic[] = [
 	{ slug: 'svelte', title: 'Svelte' },
 	{ slug: 'kit', title: 'SvelteKit' },
 	{ slug: 'cli', title: 'the Svelte CLI' }
 ];
 
-export function get_documentation_title(section: Section): string {
-	return `This is the developer documentation for ${section.title}.`;
+export function get_documentation_title(topic: Topic): string {
+	return `This is the developer documentation for ${topic.title}.`;
 }
 
 function minimize_content(content: string, options?: Partial<MinimizeOptions>): string {
diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
index 664faf8e04..e3d566d732 100644
--- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
@@ -83,6 +83,7 @@
 	</div>
 
 	<PageControls
+		llms
 		{repo}
 		prev={data.document.prev && {
 			title: data.document.prev.title,
diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
index 5ff7e9ff0c..12b8348870 100644
--- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts
@@ -1,32 +1,46 @@
 import { error } from '@sveltejs/kit';
-import { generate_llm_content, get_documentation_title, sections } from '$lib/server/llms';
+import { docs } from '$lib/server/content.js';
+import { generate_llm_content, get_documentation_title, topics } from '$lib/server/llms';
 
 export const prerender = true;
 
 export function entries() {
-	return sections.map((section) => {
-		const [topic, ...rest] = section.slug.split('/');
-		return { topic, path: rest.join('/') };
+	return topics.map((topic) => {
+		return { topic: topic.slug, path: '' };
 	});
 }
 
 export function GET({ params }) {
-	const pkg = params.path ? `${params.topic}/${params.path}` : params.topic;
+	if (params.path) {
+		const page = docs.pages[`docs/${params.topic}/${params.path}`];
 
-	const section = sections.find((s) => s.slug === pkg);
-
-	if (!section) {
-		error(404, 'Not Found');
-	}
+		if (!page) {
+			error(404, 'Not Found');
+		}
 
-	const prefix = `<SYSTEM>${get_documentation_title(section)}</SYSTEM>`;
-	const content = `${prefix}\n\n${generate_llm_content({ sections: [section] })}`;
+		return new Response(page.body, {
+			status: 200,
+			headers: {
+				'Content-Type': 'text/plain; charset=utf-8',
+				'Cache-Control': 'public, max-age=3600'
+			}
+		});
+	} else {
+		const topic = topics.find((s) => s.slug === params.topic);
 
-	return new Response(content, {
-		status: 200,
-		headers: {
-			'Content-Type': 'text/plain; charset=utf-8',
-			'Cache-Control': 'public, max-age=3600'
+		if (!topic) {
+			error(404, 'Not Found');
 		}
-	});
+
+		const prefix = `<SYSTEM>${get_documentation_title(topic)}</SYSTEM>`;
+		const content = `${prefix}\n\n${generate_llm_content({ topics: [topic] })}`;
+
+		return new Response(content, {
+			status: 200,
+			headers: {
+				'Content-Type': 'text/plain; charset=utf-8',
+				'Cache-Control': 'public, max-age=3600'
+			}
+		});
+	}
 }
diff --git a/apps/svelte.dev/src/routes/llms-full.txt/+server.ts b/apps/svelte.dev/src/routes/llms-full.txt/+server.ts
index 18f2518797..180b9d4dae 100644
--- a/apps/svelte.dev/src/routes/llms-full.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/llms-full.txt/+server.ts
@@ -1,9 +1,9 @@
-import { generate_llm_content, sections } from '$lib/server/llms';
+import { generate_llm_content, topics } from '$lib/server/llms';
 
 export const prerender = true;
 
 export function GET() {
-	const content = `<SYSTEM>This is the full developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${generate_llm_content({ sections })}`;
+	const content = `<SYSTEM>This is the full developer documentation for Svelte and SvelteKit.</SYSTEM>\n\n${generate_llm_content({ topics })}`;
 
 	return new Response(content, {
 		status: 200,
diff --git a/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts b/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
index 63eb51f77e..12281067e3 100644
--- a/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/llms-medium.txt/+server.ts
@@ -1,8 +1,8 @@
-import { generate_llm_content, sections } from '$lib/server/llms';
+import { generate_llm_content, topics } from '$lib/server/llms';
 
 export function GET() {
 	const main_content = generate_llm_content({
-		sections,
+		topics,
 		ignore: [
 			// Svelte ignores
 			'docs/svelte/legacy/**/*',
diff --git a/apps/svelte.dev/src/routes/llms.txt/+server.ts b/apps/svelte.dev/src/routes/llms.txt/+server.ts
index 9a961557c2..59b4f2bad2 100644
--- a/apps/svelte.dev/src/routes/llms.txt/+server.ts
+++ b/apps/svelte.dev/src/routes/llms.txt/+server.ts
@@ -1,4 +1,4 @@
-import { get_documentation_title, sections } from '$lib/server/llms';
+import { get_documentation_title, topics } from '$lib/server/llms';
 import template from './template.md?raw';
 
 const DOMAIN = `https://svelte.dev`;
@@ -6,9 +6,9 @@ const DOMAIN = `https://svelte.dev`;
 export const prerender = true;
 
 export function GET() {
-	const package_docs = sections.map(
-		(section) =>
-			`- [${section.title} documentation](${DOMAIN}/docs/${section.slug}/llms.txt): ${get_documentation_title(section)}`
+	const package_docs = topics.map(
+		(topic) =>
+			`- [${topic.title} documentation](${DOMAIN}/docs/${topic.slug}/llms.txt): ${get_documentation_title(topic)}`
 	);
 
 	const content = template.replace('%PACKAGE_DOCS%', package_docs.join('\n'));

From bbdf8c4ca1bc49f111c82e01543f61f07420f329 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 25 Apr 2025 12:46:29 -0700
Subject: [PATCH 421/453] Sync `cli` docs (#1323)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/cli/30-add-ons/05-drizzle.md | 58 +++++++++++++++++++
 .../content/docs/cli/30-add-ons/10-eslint.md  | 19 ++++++
 .../content/docs/cli/30-add-ons/15-lucia.md   | 27 +++++++++
 .../content/docs/cli/30-add-ons/20-mdsvex.md  | 16 +++++
 .../docs/cli/30-add-ons/25-paraglide.md       | 39 +++++++++++++
 .../docs/cli/30-add-ons/30-playwright.md      | 19 ++++++
 .../docs/cli/30-add-ons/35-prettier.md        | 18 ++++++
 .../docs/cli/30-add-ons/40-storybook.md       | 17 ++++++
 .../cli/30-add-ons/45-sveltekit-adapter.md    | 33 +++++++++++
 .../docs/cli/30-add-ons/50-tailwind.md        | 32 ++++++++++
 .../content/docs/cli/30-add-ons/55-vitest.md  | 18 ++++++
 .../content/docs/cli/30-add-ons/index.md      |  4 ++
 12 files changed, 300 insertions(+)
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/20-mdsvex.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/30-playwright.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/35-prettier.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/40-storybook.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/55-vitest.md
 create mode 100644 apps/svelte.dev/content/docs/cli/30-add-ons/index.md

diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md b/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
new file mode 100644
index 0000000000..511045b3f4
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
@@ -0,0 +1,58 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: drizzle
+---
+
+[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.
+
+## Usage
+
+```bash
+npx sv add drizzle
+```
+
+## What you get
+
+- a setup that keeps your database access in SvelteKit's server files
+- an `.env` file to store your credentials
+- compatibility with the Lucia auth add-on
+- an optional Docker configuration to help with running a local database
+
+## Options
+
+### database
+
+Which database variant to use:
+
+- `postgresql` — the most popular open source database
+- `mysql` — another popular open source database
+- `sqlite` — file-based database not requiring a database server
+
+```bash
+npx sv add --drizzle=postgresql
+```
+
+### client
+
+The SQL client to use, depends on `database`:
+
+- For `postgresql`: `postgres.js`, `neon`,
+- For `mysql`: `mysql2`, `planetscale`
+- For `sqlite`: `better-sqlite3`, `libsql`, `turso`
+
+```bash
+npx sv add --drizzle=postgresql,postgres.js
+```
+
+Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).
+
+### docker
+
+Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
+
+- `docker` - generates `docker-compose.yml`
+- `no-docker` - does not generate docker config
+
+```bash
+npx sv add --drizzle=postgresql,postgres.js,docker
+```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md b/apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md
new file mode 100644
index 0000000000..45edab3810
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md
@@ -0,0 +1,19 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: eslint
+---
+
+[ESLint](https://eslint.org/) finds and fixes problems in your code.
+
+## Usage
+
+```bash
+npx sv add eslint
+```
+
+## What you get
+
+- the relevant packages installed including `eslint-plugin-svelte`
+- an `eslint.config.js` file
+- updated `.vscode/settings.json`
+- configured to work with TypeScript and `prettier` if you're using those packages
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md b/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
new file mode 100644
index 0000000000..b79667984d
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
@@ -0,0 +1,27 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: lucia
+---
+
+An auth setup following [the Lucia auth guide](https://lucia-auth.com/).
+
+## Usage
+
+```bash
+npx sv add lucia
+```
+
+## What you get
+
+- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide
+- optional demo registration and login pages
+
+## Options
+
+### demo
+
+Whether to include demo registration and login pages.
+
+```bash
+npx sv add --lucia=demo
+```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/20-mdsvex.md b/apps/svelte.dev/content/docs/cli/30-add-ons/20-mdsvex.md
new file mode 100644
index 0000000000..ef078fc0a9
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/20-mdsvex.md
@@ -0,0 +1,16 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: mdsvex
+---
+
+[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.
+
+## Usage
+
+```bash
+npx sv add mdsvex
+```
+
+## What you get
+
+- mdsvex installed and configured in your `svelte.config.js`
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md b/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
new file mode 100644
index 0000000000..742dcd8149
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
@@ -0,0 +1,39 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: paraglide
+---
+
+[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.
+
+## Usage
+
+```bash
+npx sv add paraglide
+```
+
+## What you get
+
+- Inlang project settings
+- paraglide Vite plugin
+- SvelteKit `reroute` and `handle` hooks
+- `text-direction` and `lang` attributes in `app.html`
+- updated `.gitignore`
+- an optional demo page showing how to use paraglide
+
+## Options
+
+### availableLanguageTags
+
+The languages you'd like to support specified as IETF BCP 47 language tags.
+
+```bash
+npx sv add --paraglide=en,es
+```
+
+### demo
+
+Whether to generate an optional demo page showing how to use paraglide.
+
+```bash
+npx sv add --paraglide=demo
+```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/30-playwright.md b/apps/svelte.dev/content/docs/cli/30-add-ons/30-playwright.md
new file mode 100644
index 0000000000..168d95b8b1
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/30-playwright.md
@@ -0,0 +1,19 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: playwright
+---
+
+[Playwright](https://playwright.dev) browser testing.
+
+## Usage
+
+```bash
+npx sv add playwright
+```
+
+## What you get
+
+- scripts added in your `package.json`
+- a Playwright config file
+- an updated `.gitignore`
+- a demo test
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/35-prettier.md b/apps/svelte.dev/content/docs/cli/30-add-ons/35-prettier.md
new file mode 100644
index 0000000000..d7c0bfb5ba
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/35-prettier.md
@@ -0,0 +1,18 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: prettier
+---
+
+[Prettier](https://prettier.io) is an opinionated code formatter.
+
+## Usage
+
+```bash
+npx sv add prettier
+```
+
+## What you get
+
+- scripts in your `package.json`
+- `.prettierignore` and `.prettierrc` files
+- updates to your eslint config if you're using that package
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/40-storybook.md b/apps/svelte.dev/content/docs/cli/30-add-ons/40-storybook.md
new file mode 100644
index 0000000000..3a062a8944
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/40-storybook.md
@@ -0,0 +1,17 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: storybook
+---
+
+[Storybook](https://storybook.js.org/) is a frontend component workshop.
+
+## Usage
+
+```bash
+npx sv add storybook
+```
+
+## What you get
+
+- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons
+- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md b/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
new file mode 100644
index 0000000000..8d43eb667c
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
@@ -0,0 +1,33 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: sveltekit-adapter
+---
+
+[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.
+
+## Usage
+
+```bash
+npx sv add sveltekit-adapter
+```
+
+## What you get
+
+- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`
+
+## Options
+
+### adapter
+
+Which SvelteKit adapter to use:
+
+- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable
+- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server
+- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)
+- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel
+- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare
+- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify
+
+```bash
+npx sv add --sveltekit-adapter=node
+```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md b/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
new file mode 100644
index 0000000000..9d5ec22d28
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
@@ -0,0 +1,32 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: tailwindcss
+---
+
+[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.
+
+## Usage
+
+```bash
+npx sv add tailwindcss
+```
+
+## What you get
+
+- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
+- Tailwind Vite plugin
+- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)
+- integration with `prettier` if using that package
+
+## Options
+
+### plugins
+
+Which plugin to use:
+
+- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)
+- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
+
+```bash
+npx sv add --tailwindcss=typography
+```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/55-vitest.md b/apps/svelte.dev/content/docs/cli/30-add-ons/55-vitest.md
new file mode 100644
index 0000000000..cba864091e
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/55-vitest.md
@@ -0,0 +1,18 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: vitest
+---
+
+[Vitest](https://vitest.dev/) is a Vite-native testing framework.
+
+## Usage
+
+```bash
+npx sv add vitest
+```
+
+## What you get
+
+- the relevant packages installed and scripts added to your `package.json`
+- client/server-aware testing setup for Svelte in your Vite config file
+- demo tests
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/index.md b/apps/svelte.dev/content/docs/cli/30-add-ons/index.md
new file mode 100644
index 0000000000..036f29cf20
--- /dev/null
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/index.md
@@ -0,0 +1,4 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Add-ons
+---

From 7eb76057e2b6a28f14493020689cb22cf0cfa109 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <accounts@dreamindani.com>
Date: Wed, 30 Apr 2025 17:02:43 -0600
Subject: [PATCH 422/453] docs: "What's new in Svelte" May newsletter (#1324)

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Dani Sandoval <dani@equall.com>
---
 ...2025-05-01-whats-new-in-svelte-may-2025.md | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-05-01-whats-new-in-svelte-may-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-05-01-whats-new-in-svelte-may-2025.md b/apps/svelte.dev/content/blog/2025-05-01-whats-new-in-svelte-may-2025.md
new file mode 100644
index 0000000000..99922fe98c
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-05-01-whats-new-in-svelte-may-2025.md
@@ -0,0 +1,74 @@
+---
+title: "What's new in Svelte: May 2025"
+description: 'Svelte Summit soon! Plus, await in components'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Only a week until [Svelte Summit Spring 2025](https://www.sveltesummit.com/)! If you can't make it in-person to Barcelona, you can purchase a virtual ticket [here](https://www.sveltesummit.com/virtual-ticket).
+
+But before that, we've got a few updates to highlight...
+
+## What's new in Svelte and SvelteKit
+
+The Svelte maintainers have been hard at work building out [Asynchronous Svelte](https://github.com/sveltejs/svelte/discussions/15845) this month, but still found the time to ship some helpful features. If you're interested in trying out the async branch, or just want to follow along with the development, check out [feat: allow await in components #15844](https://github.com/sveltejs/svelte/pull/15844)
+
+- Certain expressions will now be partially evaluated to improve runtime performance (**svelte@5.27.0/5.28.0**, [#15494](https://github.com/sveltejs/svelte/pull/15494)/[#15781](https://github.com/sveltejs/svelte/pull/15781))
+- The Svelte CLI (`sv`) has added a `--install <package-manager>` flag to `create` and `add` to specify which package manager to use when running (**cli@0.8.1**, [#531](https://github.com/sveltejs/cli/pull/531))
+- The two separate CloudFlare adapters have been merged into one: `adapter-cloudflare` (**adapter-cloudflare@7.0.0**, [#13634](https://github.com/sveltejs/kit/pull/13634))
+- `adapter-vercel` will now create symlink functions for each route, for better observability (**adapter-vercel@5.7.0**, [#13679](https://github.com/sveltejs/kit/pull/13679))
+
+There were a number of fixes in SvelteKit too - including an improvement to the `HandleServerError` hook to give it access to `getRequestEvent`! ([#13666](https://github.com/sveltejs/kit/pull/13666))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages). Interested in all the new fixes in language tools? You can find them [here](https://github.com/sveltejs/language-tools/releases).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [TableSlayer](https://github.com/siege-perilous/tableslayer) is an open source software for managing in person RPG games with digital displays (check out the video demo on [Reddit](https://www.reddit.com/r/sveltejs/comments/1jnco5h/built_with_svelte_my_open_source_software_for/))
+- [Iconia](https://iconia.dev/) is a free tool that understands natural language and responds with relevant icons from famous icon libraries
+- [CMSDocs](https://cmsdocs.com/) transforms your Google Docs into Blog CMS
+- [Svelte Changelog v2](https://svelte-changelog.dev/) is out now and is a reimagined way of staying up to date on all the new changes in the Svelte ecosystem
+- [Hookah UI](https://github.com/AdamShannag/hookah-ui) is a visual configuration builder for the Hookah project
+- [mockiapi](https://github.com/sfeSantos/mockiapi) is a mock API server that allows you to define endpoints, return custom JSON responses, and simulate real-world API behavior
+- [soarSQL](https://soarsql.com/) is an SQL editor made for analytical processing on Postgres, MySQL, and CSVs - powered by duckDB
+- [Persona Simulator](https://personasim.fow.sh/) helps you practice your communication skills by chatting with different personas
+- [Typo](https://typo.robino.dev/) is a web-based markdown editor with formatting in codeblocks and typescript execution
+- [FernOS](https://github.com/mrtechtroid/fernos) is a lightweight operating system running inside your browser
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [SvelteKit is the best way to build single page apps - and it just got even better!](https://www.youtube.com/watch?v=vCMTxL1jWbw) by Stanislav Khromov (Video)
+- [Svelte London - April 2025](https://www.youtube.com/watch?v=7m6HExTKAqM)
+  - Building cross-platform browser extensions with Svelte by Oliver Turner ([10:52](https://www.youtube.com/live/7m6HExTKAqM?si=tWUKbSm2IuhO0N_r&t=652))
+  - Kioko: Coding CAD by Armel de Montgros and Soloman Azizi ([43:00](https://www.youtube.com/live/7m6HExTKAqM?si=EOmS3Hy-AwIgrBTU&t=2613))
+
+_This Week in Svelte_
+
+- [Ep. 100](https://www.youtube.com/watch?v=BGNykPO4L7c) — Q&A with Rich Harris
+- [Ep. 101](https://www.youtube.com/watch?v=yp4330KsYcU) — Changelog
+
+_To Read_
+
+- Graphite - an open source 2D procedural graphics editor built with Svelte - has released a [product update blog post](https://graphite.rs/blog/graphite-progress-report-q4-2024/)
+- [Cloudflare Workers & SvelteKit: BetterAuth, Custom Domain, Google OAuth, OTP & Email - Securing Your Application](https://jilles.me/cloudflare-workers-sveltekit-betterauth-custom-domain-google-oauth-otp-email-securing-your-application/) by Jilles Soeters
+- [Building a Real-time Dashboard with Flask and Svelte](https://testdriven.io/blog/flask-svelte/) by Amir Tadrisi
+- [Copying Nuxt's useState in Qwik and Svelte](https://dev.to/jdgamble555/copying-nuxts-usestate-in-qwik-and-svelte-5eo3) by Jonathan Gamble
+
+### Libraries, Tools & Components
+
+- [diaper](https://github.com/devantic/diaper) is an advanced bottom sheet component for Svelte 5
+- [mcp-svelte-docs](https://github.com/spences10/mcp-svelte-docs) is an MCP server that lets you search and access Svelte documentation with built-in caching
+- [Version 4 of Anime.js](https://animejs.com/) - a popular JS animation library - has been released
+- [DeepWiki](https://deepwiki.com/sveltejs/svelte) has created a comprehensive introduction to the Svelte framework repository
+- [Vite Static Assets Plugin](https://www.npmjs.com/package/vite-static-assets-plugin) is a Vite plugin that automatically scans your static assets directory, generates a type-safe TypeScript module with all asset paths to help during build or development time
+- [Mode Watcher v1](https://github.com/svecosystem/mode-watcher) provides simple light/dark mode management, now rewritten with first-class Svelte 5 support
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

From 4632672e4de2a873b8d21d93d0b757166673758f Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Thu, 1 May 2025 01:05:41 +0200
Subject: [PATCH 423/453] Update Testimonials.svelte to link to recent
 stateofjs report (#1289)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 apps/svelte.dev/src/routes/_home/Testimonials.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 96a4802c76..e10bb36558 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -34,10 +34,10 @@
 			></enhanced:img>
 		</a>
 
-		<a href="https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/">
+		<a href="https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/">
 			<enhanced:img
 				class="screenshot"
-				alt="State of JavaScript 2023"
+				alt="State of JavaScript 2024"
 				src="http://github.com/state-of-js-chart.png?w=1000,1400"
 			></enhanced:img>
 		</a>

From 1cae75b130ea317aae886a94c68ec34d09459efb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 May 2025 10:36:54 +0200
Subject: [PATCH 424/453] Sync `cli` docs (#1329)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/cli/20-commands/20-sv-add.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
index b0a7a185ef..20e10a296a 100644
--- a/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
+++ b/apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md
@@ -26,16 +26,16 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 
 ## Official add-ons
 
-<!-- TODO this should be a separate section, each of these should have their own page -->
-
-- `drizzle`
-- `eslint`
-- `sveltekit-adapter`
-- `lucia`
-- `mdsvex`
-- `paraglide`
-- `playwright`
-- `prettier`
-- `storybook`
-- `tailwindcss`
-- `vitest`
+<!-- TODO: it'd be nice for this to live on the "add-ons" page, but we first need svelte.dev to support making pages from headings -->
+
+- [`drizzle`](drizzle)
+- [`eslint`](eslint)
+- [`lucia`](lucia)
+- [`mdsvex`](mdsvex)
+- [`paraglide`](paraglide)
+- [`playwright`](playwright)
+- [`prettier`](prettier)
+- [`storybook`](storybook)
+- [`sveltekit-adapter`](sveltekit-adapter)
+- [`tailwindcss`](tailwind)
+- [`vitest`](vitest)

From 8301abb928a75dfa12553129e389596d73dc17f9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 May 2025 10:37:11 +0200
Subject: [PATCH 425/453] Sync `svelte` docs (#1328)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
index f2998f949d..aa7c6ea448 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/07-$inspect.md
@@ -53,6 +53,7 @@ This rune, added in 5.14, causes the surrounding function to be _traced_ in deve
 	import { doSomeWork } from './elsewhere';
 
 	$effect(() => {
+		+++// $inspect.trace must be the first statement of a function body+++
 		+++$inspect.trace();+++
 		doSomeWork();
 	});

From 14376c3e1e6c6b482634b958f53603511e80e86d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 May 2025 10:37:34 +0200
Subject: [PATCH 426/453] Sync `kit` docs (#1327)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/40-best-practices/07-images.md         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index 750470cb1f..38fd288f9c 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -28,8 +28,6 @@ Doing this manually is tedious. There are a variety of techniques you can use, d
 `@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.
 
 > [!NOTE] As a build plugin, `@sveltejs/enhanced-img` can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about [loading images dynamically from a CDN](#Loading-images-dynamically-from-a-CDN).
->
-> **WARNING**: The `@sveltejs/enhanced-img` package is experimental. It uses pre-1.0 versioning and may introduce breaking changes with every minor version release.
 
 ### Setup
 
@@ -48,7 +46,7 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [
-		+++enhancedImages(),+++
+		+++enhancedImages(), // must come before the SvelteKit plugin+++
 		sveltekit()
 	]
 });
@@ -68,7 +66,7 @@ At build time, your `<enhanced:img>` tag will be replaced with an `<img>` wrappe
 
 You should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `<enhanced:img>` will automatically take care of serving smaller versions to smaller devices.
 
-If you wish to add styles to your `<enhanced:img>`, you should add a `class` and target that.
+> [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your `<style>` block you will need to write `enhanced\:img` to escape the colon in the tag name.
 
 ### Dynamically choosing an image
 

From 9e7304d7ae24340227573a8c4b999833ac912152 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 22:44:25 -0400
Subject: [PATCH 427/453] Sync `kit` docs (#1330)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/10-routing.md        |  2 +-
 .../docs/kit/20-core-concepts/40-page-options.md   |  2 +-
 .../kit/25-build-and-deploy/40-adapter-node.md     |  4 ++--
 .../kit/25-build-and-deploy/99-writing-adapters.md |  2 +-
 .../content/docs/kit/30-advanced/20-hooks.md       |  4 ++--
 .../docs/kit/98-reference/10-@sveltejs-kit.md      | 14 +++++++-------
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
index c80adfd7f9..362dc58507 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -278,7 +278,7 @@ Like `+layout.js`, `+layout.server.js` can export [page options](page-options) 
 
 ## +server
 
-As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, and `HEAD` that take a `RequestEvent` argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
+As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, and `HEAD` that take a [`RequestEvent`](@sveltejs-kit#RequestEvent) argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
 
 For example we could create an `/api/random-number` route with a `GET` handler:
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
index ae8ca9f56b..9d67a7b847 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -128,7 +128,7 @@ export const ssr = false;
 
 If you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.
 
-> [!NOTE] Even with `ssr` set to `false`, code that relies on browser APIs should be imported in your `+page.svelte` or `+layout.svelte` file instead. This is because page options can be overriden and need to be evaluated by importing your `+page.js` or `+layout.js` file on the server (if you have a runtime) or at build time (in case of prerendering).
+> [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead.
 
 ## csr
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
index e2ff627da3..988b4b291b 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
@@ -35,7 +35,7 @@ Development dependencies will be bundled into your app using [Rollup](https://ro
 
 ### Compressing responses
 
-You will typically want to compress responses coming from the server. If you are already deploying your server behind a reverse proxy for SSL or load balancing, it typically results in better performance to also handle compression at that layer since Node.js is single-threaded.
+You will typically want to compress responses coming from the server. If you're already deploying your server behind a reverse proxy for SSL or load balancing, it typically results in better performance to also handle compression at that layer since Node.js is single-threaded.
 
 However, if you're building a [custom server](#Custom-server) and do want to add a compression middleware there, note that we would recommend using [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) since SvelteKit streams responses and the more popular `compression` package does not support streaming and may cause errors when used.
 
@@ -102,7 +102,7 @@ If `adapter-node` can't correctly determine the URL of your deployment, you may
 
 ### `ADDRESS_HEADER` and `XFF_DEPTH`
 
-The [RequestEvent](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:
+The [`RequestEvent`](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:
 
 ```
 ADDRESS_HEADER=True-Client-IP node build
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
index 5b2172023f..b2c8f0f3b4 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/99-writing-adapters.md
@@ -52,7 +52,7 @@ Within the `adapt` method, there are a number of things that an adapter should d
 - Output code that:
 	- Imports `Server` from `${builder.getServerDirectory()}/index.js`
 	- Instantiates the app with a manifest generated with `builder.generateManifest({ relativePath })`
-	- Listens for requests from the platform, converts them to a standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) if necessary, calls the `server.respond(request, { getClientAddress })` function to generate a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) and responds with it
+	- Listens for requests from the platform, converts them to a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) if necessary, calls the `server.respond(request, { getClientAddress })` function to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) and responds with it
 	- expose any platform-specific information to SvelteKit via the `platform` option passed to `server.respond`
 	- Globally shims `fetch` to work on the target platform, if necessary. SvelteKit provides a `@sveltejs/kit/node/polyfills` helper for platforms that can use `undici`
 - Bundle the output to avoid needing to install dependencies on the target platform, if necessary
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index f20da4453e..ad23b80026 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -107,7 +107,7 @@ Note that `resolve(...)` will never throw an error, it will always return a `Pro
 
 ### handleFetch
 
-This function allows you to modify (or replace) a `fetch` request that happens inside a `load` or `action` function that runs on the server (or during pre-rendering).
+This function allows you to modify (or replace) a `fetch` request that happens inside a `load`, `action` or `handle` function that runs on the server (or during prerendering).
 
 For example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).
 
@@ -154,7 +154,7 @@ The following can be added to `src/hooks.server.js` _and_ `src/hooks.client.js`:
 
 ### handleError
 
-If an [unexpected error](errors#Unexpected-errors) is thrown during loading or rendering, this function will be called with the `error`, `event`, `status` code and `message`. This allows for two things:
+If an [unexpected error](errors#Unexpected-errors) is thrown during loading, rendering, or from an endpoint, this function will be called with the `error`, `event`, `status` code and `message`. This allows for two things:
 
 - you can log the error
 - you can generate a custom representation of the error that is safe to show to users, omitting sensitive details like messages and stack traces. The returned value, which defaults to `{ message }`, becomes the value of `$page.error`.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 81f247ff42..0a770f9062 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -279,7 +279,7 @@ function text(
 
 ## Action
 
-Shape of a form action method that is part of `export const actions = {..}` in `+page.server.js`.
+Shape of a form action method that is part of `export const actions = {...}` in `+page.server.js`.
 See [form actions](/docs/kit/form-actions) for more information.
 
 <div class="ts-block">
@@ -370,7 +370,7 @@ type ActionResult<
 
 ## Actions
 
-Shape of the `export const actions = {..}` object in `+page.server.js`.
+Shape of the `export const actions = {...}` object in `+page.server.js`.
 See [form actions](/docs/kit/form-actions) for more information.
 
 <div class="ts-block">
@@ -440,7 +440,7 @@ supports?: {/*…*/}
 
 <div class="ts-block-property-details">
 
-Checks called during dev and build to determine whether specific features will work in production with this adapter
+Checks called during dev and build to determine whether specific features will work in production with this adapter.
 
 <div class="ts-block-property-children"><div class="ts-block-property">
 
@@ -452,11 +452,11 @@ read?: (details: { config: any; route: { id: string } }) => boolean;
 
 <div class="ts-block-property-bullets">
 
-- `config` The merged route config
+- `details.config` The merged route config
 
 </div>
 
-Test support for `read` from `$app/server`
+Test support for `read` from `$app/server`.
 
 </div>
 </div></div>
@@ -473,7 +473,7 @@ emulate?: () => MaybePromise<Emulator>;
 <div class="ts-block-property-details">
 
 Creates an `Emulator`, which allows the adapter to influence the environment
-during dev, build and prerendering
+during dev, build and prerendering.
 
 </div>
 </div></div>
@@ -1110,7 +1110,7 @@ type HandleClientError = (input: {
 
 ## HandleFetch
 
-The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering)
+The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during prerendering).
 
 <div class="ts-block">
 

From 7e48aeaa7b934cac5cb47d799070a3294b4fac72 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 13 May 2025 10:34:30 -0400
Subject: [PATCH 428/453] Sync `svelte` docs (#1335)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/11-bind.md | 34 ++++++++++++++++++-
 .../content/docs/svelte/07-misc/02-testing.md |  8 ++---
 .../content/docs/svelte/07-misc/99-faq.md     |  3 +-
 .../.generated/compile-warnings.md            |  8 +++++
 .../98-reference/30-compiler-warnings.md      |  8 +++++
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
index f99a8b5fda..1922ef72b7 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
@@ -118,6 +118,29 @@ Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a f
 </form>
 ```
 
+## `<input bind:indeterminate>`
+
+Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:
+
+```svelte
+<script>
+	let checked = $state(false);
+	let indeterminate = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked bind:indeterminate>
+
+	{#if indeterminate}
+		waiting...
+	{:else if checked}
+		checked
+	{:else}
+		unchecked
+	{/if}
+</form>
+```
+
 ## `<input bind:group>`
 
 Inputs that work together can use `bind:group`.
@@ -228,6 +251,7 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 - [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
 - [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
 - [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
+- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)
 
 ```svelte
 <audio src={clip} bind:duration bind:currentTime bind:paused></audio>
@@ -255,6 +279,10 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 </details>
 ```
 
+## `window` and `document`
+
+To bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).
+
 ## Contenteditable bindings
 
 Elements with the `contenteditable` attribute support the following bindings:
@@ -279,6 +307,10 @@ All visible elements have the following readonly bindings, measured with a `Resi
 - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
 - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
 - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)
+- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)
+- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)
+- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)
 
 ```svelte
 <div bind:offsetWidth={width} bind:offsetHeight={height}>
@@ -286,7 +318,7 @@ All visible elements have the following readonly bindings, measured with a `Resi
 </div>
 ```
 
-> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Note that CSS transformations do not trigger `ResizeObserver` callbacks.
 
 ## bind:this
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
index 151c15e9d8..1f3c567406 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
@@ -7,9 +7,9 @@ Testing helps you write and maintain your code and guard against regressions. Te
 
 ## Unit and integration testing using Vitest
 
-Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/).
+Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.
 
-To get started, install Vitest:
+To setup Vitest manually, first install it:
 
 ```bash
 npm install -D vitest
@@ -255,9 +255,9 @@ When writing component tests that involve two-way bindings, context or snippet p
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
 
-To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
+You can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.
 
-After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
+If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests - mainly starting your application at a certain port. For example:
 
 ```js
 /// file: playwright.config.js
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
index 8f5310bb31..e48bd94fb6 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
@@ -82,9 +82,10 @@ _End-to-End Tests_: To ensure your users are able to interact with your applicat
 
 Some resources for getting started with testing:
 
+- [Svelte docs on testing](/docs/svelte/testing)
+- [Setup Vitest using the Svelte CLI](/docs/cli/vitest)
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
 - [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
-- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit)
 - [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
 - [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
 - [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 0e94cbadb2..7069f90206 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -586,6 +586,14 @@ Attributes should not contain ':' characters to prevent ambiguity with Svelte di
 Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
+### bidirectional_control_characters
+
+```
+A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+```
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ### bind_invalid_each_rest
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index a93bd42919..6314ffd30d 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -607,6 +607,14 @@ Attributes should not contain ':' characters to prevent ambiguity with Svelte di
 Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
+### bidirectional_control_characters
+
+```
+A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+```
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ### bind_invalid_each_rest
 
 ```

From 2ee9eab9f7f11a60f48aada17186469c15462ca0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 May 2025 11:07:11 -0400
Subject: [PATCH 429/453] reinit preview branches from main (#1338)

---
 .github/workflows/docs-preview-create.yml | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docs-preview-create.yml b/.github/workflows/docs-preview-create.yml
index 5c9f983245..ece0c2abdb 100644
--- a/.github/workflows/docs-preview-create.yml
+++ b/.github/workflows/docs-preview-create.yml
@@ -39,6 +39,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
+          ref: main # Explicitly checkout main branch first
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
@@ -46,8 +47,10 @@ jobs:
           cache: pnpm
       - run: pnpm install --frozen-lockfile
 
-      - name: Checkout
-        run: git fetch origin ${{ env.BRANCH }} && git checkout ${{ env.BRANCH }} || git checkout -b ${{ env.BRANCH }}
+      - name: Create or reset branch from main
+        run: |
+          git fetch origin
+          git checkout -B ${{ env.BRANCH }} # Force create/reset branch based on current main
 
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ inputs.owner }}" -p "${{ inputs.repo }}#${{ inputs.branch }}"
@@ -59,7 +62,7 @@ jobs:
 
       - name: Push
         id: push
-        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
+        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }} --force
 
       - name: Request preview comment
         uses: peter-evans/repository-dispatch@v3

From c5f8ac2bad6259b3acf8e01065d9ba1ccb9a6224 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 May 2025 13:15:34 -0400
Subject: [PATCH 430/453] remove `import type` preceding newlines (#1340)

---
 packages/site-kit/src/lib/markdown/renderer.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 20b30d1dd3..3bafaff2b0 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -586,11 +586,7 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 		);
 
 		if (last_import) {
-			let i = last_import.getEnd();
-			while (js_code[i] !== '\n') i += 1;
-			i += 1;
-
-			code.appendLeft(i, '\n' + import_statements + '\n');
+			code.appendLeft(last_import.getEnd(), '\n' + import_statements);
 		} else {
 			code.prependLeft(0, offset + import_statements + '\n');
 		}

From 00c503ad033593aa34a4d2fb5c6791e2a336dd36 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 May 2025 13:32:28 -0400
Subject: [PATCH 431/453] preserve newlines before jsdoc comments where
 appropriate (#1341)

---
 packages/site-kit/src/lib/markdown/renderer.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 3bafaff2b0..71a8fd36f3 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -563,7 +563,10 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 				while (start > 0 && code.original[start - 1] === '\t') start -= 1;
 				while (start > 0 && code.original[start - 1] === '\n') start -= 1;
 
-				code.overwrite(start, end, '');
+				const slice = code.original.slice(node.getStart(), node.getEnd());
+				const is_multiline = slice.includes('\n');
+
+				code.overwrite(start, end, is_multiline ? '\n' : '');
 			}
 		}
 

From 239094c76cd57a672f87e36d142968e91b93985e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 13:32:43 -0400
Subject: [PATCH 432/453] Sync `kit` docs (#1339)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 0a770f9062..370de13db6 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -105,7 +105,7 @@ function error(
 
 ## fail
 
-Create an `ActionFailure` object.
+Create an `ActionFailure` object. Call when form submission fails.
 
 <div class="ts-block">
 

From 6f10deefb13530f3710c1d9be81d556080e9fd33 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 14:05:57 -0400
Subject: [PATCH 433/453] Sync `svelte` docs (#1342)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../svelte/03-template-syntax/09-@attach.md   | 139 ++++++++++++++++++
 .../{09-@const.md => 10-@const.md}            |   0
 .../{10-@debug.md => 11-@debug.md}            |   0
 .../{11-bind.md => 12-bind.md}                |   0
 .../{12-use.md => 13-use.md}                  |   3 +
 .../{13-transition.md => 14-transition.md}    |   0
 .../{14-in-and-out.md => 15-in-and-out.md}    |   0
 .../{15-animate.md => 16-animate.md}          |   0
 .../98-reference/21-svelte-attachments.md     |  74 ++++++++++
 .../svelte/98-reference/21-svelte-compiler.md |   9 +-
 10 files changed, 224 insertions(+), 1 deletion(-)
 create mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{09-@const.md => 10-@const.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{10-@debug.md => 11-@debug.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{11-bind.md => 12-bind.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{12-use.md => 13-use.md} (93%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{13-transition.md => 14-transition.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{14-in-and-out.md => 15-in-and-out.md} (100%)
 rename apps/svelte.dev/content/docs/svelte/03-template-syntax/{15-animate.md => 16-animate.md} (100%)
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
new file mode 100644
index 0000000000..23186cf1d6
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
@@ -0,0 +1,139 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: {@attach ...}
+---
+
+Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
+
+> [!NOTE]
+> Attachments are available in Svelte 5.29 and newer.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/attachments').Attachment} */
+	function myAttachment(element) {
+		console.log(element.nodeName); // 'DIV'
+
+		return () => {
+			console.log('cleaning up');
+		};
+	}
+</script>
+
+<div {@attach myAttachment}>...</div>
+```
+
+An element can have any number of attachments.
+
+## Attachment factories
+
+A useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<button {@attach tooltip(content)}>
+	Hover me
+</button>
+```
+
+Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
+
+## Inline attachments
+
+Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71WbW_aSBD-Kyt0VaBJyGKbqoUkOhdI68qGUkh6pPSDMY6xYwyH12Ab8d9vZtYE6DX38aQQe3fennlm1jvbUmTP3VKj9KcthO3MShelJz9041Ljx7YksiWKcAP2C0V9uazGazcUuDexY_d3-84iEm4kwE3pOnZW_lLcjqOx8OfLxUqwLVvafiTYjj2tFnN2Vr3yVvbUB4NqEJ81x9H11cEounbsaG3HaL_xp2J2s1WVHa5mru_NxMtyW6TAytKgwm5u2RYlYwF4YsEIVSrYDZMaVc8VLblXPlOmZ5UmxkP9P9ynJ9cR5fKxk7EIXQGQIV9wsXL_TtxY6JE_t4W_iO5wv_yURA6uWLhYLMuicrAdi_-2RAMCUGgTReUC8gUTB9mueC2WK1ckq4j9AhVytiPHDX_Fh_-PXBVvhcsdEHl7fSXZkeTHIgtdKp7c3UegUjRYjfM3hQ9ZjpOty407efbF5dyOnxssWYXlcWlqC7sBmDz3Kl575-k8bGIXvdMuvn7uKo_Zx3Ayv_Mnn-7FaH4X2Mo0m6gPyWObR5P5g2q0dc9q6fVeS8uMdifttRxvOg_DKf-ydkEHZBuj_ayZgeFZw472JfuoTb6niZPzyP78jTvtxdpUp-o0q6tWVl87c2dtBfrGan3Ip3Mn-hqkm9Ff3xbGp_6HLwqvWwOtDnFqZvAYmMPOxgyehTW8T7oZzy1fU8yhAXuW6La9xPJ5arW0fNLiWTfTamCnmsED2DlJd6BzM3DA1gBbPQVbDv444Qw6iTXgKfjxwC43B5QbyDzPgrXRNlAm0MZoW0nX5_B06Ak-Mc-k10L7kQe81M3gHvYAz0CvkTwAvC2IOdDT7kADDq0MdSHvxMp0XnAJeXyLrQCx8hTxj3J6L2Igbp5KDIRbSNw6YSPcuDfsI5ac8KI80yFWX0AeitHuox4-pa-BpoEvzKMOOSMfWDeBGIFXwP4gzOE9cu71kF_FEpgf8AF-eYq4wQZ5z8A_2HtUF_LRwjXEaYFvrBnkA7rg00L9pCfjJYjHxNzmG8qbeBlgjndBwT1ypyCG7gtPngcY-aTd8TBPM-h41vfiiX6hjsAT9g3yw4t9ReLGdR_rSjUEOfBDtQRcyKUhSI4cwG_SNlTiD3vou5XiO2IB_zniBhusJeanORnHPpLcU92oZ9F3RjUiTizkDnx2BPUv4KK6Qc9RHIwbTGPZ632vCzqjDHlxEFOK9l3C-Yx1UiQ_XDtgkjUkf0MjR59QJ5XiEqZ-geMZasBzmds9YIK-xadPfIkenTsPsWPP_YYHB2OkxXlIqT6DopYDXaOa-1i_jvwW0JkiPHhG8AwUsfpYV6gF4tFzeXYQD9ZDo76kHoV1l3r5MYa9WtG3VA-sPfYKxW5xhbiRvYm9IqhX8HwO8Ix0UL8471hLOtd16mPip4N5UR6AgRdnJ8dvCMip1vCjbw3khfFS6h9lI-jswjnHnpY16yPHWdGPGeHzMcdZTj1J_d3B_JVRjvnopCv5wD7RVdLDPqG4kscTTpQNfvPgbI3g_f-pS4--a3TGUynH_hvJb9QpDzXJg3fo3eyld1Xq3YHjmbn23lTh7sm1m3Gpwur8Df2umMq16vtlyqLF5cpdurb4zb12Gfu522Dv-HruR_IWpQGmuDdhGMILvNQQq8TdXbwyVB3NP6dT1angaKxyUxqlXuaNf40L8qKWg8-W0XV9weQdDYPXzX4YqsprvXlQpru5Dbf0kRIMSsZ-u8wvGPydeNxPTk-LFSvjlLQEY96Ex_XBXxWv_mroRp6Yoej8hmmV0wnNB7MlEK81j3dT2PXZGxnyRJKBpOyDAYkq7Pb2FsLupzips3KnoPVOY-esXFPes7csrewtYA8Eb5lli1k19qOyAAkMMLxyEsZbuW70i5MMnRR8HntxFvErXiZhguMfmL8gPOXmB3DC-E8aEafNVzVqqEGQXtdRUAcDvq6ioopSr-97tugAqvcyOar3iy3VnZLanbb1T1jZfrjxo2mp8WSHsbv7Bx1mHBBZDAAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { paint } from './gradient.js';
+</script>
+
+<canvas
+	width={32}
+	height={32}
+	{@attach (canvas) => {
+		const context = canvas.getContext('2d');
+
+		$effect(() => {
+			let frame = requestAnimationFrame(function loop(t) {
+				frame = requestAnimationFrame(loop);
+				paint(context, t);
+			});
+
+			return () => {
+				cancelAnimationFrame(frame);
+			};
+		});
+	}}
+></canvas>
+```
+
+## Passing attachments to components
+
+When used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.
+
+This allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	/** @type {import('svelte/elements').HTMLButtonAttributes} */
+	let { children, ...props } = $props();
+</script>
+
+<!-- `props` includes attachments -->
+<button {...props}>
+	{@render children?.()}
+</button>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+	import Button from './Button.svelte';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<Button {@attach tooltip(content)}>
+	Hover me
+</Button>
+```
+
+## Creating attachments programmatically
+
+To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@const.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@const.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@const.md
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-@debug.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/10-@debug.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/11-@debug.md
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-use.md
similarity index 93%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/13-use.md
index 1d372f0b61..92a3cff9ad 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-use.md
@@ -3,6 +3,9 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: use:
 ---
 
+> [!NOTE]
+> In Svelte 5.29 and newer, consider using [attachments](@attach) instead, as they are more flexible and composable.
+
 Actions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:
 
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-transition.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/13-transition.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/14-transition.md
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-in-and-out.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/15-in-and-out.md
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-animate.md
similarity index 100%
rename from apps/svelte.dev/content/docs/svelte/03-template-syntax/15-animate.md
rename to apps/svelte.dev/content/docs/svelte/03-template-syntax/16-animate.md
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md
new file mode 100644
index 0000000000..68fae2cb1b
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md
@@ -0,0 +1,74 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: svelte/attachments
+---
+
+
+
+```js
+// @noErrors
+import { createAttachmentKey } from 'svelte/attachments';
+```
+
+## createAttachmentKey
+
+<blockquote class="since note">
+
+Available since 5.29
+
+</blockquote>
+
+Creates an object key that will be recognised as an attachment when the object is spread onto an element,
+as a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though
+is generally not needed when building an app.
+
+```svelte
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+
+	const props = {
+		class: 'cool',
+		onclick: () => alert('clicked'),
+		[createAttachmentKey()]: (node) => {
+			node.textContent = 'attached!';
+		}
+	};
+</script>
+
+<button {...props}>click me</button>
+```
+
+<div class="ts-block">
+
+```dts
+function createAttachmentKey(): symbol;
+```
+
+</div>
+
+
+
+## Attachment
+
+An [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted
+to the DOM, and optionally returns a function that is called when the element is later removed.
+
+It can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing
+a property created with [`createAttachmentKey`](/docs/svelte/svelte-attachments#createAttachmentKey).
+
+<div class="ts-block">
+
+```dts
+interface Attachment<T extends EventTarget = Element> {/*…*/}
+```
+
+<div class="ts-block-property">
+
+```dts
+(element: T): void | (() => void);
+```
+
+<div class="ts-block-property-details"></div>
+</div></div>
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 0cab56af7f..6ff38c7f3a 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -306,6 +306,12 @@ namespace AST {
 			  });
 	}
 
+	/** A `{@attach foo(...)} tag */
+	export interface AttachTag extends BaseNode {
+		type: 'AttachTag';
+		expression: Expression;
+	}
+
 	/** An `animate:` directive */
 	export interface AnimateDirective extends BaseNode {
 		type: 'AnimateDirective';
@@ -399,7 +405,7 @@ namespace AST {
 	interface BaseElement extends BaseNode {
 		name: string;
 		attributes: Array<
-			Attribute | SpreadAttribute | Directive
+			Attribute | SpreadAttribute | Directive | AttachTag
 		>;
 		fragment: Fragment;
 	}
@@ -601,6 +607,7 @@ namespace AST {
 		| AST.Attribute
 		| AST.SpreadAttribute
 		| Directive
+		| AST.AttachTag
 		| AST.Comment
 		| Block;
 

From 600361d39252262d29a6add716b27e4a7ffbd5a7 Mon Sep 17 00:00:00 2001
From: David Vrensk <david@vrensk.com>
Date: Wed, 14 May 2025 23:17:16 +0200
Subject: [PATCH 434/453] fix: D6 dice roll could produce 0 (#1337)

The Math.random() static method returns a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1
---
 .../04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
index f2216d52d2..30d3712cae 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
@@ -9,7 +9,7 @@ export async function roll() {
 				return;
 			}
 
-			fulfil(Math.ceil(Math.random() * 6));
+			fulfil(Math.floor(Math.random() * 6) + 1);
 		}, 1000);
 	});
 }

From 52050c7a01d5d0b9c7e5a51c81f6638ed7834532 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 14 May 2025 17:19:03 -0400
Subject: [PATCH 435/453] fix: Prevents lightbulb pseudo element from blocking
 interactivity with underlying contents (#1345)

Set `pointer-events: none;` on problematic pseudo-element
---
 packages/site-kit/src/lib/components/Text.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index ec6f594270..ec06de6cfb 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -415,6 +415,7 @@
 					top: 0.05em;
 					background: var(--sk-fg-accent);
 					mask: url(http://github.com/icons/lightbulb) no-repeat 0.5rem 0 / 2.6rem;
+					pointer-events: none;
 				}
 			}
 

From d827a716dbe5b6f2aeafabdb2164d96d119dc83b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 May 2025 09:28:15 -0400
Subject: [PATCH 436/453] improve jsdoc conversion (#1346)

---
 .../site-kit/src/lib/markdown/renderer.ts     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 71a8fd36f3..aaafcdfbe3 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -417,7 +417,7 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 	const code = new MagicString(js_code);
 	const imports = new Map();
 
-	async function walk(node: ts.Node) {
+	async function walk(node: ts.Node, prev: ts.Node | null) {
 		const jsdoc = get_jsdoc(node);
 
 		if (jsdoc) {
@@ -563,19 +563,30 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 				while (start > 0 && code.original[start - 1] === '\t') start -= 1;
 				while (start > 0 && code.original[start - 1] === '\n') start -= 1;
 
-				const slice = code.original.slice(node.getStart(), node.getEnd());
-				const is_multiline = slice.includes('\n');
+				let is_multiline = false;
+
+				if (prev) {
+					is_multiline =
+						code.original.slice(prev.getStart(), prev.getEnd()).includes('\n') ||
+						code.original.slice(node.getStart(), node.getEnd()).includes('\n');
+				}
 
 				code.overwrite(start, end, is_multiline ? '\n' : '');
 			}
 		}
 
+		// the TypeScript API is such a hot mess, AFAICT there is no non-stupid way
+		// to get the previous sibling within the visitor, so since we need it we
+		// have to pass it in from the parent visitor
+		let child_prev: ts.Node | null = null;
+
 		for (const child_node of node.getChildren()) {
-			await walk(child_node);
+			await walk(child_node, child_prev);
+			child_prev = child_node;
 		}
 	}
 
-	await walk(ast);
+	await walk(ast, null);
 
 	if (imports.size) {
 		const import_statements = Array.from(imports.entries())

From 121d1170ad12dbca916f8d4214980d59802b966a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 May 2025 09:38:58 -0400
Subject: [PATCH 437/453] Sync `svelte` docs (#1344)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/02-$state.md |  2 +-
 .../svelte/03-template-syntax/09-@attach.md   | 19 ++++++-------------
 .../svelte/98-reference/21-svelte-compiler.md |  1 +
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index 14083f6a81..9c849659d6 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -21,7 +21,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
+> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
index 23186cf1d6..4db1d043c2 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
@@ -60,14 +60,10 @@ Since the `tooltip(content)` expression runs inside an [effect]($effect), the at
 
 ## Inline attachments
 
-Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71WbW_aSBD-Kyt0VaBJyGKbqoUkOhdI68qGUkh6pPSDMY6xYwyH12Ab8d9vZtYE6DX38aQQe3fennlm1jvbUmTP3VKj9KcthO3MShelJz9041Ljx7YksiWKcAP2C0V9uazGazcUuDexY_d3-84iEm4kwE3pOnZW_lLcjqOx8OfLxUqwLVvafiTYjj2tFnN2Vr3yVvbUB4NqEJ81x9H11cEounbsaG3HaL_xp2J2s1WVHa5mru_NxMtyW6TAytKgwm5u2RYlYwF4YsEIVSrYDZMaVc8VLblXPlOmZ5UmxkP9P9ynJ9cR5fKxk7EIXQGQIV9wsXL_TtxY6JE_t4W_iO5wv_yURA6uWLhYLMuicrAdi_-2RAMCUGgTReUC8gUTB9mueC2WK1ckq4j9AhVytiPHDX_Fh_-PXBVvhcsdEHl7fSXZkeTHIgtdKp7c3UegUjRYjfM3hQ9ZjpOty407efbF5dyOnxssWYXlcWlqC7sBmDz3Kl575-k8bGIXvdMuvn7uKo_Zx3Ayv_Mnn-7FaH4X2Mo0m6gPyWObR5P5g2q0dc9q6fVeS8uMdifttRxvOg_DKf-ydkEHZBuj_ayZgeFZw472JfuoTb6niZPzyP78jTvtxdpUp-o0q6tWVl87c2dtBfrGan3Ip3Mn-hqkm9Ff3xbGp_6HLwqvWwOtDnFqZvAYmMPOxgyehTW8T7oZzy1fU8yhAXuW6La9xPJ5arW0fNLiWTfTamCnmsED2DlJd6BzM3DA1gBbPQVbDv444Qw6iTXgKfjxwC43B5QbyDzPgrXRNlAm0MZoW0nX5_B06Ak-Mc-k10L7kQe81M3gHvYAz0CvkTwAvC2IOdDT7kADDq0MdSHvxMp0XnAJeXyLrQCx8hTxj3J6L2Igbp5KDIRbSNw6YSPcuDfsI5ac8KI80yFWX0AeitHuox4-pa-BpoEvzKMOOSMfWDeBGIFXwP4gzOE9cu71kF_FEpgf8AF-eYq4wQZ5z8A_2HtUF_LRwjXEaYFvrBnkA7rg00L9pCfjJYjHxNzmG8qbeBlgjndBwT1ypyCG7gtPngcY-aTd8TBPM-h41vfiiX6hjsAT9g3yw4t9ReLGdR_rSjUEOfBDtQRcyKUhSI4cwG_SNlTiD3vou5XiO2IB_zniBhusJeanORnHPpLcU92oZ9F3RjUiTizkDnx2BPUv4KK6Qc9RHIwbTGPZ632vCzqjDHlxEFOK9l3C-Yx1UiQ_XDtgkjUkf0MjR59QJ5XiEqZ-geMZasBzmds9YIK-xadPfIkenTsPsWPP_YYHB2OkxXlIqT6DopYDXaOa-1i_jvwW0JkiPHhG8AwUsfpYV6gF4tFzeXYQD9ZDo76kHoV1l3r5MYa9WtG3VA-sPfYKxW5xhbiRvYm9IqhX8HwO8Ix0UL8471hLOtd16mPip4N5UR6AgRdnJ8dvCMip1vCjbw3khfFS6h9lI-jswjnHnpY16yPHWdGPGeHzMcdZTj1J_d3B_JVRjvnopCv5wD7RVdLDPqG4kscTTpQNfvPgbI3g_f-pS4--a3TGUynH_hvJb9QpDzXJg3fo3eyld1Xq3YHjmbn23lTh7sm1m3Gpwur8Df2umMq16vtlyqLF5cpdurb4zb12Gfu522Dv-HruR_IWpQGmuDdhGMILvNQQq8TdXbwyVB3NP6dT1angaKxyUxqlXuaNf40L8qKWg8-W0XV9weQdDYPXzX4YqsprvXlQpru5Dbf0kRIMSsZ-u8wvGPydeNxPTk-LFSvjlLQEY96Ex_XBXxWv_mroRp6Yoej8hmmV0wnNB7MlEK81j3dT2PXZGxnyRJKBpOyDAYkq7Pb2FsLupzips3KnoPVOY-esXFPes7csrewtYA8Eb5lli1k19qOyAAkMMLxyEsZbuW70i5MMnRR8HntxFvErXiZhguMfmL8gPOXmB3DC-E8aEafNVzVqqEGQXtdRUAcDvq6ioopSr-97tugAqvcyOar3iy3VnZLanbb1T1jZfrjxo2mp8WSHsbv7Bx1mHBBZDAAA)):
+Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):
 
 ```svelte
 <!--- file: App.svelte --->
-<script>
-	import { paint } from './gradient.js';
-</script>
-
 <canvas
 	width={32}
 	height={32}
@@ -75,19 +71,16 @@ Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAA
 		const context = canvas.getContext('2d');
 
 		$effect(() => {
-			let frame = requestAnimationFrame(function loop(t) {
-				frame = requestAnimationFrame(loop);
-				paint(context, t);
-			});
-
-			return () => {
-				cancelAnimationFrame(frame);
-			};
+			context.fillStyle = color;
+			context.fillRect(0, 0, canvas.width, canvas.height);
 		});
 	}}
 ></canvas>
 ```
 
+> [!NOTE]
+> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.
+
 ## Passing attachments to components
 
 When used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 6ff38c7f3a..9d7a776fa3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -526,6 +526,7 @@ namespace AST {
 		type: 'SnippetBlock';
 		expression: Identifier;
 		parameters: Pattern[];
+		typeParams?: string;
 		body: Fragment;
 	}
 

From 6233afd5682a6bb0807f3f7c4857f8dad900749e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 18 May 2025 13:06:47 -0400
Subject: [PATCH 438/453] Sync `svelte` docs (#1347)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/03-template-syntax/01-basic-markup.md       | 6 ++++--
 .../content/docs/svelte/03-template-syntax/03-each.md       | 4 +++-
 .../svelte.dev/content/docs/svelte/06-runtime/02-context.md | 2 +-
 .../content/docs/svelte/98-reference/21-svelte-compiler.md  | 5 +++--
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
index bc98d60573..88e50b0d24 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -83,12 +83,14 @@ As with elements, `name={name}` can be replaced with the `{name}` shorthand.
 <Widget foo={bar} answer={42} text="hello" />
 ```
 
+## Spread attributes
+
 _Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
 
-An element or component can have multiple spread attributes, interspersed with regular ones.
+An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a="b"`, while `c="d"` would take precedence over `things.c`:
 
 ```svelte
-<Widget {...things} />
+<Widget a="b" {...things} c="d" />
 ```
 
 ## Events
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
index 99b7eaebb4..814479d40c 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
@@ -44,7 +44,9 @@ An each block can also specify an _index_, equivalent to the second argument in
 {#each expression as name, index (key)}...{/each}
 ```
 
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.
+
+The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
 
 ```svelte
 {#each items as item (item.id)}
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
index 71ec80e91a..95beb916f4 100644
--- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -126,7 +126,7 @@ In many cases this is perfectly fine, but there is a risk: if you mutate the sta
 ```svelte
 <!--- file: App.svelte ---->
 <script>
-	import { myGlobalState } from 'svelte';
+	import { myGlobalState } from './state.svelte.js';
 
 	let { data } = $props();
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 9d7a776fa3..40105c0d16 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -594,10 +594,11 @@ namespace AST {
 		| AST.SvelteBoundary;
 
 	export type Tag =
-		| AST.ExpressionTag
-		| AST.HtmlTag
+		| AST.AttachTag
 		| AST.ConstTag
 		| AST.DebugTag
+		| AST.ExpressionTag
+		| AST.HtmlTag
 		| AST.RenderTag;
 
 	export type TemplateNode =

From 9f55e154da81e5e3d6d783b2ccc86c571f7118f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 18 May 2025 13:07:06 -0400
Subject: [PATCH 439/453] Sync `kit` docs (#1348)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/25-build-and-deploy/30-adapter-auto.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
index 1c5156e436..9475f3e5c0 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
@@ -9,7 +9,7 @@ When you create a new SvelteKit project with `npx sv create`, it installs [`adap
 - [`@sveltejs/adapter-netlify`](adapter-netlify) for [Netlify](https://netlify.com/)
 - [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)
 - [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
-- [`svelte-kit-sst`](https://github.com/sst/sst/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
+- [`svelte-kit-sst`](https://github.com/sst/v2/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
 - [`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
 
 It's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.

From 79417625a2e609aa2c6a7bc38296dbc6bc8f85be Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 18 May 2025 13:07:36 -0400
Subject: [PATCH 440/453] Sync `cli` docs (#1350)

sync cli docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md | 9 +++------
 apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md  | 2 +-
 .../content/docs/cli/30-add-ons/25-paraglide.md          | 6 +++---
 .../content/docs/cli/30-add-ons/45-sveltekit-adapter.md  | 2 +-
 .../content/docs/cli/30-add-ons/50-tailwind.md           | 2 +-
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md b/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
index 511045b3f4..887f34ea6c 100644
--- a/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
@@ -29,7 +29,7 @@ Which database variant to use:
 - `sqlite` — file-based database not requiring a database server
 
 ```bash
-npx sv add --drizzle=postgresql
+npx sv add drizzle=database:postgresql
 ```
 
 ### client
@@ -41,7 +41,7 @@ The SQL client to use, depends on `database`:
 - For `sqlite`: `better-sqlite3`, `libsql`, `turso`
 
 ```bash
-npx sv add --drizzle=postgresql,postgres.js
+npx sv add drizzle=database:postgresql+client:postgres.js
 ```
 
 Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).
@@ -50,9 +50,6 @@ Drizzle is compatible with well over a dozen database drivers. We just offer a f
 
 Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
 
-- `docker` - generates `docker-compose.yml`
-- `no-docker` - does not generate docker config
-
 ```bash
-npx sv add --drizzle=postgresql,postgres.js,docker
+npx sv add drizzle=database:postgresql+client:postgres.js+docker:yes
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md b/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
index b79667984d..b8b368fd17 100644
--- a/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
@@ -23,5 +23,5 @@ npx sv add lucia
 Whether to include demo registration and login pages.
 
 ```bash
-npx sv add --lucia=demo
+npx sv add lucia=demo:yes
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md b/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
index 742dcd8149..256b21ebe0 100644
--- a/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
@@ -22,12 +22,12 @@ npx sv add paraglide
 
 ## Options
 
-### availableLanguageTags
+### languageTags
 
 The languages you'd like to support specified as IETF BCP 47 language tags.
 
 ```bash
-npx sv add --paraglide=en,es
+npx sv add paraglide="languageTags:en,es"
 ```
 
 ### demo
@@ -35,5 +35,5 @@ npx sv add --paraglide=en,es
 Whether to generate an optional demo page showing how to use paraglide.
 
 ```bash
-npx sv add --paraglide=demo
+npx sv add paraglide="demo:yes"
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md b/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
index 8d43eb667c..801503c89e 100644
--- a/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
@@ -29,5 +29,5 @@ Which SvelteKit adapter to use:
 - `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify
 
 ```bash
-npx sv add --sveltekit-adapter=node
+npx sv add sveltekit-adapter=adapter:node
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md b/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
index 9d5ec22d28..a89c6943a9 100644
--- a/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
+++ b/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
@@ -28,5 +28,5 @@ Which plugin to use:
 - `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
 
 ```bash
-npx sv add --tailwindcss=typography
+npx sv add tailwindcss="plugins:typography"
 ```

From 04a364551d8faa4c7540461a59c584b9f88e19ab Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 18 May 2025 16:30:33 -0400
Subject: [PATCH 441/453] Sync `kit` docs (#1351)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/kit/20-core-concepts/40-page-options.md       |  2 +-
 .../kit/25-build-and-deploy/60-adapter-cloudflare.md   |  8 ++++----
 .../70-adapter-cloudflare-workers.md                   |  2 +-
 .../content/docs/kit/30-advanced/20-hooks.md           | 10 +++-------
 apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md |  6 +-----
 .../content/docs/kit/98-reference/10-@sveltejs-kit.md  |  2 +-
 6 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
index 9d67a7b847..080dd074c2 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Page options
 ---
 
-By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [**hydration**](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [**router**](routing) that takes over subsequent navigations.
+By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [_hydration_](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [_router_](routing) that takes over subsequent navigations.
 
 You can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 44ea175a07..6f90aac429 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -109,9 +109,9 @@ Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/ge
 
 If you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:
 
-- **Framework preset** – SvelteKit
-- **Build command** – `npm run build` or `vite build`
-- **Build output directory** – `.svelte-kit/cloudflare`
+- Framework preset – SvelteKit
+- Build command – `npm run build` or `vite build`
+- Build output directory – `.svelte-kit/cloudflare`
 
 ### Further reading
 
@@ -158,7 +158,7 @@ export {};
 
 Cloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
 
 ## Headers and redirects
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index f89f486987..c643490dc1 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -113,7 +113,7 @@ export {};
 
 Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev`.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev`.
 
 ## Troubleshooting
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index ad23b80026..42dd20945d 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -107,7 +107,7 @@ Note that `resolve(...)` will never throw an error, it will always return a `Pro
 
 ### handleFetch
 
-This function allows you to modify (or replace) a `fetch` request that happens inside a `load`, `action` or `handle` function that runs on the server (or during prerendering).
+This function allows you to modify (or replace) the result of an [`event.fetch`](load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.
 
 For example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).
 
@@ -127,13 +127,9 @@ export async function handleFetch({ request, fetch }) {
 }
 ```
 
-**Credentials**
+Requests made with `event.fetch` follow the browser's credentials model — for same-origin requests, `cookie` and `authorization` headers are forwarded unless the `credentials` option is set to `"omit"`. For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.
 
-For same-origin requests, SvelteKit's `fetch` implementation will forward `cookie` and `authorization` headers unless the `credentials` option is set to `"omit"`.
-
-For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.
-
-If your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:
+There is one caveat: if your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:
 
 ```js
 /// file: src/hooks.server.js
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
index d98e925f62..66df492f54 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -194,9 +194,7 @@ Sort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Nod
 
 Currently ESM Support within the latest Yarn (version 3) is considered [experimental](https://github.com/yarnpkg/berry/pull/2161).
 
-The below seems to work although your results may vary.
-
-First create a new application:
+The below seems to work although your results may vary. First create a new application:
 
 ```sh
 yarn create svelte myapp
@@ -210,8 +208,6 @@ yarn set version berry
 yarn install
 ```
 
-#### Yarn 3 global cache
-
 One of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file:
 
 ```yaml
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 370de13db6..c421a6bf66 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -1110,7 +1110,7 @@ type HandleClientError = (input: {
 
 ## HandleFetch
 
-The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during prerendering).
+The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) the result of an [`event.fetch`](/docs/kit/load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.
 
 <div class="ts-block">
 

From 48643d6490650270b47c82bf88136685a10ddd34 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 19 May 2025 16:36:55 -0400
Subject: [PATCH 442/453] Sync `svelte` docs (#1353)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/02-$state.md |  8 ++---
 .../svelte/03-template-syntax/09-@attach.md   | 35 +++++++++++++++++--
 .../98-reference/.generated/compile-errors.md | 34 +++++++++++++++++-
 .../svelte/98-reference/30-compiler-errors.md | 34 +++++++++++++++++-
 4 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index 9c849659d6..b3a2d0a3fe 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -68,16 +68,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -111,10 +110,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
index 4db1d043c2..f342945a8a 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
@@ -3,7 +3,9 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: {@attach ...}
 ---
 
-Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
+Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
+
+Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
 
 > [!NOTE]
 > Attachments are available in Svelte 5.29 and newer.
@@ -56,7 +58,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
 </button>
 ```
 
-Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
+Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
 
 ## Inline attachments
 
@@ -127,6 +129,35 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
 </Button>
 ```
 
+## Controlling when attachments re-run
+
+Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
+
+```js
+// @errors: 7006 2304 2552
+function foo(bar) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+		update(node, bar);
+	};
+}
+```
+
+In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
+
+```js
+// @errors: 7006 2304 2552
+function foo(+++getBar+++) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+
++++		$effect(() => {
+			update(node, getBar());
+		});+++
+	}
+}
+```
+
 ## Creating attachments programmatically
 
 To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
index e8669ead53..db848a0299 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
@@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
 This snippet is shadowing the prop `%prop%` with the same name
 ```
 
+### state_field_duplicate
+
+```
+`%name%` has already been declared on this class
+```
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+### state_field_invalid_assignment
+
+```
+Cannot assign to a state field before its declaration
+```
+
 ### state_invalid_export
 
 ```
@@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_placement
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 ```
 
 ### store_invalid_scoped_subscription
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index a2ebf53216..143137c77e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -851,6 +851,38 @@ Cannot reassign or bind to snippet parameter
 This snippet is shadowing the prop `%prop%` with the same name
 ```
 
+### state_field_duplicate
+
+```
+`%name%` has already been declared on this class
+```
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+### state_field_invalid_assignment
+
+```
+Cannot assign to a state field before its declaration
+```
+
 ### state_invalid_export
 
 ```
@@ -860,7 +892,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_placement
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 ```
 
 ### store_invalid_scoped_subscription

From 8c8603dce728e30ee64425a2626dd9df3bde88f4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 May 2025 09:17:16 -0400
Subject: [PATCH 443/453] barcelona blog post (#1355)

blog post
---
 .../blog/2025-05-21-svelte-summit-videos.md      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md

diff --git a/apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md b/apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md
new file mode 100644
index 0000000000..c0faa086e9
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md
@@ -0,0 +1,16 @@
+---
+title: 'Bringing Svelte Summit to the whole community'
+description: We're sponsoring the release of talks from Barcelona, starting this weekend
+author: The Svelte team
+authorURL: https://bsky.app/profile/svelte.dev
+---
+
+This month's [Svelte Summit](https://www.sveltesummit.com/) in Barcelona was a glorious celebration of the community. We had lively conversations, delightful dinners, and funny, imaginative and thought-provoking talks.
+
+For everyone who couldn't make it there in person, the conference also sold virtual tickets to the livestream, which give on-demand access to the talks. These ticket sales make it possible to (for example) hire AV technicians and ensure that the stream is reliable and high-quality. Running a conference is extremely difficult and time-consuming, and we're very grateful to [Svelte Society](https://bsky.app/profile/sveltesociety.dev) ([Kevin](https://bsky.app/profile/kevinak.se) in particular), [Mainmatter](https://mainmatter.com/), and everyone who bought a ticket for making the event a reality.
+
+But we've heard from many of you that the talks should be freely available so that they can be shared with the widest possible audience and... we agree!
+
+So the Svelte team has decided to sponsor the release of the talks, beginning this weekend. We're able to do this because of the generous financial support so many of you have given us via [opencollective.com/svelte](https://opencollective.com/svelte), which also funds important development work on the project.
+
+Subscribe to the [Svelte Society YouTube account](https://www.youtube.com/sveltesociety) to be the first to know when the videos are released.

From c60f4c3c838d2fd4a4ea6190be04df0462e5b95b Mon Sep 17 00:00:00 2001
From: Colin Caine <cmcaine@gmail.com>
Date: Thu, 22 May 2025 06:11:54 +0100
Subject: [PATCH 444/453] fix: repl: Always select a file when calling
 workspace.set() (#1297)

repl: Always select a file when calling workspace.set()

This might fix #1287, #868, etc.

Co-authored-by: Tee Ming <chewteeming01@gmail.com>
---
 packages/repl/src/lib/Workspace.svelte.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index 6b9d9f31fa..714f277a09 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -425,13 +425,9 @@ export class Workspace {
 			throw new Error('Workspace must have at least one file');
 		}
 
-		if (selected) {
-			const file = files.find((file) => is_file(file) && file.name === selected);
-
-			if (!file) {
-				throw new Error(`Invalid selection ${selected}`);
-			}
-			this.#select(file as File);
+		const matching_file = selected && files.find((file) => is_file(file) && file.name === selected);
+		if (matching_file) {
+			this.#select(matching_file as File);
 		} else {
 			this.#select(first);
 		}

From 0485be4f10f208aa0c45f838a99a05bcb10f9541 Mon Sep 17 00:00:00 2001
From: Em Zhan <zqianem@gmail.com>
Date: Thu, 22 May 2025 00:24:55 -0500
Subject: [PATCH 445/453] fix: prevent the tutorial erroring after navigating
 (#1352)

* Fix the tutorial erroring after navigating

The `Workspace.reset` method was changed in a non-backward compatible
way in commit eb1eb2b0fd, which caused the call in the tutorial pages
to not pass the proper value for the selected file. This was missed
because the tutorial page didn't use `PageProps` for typing.

* Remove unneeded type annotation

The language server infers this automatically, turns out

* Update +page.svelte

---------

Co-authored-by: Tee Ming <chewteeming01@gmail.com>
---
 .../src/routes/tutorial/[...slug]/+page.svelte         | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index ff5bdb9a5c..43ab180e64 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -15,13 +15,9 @@
 	import { page } from '$app/state';
 	import Controls from './Controls.svelte';
 	import Editor from '@sveltejs/repl/editor';
-	import type { Snapshot } from './$types.js';
+	import type { Snapshot, PageProps } from './$types.js';
 
-	interface Props {
-		data: any;
-	}
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	let path = data.exercise.path;
 	let show_editor = $state(false);
@@ -204,7 +200,7 @@
 			sidebar.scrollTop = 0;
 		}
 
-		workspace.reset(Object.values(a), data.exercise.focus);
+		workspace.reset(Object.values(a), { tailwind: false }, data.exercise.focus);
 
 		const will_delete = previous_files.some((file) => !(file.name in a));
 

From 3e917fb5d583e5e090656583f1f5072694542d15 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 23 May 2025 15:37:42 +0200
Subject: [PATCH 446/453] feat: add templating mode selector (#1214)

* feat: add templating mode selector

* Update packages/repl/src/lib/Output/Viewer.svelte

* fix: rename option and add version checking

* fix: revert version to fix link

* fix: update everything to latest

* chore: remove unused ignore

* fix: `html` default checked ad min height

* fix: also show option with `latest`

* tweak

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 apps/svelte.dev/package.json                  |   2 +-
 .../(authed)/playground/[id]/+page.svelte     |   3 +-
 .../playground/[id]/embed/+page.svelte        |   2 +-
 packages/repl/package.json                    |   2 +-
 .../src/lib/Output/CompilerOptions.svelte     |  34 ++-
 packages/repl/src/lib/Output/Output.svelte    |   2 +-
 packages/repl/src/lib/Repl.svelte             |   9 +-
 packages/repl/src/lib/Workspace.svelte.ts     |  11 +-
 .../repl/src/lib/workers/bundler/index.ts     |   9 +-
 .../repl/src/lib/workers/compiler/index.ts    |   9 +-
 packages/repl/src/lib/workers/workers.d.ts    |   1 +
 packages/site-kit/package.json                |   2 +-
 pnpm-lock.yaml                                | 235 ++++++++----------
 13 files changed, 177 insertions(+), 144 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 654248784a..eb6af456ca 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -72,7 +72,7 @@
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"sv": "^0.6.8",
-		"svelte": "5.23.0",
+		"svelte": "^5.33.0",
 		"svelte-check": "^4.1.1",
 		"svelte-preprocess": "^6.0.3",
 		"tiny-glob": "^0.2.9",
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 187436fd8f..134402a78e 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -21,8 +21,7 @@
 	let modified = $state(false);
 	let setting_hash: any = null;
 
-	// svelte-ignore non_reactive_update
-	let version = page.url.searchParams.get('version') || 'latest';
+	let version = $derived(page.url.searchParams.get('version') || 'latest');
 
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 0edfbedc7e..1f5a387bee 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -12,7 +12,7 @@
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
-	let version = page.url.searchParams.get('version') || 'latest';
+	let version = $derived(page.url.searchParams.get('version') || 'latest');
 
 	// TODO make this munging unnecessary
 	function munge(data: any): File {
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 8194c5372d..542602c38c 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -100,7 +100,7 @@
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.23.0",
+		"svelte": "5.33.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
 		"ts-blank-space": "^0.6.1",
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 99d9401d3e..84a8db39ca 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -1,6 +1,19 @@
 <script lang="ts">
 	import { Checkbox } from '@sveltejs/site-kit/components';
 	import type { Workspace } from '../Workspace.svelte';
+	import { get_repl_context } from '../../lib/context.js';
+
+	const { svelteVersion } = $derived(get_repl_context());
+
+	const is_fragments_available = $derived.by(() => {
+		const [major, minor] = svelteVersion.split('.');
+		// if the version is 5.33.0 or greater, fragments are available
+		if (+major >= 5 && +minor >= 33) {
+			return true;
+		}
+		// we assume they are available if work with local or latest
+		return svelteVersion === 'local' || svelteVersion === 'latest';
+	});
 
 	let { workspace }: { workspace: Workspace } = $props();
 </script>
@@ -24,6 +37,25 @@
 		{/each},
 	</div>
 
+	{#if is_fragments_available}
+		<div class="option">
+			<span class="key">fragments:</span>
+
+			{#each ['html', 'tree'] as const as fragments}
+				<input
+					id={fragments}
+					type="radio"
+					checked={(workspace.compiler_options.fragments ?? 'html') === fragments}
+					value={fragments}
+					onchange={() => {
+						workspace.update_compiler_options({ fragments });
+					}}
+				/>
+				<label for={fragments}><span class="string">"{fragments}"</span></label>
+			{/each},
+		</div>
+	{/if}
+
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
@@ -55,7 +87,7 @@
 
 	.key {
 		display: inline-block;
-		width: 6em;
+		width: 10em;
 	}
 
 	.string {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index bccdfc064b..82a1784d44 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -215,7 +215,7 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel min="-18rem" pos="-18rem" panel="Compiler options">
+		<PaneWithPanel min="-27rem" pos="-27rem" panel="Compiler options">
 			{#snippet main()}
 				<Editor workspace={js_workspace} />
 			{/snippet}
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 5843fedd65..2962b0867d 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -87,7 +87,8 @@
 
 	async function rebundle() {
 		bundler!.bundle(workspace.files as File[], {
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			fragments: workspace.compiler_options.fragments
 		});
 	}
 
@@ -139,7 +140,11 @@
 		bundler,
 		toggleable,
 		workspace,
-		svelteVersion
+		get svelteVersion() {
+			// we want this to be reactive since we are checking in
+			// the compiler options
+			return svelteVersion;
+		}
 	});
 
 	function before_unload(event: BeforeUnloadEvent) {
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index 714f277a09..4eb46e7ab5 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -94,6 +94,7 @@ export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
+	fragments: 'html' | 'tree' | undefined;
 }
 
 export class Workspace {
@@ -104,7 +105,10 @@ export class Workspace {
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
 		dev: false,
-		modernAst: true
+		modernAst: true,
+		// default to undefined so it's removed if the current version
+		// doesn't support it
+		fragments: undefined
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
@@ -455,6 +459,11 @@ export class Workspace {
 	update_compiler_options(options: Partial<ExposedCompilerOptions>) {
 		this.#compiler_options = { ...this.#compiler_options, ...options };
 		this.#reset_diagnostics();
+		for (let file of this.#files) {
+			if (is_file(file)) {
+				this.#onupdate(file);
+			}
+		}
 	}
 
 	update_file(file: File) {
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index eee445c075..aed968da13 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -307,7 +307,8 @@ async function get_bundle(
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: is_gt_5 ? 'client' : 'dom',
-					dev: true
+					dev: true,
+					fragments: options.fragments
 				};
 
 				if (is_gt_5) {
@@ -318,6 +319,12 @@ async function get_bundle(
 					compilerOptions.experimental = { async: true };
 				}
 
+				if (compilerOptions.fragments == null) {
+					// if fragments is not set it probably means we are using
+					// a version that doesn't support it, so we need to remove it
+					delete compilerOptions.fragments;
+				}
+
 				result = svelte.compile(code, compilerOptions);
 
 				walk(result.ast.html as import('svelte/compiler').AST.TemplateNode, null, {
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
index 89091f0236..2f553312d5 100644
--- a/packages/repl/src/lib/workers/compiler/index.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -58,7 +58,8 @@ addEventListener('message', async (event) => {
 						: 'ssr'
 					: options.generate,
 				dev: options.dev,
-				filename: file.name
+				filename: file.name,
+				fragments: options.fragments
 			};
 
 			if (!is_svelte_3_or_4) {
@@ -69,6 +70,12 @@ addEventListener('message', async (event) => {
 				compilerOptions.experimental = { async: true };
 			}
 
+			if (compilerOptions.fragments == null) {
+				// if fragments is not set it probably means we are using
+				// a version that doesn't support it, so we need to remove it
+				delete compilerOptions.fragments;
+			}
+
 			result = svelte.compile(file.contents, compilerOptions);
 		} else {
 			const compilerOptions: any = {
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index 700a43f04d..e9f0d28975 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -52,6 +52,7 @@ export interface MigrateOutput {
 export interface BundleOptions {
 	tailwind?: boolean;
 	runes?: boolean;
+	fragments?: 'html' | 'tree';
 }
 
 export type BundleMessageData = {
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 6885952bae..5a1bcd3f47 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -53,7 +53,7 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "5.23.0",
+		"svelte": "5.33.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d5d55e258..7fb4b46b73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,10 +28,10 @@ importers:
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
         specifier: ^2.0.0
-        version: 2.0.0(svelte@5.23.0)
+        version: 2.0.0(svelte@5.33.0)
       '@sveltejs/amp':
         specifier: ^1.1.4
-        version: 1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -40,7 +40,7 @@ importers:
         version: 10.4.0
       '@testing-library/svelte':
         specifier: ^5.2.3
-        version: 5.2.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 5.2.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -52,7 +52,7 @@ importers:
         version: 1.3.2
       '@vercel/speed-insights':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)
+        version: 1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -113,19 +113,19 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.7.0
-        version: 5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
+        version: 5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)
       '@sveltejs/enhanced-img':
         specifier: ^0.4.3
-        version: 0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 0.4.3(rollup@4.21.2)(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
         specifier: ^2.20.0
-        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.3
-        version: 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -167,7 +167,7 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.33.0)
       satori:
         specifier: ^0.10.13
         version: 0.10.13
@@ -178,14 +178,14 @@ importers:
         specifier: ^0.6.8
         version: 0.6.8
       svelte:
-        specifier: 5.23.0
-        version: 5.23.0
+        specifier: ^5.33.0
+        version: 5.33.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.33.0)(typescript@5.8.2)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(postcss@8.4.45)(svelte@5.23.0)(typescript@5.5.4)
+        version: 6.0.3(postcss@8.4.45)(svelte@5.33.0)(typescript@5.8.2)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -194,7 +194,7 @@ importers:
         version: 4.19.0
       typescript:
         specifier: ^5.5.4
-        version: 5.5.4
+        version: 5.8.2
       vite:
         specifier: ^5.4.11
         version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -253,7 +253,7 @@ importers:
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
         specifier: ^2.0.0
-        version: 2.0.0(svelte@5.23.0)
+        version: 2.0.0(svelte@5.33.0)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -262,19 +262,19 @@ importers:
         version: link:../site-kit
       '@sveltejs/svelte-json-tree':
         specifier: ^2.2.1
-        version: 2.2.1(svelte@5.23.0)
+        version: 2.2.1(svelte@5.33.0)
       acorn:
         specifier: ^8.11.3
-        version: 8.14.0
+        version: 8.14.1
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.2)
       esm-env:
         specifier: ^1.0.0
-        version: 1.2.1
+        version: 1.2.2
       esrap:
         specifier: ^1.2.2
-        version: 1.2.3
+        version: 1.4.6
       icons:
         specifier: workspace:*
         version: link:../icons
@@ -288,8 +288,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: 5.23.0
-        version: 5.23.0
+        specifier: 5.33.0
+        version: 5.33.0
       tailwindcss:
         specifier: ^4.0.15
         version: 4.0.15
@@ -308,16 +308,16 @@ importers:
         version: 1.2.2
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/kit':
         specifier: ^2.20.0
-        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/package':
         specifier: ^2.0.0
-        version: 2.3.1(svelte@5.23.0)(typescript@5.5.4)
+        version: 2.3.1(svelte@5.33.0)(typescript@5.8.2)
       '@sveltejs/vite-plugin-svelte':
         specifier: 4.0.0
-        version: 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.6
@@ -326,16 +326,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.33.0)
       publint:
         specifier: ^0.2.12
         version: 0.2.12
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.33.0)(typescript@5.8.2)
       typescript:
         specifier: ^5.5.4
-        version: 5.5.4
+        version: 5.8.2
       vite:
         specifier: ^5.4.3
         version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -398,10 +398,10 @@ importers:
         version: 3.2.1
       '@shikijs/twoslash':
         specifier: ^3.2.1
-        version: 3.2.1(typescript@5.5.4)
+        version: 3.2.1(typescript@5.8.2)
       esm-env:
         specifier: ^1.0.0
-        version: 1.2.1
+        version: 1.2.2
       icons:
         specifier: workspace:*
         version: link:../icons
@@ -414,7 +414,7 @@ importers:
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.20.0
-        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+        version: 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/node':
         specifier: ^20.12.11
         version: 20.14.2
@@ -432,16 +432,16 @@ importers:
         version: 3.3.2
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.3.2)(svelte@5.23.0)
+        version: 3.3.2(prettier@3.3.2)(svelte@5.33.0)
       svelte:
-        specifier: 5.23.0
-        version: 5.23.0
+        specifier: 5.33.0
+        version: 5.33.0
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.33.0)(typescript@5.8.2)
       typescript:
         specifier: ^5.5.4
-        version: 5.5.4
+        version: 5.8.2
       vite:
         specifier: ^5.4.3
         version: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -1759,11 +1759,6 @@ packages:
     peerDependencies:
       acorn: ^8
 
-  acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.14.1:
     resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
     engines: {node: '>=0.4.0'}
@@ -2134,9 +2129,6 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
-  esm-env@1.2.1:
-    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
-
   esm-env@1.2.2:
     resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
 
@@ -2145,11 +2137,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esrap@1.2.3:
-    resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
-
-  esrap@1.4.5:
-    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+  esrap@1.4.6:
+    resolution: {integrity: sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==}
 
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
@@ -3007,8 +2996,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.23.0:
-    resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
+  svelte@5.33.0:
+    resolution: {integrity: sha512-COPJa+cxefgDShgTr3vcLKXdyBfuE96Z65D/EsuxDcU3fwqBxAN6bVjZ0LoVYyAYAShu4K96/k9BxxlAVO6fpg==}
     engines: {node: '>=18'}
 
   tailwindcss@4.0.15:
@@ -3098,11 +3087,6 @@ packages:
     peerDependencies:
       typescript: ^5.5.0
 
-  typescript@5.5.4:
-    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@5.8.2:
     resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
     engines: {node: '>=14.17'}
@@ -4240,9 +4224,9 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.23.0)':
+  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.33.0)':
     dependencies:
-      svelte: 5.23.0
+      svelte: 5.33.0
 
   '@rollup/browser@4.17.2':
     dependencies:
@@ -4330,12 +4314,12 @@ snapshots:
     dependencies:
       '@shikijs/types': 3.2.1
 
-  '@shikijs/twoslash@3.2.1(typescript@5.5.4)':
+  '@shikijs/twoslash@3.2.1(typescript@5.8.2)':
     dependencies:
       '@shikijs/core': 3.2.1
       '@shikijs/types': 3.2.1
-      twoslash: 0.3.1(typescript@5.5.4)
-      typescript: 5.5.4
+      twoslash: 0.3.1(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -4397,14 +4381,14 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
+  '@sveltejs/adapter-vercel@5.7.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(rollup@4.21.2)':
     dependencies:
-      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.29.2(rollup@4.21.2)
       esbuild: 0.24.0
     transitivePeerDependencies:
@@ -4412,25 +4396,25 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
 
-  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/enhanced-img@0.4.3(rollup@4.21.2)(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       magic-string: 0.30.12
       sharp: 0.33.5
-      svelte: 5.23.0
-      svelte-parse-markup: 0.1.5(svelte@5.23.0)
+      svelte: 5.33.0
+      svelte-parse-markup: 0.1.5(svelte@5.33.0)
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vite-imagetools: 7.0.4(rollup@4.21.2)
       zimmerframe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4442,12 +4426,12 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4459,63 +4443,63 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/package@2.3.1(svelte@5.23.0)(typescript@5.5.4)':
+  '@sveltejs/package@2.3.1(svelte@5.33.0)(typescript@5.8.2)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 5.23.0
-      svelte2tsx: 0.7.8(svelte@5.23.0)(typescript@5.5.4)
+      svelte: 5.33.0
+      svelte2tsx: 0.7.8(svelte@5.33.0)(typescript@5.8.2)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.23.0)':
+  '@sveltejs/svelte-json-tree@2.2.1(svelte@5.33.0)':
     dependencies:
-      svelte: 5.23.0
+      svelte: 5.33.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 5.23.0
+      svelte: 5.33.0
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitefu: 1.0.3(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
     transitivePeerDependencies:
@@ -4532,10 +4516,10 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@testing-library/svelte@5.2.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))(vitest@2.1.9(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.23.0
+      svelte: 5.33.0
     optionalDependencies:
       vite: 5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)
       vitest: 2.1.9(@types/node@20.14.2)(lightningcss@1.25.1)
@@ -4584,10 +4568,10 @@ snapshots:
     dependencies:
       '@types/node': 20.14.2
 
-  '@typescript/vfs@1.6.1(typescript@5.5.4)':
+  '@typescript/vfs@1.6.1(typescript@5.8.2)':
     dependencies:
       debug: 4.4.0
-      typescript: 5.5.4
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -4616,10 +4600,10 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)':
+  '@vercel/speed-insights@1.1.0(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)':
     optionalDependencies:
-      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
-      svelte: 5.23.0
+      '@sveltejs/kit': 2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.33.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))
+      svelte: 5.33.0
 
   '@vitest/expect@2.1.9':
     dependencies:
@@ -4669,8 +4653,6 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  acorn@8.14.0: {}
-
   acorn@8.14.1: {}
 
   adm-zip@0.5.14: {}
@@ -5039,18 +5021,11 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
-  esm-env@1.2.1: {}
-
   esm-env@1.2.2: {}
 
   esprima@4.0.1: {}
 
-  esrap@1.2.3:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-
-  esrap@1.4.5:
+  esrap@1.4.6:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -5597,10 +5572,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  prettier-plugin-svelte@3.3.2(prettier@3.3.2)(svelte@5.23.0):
+  prettier-plugin-svelte@3.3.2(prettier@3.3.2)(svelte@5.33.0):
     dependencies:
       prettier: 3.3.2
-      svelte: 5.23.0
+      svelte: 5.33.0
 
   prettier@2.8.8: {}
 
@@ -5854,37 +5829,37 @@ snapshots:
 
   sv@0.6.8: {}
 
-  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.5.4):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.33.0)(typescript@5.8.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.23.0
-      typescript: 5.5.4
+      svelte: 5.33.0
+      typescript: 5.8.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte-parse-markup@0.1.5(svelte@5.23.0):
+  svelte-parse-markup@0.1.5(svelte@5.33.0):
     dependencies:
-      svelte: 5.23.0
+      svelte: 5.33.0
 
-  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.23.0)(typescript@5.5.4):
+  svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.33.0)(typescript@5.8.2):
     dependencies:
-      svelte: 5.23.0
+      svelte: 5.33.0
     optionalDependencies:
       postcss: 8.4.45
-      typescript: 5.5.4
+      typescript: 5.8.2
 
-  svelte2tsx@0.7.8(svelte@5.23.0)(typescript@5.5.4):
+  svelte2tsx@0.7.8(svelte@5.33.0)(typescript@5.8.2):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.23.0
-      typescript: 5.5.4
+      svelte: 5.33.0
+      typescript: 5.8.2
 
-  svelte@5.23.0:
+  svelte@5.33.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -5894,8 +5869,8 @@ snapshots:
       aria-query: 5.3.2
       axobject-query: 4.1.0
       clsx: 2.1.1
-      esm-env: 1.2.1
-      esrap: 1.4.5
+      esm-env: 1.2.2
+      esrap: 1.4.6
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.12
@@ -5973,16 +5948,14 @@ snapshots:
 
   twoslash-protocol@0.3.1: {}
 
-  twoslash@0.3.1(typescript@5.5.4):
+  twoslash@0.3.1(typescript@5.8.2):
     dependencies:
-      '@typescript/vfs': 1.6.1(typescript@5.5.4)
+      '@typescript/vfs': 1.6.1(typescript@5.8.2)
       twoslash-protocol: 0.3.1
-      typescript: 5.5.4
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.5.4: {}
-
   typescript@5.8.2: {}
 
   ultrahtml@1.5.3: {}

From 84577253bd214c81fb3ef8628f12493c95250c55 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 May 2025 09:42:10 -0400
Subject: [PATCH 447/453] Sync `svelte` docs (#1354)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/02-runes/02-$state.md | 10 ++--
 .../svelte/03-template-syntax/09-@attach.md   |  4 ++
 .../docs/svelte/03-template-syntax/12-bind.md | 19 ++++----
 .../.generated/client-warnings.md             | 13 +++++
 .../.generated/compile-warnings.md            | 19 ++++++++
 .../98-reference/21-svelte-attachments.md     | 48 ++++++++++++++++++-
 .../svelte/98-reference/21-svelte-compiler.md | 22 +++++++++
 .../98-reference/30-compiler-warnings.md      | 19 ++++++++
 .../98-reference/30-runtime-warnings.md       | 13 +++++
 9 files changed, 153 insertions(+), 14 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
index b3a2d0a3fe..510a850b6f 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -21,9 +21,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
-
-State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this...
 
 ```js
 let todos = $state([
@@ -68,7 +66,7 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
+Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
@@ -122,6 +120,8 @@ class Todo {
 }
 ```
 
+> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+
 ## `$state.raw`
 
 In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@@ -146,6 +146,8 @@ person = {
 
 This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
+As with `$state`, you can declare class fields using `$state.raw`.
+
 ## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
index f342945a8a..47939d6375 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
@@ -161,3 +161,7 @@ function foo(+++getBar+++) {
 ## Creating attachments programmatically
 
 To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
+
+## Converting actions to attachments
+
+If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
index 1922ef72b7..e421b6ead4 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
@@ -143,26 +143,27 @@ Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs
 
 ## `<input bind:group>`
 
-Inputs that work together can use `bind:group`.
+Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):
 
 ```svelte
+<!--- file: BurritoChooser.svelte --->
 <script>
 	let tortilla = $state('Plain');
 
-	/** @type {Array<string>} */
+	/** @type {string[]} */
 	let fillings = $state([]);
 </script>
 
 <!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain" />
-<input type="radio" bind:group={tortilla} value="Whole wheat" />
-<input type="radio" bind:group={tortilla} value="Spinach" />
+<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>
 
 <!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice" />
-<input type="checkbox" bind:group={fillings} value="Beans" />
-<input type="checkbox" bind:group={fillings} value="Cheese" />
-<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
 ```
 
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
index 77d1df4cdd..fe90b0db38 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
@@ -200,6 +200,19 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+### select_multiple_invalid_value
+
+```
+The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+```
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index 7069f90206..b579d38602 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -632,6 +632,25 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### element_implicitly_closed
+
+```
+This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+```
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ### element_invalid_self_closing_tag
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md
index 68fae2cb1b..497ae3a329 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md
@@ -7,7 +7,7 @@ title: svelte/attachments
 
 ```js
 // @noErrors
-import { createAttachmentKey } from 'svelte/attachments';
+import { createAttachmentKey, fromAction } from 'svelte/attachments';
 ```
 
 ## createAttachmentKey
@@ -48,6 +48,52 @@ function createAttachmentKey(): symbol;
 
 
 
+## fromAction
+
+Converts an [action](/docs/svelte/use) into an [attachment](/docs/svelte/@attach) keeping the same behavior.
+It's useful if you want to start using attachments on components but you have actions provided by a library.
+
+Note that the second argument, if provided, must be a function that _returns_ the argument to the
+action function, not the argument itself.
+
+```svelte
+<!-- with an action -->
+<div use:foo={bar}>...</div>
+
+<!-- with an attachment -->
+<div {@attach fromAction(foo, () => bar)}>...</div>
+```
+
+<div class="ts-block">
+
+```dts
+function fromAction<
+	E extends EventTarget,
+	T extends unknown
+>(
+	action:
+		| Action<E, T>
+		| ((element: E, arg: T) => void | ActionReturn<T>),
+	fn: () => T
+): Attachment<E>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function fromAction<E extends EventTarget>(
+	action:
+		| Action<E, void>
+		| ((element: E) => void | ActionReturn<void>)
+): Attachment<E>;
+```
+
+</div>
+
+
+
 ## Attachment
 
 An [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index 40105c0d16..a5976516d2 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -811,6 +811,28 @@ If `true`, whitespace inside and between elements is kept as you typed it, rathe
 
 <div class="ts-block-property">
 
+```dts
+fragments?: 'html' | 'tree';
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag">default</span> `'html'`
+
+</div>
+
+Which strategy to use when cloning DOM fragments:
+
+- `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+- `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+
+</div>
+</div>
+
+<div class="ts-block-property">
+
 ```dts
 runes?: boolean | undefined;
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 6314ffd30d..0e18ba7d43 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -653,6 +653,25 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### element_implicitly_closed
+
+```
+This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+```
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ### element_invalid_self_closing_tag
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 8554eb52d5..5a0b6b9488 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -207,6 +207,19 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+### select_multiple_invalid_value
+
+```
+The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+```
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ### state_proxy_equality_mismatch
 
 ```

From c083f279cc49a7cd4f84ef5faf749c041c26f6d5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 May 2025 10:08:11 -0400
Subject: [PATCH 448/453] Sync `kit` docs (#1357)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/25-build-and-deploy/90-adapter-vercel.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
index af9d3ab4f6..732a784d92 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
@@ -173,9 +173,9 @@ Since all of these variables are unchanged between build time and run time when
 
 ## Skew protection
 
-When a new version of your app is deployed, assets belonging to the previous version may no longer be accessible. If a user is actively using your app when this happens, it can cause errors when they navigate — this is known as _version skew_. SvelteKit mitigates this by detecting errors resulting from version skew and causing a hard reload to get the latest version of the app, but this will cause any client-side state to be lost. (You can also proactively mitigate it by observing the [`updated`]($app-stores#updated) store value, which tells clients when a new version has been deployed.)
+When a new version of your app is deployed, assets belonging to the previous version may no longer be accessible. If a user is actively using your app when this happens, it can cause errors when they navigate — this is known as _version skew_. SvelteKit mitigates this by detecting errors resulting from version skew and causing a hard reload to get the latest version of the app, but this will cause any client-side state to be lost. (You can also proactively mitigate it by observing [`updated.current`]($app-state#updated) from `$app/state`, which tells clients when a new version has been deployed.)
 
-[Skew protection](https://vercel.com/docs/deployments/skew-protection) is a Vercel feature that routes client requests to their original deployment. When a user visits your app, a cookie is set with the deployment ID, and any subsequent requests will be routed to that deployment for as long as skew protection is active. When they reload the page, they will get the newest deployment. (The `updated` store is exempted from this behaviour, and so will continue to report new deployments.) To enable it, visit the Advanced section of your project settings on Vercel.
+[Skew protection](https://vercel.com/docs/deployments/skew-protection) is a Vercel feature that routes client requests to their original deployment. When a user visits your app, a cookie is set with the deployment ID, and any subsequent requests will be routed to that deployment for as long as skew protection is active. When they reload the page, they will get the newest deployment. (`updated.current` is exempted from this behaviour, and so will continue to report new deployments.) To enable it, visit the Advanced section of your project settings on Vercel.
 
 Cookie-based skew protection comes with one caveat: if a user has multiple versions of your app open in multiple tabs, requests from older versions will be routed to the newer one, meaning they will fall back to SvelteKit's built-in skew protection.
 

From af65482f6b13dff8fe77f3c06cf998b2c0863cda Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 May 2025 10:09:05 -0400
Subject: [PATCH 449/453] Sync `svelte` docs (#1359)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/98-reference/21-svelte-compiler.md       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
index a5976516d2..7910930f91 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
@@ -820,6 +820,7 @@ fragments?: 'html' | 'tree';
 <div class="ts-block-property-bullets">
 
 - <span class="tag">default</span> `'html'`
+- <span class="tag since">available since</span> v5.33
 
 </div>
 

From 5eb533819038e8ca0e797d9f6454a891a664f1a8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 08:06:23 -0400
Subject: [PATCH 450/453] Sync `svelte` docs (#1360)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../docs/svelte/02-runes/04-$effect.md        | 24 +++++++------------
 .../docs/svelte/03-template-syntax/12-bind.md |  2 +-
 .../05-special-elements/04-svelte-body.md     |  2 +-
 .../docs/svelte/07-misc/04-custom-elements.md |  2 ++
 .../.generated/compile-warnings.md            |  6 +++++
 .../98-reference/30-compiler-warnings.md      |  6 +++++
 6 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
index 4ef2f23275..926d30a867 100644
--- a/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
+++ b/apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md
@@ -270,11 +270,11 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 If you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.
 
-You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAAE5WRTWrDMBCFryKGLBJoY3fRjWIHeoiu6i6UZBwEY0VE49TB-O6VxrFTSih0qe_Ne_OjHpxpEDS8O7ZMeIAnqC1hAP3RA1990hKI_Fb55v06XJA4sZ0J-IjvT47RcYyBIuzP1vO2chVHHFjxiQ2pUr3k-SZRQlbBx_LIFoEN4zJfzQph_UMQr4hRXmBd456Xy5Uqt6pPKHmkfmzyPAZL2PCnbRpg8qWYu63I7lu4gswOSRYqrPNt3CgeqqzgbNwRK1A76w76YqjFspfcQTWmK3vJHlQm1puSTVSeqdOc_r9GaeCHfUSY26TXry6Br4RSK3C6yMEGT-aqVU3YbUZ2NF6rfP2KzXgbuYzY46czdgyazy0On_FlLH3F-UDXhgIO35UGlA1rAgAA)):
 
 ```svelte
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
 	let left = $state(total);
 
@@ -298,32 +298,26 @@ You might be tempted to do something convoluted with effects to link one value t
 </label>
 ```
 
-Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51SsW6DMBT8FcvqABINdOhCIFKXTt06lg4GHpElYyz8iECIf69tcIIipo6-u3f3fPZMJWuBpvRzkBXyTpKSy5rLq6YRbbgATdOfmeKkrMgCBt9GPpQ66RsItFjJNBzhVScRJBobmumq5wovhSxQABLskAmSk7ckOXtMKyM22ItGhhAk4Z0R0OwIN-tIQzd-90HVhvy2HsGNiQFCMltBgd7XoecV2xzXNV7XaEcth7ZfRv7kujnsTX2Qd7USb5rFjwZkJlgJwpWRcakG04cpOS9oz-QVCuoeInXW-RyEJL-sG0b7Wy6kZWM-u7CFxM5tdrIl9qg72vB74H-y7T2iXROHyVb0CLanp1yNk4D1A1jQ91hzrQSbUtIIGLcir0ylJDm9Q7urz42bX4UwIk2xH2D5Xf4A7SeMcMQCAAA=)):
+Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE5VRvW7CMBB-FcvqECQK6dDFJEgsnfoGTQdDLsjSxVjxhYKivHvPBwFUsXS8774_nwftbQva6I_e78gdvNo6Xzu_j3quG4cQtfkaNJ1DIiWA8atkE8IiHgEpYVsb4Rm-O3gCT2yji7jrXKB15StiOJKiA1lUpXrL81VCEUjFwHTGXiJZgiyf3TYIjSxq6NwR6uyifr0ohMbEZnpHH2rWf7ImS8KZGtK6osl_UqelRIyVL5b3ir5AuwWUtoXzoee6fIWy0p31e6i0XMocLfZQDuI6qtaeykGcR7UU6XWznFAZU9LN_X9B2UyVayk9f3ji0-REugen6U9upDOCcAWcLlS7GNCejWoQTqsLtrfBqHzxDu3DrUTOf0xwIm2o62H85sk6_OHG2jQWI4y_3byXXGMCAAA=)):
 
 ```svelte
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
-	let left = $state(total);
-
-	function updateSpent(value) {
-		spent = value;
-		left = total - spent;
-	}
+	let left = $derived(total - spent);
 
-	function updateLeft(value) {
-		left = value;
++++	function updateLeft(left) {
 		spent = total - left;
-	}
+	}+++
 </script>
 
 <label>
-	<input type="range" bind:value={() => spent, updateSpent} max={total} />
+	<input type="range" bind:value={spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={() => left, updateLeft} max={total} />
+	<input type="range" +++bind:value={() => left, updateLeft}+++ max={total} />
 	{left}/{total} left
 </label>
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
index e421b6ead4..a20abc02a3 100644
--- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
+++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/12-bind.md
@@ -5,7 +5,7 @@ title: bind:
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
 
-The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
 
 <!-- prettier-ignore -->
 ```svelte
diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
index 3bd960d450..0d3e51166f 100644
--- a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
+++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md
@@ -9,7 +9,7 @@ title: <svelte:body>
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.
 
-As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
+As with `<svelte:window>` and `<svelte:document>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```svelte
 <svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
index 0efc26f5bc..d744599914 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md
@@ -115,6 +115,8 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
+> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang="ts"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.
+
 ## Caveats and limitations
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index b579d38602..2af9021a6a 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -632,6 +632,12 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### custom_element_props_identifier
+
+```
+Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+```
+
 ### element_implicitly_closed
 
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 0e18ba7d43..92b38ddd9e 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -653,6 +653,12 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### custom_element_props_identifier
+
+```
+Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+```
+
 ### element_implicitly_closed
 
 ```

From 4bacd2874f578baa0bf14501720e25ea1622e185 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 08:06:38 -0400
Subject: [PATCH 451/453] Sync `kit` docs (#1362)

sync kit docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/kit/10-getting-started/25-project-types.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md b/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md
index 50a2d99c97..ec3bdcc0b5 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/25-project-types.md
@@ -49,7 +49,7 @@ You can create a library to be used by other Svelte apps with the [`@sveltejs/pa
 
 ## Offline app
 
-SvelteKit has full suppport for [service workers](service-workers) allowing you to build many types of applications such as offline apps and [progressive web apps](glossary#PWA).
+SvelteKit has full support for [service workers](service-workers) allowing you to build many types of applications such as offline apps and [progressive web apps](glossary#PWA).
 
 ## Mobile app
 

From 8f8435071c7cada0b7a52d9eb72eee5b899e9abf Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani@equall.ai>
Date: Mon, 2 Jun 2025 09:38:11 -0600
Subject: [PATCH 452/453] docs: "What's new in Svelte" June newsletter (#1361)

* June first draft

* address PR feedback

* Update apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md

* prettier

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...025-06-01-whats-new-in-svelte-june-2025.md | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md

diff --git a/apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md b/apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md
new file mode 100644
index 0000000000..87fc1b05f9
--- /dev/null
+++ b/apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md
@@ -0,0 +1,81 @@
+---
+title: "What's new in Svelte: June 2025"
+description: 'Attachments are the new actions, plus better snippets and classes'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments.
+
+This month, we'll share a bit about the new API along with a huge showcase of apps/sites built with Svelte...
+
+Let's dive in!
+
+## What's new in Svelte and SvelteKit
+
+- Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR ([#1500](https://github.com/sveltejs/svelte/pull/15000)) or in the [Svelte docs](https://svelte.dev/docs/svelte/@attach) (**svelte@5.29.0**, **language-tools@109.7.0**)
+- Do you have actions you love and want to use them as attachments? The `fromAction` utility lets you convert actions into attachments (**svelte@5.32.0**, [#15933](https://github.com/sveltejs/svelte/pull/15933))
+- Generics are now allowed on snippets - improving typing and type hints (**svelte@5.30.0**, **language-tools@109.8.0**, [#15915](https://github.com/sveltejs/svelte/pull/15915))
+- The Svelte extension will now allow you to add missing imports on save (**language-tools@109.6.0**, [#2744](https://github.com/sveltejs/language-tools/pull/2744))
+- State fields can now be declared inside class constructors (**svelte@5.31.0**, [#15820](https://github.com/sveltejs/svelte/pull/15820))
+- Svelte is now XHTML compliant and the new `fragments: 'html' | 'tree'` option adds wider CSP compliance (**svelte@5.33.0**, [#15538](https://github.com/sveltejs/svelte/pull/15538))
+- Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (**kit@2.21.0**, [#13684](https://github.com/sveltejs/kit/pull/13684))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Whimsy](https://whimsy.rocks/) is a small game engine and a fantasy console for making interactive stories
+- [DASHBOT](https://dashbot.jianong.me/) is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes
+- [Kraa](https://kraa.io/) is a web-based markdown editor that does things a little differently
+- [Shovel AI](https://www.shovel-ai.com/) is a batch tool for interacting with large amounts of a text data with AI models
+- [md.uy](https://md.uy/) is a collaborative, local-first, peer-to-peer markdown editor
+- [BringYourAI](https://bringyourai.com/) is a browser extension that provides instant codebase context on any AI chat website
+- [Joe Malatesta](https://www.joemmalatesta.com/film) figured out a way to present his film photos in a digital environment
+- [Notion Avatar](https://notion-avatar-svelte.vercel.app/) is a Notion-style avatar editor with Svelte 5 Runes
+- [ORBITS](https://www.orbits.so/) is your second brain for who you know and who you meet
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- In case you missed it, [all the videos from Svelte Summit](https://www.youtube.com/playlist?list=PL8bMgX1kyZThKy_B41FQHk_xsHMQouV1Z) are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month's [blog post](https://svelte.dev/blog/svelte-summit-videos)
+- [Svelte Attachments Are Here And They're Awesome](https://www.youtube.com/watch?v=9PREEREiPAE) by Joy of Code
+- [SvelteBench](https://khromov.github.io/svelte-bench/benchmark-results-merged.html) (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic's new Claude 4 models
+- [First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works!](https://www.youtube.com/watch?v=FRcOen6JuJc) by Stanislav Khromov (video)
+- [Truly Native Apps with Svelte?](https://mainmatter.com/blog/2025/05/22/native-apps-with-svelte/) by Paolo Ricciuti
+
+_This Week in Svelte_
+
+- [Ep. 102](https://www.youtube.com/watch?v=frp8BXlBAZY) — Svelte+Lynx and Async Svelte
+- [Ep. 103](https://www.youtube.com/watch?v=P3Ldkuksqu0) — Attachments
+- [Ep. 104](https://www.youtube.com/watch?v=txM-BCrZcbc) — Skeleton v3.0
+- [Ep. 105](https://www.youtube.com/watch?v=Tiq0wivUNAE) — Changelog
+
+_To Watch/Read_
+
+- [Svelte's Next Big Change? (server components soon?)](https://www.youtube.com/watch?v=nQB9iRijqBY) by Better Stack
+- [I spent some time using Better-Auth and Polar with SvelteKit and this is what I think](https://www.reddit.com/r/sveltejs/comments/1kaiwkk/i_spent_some_time_using_betterauth_and_polar_with/) by elansx
+- [Building md.uy - Peer-to-Peer Markdown Editor](https://mr19.xyz/blog/md-uy/) by mateor
+
+### Libraries, Tools & Components
+
+- [Bits UI v2 released](https://www.bits-ui.com) - with support for attachments, `$props.id()`, Shadow DOM, and more
+- [Composably](https://github.com/kompismoln/composably) is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time
+- [Svelte Flow is now 1.0](https://svelteflow.dev/) - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better
+- [fox ui](https://flo-bit.dev/ui-kit/) is a collection UI components built with Tailwind 4 and Svelte 5 - now with a [rich text editor](https://www.reddit.com/r/sveltejs/comments/1kjwuci/currently_building_a_svelte_rich_text_editor_on/)
+- [fluid-dnd](https://github.com/carlosjorger/fluid-dnd) is a drag and drop library for Vue, React and Svelte
+- [sveltekit-password-protect](https://github.com/humanshield-sidepack/sveltekit-password-protect) is a simple utility to add a layer of protection to your websites
+- [sveltekit-image-optimize](https://github.com/humanshield-sidepack/sveltekit-image-optimize) is a simple utility that helps you create an endpoint of your svelte app that optimizes your images
+- [svelte-inspect-value@0.7.0 introduces Panels](https://inspect.eirik.space/reference/panel) - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website
+- [nuqs-svelte](https://github.com/rtrampox/nuqs-svelte) is an unnoficial Svelte port of nuqs library - a type-safe search params state manager
+- [sv-router](https://sv-router.vercel.app/) is a type-safe SPA router with file-based or code-based routing
+- [svelte-textcircle](https://github.com/LoStis-World/svelte-textcircle) displays text in a circular layout with customizable animations and styling
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

From ec7aae44c8481617daf9e7520567e3565f6169d4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:35:37 -0400
Subject: [PATCH 453/453] Sync `svelte` docs (#1370)

sync svelte docs

Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
---
 .../content/docs/svelte/07-misc/07-v5-migration-guide.md      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
index 20b9326bd7..07b1838fbb 100644
--- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -834,9 +834,9 @@ Svelte 5 is more strict about the HTML structure and will throw a compiler error
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### :is(...) and :where(...) are scoped
+### :is(...), :has(...), and :where(...) are scoped
 
-Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+Previously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.
 
 When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors: