diff --git a/.changeset/orange-wasps-visit.md b/.changeset/orange-wasps-visit.md
new file mode 100644
index 0000000000..972ff636b8
--- /dev/null
+++ b/.changeset/orange-wasps-visit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't swallow `DOMException` when `media.play()` fails in `bind:paused`
diff --git a/.changeset/smooth-comics-shine.md b/.changeset/smooth-comics-shine.md
deleted file mode 100644
index 4bf26ed9f1..0000000000
--- a/.changeset/smooth-comics-shine.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly print `!doctype` during `print`
diff --git a/.changeset/wild-dolls-hang.md b/.changeset/wild-dolls-hang.md
new file mode 100644
index 0000000000..a7b3436d69
--- /dev/null
+++ b/.changeset/wild-dolls-hang.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reduce if block nesting
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 51408fc8cc..23d814d527 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -32,9 +32,9 @@ jobs:
             os: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
           cache: pnpm
@@ -48,9 +48,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: pnpm
@@ -65,9 +65,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: pnpm
@@ -82,11 +82,11 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 24
           cache: pnpm
       - name: install
         run: pnpm install --frozen-lockfile
@@ -103,9 +103,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 18
           cache: pnpm
diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
deleted file mode 100644
index 8bf13bb8f1..0000000000
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ /dev/null
@@ -1,115 +0,0 @@
-name: Update pkg.pr.new comment
-
-on:
-  workflow_run:
-    workflows: ['Publish Any Commit']
-    types:
-      - completed
-
-permissions:
-  pull-requests: write
-
-jobs:
-  build:
-    name: 'Update comment'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: output
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-
-      - run: ls -R .
-      - name: 'Post or update comment'
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
-
-            const bot_comment_identifier = `<!-- pkg.pr.new comment -->`;
-
-            const body = (number) => `${bot_comment_identifier}
-
-            [Playground](https://svelte.dev/playground?version=pr-${number})
-
-            \`\`\`
-            ${output.packages.map((p) => `pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n')}
-            \`\`\`
-            `;
-
-            async function find_bot_comment(issue_number) {
-              if (!issue_number) return null;
-              const comments = await github.rest.issues.listComments({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: issue_number,
-              });
-              return comments.data.find((comment) =>
-                comment.body.includes(bot_comment_identifier)
-              );
-            }
-
-            async function create_or_update_comment(issue_number) {
-              if (!issue_number) {
-                console.log('No issue number provided. Cannot post or update comment.');
-                return;
-              }
-
-              const existing_comment = await find_bot_comment(issue_number);
-              if (existing_comment) {
-                await github.rest.issues.updateComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  comment_id: existing_comment.id,
-                  body: body(issue_number),
-                });
-              } else {
-                await github.rest.issues.createComment({
-                  issue_number: issue_number,
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  body: body(issue_number),
-                });
-              }
-            }
-
-            async function log_publish_info() {
-              const svelte_package = output.packages.find(p => p.name === 'svelte');
-              const svelte_sha = svelte_package.url.replace(/^.+@([^@]+)$/, '$1');
-              console.log('\n' + '='.repeat(50));
-              console.log('Publish Information');
-              console.log('='.repeat(50));
-              console.log('\nPublished Packages:');
-              console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.url.replace(/^.+@([^@]+)$/, '$1')}`).join('\n'));
-              if(svelte_sha){
-                console.log('\nPlayground URL:');
-                console.log(`\nhttps://svelte.dev/playground?version=commit-${svelte_sha}`)
-              }
-              console.log('\n' + '='.repeat(50));
-            }
-
-            if (output.event_name === 'pull_request') {
-              if (output.number) {
-                await create_or_update_comment(output.number);
-              }
-            } else if (output.event_name === 'push') {
-              const pull_requests = await github.rest.pulls.list({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                state: 'open',
-                head: `${context.repo.owner}:${output.ref.replace('refs/heads/', '')}`,
-              });
-
-              if (pull_requests.data.length > 0) {
-                await create_or_update_comment(pull_requests.data[0].number);
-              } else {
-                console.log(
-                  'No open pull request found for this push. Logging publish information to console:'
-                );
-                await log_publish_info();
-              }
-            }
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index 49303f1684..0f0c433361 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -1,18 +1,53 @@
-name: Publish Any Commit
-on: [push, pull_request]
+name: pkg.pr.new
+on:
+  pull_request_target:
+    types: [opened, synchronize]
+  push:
+    branches: [main]
 
 permissions: {}
 
 jobs:
-  build:
-    permissions: {}
+  # This job determines the environment to use for the build job. It ensures that:
+  # - For pushes to main, we use the "Publish pkg.pr.new (maintainers)" environment.
+  # - For PRs from the same repository, we also use the "Publish pkg.pr.new (maintainers)" environment, since these are trusted.
+  # - For PRs from forks, we use the "Publish pkg.pr.new (external contributors)" environment, which requires manual approval by a maintainer before the build job can run.
+  #   This protects us from running untrusted code while still allowing external contributors to use pkg.pr.new.
+  resolve-env:
+    runs-on: ubuntu-latest
+    outputs:
+      environment: ${{ steps.resolve.outputs.environment }}
+    steps:
+      - name: Determine environment
+        id: resolve
+        run: |
+          if [[ "${{ github.event_name }}" == "push" ]]; then
+            echo "environment=Publish pkg.pr.new (maintainers)" >> "$GITHUB_OUTPUT"
+          elif [[ "${{ github.event.pull_request.head.repo.full_name }}" == "${{ github.repository }}" ]]; then
+            echo "environment=Publish pkg.pr.new (maintainers)" >> "$GITHUB_OUTPUT"
+          else
+            echo "environment=Publish pkg.pr.new (external contributors)" >> "$GITHUB_OUTPUT"
+          fi
 
+  build:
+    needs: resolve-env
     runs-on: ubuntu-latest
+    # This is the line that ensures forks require manual approval before running the build job
+    environment: ${{ needs.resolve-env.outputs.environment }}
+
+    # No permissions — this job runs user-controlled code
+    permissions: {}
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+        with:
+          # For pull_request_target, we must explicitly check out the PR head.
+          # This is safe because the environment gate above has already fired —
+          # an org member has approved this specific commit for external PRs.
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 22.x
           cache: pnpm
@@ -24,21 +59,161 @@ jobs:
         run: pnpm build
 
       - run: pnpx pkg-pr-new publish --comment=off --json output.json --compact --no-template './packages/svelte'
-      - name: Add metadata to output
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
-            output.number = context.issue.number;
-            output.event_name = context.eventName;
-            output.ref = context.ref;
-            fs.writeFileSync('output.json', JSON.stringify(output), 'utf8');
+
       - name: Upload output
         uses: actions/upload-artifact@v4
         with:
           name: output
           path: ./output.json
 
-      - run: ls -R .
+  # Sanitizes the untrusted output from the build job before it's consumed by
+  # jobs with elevated permissions. This ensures that only known package names
+  # and valid SHA prefixes make it through.
+  sanitize:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions: {}
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: output
+
+      - name: Sanitize output
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+            const raw = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+            const ALLOWED_PACKAGES = new Set(['svelte']);
+            const SHA_PATTERN = /^[0-9a-f]{7}$/;
+
+            const packages = (raw.packages || [])
+              .filter(p => {
+                if (!ALLOWED_PACKAGES.has(p.name)) {
+                  console.log(`Skipping unexpected package: ${JSON.stringify(p.name)}`);
+                  return false;
+                }
+                const sha = p.url?.replace(/^.+@([^@]+)$/, '$1');
+                if (!sha || !SHA_PATTERN.test(sha)) {
+                  console.log(`Skipping package with invalid SHA: ${JSON.stringify(p.url)}`);
+                  return false;
+                }
+                return true;
+              })
+              .map(p => ({
+                name: p.name,
+                sha: p.url.replace(/^.+@([^@]+)$/, '$1'),
+              }));
+
+            fs.writeFileSync('sanitized-output.json', JSON.stringify({ packages }), 'utf8');
+
+      - name: Upload sanitized output
+        uses: actions/upload-artifact@v4
+        with:
+          name: sanitized-output
+          path: ./sanitized-output.json
+
+  comment:
+    needs: sanitize
+    if: github.event_name == 'pull_request_target'
+    runs-on: ubuntu-latest
+
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Download sanitized artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: sanitized-output
+
+      - name: Post or update comment
+        uses: actions/github-script@v8
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));
+
+            if (packages.length === 0) {
+              console.log('No valid packages found. Skipping comment.');
+              return;
+            }
+
+            // Issue number from trusted event context, never from the artifact
+            const issue_number = context.issue.number;
+
+            const bot_comment_identifier = `<!-- pkg.pr.new comment -->`;
+
+            const body = `${bot_comment_identifier}
+
+            [Playground](https://svelte.dev/playground?version=pr-${issue_number})
+
+            \`\`\`
+            ${packages.map(p => `pnpm add https://pkg.pr.new/${p.name}@${issue_number}`).join('\n')}
+            \`\`\`
+            `;
+
+            const comments = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number,
+            });
+            const existing = comments.data.find(c => c.body.includes(bot_comment_identifier));
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number,
+                body,
+              });
+            }
+
+  log:
+    needs: sanitize
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+
+    permissions: {}
+
+    steps:
+      - name: Download sanitized artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: sanitized-output
+
+      - name: Log publish info
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+            const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));
+
+            if (packages.length === 0) {
+              console.log('No valid packages found.');
+              return;
+            }
+
+            console.log('\n' + '='.repeat(50));
+            console.log('Publish Information');
+            console.log('='.repeat(50));
+            for (const p of packages) {
+              console.log(`${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.sha}`);
+            }
+            const svelte = packages.find(p => p.name === 'svelte');
+            if (svelte) {
+              console.log(`\nPlayground: https://svelte.dev/playground?version=commit-${svelte.sha}`);
+            }
+            console.log('='.repeat(50));
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index b78346d883..aa32e3c5cd 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,6 +5,11 @@ on:
     branches:
       - main
 
+concurrency:
+  # prevent two release workflows from running at once
+  # race conditions here can result in releases failing
+  group: ${{ github.workflow }}
+
 permissions: {}
 jobs:
   release:
@@ -18,13 +23,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
       - uses: pnpm/action-setup@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 24.x
           cache: pnpm
diff --git a/benchmarking/benchmarks/reactivity/index.js b/benchmarking/benchmarks/reactivity/index.js
index 58b3f5cb29..2b75b3dfc6 100644
--- a/benchmarking/benchmarks/reactivity/index.js
+++ b/benchmarking/benchmarks/reactivity/index.js
@@ -1,12 +1,5 @@
-import { kairo_avoidable_owned, kairo_avoidable_unowned } from './kairo/kairo_avoidable.js';
-import { kairo_broad_owned, kairo_broad_unowned } from './kairo/kairo_broad.js';
-import { kairo_deep_owned, kairo_deep_unowned } from './kairo/kairo_deep.js';
-import { kairo_diamond_owned, kairo_diamond_unowned } from './kairo/kairo_diamond.js';
-import { kairo_mux_unowned, kairo_mux_owned } from './kairo/kairo_mux.js';
-import { kairo_repeated_unowned, kairo_repeated_owned } from './kairo/kairo_repeated.js';
-import { kairo_triangle_owned, kairo_triangle_unowned } from './kairo/kairo_triangle.js';
-import { kairo_unstable_owned, kairo_unstable_unowned } from './kairo/kairo_unstable.js';
-import { mol_bench_owned, mol_bench_unowned } from './mol_bench.js';
+import fs from 'node:fs';
+import path from 'node:path';
 import {
 	sbench_create_0to1,
 	sbench_create_1000to1,
@@ -19,10 +12,14 @@ import {
 	sbench_create_4to1,
 	sbench_create_signals
 } from './sbench.js';
+import { fileURLToPath } from 'node:url';
+import { create_test } from './util.js';
 
 // This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)
 // Not all tests are the same, and many parts have been tweaked to capture different data.
 
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export const reactivity_benchmarks = [
 	sbench_create_signals,
 	sbench_create_0to1,
@@ -33,23 +30,16 @@ export const reactivity_benchmarks = [
 	sbench_create_1to2,
 	sbench_create_1to4,
 	sbench_create_1to8,
-	sbench_create_1to1000,
-	kairo_avoidable_owned,
-	kairo_avoidable_unowned,
-	kairo_broad_owned,
-	kairo_broad_unowned,
-	kairo_deep_owned,
-	kairo_deep_unowned,
-	kairo_diamond_owned,
-	kairo_diamond_unowned,
-	kairo_triangle_owned,
-	kairo_triangle_unowned,
-	kairo_mux_owned,
-	kairo_mux_unowned,
-	kairo_repeated_owned,
-	kairo_repeated_unowned,
-	kairo_unstable_owned,
-	kairo_unstable_unowned,
-	mol_bench_owned,
-	mol_bench_unowned
+	sbench_create_1to1000
 ];
+
+for (const file of fs.readdirSync(`${dirname}/tests`)) {
+	if (!file.includes('.bench.')) continue;
+
+	const name = file.replace('.bench.js', '');
+
+	const module = await import(`${dirname}/tests/${file}`);
+	const { owned, unowned } = create_test(name, module.default);
+
+	reactivity_benchmarks.push(owned, unowned);
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
deleted file mode 100644
index 9daea6de99..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-import { busy } from './util.js';
-
-function setup() {
-	let head = $.state(0);
-	let computed1 = $.derived(() => $.get(head));
-	let computed2 = $.derived(() => ($.get(computed1), 0));
-	let computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation
-	let computed4 = $.derived(() => $.get(computed3) + 2);
-	let computed5 = $.derived(() => $.get(computed4) + 3);
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(computed5);
-			busy(); // heavy side effect
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			assert($.get(computed5) === 6);
-			for (let i = 0; i < 1000; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(computed5) === 6);
-			}
-		}
-	};
-}
-
-export async function kairo_avoidable_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_avoidable_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_avoidable_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_avoidable_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
deleted file mode 100644
index 8dc5710c87..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let head = $.state(0);
-	let last = head;
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		for (let i = 0; i < 50; i++) {
-			let current = $.derived(() => {
-				return $.get(head) + i;
-			});
-			let current2 = $.derived(() => {
-				return $.get(current) + 1;
-			});
-			$.render_effect(() => {
-				$.get(current2);
-				counter++;
-			});
-			last = current2;
-		}
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			counter = 0;
-			for (let i = 0; i < 50; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(last) === i + 50);
-			}
-			assert(counter === 50 * 50);
-		}
-	};
-}
-
-export async function kairo_broad_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_broad_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_broad_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_broad_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
deleted file mode 100644
index 8690c85f86..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let len = 50;
-const iter = 50;
-
-function setup() {
-	let head = $.state(0);
-	let current = head;
-	for (let i = 0; i < len; i++) {
-		let c = current;
-		current = $.derived(() => {
-			return $.get(c) + 1;
-		});
-	}
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			counter = 0;
-			for (let i = 0; i < iter; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(current) === len + i);
-			}
-			assert(counter === iter);
-		}
-	};
-}
-
-export async function kairo_deep_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_deep_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_deep_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_deep_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
deleted file mode 100644
index bf4e07ee89..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let width = 5;
-
-function setup() {
-	let head = $.state(0);
-	let current = [];
-	for (let i = 0; i < width; i++) {
-		current.push(
-			$.derived(() => {
-				return $.get(head) + 1;
-			})
-		);
-	}
-	let sum = $.derived(() => {
-		return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
-	});
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(sum);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			assert($.get(sum) === 2 * width);
-			counter = 0;
-			for (let i = 0; i < 500; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(sum) === (i + 1) * width);
-			}
-			assert(counter === 500);
-		}
-	};
-}
-
-export async function kairo_diamond_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_diamond_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_diamond_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_diamond_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
deleted file mode 100644
index fc252a27b5..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let heads = new Array(100).fill(null).map((_) => $.state(0));
-	const mux = $.derived(() => {
-		return Object.fromEntries(heads.map((h) => $.get(h)).entries());
-	});
-	const splited = heads
-		.map((_, index) => $.derived(() => $.get(mux)[index]))
-		.map((x) => $.derived(() => $.get(x) + 1));
-
-	const destroy = $.effect_root(() => {
-		splited.forEach((x) => {
-			$.render_effect(() => {
-				$.get(x);
-			});
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			for (let i = 0; i < 10; i++) {
-				$.flush(() => {
-					$.set(heads[i], i);
-				});
-				assert($.get(splited[i]) === i + 1);
-			}
-			for (let i = 0; i < 10; i++) {
-				$.flush(() => {
-					$.set(heads[i], i * 2);
-				});
-				assert($.get(splited[i]) === i * 2 + 1);
-			}
-		}
-	};
-}
-
-export async function kairo_mux_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_mux_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_mux_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_mux_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
deleted file mode 100644
index 3bee06ca0e..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let size = 30;
-
-function setup() {
-	let head = $.state(0);
-	let current = $.derived(() => {
-		let result = 0;
-		for (let i = 0; i < size; i++) {
-			result += $.get(head);
-		}
-		return result;
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			assert($.get(current) === size);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(current) === i * size);
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_repeated_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_repeated_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_repeated_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_repeated_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
deleted file mode 100644
index 11a419a52e..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let width = 10;
-
-function count(number) {
-	return new Array(number)
-		.fill(0)
-		.map((_, i) => i + 1)
-		.reduce((x, y) => x + y, 0);
-}
-
-function setup() {
-	let head = $.state(0);
-	let current = head;
-	let list = [];
-	for (let i = 0; i < width; i++) {
-		let c = current;
-		list.push(current);
-		current = $.derived(() => {
-			return $.get(c) + 1;
-		});
-	}
-	let sum = $.derived(() => {
-		return list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(sum);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			const constant = count(width);
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			assert($.get(sum) === constant);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-				assert($.get(sum) === constant - width + i * width);
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_triangle_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_triangle_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_triangle_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_triangle_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
deleted file mode 100644
index 54eb732cb2..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let head = $.state(0);
-	const double = $.derived(() => $.get(head) * 2);
-	const inverse = $.derived(() => -$.get(head));
-	let current = $.derived(() => {
-		let result = 0;
-		for (let i = 0; i < 20; i++) {
-			result += $.get(head) % 2 ? $.get(double) : $.get(inverse);
-		}
-		return result;
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush(() => {
-				$.set(head, 1);
-			});
-			assert($.get(current) === 40);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush(() => {
-					$.set(head, i);
-				});
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_unstable_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_unstable_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_unstable_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1000; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_unstable_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/util.js b/benchmarking/benchmarks/reactivity/kairo/util.js
deleted file mode 100644
index 75e3641ab9..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/util.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export function busy() {
-	let a = 0;
-	for (let i = 0; i < 1_00; i++) {
-		a++;
-	}
-}
diff --git a/benchmarking/benchmarks/reactivity/sbench.js b/benchmarking/benchmarks/reactivity/sbench.js
index ddeaef2514..e197f970c8 100644
--- a/benchmarking/benchmarks/reactivity/sbench.js
+++ b/benchmarking/benchmarks/reactivity/sbench.js
@@ -1,3 +1,4 @@
+/** @import { Source } from '../../../packages/svelte/src/internal/client/types.js' */
 import { fastest_test } from '../../utils.js';
 import * as $ from '../../../packages/svelte/src/internal/client/index.js';
 
@@ -7,360 +8,177 @@ const COUNT = 1e5;
  * @param {number} n
  * @param {any[]} sources
  */
-function create_data_signals(n, sources) {
+function create_sources(n, sources) {
 	for (let i = 0; i < n; i++) {
 		sources[i] = $.state(i);
 	}
+
 	return sources;
 }
 
 /**
- * @param {number} i
+ * @param {Source<number>} source
  */
-function create_computation_0(i) {
-	$.derived(() => i);
+function create_derived(source) {
+	$.derived(() => $.get(source));
 }
 
 /**
- * @param {any} s1
- */
-function create_computation_1(s1) {
-	$.derived(() => $.get(s1));
-}
-/**
- * @param {any} s1
- * @param {any} s2
+ *
+ * @param {string} label
+ * @param {(n: number, sources: Array<Source<number>>) => void} fn
+ * @param {number} count
+ * @param {number} num_sources
  */
-function create_computation_2(s1, s2) {
-	$.derived(() => $.get(s1) + $.get(s2));
-}
+function create_sbench_test(label, count, num_sources, fn) {
+	return {
+		label,
+		fn: async () => {
+			// Do 3 loops to warm up JIT
+			for (let i = 0; i < 3; i++) {
+				fn(count, create_sources(num_sources, []));
+			}
 
-function create_computation_1000(ss, offset) {
-	$.derived(() => {
-		let sum = 0;
-		for (let i = 0; i < 1000; i++) {
-			sum += $.get(ss[offset + i]);
+			return await fastest_test(10, () => {
+				const destroy = $.effect_root(() => {
+					for (let i = 0; i < 10; i++) {
+						fn(count, create_sources(num_sources, []));
+					}
+				});
+				destroy();
+			});
 		}
-		return sum;
-	});
+	};
 }
 
-/**
- * @param {number} n
- */
-function create_computations_0to1(n) {
-	for (let i = 0; i < n; i++) {
-		create_computation_0(i);
-	}
-}
+export const sbench_create_signals = create_sbench_test(
+	'sbench_create_signals',
+	COUNT,
+	COUNT,
+	create_sources
+);
 
-/**
- * @param {number} n
- * @param {any[]} sources
- */
-function create_computations_1to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-	}
-}
-
-/**
- * @param {number} n
- * @param {any[]} sources
- */
-function create_computations_2to1(n, sources) {
+export const sbench_create_0to1 = create_sbench_test('sbench_create_0to1', COUNT, 0, (n) => {
 	for (let i = 0; i < n; i++) {
-		create_computation_2(sources[i * 2], sources[i * 2 + 1]);
+		$.derived(() => i);
 	}
-}
-
-function create_computation_4(s1, s2, s3, s4) {
-	$.derived(() => $.get(s1) + $.get(s2) + $.get(s3) + $.get(s4));
-}
+});
 
-function create_computations_1000to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		create_computation_1000(sources, i * 1000);
-	}
-}
-
-function create_computations_1to2(n, sources) {
-	for (let i = 0; i < n / 2; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to4(n, sources) {
-	for (let i = 0; i < n / 4; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to8(n, sources) {
-	for (let i = 0; i < n / 8; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to1000(n, sources) {
-	for (let i = 0; i < n / 1000; i++) {
-		const source = sources[i];
-		for (let j = 0; j < 1000; j++) {
-			create_computation_1(source);
+export const sbench_create_1to1 = create_sbench_test(
+	'sbench_create_1to1',
+	COUNT,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			create_derived(sources[i]);
 		}
 	}
-}
-
-function create_computations_4to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		create_computation_4(
-			sources[i * 4],
-			sources[i * 4 + 1],
-			sources[i * 4 + 2],
-			sources[i * 4 + 3]
-		);
-	}
-}
-
-/**
- * @param {any} fn
- * @param {number} count
- * @param {number} scount
- */
-function bench(fn, count, scount) {
-	let sources = create_data_signals(scount, []);
-
-	fn(count, sources);
-}
-
-export async function sbench_create_signals() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_data_signals, COUNT, COUNT);
-	}
+);
 
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			bench(create_data_signals, COUNT, COUNT);
+export const sbench_create_2to1 = create_sbench_test(
+	'sbench_create_2to1',
+	COUNT / 2,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			$.derived(() => $.get(sources[i * 2]) + $.get(sources[i * 2 + 1]));
 		}
-	});
-
-	return {
-		benchmark: 'sbench_create_signals',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_0to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_0to1, COUNT, 0);
-	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_0to1, COUNT, 0);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_0to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to1, COUNT, COUNT);
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to1, COUNT, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_2to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_2to1, COUNT / 2, COUNT);
-	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_2to1, COUNT / 2, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_2to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_4to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_4to1, COUNT / 4, COUNT);
+);
+
+export const sbench_create_4to1 = create_sbench_test(
+	'sbench_create_4to1',
+	COUNT / 4,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			$.derived(
+				() =>
+					$.get(sources[i * 4]) +
+					$.get(sources[i * 4 + 1]) +
+					$.get(sources[i * 4 + 2]) +
+					$.get(sources[i * 4 + 3])
+			);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_4to1, COUNT / 4, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_4to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1000to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1000to1, COUNT / 1000, COUNT);
+);
+
+export const sbench_create_1000to1 = create_sbench_test(
+	'sbench_create_1000to1',
+	COUNT / 1000,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			const offset = i * 1000;
+
+			$.derived(() => {
+				let sum = 0;
+				for (let i = 0; i < 1000; i++) {
+					sum += $.get(sources[offset + i]);
+				}
+				return sum;
+			});
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1000to1, COUNT / 1000, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1000to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to2() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to2, COUNT, COUNT / 2);
+);
+
+export const sbench_create_1to2 = create_sbench_test(
+	'sbench_create_1to2',
+	COUNT,
+	COUNT / 2,
+	(n, sources) => {
+		for (let i = 0; i < n / 2; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to2, COUNT, COUNT / 2);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to2',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to4() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to4, COUNT, COUNT / 4);
+);
+
+export const sbench_create_1to4 = create_sbench_test(
+	'sbench_create_1to4',
+	COUNT,
+	COUNT / 4,
+	(n, sources) => {
+		for (let i = 0; i < n / 4; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to4, COUNT, COUNT / 4);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to4',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to8() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to8, COUNT, COUNT / 8);
+);
+
+export const sbench_create_1to8 = create_sbench_test(
+	'sbench_create_1to8',
+	COUNT,
+	COUNT / 8,
+	(n, sources) => {
+		for (let i = 0; i < n / 8; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to8, COUNT, COUNT / 8);
+);
+
+export const sbench_create_1to1000 = create_sbench_test(
+	'sbench_create_1to1000',
+	COUNT,
+	COUNT / 1000,
+	(n, sources) => {
+		for (let i = 0; i < n / 1000; i++) {
+			const source = sources[i];
+			for (let j = 0; j < 1000; j++) {
+				create_derived(source);
 			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to8',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to1000() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to1000, COUNT, COUNT / 1000);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to1000, COUNT, COUNT / 1000);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to1000',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
+);
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js
new file mode 100644
index 0000000000..d4ba858824
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js
@@ -0,0 +1,35 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+import { busy } from '../util.js';
+
+export default () => {
+	let head = $.state(0);
+	let computed1 = $.derived(() => $.get(head));
+	let computed2 = $.derived(() => ($.get(computed1), 0));
+	let computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation
+	let computed4 = $.derived(() => $.get(computed3) + 2);
+	let computed5 = $.derived(() => $.get(computed4) + 3);
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(computed5);
+			busy(); // heavy side effect
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(computed5), 6);
+			for (let i = 0; i < 1000; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(computed5), 6);
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js
new file mode 100644
index 0000000000..aebae7a898
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let head = $.state(0);
+	let last = head;
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		for (let i = 0; i < 50; i++) {
+			let current = $.derived(() => {
+				return $.get(head) + i;
+			});
+			let current2 = $.derived(() => {
+				return $.get(current) + 1;
+			});
+			$.render_effect(() => {
+				$.get(current2);
+				counter++;
+			});
+			last = current2;
+		}
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			counter = 0;
+			for (let i = 0; i < 50; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(last), i + 50);
+			}
+			assert.equal(counter, 50 * 50);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js
new file mode 100644
index 0000000000..4a361e9bfc
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let len = 50;
+const iter = 50;
+
+export default () => {
+	let head = $.state(0);
+	let current = head;
+	for (let i = 0; i < len; i++) {
+		let c = current;
+		current = $.derived(() => {
+			return $.get(c) + 1;
+		});
+	}
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			counter = 0;
+			for (let i = 0; i < iter; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(current), len + i);
+			}
+			assert.equal(counter, iter);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js
new file mode 100644
index 0000000000..17d9bd85e5
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js
@@ -0,0 +1,45 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let width = 5;
+
+export default () => {
+	let head = $.state(0);
+	let current = [];
+	for (let i = 0; i < width; i++) {
+		current.push(
+			$.derived(() => {
+				return $.get(head) + 1;
+			})
+		);
+	}
+	let sum = $.derived(() => {
+		return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+	});
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(sum);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(sum), 2 * width);
+			counter = 0;
+			for (let i = 0; i < 500; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(sum), (i + 1) * width);
+			}
+			assert.equal(counter, 500);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js
new file mode 100644
index 0000000000..4af6bf7873
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js
@@ -0,0 +1,38 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let heads = new Array(100).fill(null).map((_) => $.state(0));
+	const mux = $.derived(() => {
+		return Object.fromEntries(heads.map((h) => $.get(h)).entries());
+	});
+	const splited = heads
+		.map((_, index) => $.derived(() => $.get(mux)[index]))
+		.map((x) => $.derived(() => $.get(x) + 1));
+
+	const destroy = $.effect_root(() => {
+		splited.forEach((x) => {
+			$.render_effect(() => {
+				$.get(x);
+			});
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 10; i++) {
+				$.flush(() => {
+					$.set(heads[i], i);
+				});
+				assert.equal($.get(splited[i]), i + 1);
+			}
+			for (let i = 0; i < 10; i++) {
+				$.flush(() => {
+					$.set(heads[i], i * 2);
+				});
+				assert.equal($.get(splited[i]), i * 2 + 1);
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js
new file mode 100644
index 0000000000..cab7689fea
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js
@@ -0,0 +1,42 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let size = 30;
+
+export default () => {
+	let head = $.state(0);
+	let current = $.derived(() => {
+		let result = 0;
+		for (let i = 0; i < size; i++) {
+			result += $.get(head);
+		}
+		return result;
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(current), size);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(current), i * size);
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js
new file mode 100644
index 0000000000..b4b46c0209
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js
@@ -0,0 +1,55 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let width = 10;
+
+function count(number) {
+	return new Array(number)
+		.fill(0)
+		.map((_, i) => i + 1)
+		.reduce((x, y) => x + y, 0);
+}
+
+export default () => {
+	let head = $.state(0);
+	let current = head;
+	let list = [];
+	for (let i = 0; i < width; i++) {
+		let c = current;
+		list.push(current);
+		current = $.derived(() => {
+			return $.get(c) + 1;
+		});
+	}
+	let sum = $.derived(() => {
+		return list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(sum);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			const constant = count(width);
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(sum), constant);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(sum), constant - width + i * width);
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js
new file mode 100644
index 0000000000..e7723fae0d
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let head = $.state(0);
+	const double = $.derived(() => $.get(head) * 2);
+	const inverse = $.derived(() => -$.get(head));
+	let current = $.derived(() => {
+		let result = 0;
+		for (let i = 0; i < 20; i++) {
+			result += $.get(head) % 2 ? $.get(double) : $.get(inverse);
+		}
+		return result;
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(current), 40);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/mol_bench.js b/benchmarking/benchmarks/reactivity/tests/mol.bench.js
similarity index 53%
rename from benchmarking/benchmarks/reactivity/mol_bench.js
rename to benchmarking/benchmarks/reactivity/tests/mol.bench.js
index 536b078d74..e66f0191d1 100644
--- a/benchmarking/benchmarks/reactivity/mol_bench.js
+++ b/benchmarking/benchmarks/reactivity/tests/mol.bench.js
@@ -1,4 +1,4 @@
-import { assert, fastest_test } from '../../utils.js';
+import assert from 'node:assert';
 import * as $ from 'svelte/internal/client';
 
 /**
@@ -18,7 +18,7 @@ function hard(n) {
 
 const numbers = Array.from({ length: 5 }, (_, i) => i);
 
-function setup() {
+export default () => {
 	let res = [];
 	const A = $.state(0);
 	const B = $.state(0);
@@ -59,63 +59,10 @@ function setup() {
 				$.set(A, 2 + i * 2);
 				$.set(B, 2);
 			});
-			assert(res[0] === 3198 && res[1] === 1601 && res[2] === 3195 && res[3] === 1598);
+			assert.equal(res[0], 3198);
+			assert.equal(res[1], 1601);
+			assert.equal(res[2], 3195);
+			assert.equal(res[3], 1598);
 		}
 	};
-}
-
-export async function mol_bench_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run(0);
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1e4; i++) {
-			run(i);
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'mol_bench_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function mol_bench_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run(0);
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1e4; i++) {
-			run(i);
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'mol_bench_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js b/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js
new file mode 100644
index 0000000000..a8fbcfdbd6
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js
@@ -0,0 +1,35 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+const ARRAY_SIZE = 1000;
+
+export default () => {
+	const signals = Array.from({ length: ARRAY_SIZE }, (_, i) => $.state(i));
+	const order = $.state(0);
+
+	// break skipped_deps fast path by changing order of reads
+	const total = $.derived(() => {
+		const ord = $.get(order);
+		let sum = 0;
+		for (let i = 0; i < ARRAY_SIZE; i++) {
+			sum += /** @type {number} */ ($.get(signals[(i + ord) % ARRAY_SIZE]));
+		}
+		return sum;
+	});
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(total);
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 5; i++) {
+				$.flush(() => $.set(order, i));
+				assert.equal($.get(total), (ARRAY_SIZE * (ARRAY_SIZE - 1)) / 2); // sum of 0..999
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/util.js b/benchmarking/benchmarks/reactivity/util.js
new file mode 100644
index 0000000000..da5e5c51f5
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/util.js
@@ -0,0 +1,71 @@
+import * as $ from 'svelte/internal/client';
+import { fastest_test } from '../../utils.js';
+
+export function busy() {
+	let a = 0;
+	for (let i = 0; i < 1_00; i++) {
+		a++;
+	}
+}
+
+/**
+ *
+ * @param {string} label
+ * @param {() => { run: (i?: number) => void, destroy: () => void }} setup
+ */
+export function create_test(label, setup) {
+	return {
+		unowned: {
+			label: `${label}_unowned`,
+			fn: async () => {
+				// Do 10 loops to warm up JIT
+				for (let i = 0; i < 10; i++) {
+					const { run, destroy } = setup();
+					run(0);
+					destroy();
+				}
+
+				const { run, destroy } = setup();
+
+				const result = await fastest_test(10, () => {
+					for (let i = 0; i < 1000; i++) {
+						run(i);
+					}
+				});
+
+				destroy();
+
+				return result;
+			}
+		},
+		owned: {
+			label: `${label}_owned`,
+			fn: async () => {
+				let run, destroy;
+
+				const destroy_owned = $.effect_root(() => {
+					// Do 10 loops to warm up JIT
+					for (let i = 0; i < 10; i++) {
+						const { run, destroy } = setup();
+						run(0);
+						destroy();
+					}
+
+					({ run, destroy } = setup());
+				});
+
+				const result = await fastest_test(10, () => {
+					for (let i = 0; i < 1000; i++) {
+						run(i);
+					}
+				});
+
+				// @ts-ignore
+				destroy();
+				destroy_owned();
+
+				return result;
+			}
+		}
+	};
+}
diff --git a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
index ba0457b80e..9a8dda617d 100644
--- a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
+++ b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
@@ -1,13 +1,16 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import { render } from 'svelte/server';
-import { fastest_test, read_file, write } from '../../../utils.js';
+import { fastest_test } from '../../../utils.js';
 import { compile } from 'svelte/compiler';
 
 const dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;
 
 async function compile_svelte() {
-	const output = compile(read_file(`${dir}/App.svelte`), {
+	const output = compile(read(`${dir}/App.svelte`), {
 		generate: 'server'
 	});
+
 	write(`${dir}/output/App.js`, output.js.code);
 
 	const module = await import(`${dir}/output/App.js`);
@@ -15,22 +18,39 @@ async function compile_svelte() {
 	return module.default;
 }
 
-export async function wrapper_bench() {
-	const App = await compile_svelte();
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		render(App);
-	}
+export const wrapper_bench = {
+	label: 'wrapper_bench',
+	fn: async () => {
+		const App = await compile_svelte();
 
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
+		// Do 3 loops to warm up JIT
+		for (let i = 0; i < 3; i++) {
 			render(App);
 		}
-	});
 
-	return {
-		benchmark: 'wrapper_bench',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
+		return await fastest_test(10, () => {
+			for (let i = 0; i < 100; i++) {
+				render(App);
+			}
+		});
+	}
+};
+
+/**
+ * @param {string} file
+ */
+function read(file) {
+	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+}
+
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+function write(file, contents) {
+	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
+	} catch {}
+
+	fs.writeFileSync(file, contents);
 }
diff --git a/benchmarking/compare/runner.js b/benchmarking/compare/runner.js
index a2e8646379..11e40ed983 100644
--- a/benchmarking/compare/runner.js
+++ b/benchmarking/compare/runner.js
@@ -1,10 +1,13 @@
 import { reactivity_benchmarks } from '../benchmarks/reactivity/index.js';
 
 const results = [];
-for (const benchmark of reactivity_benchmarks) {
-	const result = await benchmark();
-	console.error(result.benchmark);
-	results.push(result);
+
+for (let i = 0; i < reactivity_benchmarks.length; i += 1) {
+	const benchmark = reactivity_benchmarks[i];
+
+	process.stderr.write(`Running ${i + 1}/${reactivity_benchmarks.length} ${benchmark.label} `);
+	results.push({ benchmark: benchmark.label, ...(await benchmark.fn()) });
+	process.stderr.write('\x1b[2K\r');
 }
 
 process.send(results);
diff --git a/benchmarking/run.js b/benchmarking/run.js
index bd96b9c2dc..2b09f7c592 100644
--- a/benchmarking/run.js
+++ b/benchmarking/run.js
@@ -2,54 +2,86 @@ import * as $ from '../packages/svelte/src/internal/client/index.js';
 import { reactivity_benchmarks } from './benchmarks/reactivity/index.js';
 import { ssr_benchmarks } from './benchmarks/ssr/index.js';
 
-let total_time = 0;
-let total_gc_time = 0;
+// e.g. `pnpm bench kairo` to only run the kairo benchmarks
+const filters = process.argv.slice(2);
 
 const suites = [
-	{ benchmarks: reactivity_benchmarks, name: 'reactivity benchmarks' },
-	{ benchmarks: ssr_benchmarks, name: 'server-side rendering benchmarks' }
-];
+	{
+		benchmarks: reactivity_benchmarks.filter(
+			(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))
+		),
+		name: 'reactivity benchmarks'
+	},
+	{
+		benchmarks: ssr_benchmarks.filter(
+			(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))
+		),
+		name: 'server-side rendering benchmarks'
+	}
+].filter((suite) => suite.benchmarks.length > 0);
+
+if (suites.length === 0) {
+	console.log('No benchmarks matched provided filters');
+	process.exit(1);
+}
+
+const COLUMN_WIDTHS = [25, 9, 9];
+const TOTAL_WIDTH = COLUMN_WIDTHS.reduce((a, b) => a + b);
+
+const pad_right = (str, n) => str + ' '.repeat(n - str.length);
+const pad_left = (str, n) => ' '.repeat(n - str.length) + str;
+
+let total_time = 0;
+let total_gc_time = 0;
 
-// eslint-disable-next-line no-console
-console.log('\x1b[1m', '-- Benchmarking Started --', '\x1b[0m');
 $.push({}, true);
+
 try {
 	for (const { benchmarks, name } of suites) {
 		let suite_time = 0;
 		let suite_gc_time = 0;
-		// eslint-disable-next-line no-console
+
 		console.log(`\nRunning ${name}...\n`);
+		console.log(
+			pad_right('Benchmark', COLUMN_WIDTHS[0]) +
+				pad_left('Time', COLUMN_WIDTHS[1]) +
+				pad_left('GC time', COLUMN_WIDTHS[2])
+		);
+		console.log('='.repeat(TOTAL_WIDTH));
 
 		for (const benchmark of benchmarks) {
-			const results = await benchmark();
-			// eslint-disable-next-line no-console
-			console.log(results);
-			total_time += Number(results.time);
-			total_gc_time += Number(results.gc_time);
-			suite_time += Number(results.time);
-			suite_gc_time += Number(results.gc_time);
+			const results = await benchmark.fn();
+			console.log(
+				pad_right(benchmark.label, COLUMN_WIDTHS[0]) +
+					pad_left(results.time.toFixed(2), COLUMN_WIDTHS[1]) +
+					pad_left(results.gc_time.toFixed(2), COLUMN_WIDTHS[2])
+			);
+			total_time += results.time;
+			total_gc_time += results.gc_time;
+			suite_time += results.time;
+			suite_gc_time += results.gc_time;
 		}
 
-		console.log(`\nFinished ${name}.\n`);
-
-		// eslint-disable-next-line no-console
-		console.log({
-			suite_time: suite_time.toFixed(2),
-			suite_gc_time: suite_gc_time.toFixed(2)
-		});
+		console.log('='.repeat(TOTAL_WIDTH));
+		console.log(
+			pad_right('suite', COLUMN_WIDTHS[0]) +
+				pad_left(suite_time.toFixed(2), COLUMN_WIDTHS[1]) +
+				pad_left(suite_gc_time.toFixed(2), COLUMN_WIDTHS[2])
+		);
+		console.log('='.repeat(TOTAL_WIDTH));
 	}
 } catch (e) {
-	// eslint-disable-next-line no-console
-	console.log('\x1b[1m', '\n-- Benchmarking Failed --\n', '\x1b[0m');
 	// eslint-disable-next-line no-console
 	console.error(e);
 	process.exit(1);
 }
+
 $.pop();
-// eslint-disable-next-line no-console
-console.log('\x1b[1m', '\n-- Benchmarking Complete --\n', '\x1b[0m');
-// eslint-disable-next-line no-console
-console.log({
-	total_time: total_time.toFixed(2),
-	total_gc_time: total_gc_time.toFixed(2)
-});
+
+console.log('');
+
+console.log(
+	pad_right('total', COLUMN_WIDTHS[0]) +
+		pad_left(total_time.toFixed(2), COLUMN_WIDTHS[1]) +
+		pad_left(total_gc_time.toFixed(2), COLUMN_WIDTHS[2])
+);
diff --git a/benchmarking/utils.js b/benchmarking/utils.js
index 684d2ee02b..5581135e00 100644
--- a/benchmarking/utils.js
+++ b/benchmarking/utils.js
@@ -1,78 +1,30 @@
 import { performance, PerformanceObserver } from 'node:perf_hooks';
 import v8 from 'v8-natives';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
 
 // Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.
 
-class GarbageTrack {
-	track_id = 0;
-	observer = new PerformanceObserver((list) => this.perf_entries.push(...list.getEntries()));
-	perf_entries = [];
-	periods = [];
+async function track(fn) {
+	v8.collectGarbage();
 
-	watch(fn) {
-		this.track_id++;
-		const start = performance.now();
-		const result = fn();
-		const end = performance.now();
-		this.periods.push({ track_id: this.track_id, start, end });
+	/** @type {PerformanceEntry[]} */
+	const entries = [];
 
-		return { result, track_id: this.track_id };
-	}
+	const observer = new PerformanceObserver((list) => entries.push(...list.getEntries()));
+	observer.observe({ entryTypes: ['gc'] });
 
-	/**
-	 * @param {number} track_id
-	 */
-	async gcDuration(track_id) {
-		await promise_delay(10);
+	const start = performance.now();
+	fn();
+	const end = performance.now();
 
-		const period = this.periods.find((period) => period.track_id === track_id);
-		if (!period) {
-			// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-			return Promise.reject('no period found');
-		}
+	await new Promise((f) => setTimeout(f, 10));
 
-		const entries = this.perf_entries.filter(
-			(e) => e.startTime >= period.start && e.startTime < period.end
-		);
-		return entries.reduce((t, e) => e.duration + t, 0);
-	}
+	const gc_time = entries
+		.filter((e) => e.startTime >= start && e.startTime < end)
+		.reduce((t, e) => e.duration + t, 0);
 
-	destroy() {
-		this.observer.disconnect();
-	}
+	observer.disconnect();
 
-	constructor() {
-		this.observer.observe({ entryTypes: ['gc'] });
-	}
-}
-
-function promise_delay(timeout = 0) {
-	return new Promise((resolve) => setTimeout(resolve, timeout));
-}
-
-/**
- * @param {{ (): void; (): any; }} fn
- */
-function run_timed(fn) {
-	const start = performance.now();
-	const result = fn();
-	const time = performance.now() - start;
-	return { result, time };
-}
-
-/**
- * @param {() => void} fn
- */
-async function run_tracked(fn) {
-	v8.collectGarbage();
-	const gc_track = new GarbageTrack();
-	const { result: wrappedResult, track_id } = gc_track.watch(() => run_timed(fn));
-	const gc_time = await gc_track.gcDuration(track_id);
-	const { result, time } = wrappedResult;
-	gc_track.destroy();
-	return { result, timing: { time, gc_time } };
+	return { time: end - start, gc_time };
 }
 
 /**
@@ -80,40 +32,12 @@ async function run_tracked(fn) {
  * @param {() => void} fn
  */
 export async function fastest_test(times, fn) {
+	/** @type {Array<{ time: number, gc_time: number }>} */
 	const results = [];
-	for (let i = 0; i < times; i++) {
-		const run = await run_tracked(fn);
-		results.push(run);
-	}
-	const fastest = results.reduce((a, b) => (a.timing.time < b.timing.time ? a : b));
 
-	return fastest;
-}
-
-/**
- * @param {boolean} a
- */
-export function assert(a) {
-	if (!a) {
-		throw new Error('Assertion failed');
+	for (let i = 0; i < times; i++) {
+		results.push(await track(fn));
 	}
-}
-
-/**
- * @param {string} file
- */
-export function read_file(file) {
-	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
-}
-
-/**
- * @param {string} file
- * @param {string} contents
- */
-export function write(file, contents) {
-	try {
-		fs.mkdirSync(path.dirname(file), { recursive: true });
-	} catch {}
 
-	fs.writeFileSync(file, contents);
+	return results.reduce((a, b) => (a.time < b.time ? a : b));
 }
diff --git a/documentation/docs/01-introduction/02-getting-started.md b/documentation/docs/01-introduction/02-getting-started.md
index 519959a0b1..ecb1055443 100644
--- a/documentation/docs/01-introduction/02-getting-started.md
+++ b/documentation/docs/01-introduction/02-getting-started.md
@@ -15,7 +15,7 @@ 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](/packages#routing) as well.
+You can also use Svelte directly with Vite via [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) by running `npm create vite@latest` and selecting the `svelte` option (or, if working with an existing project, adding the plugin to your `vite.config.js` file). With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/packages#routing) 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).
 
@@ -25,7 +25,7 @@ There are also [plugins for other bundlers](/packages#bundler-plugins), but we r
 
 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/collection/editor-support-c85c080efc292a34) and tools as well.
 
-You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli).
+You can also check your code from the command line using [`npx sv check`](https://svelte.dev/docs/cli/sv-check).
 
 
 ## Getting help
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 6fbf3b8895..d763b6578f 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -1,5 +1,6 @@
 ---
 title: $state
+tags: rune-state
 ---
 
 The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.
diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index d3e46eb22d..35cb6c1912 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -1,5 +1,6 @@
 ---
 title: $derived
+tags: rune-derived
 ---
 
 Derived state is declared with the `$derived` rune:
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index 6c42f55795..d41c5b8e6a 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -1,5 +1,6 @@
 ---
 title: $effect
+tags: rune-effect
 ---
 
 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.
diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
index 222b4831b6..737cdf523e 100644
--- a/documentation/docs/02-runes/05-$props.md
+++ b/documentation/docs/02-runes/05-$props.md
@@ -1,5 +1,6 @@
 ---
 title: $props
+tags: rune-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:
@@ -198,6 +199,8 @@ 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))
 
+If your component exposes [snippet](snippet) props like `children`, these should be typed using the `Snippet` interface imported from `'svelte'` — see [Typing snippets](snippet#Typing-snippets) for examples.
+
 Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
 
 
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index 6d47e30e27..f67e250b45 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -1,5 +1,6 @@
 ---
 title: $inspect
+tags: rune-inspect
 ---
 
 > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
diff --git a/documentation/docs/03-template-syntax/02-if.md b/documentation/docs/03-template-syntax/02-if.md
index 1378733e6f..499f6d219c 100644
--- a/documentation/docs/03-template-syntax/02-if.md
+++ b/documentation/docs/03-template-syntax/02-if.md
@@ -1,5 +1,6 @@
 ---
 title: {#if ...}
+tags: template-if
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index 57ed0def71..424e16a18a 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -1,5 +1,6 @@
 ---
 title: {#each ...}
+tags: template-each
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/04-key.md b/documentation/docs/03-template-syntax/04-key.md
index 10b6ab4358..6c88e28f86 100644
--- a/documentation/docs/03-template-syntax/04-key.md
+++ b/documentation/docs/03-template-syntax/04-key.md
@@ -1,5 +1,6 @@
 ---
 title: {#key ...}
+tags: template-key
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/05-await.md b/documentation/docs/03-template-syntax/05-await.md
index 842b3c7e32..aebaf8d33a 100644
--- a/documentation/docs/03-template-syntax/05-await.md
+++ b/documentation/docs/03-template-syntax/05-await.md
@@ -1,5 +1,6 @@
 ---
 title: {#await ...}
+tags: template-await
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/08-@html.md b/documentation/docs/03-template-syntax/08-@html.md
index 6d8a8be0c6..36b8ad36b3 100644
--- a/documentation/docs/03-template-syntax/08-@html.md
+++ b/documentation/docs/03-template-syntax/08-@html.md
@@ -1,5 +1,6 @@
 ---
 title: {@html ...}
+tags: template-html
 ---
 
 To inject raw HTML into your component, use the `{@html ...}` tag:
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index b25fbb32a6..0087923b15 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -1,5 +1,6 @@
 ---
 title: {@attach ...}
+tags: attachments
 ---
 
 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.
@@ -82,6 +83,14 @@ Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAA
 > [!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.
 
+## Conditional attachments
+
+Falsy values like `false` or `undefined` are treated as no attachment, enabling conditional usage:
+
+```svelte
+<div {@attach enabled && myAttachment}>...</div>
+```
+
 ## 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/documentation/docs/03-template-syntax/14-transition.md b/documentation/docs/03-template-syntax/14-transition.md
index c51175c272..9b14b7b25b 100644
--- a/documentation/docs/03-template-syntax/14-transition.md
+++ b/documentation/docs/03-template-syntax/14-transition.md
@@ -1,5 +1,6 @@
 ---
 title: transition:
+tags: transitions
 ---
 
 A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.
diff --git a/documentation/docs/03-template-syntax/15-in-and-out.md b/documentation/docs/03-template-syntax/15-in-and-out.md
index f4e37c845e..8adb62bf14 100644
--- a/documentation/docs/03-template-syntax/15-in-and-out.md
+++ b/documentation/docs/03-template-syntax/15-in-and-out.md
@@ -1,5 +1,6 @@
 ---
 title: in: and out:
+tags: transitions
 ---
 
 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.
@@ -7,7 +8,7 @@ The `in:` and `out:` directives are identical to [`transition:`](transition), ex
 ```svelte
 <script>
   import { fade, fly } from 'svelte/transition';
-  
+
   let visible = $state(false);
 </script>
 
diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
index aa61cdcde3..8b25c221d6 100644
--- a/documentation/docs/03-template-syntax/17-style.md
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -1,5 +1,6 @@
 ---
 title: style:
+tags: template-style
 ---
 
 The `style:` directive provides a shorthand for setting multiple styles on an element.
diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md
index db85db4b37..5d7cb3100d 100644
--- a/documentation/docs/03-template-syntax/18-class.md
+++ b/documentation/docs/03-template-syntax/18-class.md
@@ -1,5 +1,6 @@
 ---
 title: class
+tags: template-style
 ---
 
 There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
diff --git a/documentation/docs/04-styling/01-scoped-styles.md b/documentation/docs/04-styling/01-scoped-styles.md
index eae26d0cb1..cdfbeab19b 100644
--- a/documentation/docs/04-styling/01-scoped-styles.md
+++ b/documentation/docs/04-styling/01-scoped-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Scoped styles
+tags: styles-scoped
 ---
 
 Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.
diff --git a/documentation/docs/04-styling/02-global-styles.md b/documentation/docs/04-styling/02-global-styles.md
index 8e9cf8d0cb..140b976dc5 100644
--- a/documentation/docs/04-styling/02-global-styles.md
+++ b/documentation/docs/04-styling/02-global-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Global styles
+tags: styles-global
 ---
 
 ## :global(...)
diff --git a/documentation/docs/04-styling/03-custom-properties.md b/documentation/docs/04-styling/03-custom-properties.md
index 49984c6ce4..09faee3a98 100644
--- a/documentation/docs/04-styling/03-custom-properties.md
+++ b/documentation/docs/04-styling/03-custom-properties.md
@@ -1,5 +1,6 @@
 ---
 title: Custom properties
+tags: styles-custom-properties
 ---
 
 You can pass CSS custom properties — both static and dynamic — to components:
diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 0dfb996164..61b203f93e 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -97,6 +97,32 @@ import { createContext } from 'svelte';
 export const [getUserContext, setUserContext] = createContext<User>();
 ```
 
+When writing [component tests](testing#Unit-and-component-tests-with-Vitest-Component-testing), it can be useful to create a wrapper component that sets the context in order to check the behaviour of a component that uses it. As of version 5.49, you can do this sort of thing:
+
+```js
+import { mount, unmount } from 'svelte';
+import { expect, test } from 'vitest';
+import { setUserContext } from './context';
+import MyComponent from './MyComponent.svelte';
+
+test('MyComponent', () => {
+	function Wrapper(...args) {
+		setUserContext({ name: 'Bob' });
+		return MyComponent(...args);
+	}
+
+	const component = mount(Wrapper, {
+		target: document.body
+	});
+
+	expect(document.body.innerHTML).toBe('<h1>Hello Bob!</h1>');
+
+	unmount(component);
+});
+```
+
+This approach also works with [`hydrate`](imperative-component-api#hydrate) and [`render`](imperative-component-api#render).
+
 ## Replacing global state
 
 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:
diff --git a/documentation/docs/06-runtime/05-hydratable.md b/documentation/docs/06-runtime/05-hydratable.md
index a5302f264d..f8d5130581 100644
--- a/documentation/docs/06-runtime/05-hydratable.md
+++ b/documentation/docs/06-runtime/05-hydratable.md
@@ -63,3 +63,61 @@ All data returned from a `hydratable` function must be serializable. But this do
 {await promises.one}
 {await promises.two}
 ```
+
+## CSP
+
+`hydratable` adds an inline `<script>` block to the `head` returned from `render`. If you're using [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) (CSP), this script will likely fail to run. You can provide a `nonce` to `render`:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+// ---cut---
+const nonce = crypto.randomUUID();
+
+const { head, body } = await render(App, {
+	csp: { nonce }
+});
+```
+
+This will add the `nonce` to the script block, on the assumption that you will later add the same nonce to the CSP header of the document that contains it:
+
+```js
+/// file: server.js
+let response = new Response();
+let nonce = 'xyz123';
+// ---cut---
+response.headers.set(
+  'Content-Security-Policy',
+  `script-src 'nonce-${nonce}'`
+ );
+```
+
+It's essential that a `nonce` — which, British slang definition aside, means 'number used once' — is only used when dynamically server rendering an individual response.
+
+If instead you are generating static HTML ahead of time, you must use hashes instead:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+// ---cut---
+const { head, body, hashes } = await render(App, {
+	csp: { hash: true }
+});
+```
+
+`hashes.script` will be an array of strings like `["sha256-abcd123"]`. As with `nonce`, the hashes should be used in your CSP header:
+
+```js
+/// file: server.js
+let response = new Response();
+let hashes = { script: ['sha256-xyz123'] };
+// ---cut---
+response.headers.set(
+  'Content-Security-Policy',
+  `script-src ${hashes.script.map((hash) => `'${hash}'`).join(' ')}`
+ );
+```
+
+We recommend using `nonce` over hash if you can, as `hash` will interfere with streaming SSR in the future.
diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index 85db7fc01f..c1bc69c1c2 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -181,7 +181,7 @@ export default defineConfig({
 		/* ... */
 	],
 	test: {
-		// If you are testing components client-side, you need to setup a DOM environment.
+		// If you are testing components client-side, you need to set up a DOM environment.
 		// If not all your files should have this environment, you can use a
 		// `// @vitest-environment jsdom` comment at the top of the test files instead.
 		environment: 'jsdom'
diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index 4e5afff7d2..4c2cb3aca3 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -66,7 +66,10 @@ The inner Svelte component is destroyed in the next tick after the `disconnected
 When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:
 
 - `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component.
-- `shadow`: an optional property that can be set to `"none"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots
+- `shadow`: an optional property to modify shadow root properties. It accepts the following values:
+  - `"none"`: No shadow root is created. Note that styles are then no longer encapsulated, and you can't use slots.
+  - `"open"`: Shadow root is created with the `mode: "open"` option.
+  - [`ShadowRootInit`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options): You can pass a settings object that will be passed to `attachShadow()` when shadow root is created.
 - `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
   - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
   - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.
@@ -78,7 +81,11 @@ When constructing a custom element, you can tailor several aspects by defining `
 <svelte:options
 	customElement={{
 		tag: 'custom-element',
-		shadow: 'none',
+		shadow: {
+			mode: import.meta.env.DEV ? 'open' : 'closed',
+			clonable: true,
+			// ...
+		},
 		props: {
 			name: { reflect: true, type: 'Number', attribute: 'element-index' }
 		},
diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index 40cbc3bd9e..5a80734b7a 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -778,9 +778,9 @@ 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.
 
-### Touch and wheel events are passive
+### Touch 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()`.
+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) 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()`.
 
 In the very rare cases that you need to prevent these event defaults, you should use [`on`](/docs/svelte/svelte-events#on) instead (for example inside an action).
 
diff --git a/documentation/docs/07-misc/99-faq.md b/documentation/docs/07-misc/99-faq.md
index 4c1d19a262..035629e5ae 100644
--- a/documentation/docs/07-misc/99-faq.md
+++ b/documentation/docs/07-misc/99-faq.md
@@ -91,7 +91,7 @@ Some resources for getting started with testing:
 
 ## Is there a router?
 
-The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue.
+The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue. SvelteKit also supports hash-based routing for client-side applications.
 
 However, you can use any router library. A sampling of available routers are highlighted [on the packages page](/packages#routing).
 
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 8a8a10c80b..079b1d2a0a 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -193,7 +193,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>`, `<svelte:boundary` or `<Component>`
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
 ```
 
 ### const_tag_invalid_reference
@@ -1102,7 +1102,7 @@ Value must be %list%, if specified
 ### svelte_options_invalid_customelement
 
 ```
-"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 ```
 
 ### svelte_options_invalid_customelement_props
@@ -1114,9 +1114,11 @@ Value must be %list%, if specified
 ### svelte_options_invalid_customelement_shadow
 
 ```
-"shadow" must be either "open" or "none"
+"shadow" must be either "open", "none" or `ShadowRootInit` object.
 ```
 
+See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options for more information on valid shadow root constructor options
+
 ### svelte_options_invalid_tagname
 
 ```
diff --git a/documentation/docs/98-reference/.generated/server-errors.md b/documentation/docs/98-reference/.generated/server-errors.md
index 4d05e04207..c98756afec 100644
--- a/documentation/docs/98-reference/.generated/server-errors.md
+++ b/documentation/docs/98-reference/.generated/server-errors.md
@@ -55,6 +55,12 @@ Cause:
 %stack%
 ```
 
+### invalid_csp
+
+```
+`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+```
+
 ### lifecycle_function_unavailable
 
 ```
diff --git a/documentation/docs/98-reference/21-svelte-attachments.md b/documentation/docs/98-reference/21-svelte-attachments.md
index e446bdddc2..c414d3bbca 100644
--- a/documentation/docs/98-reference/21-svelte-attachments.md
+++ b/documentation/docs/98-reference/21-svelte-attachments.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/attachments
+tags: attachments
 ---
 
 > MODULE: svelte/attachments
diff --git a/documentation/docs/98-reference/21-svelte-transition.md b/documentation/docs/98-reference/21-svelte-transition.md
index 396bc0aebf..e2ff6dbd0e 100644
--- a/documentation/docs/98-reference/21-svelte-transition.md
+++ b/documentation/docs/98-reference/21-svelte-transition.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/transition
+tags: transitions
 ---
 
 > MODULE: svelte/transition
diff --git a/eslint.config.js b/eslint.config.js
index 0e0e0bc729..0e8382427b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -33,7 +33,7 @@ const no_compiler_imports = {
 	}
 };
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
+/** @type {import('eslint').Linter.Config[]} */
 export default [
 	...svelte_config,
 	{
@@ -102,6 +102,7 @@ export default [
 			'playgrounds/sandbox/**',
 			// exclude top level config files
 			'*.config.js',
+			'vitest-xhtml-environment.ts',
 			// documentation can contain invalid examples
 			'documentation',
 			'tmp/**'
diff --git a/package.json b/package.json
index 12e59a2665..b305ce9cd1 100644
--- a/package.json
+++ b/package.json
@@ -21,28 +21,36 @@
     "test": "vitest run",
     "changeset:version": "changeset version && pnpm -r generate:version && git add --all",
     "changeset:publish": "changeset publish",
-    "bench": "node --allow-natives-syntax ./benchmarking/run.js",
-    "bench:compare": "node --allow-natives-syntax ./benchmarking/compare/index.js",
-    "bench:debug": "node --allow-natives-syntax --inspect-brk ./benchmarking/run.js"
+    "bench": "NODE_ENV=production node --allow-natives-syntax ./benchmarking/run.js",
+    "bench:compare": "NODE_ENV=production node --allow-natives-syntax ./benchmarking/compare/index.js",
+    "bench:debug": "NODE_ENV=production node --allow-natives-syntax --inspect-brk ./benchmarking/run.js"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@sveltejs/eslint-config": "^8.3.3",
+    "@sveltejs/eslint-config": "^8.3.5",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
     "@types/picomatch": "^4.0.2",
     "@vitest/coverage-v8": "^2.1.9",
-    "eslint": "^9.9.1",
-    "eslint-plugin-lube": "^0.4.3",
-    "eslint-plugin-svelte": "^3.11.0",
+    "@eslint/js": "^10.0.0",
+    "eslint": "^10.0.0",
+    "eslint-plugin-lube": "^0.5.1",
+    "eslint-plugin-svelte": "^3.15.0",
     "jsdom": "25.0.1",
-    "playwright": "^1.46.1",
+    "playwright": "^1.58.0",
     "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.4.0",
     "svelte": "workspace:^",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.48.1",
+    "typescript-eslint": "^8.55.0",
     "v8-natives": "^1.2.5",
     "vitest": "^2.1.9"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "eslint": "10"
+      }
+    }
   }
 }
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b6ea395a9d..3fcc8edfc1 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,233 @@
 # svelte
 
+## 5.50.1
+
+### Patch Changes
+
+- fix: render boolean attribute values as empty strings for XHTML compliance ([#17648](https://github.com/sveltejs/svelte/pull/17648))
+
+- fix: prevent async render tag hydration mismatches ([#17652](https://github.com/sveltejs/svelte/pull/17652))
+
+## 5.50.0
+
+### Minor Changes
+
+- feat: allow use of createContext when instantiating components programmatically ([#17575](https://github.com/sveltejs/svelte/pull/17575))
+
+### Patch Changes
+
+- fix: ensure infinite effect loops are cleared after flushing ([#17601](https://github.com/sveltejs/svelte/pull/17601))
+
+- fix: allow `{#key NaN}` ([#17642](https://github.com/sveltejs/svelte/pull/17642))
+
+- fix: detect store in each block expression regardless of AST shape ([#17636](https://github.com/sveltejs/svelte/pull/17636))
+
+- fix: treat `<menu>` like `<ul>`/`<ol>` for a11y role checks ([#17638](https://github.com/sveltejs/svelte/pull/17638))
+
+- fix: add vite-ignore comment inside dynamic crypto import ([#17623](https://github.com/sveltejs/svelte/pull/17623))
+
+- chore: wrap JSDoc URLs in `@see` and `@link` tags ([#17617](https://github.com/sveltejs/svelte/pull/17617))
+
+- fix: properly hydrate already-resolved async blocks ([#17641](https://github.com/sveltejs/svelte/pull/17641))
+
+- fix: emit `each_key_duplicate` error in production ([#16724](https://github.com/sveltejs/svelte/pull/16724))
+
+- fix: exit resolved async blocks on correct node when hydrating ([#17640](https://github.com/sveltejs/svelte/pull/17640))
+
+## 5.49.2
+
+### Patch Changes
+
+- chore: remove SvelteKit data attributes from elements.d.ts ([#17613](https://github.com/sveltejs/svelte/pull/17613))
+
+- fix: avoid erroneous async derived expressions for blocks ([#17604](https://github.com/sveltejs/svelte/pull/17604))
+
+- fix: avoid Cloudflare warnings about not having the "node:crypto" module ([#17612](https://github.com/sveltejs/svelte/pull/17612))
+
+- fix: reschedule effects inside unskipped branches ([#17604](https://github.com/sveltejs/svelte/pull/17604))
+
+## 5.49.1
+
+### Patch Changes
+
+- fix: merge consecutive large text nodes ([#17587](https://github.com/sveltejs/svelte/pull/17587))
+
+- fix: only create async functions in SSR output when necessary ([#17593](https://github.com/sveltejs/svelte/pull/17593))
+
+- fix: properly separate multiline html blocks from each other in `print()` ([#17319](https://github.com/sveltejs/svelte/pull/17319))
+
+- fix: prevent unhandled exceptions arising from dangling promises in <script> ([#17591](https://github.com/sveltejs/svelte/pull/17591))
+
+## 5.49.0
+
+### Minor Changes
+
+- feat: allow passing `ShadowRootInit` object to custom element `shadow` option ([#17088](https://github.com/sveltejs/svelte/pull/17088))
+
+### Patch Changes
+
+- fix: throw for unset `createContext` get on the server ([#17580](https://github.com/sveltejs/svelte/pull/17580))
+
+- fix: reset effects inside skipped branches ([#17581](https://github.com/sveltejs/svelte/pull/17581))
+
+- fix: preserve old dependencies when updating reaction inside fork ([#17579](https://github.com/sveltejs/svelte/pull/17579))
+
+- fix: more conservative assignment_value_stale warnings ([#17574](https://github.com/sveltejs/svelte/pull/17574))
+
+- fix: disregard `popover` elements when determining whether an element has content ([#17367](https://github.com/sveltejs/svelte/pull/17367))
+
+- fix: fire introstart/outrostart events after delay, if specified ([#17567](https://github.com/sveltejs/svelte/pull/17567))
+
+- fix: increment signal versions when discarding forks ([#17577](https://github.com/sveltejs/svelte/pull/17577))
+
+## 5.48.5
+
+### Patch Changes
+
+- fix: run boundary `onerror` callbacks in a microtask, in case they result in the boundary's destruction ([#17561](https://github.com/sveltejs/svelte/pull/17561))
+
+- fix: prevent unintended exports from namespaces ([#17562](https://github.com/sveltejs/svelte/pull/17562))
+
+- fix: each block breaking with effects interspersed among items ([#17550](https://github.com/sveltejs/svelte/pull/17550))
+
+## 5.48.4
+
+### Patch Changes
+
+- fix: avoid duplicating escaped characters in CSS AST ([#17554](https://github.com/sveltejs/svelte/pull/17554))
+
+## 5.48.3
+
+### Patch Changes
+
+- fix: hydration failing with settled async blocks ([#17539](https://github.com/sveltejs/svelte/pull/17539))
+
+- fix: add pointer and touch events to a11y_no_static_element_interactions warning ([#17551](https://github.com/sveltejs/svelte/pull/17551))
+
+- fix: handle false dynamic components in SSR ([#17542](https://github.com/sveltejs/svelte/pull/17542))
+
+- fix: avoid unnecessary block effect re-runs after async work completes ([#17535](https://github.com/sveltejs/svelte/pull/17535))
+
+- fix: avoid using dev-mode array.includes wrapper on internal array checks ([#17536](https://github.com/sveltejs/svelte/pull/17536))
+
+## 5.48.2
+
+### Patch Changes
+
+- fix: export `wait` function from internal client index ([#17530](https://github.com/sveltejs/svelte/pull/17530))
+
+## 5.48.1
+
+### Patch Changes
+
+- fix: hoist snippets above const in same block ([#17516](https://github.com/sveltejs/svelte/pull/17516))
+
+- fix: properly hydrate await in `{@html}` ([#17528](https://github.com/sveltejs/svelte/pull/17528))
+
+- fix: batch resolution of async work ([#17511](https://github.com/sveltejs/svelte/pull/17511))
+
+- fix: account for empty statements when visiting in transform async ([#17524](https://github.com/sveltejs/svelte/pull/17524))
+
+- fix: avoid async overhead for already settled promises ([#17461](https://github.com/sveltejs/svelte/pull/17461))
+
+- fix: better code generation for const tags with async dependencies ([#17518](https://github.com/sveltejs/svelte/pull/17518))
+
+## 5.48.0
+
+### Minor Changes
+
+- feat: export `parseCss` from `svelte/compiler` ([#17496](https://github.com/sveltejs/svelte/pull/17496))
+
+### Patch Changes
+
+- fix: handle non-string values in `svelte:element` `this` attribute ([#17499](https://github.com/sveltejs/svelte/pull/17499))
+
+- fix: faster deduplication of dependencies ([#17503](https://github.com/sveltejs/svelte/pull/17503))
+
+## 5.47.1
+
+### Patch Changes
+
+- fix: trigger `selectedcontent` reactivity ([#17486](https://github.com/sveltejs/svelte/pull/17486))
+
+## 5.47.0
+
+### Minor Changes
+
+- feat: customizable `<select>` elements ([#17429](https://github.com/sveltejs/svelte/pull/17429))
+
+### Patch Changes
+
+- fix: mark subtree of svelte boundary as dynamic ([#17468](https://github.com/sveltejs/svelte/pull/17468))
+
+- fix: don't reset static elements with debug/snippets ([#17477](https://github.com/sveltejs/svelte/pull/17477))
+
+## 5.46.4
+
+### Patch Changes
+
+- fix: use `devalue.uneval` to serialize `hydratable` keys ([`ef81048e238844b729942441541d6dcfe6c8ccca`](https://github.com/sveltejs/svelte/commit/ef81048e238844b729942441541d6dcfe6c8ccca))
+
+## 5.46.3
+
+### Patch Changes
+
+- fix: reconnect clean deriveds when they are read in a reactive context ([#17362](https://github.com/sveltejs/svelte/pull/17362))
+
+- fix: don't transform references of function declarations in legacy mode ([#17431](https://github.com/sveltejs/svelte/pull/17431))
+
+- fix: notify deriveds of changes to sources inside forks ([#17437](https://github.com/sveltejs/svelte/pull/17437))
+
+- fix: always reconnect deriveds in get, when appropriate ([#17451](https://github.com/sveltejs/svelte/pull/17451))
+
+- fix: prevent derives without dependencies from ever re-running ([`286b40c4526ce9970cb81ddd5e65b93b722fe468`](https://github.com/sveltejs/svelte/commit/286b40c4526ce9970cb81ddd5e65b93b722fe468))
+
+- fix: correctly update writable deriveds inside forks ([#17437](https://github.com/sveltejs/svelte/pull/17437))
+
+- fix: remove `$inspect` calls after await expressions when compiling for production server code ([#17407](https://github.com/sveltejs/svelte/pull/17407))
+
+- fix: clear batch between runs ([#17424](https://github.com/sveltejs/svelte/pull/17424))
+
+- fix: adjust `loc` property of `Program` nodes created from `<script>` elements ([#17428](https://github.com/sveltejs/svelte/pull/17428))
+
+- fix: don't revert source to UNINITIALIZED state when time travelling ([#17409](https://github.com/sveltejs/svelte/pull/17409))
+
+## 5.46.2
+
+### Notice
+
+Not published due to CI issue
+
+## 5.46.1
+
+### Patch Changes
+
+- fix: type `currentTarget` in `on` function ([#17370](https://github.com/sveltejs/svelte/pull/17370))
+
+- fix: skip static optimisation for stateless deriveds after `await` ([#17389](https://github.com/sveltejs/svelte/pull/17389))
+
+- fix: prevent infinite loop when HMRing a component with an `await` ([#17380](https://github.com/sveltejs/svelte/pull/17380))
+
+## 5.46.0
+
+### Minor Changes
+
+- feat: Add `csp` option to `render(...)`, and emit hashes when using `hydratable` ([#17338](https://github.com/sveltejs/svelte/pull/17338))
+
+## 5.45.10
+
+### Patch Changes
+
+- fix: race condition when importing `AsyncLocalStorage` ([#17350](https://github.com/sveltejs/svelte/pull/17350))
+
+## 5.45.9
+
+### Patch Changes
+
+- fix: correctly reschedule deferred effects when reviving a batch after async work ([#17332](https://github.com/sveltejs/svelte/pull/17332))
+
+- fix: correctly print `!doctype` during `print` ([#17341](https://github.com/sveltejs/svelte/pull/17341))
+
 ## 5.45.8
 
 ### Patch Changes
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 4dba2c5c32..885004dd2a 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -851,23 +851,6 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	readonly 'bind:offsetWidth'?: number | undefined | null;
 	readonly 'bind:offsetHeight'?: number | undefined | null;
 
-	// SvelteKit
-	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-preload-code'?:
-		| true
-		| ''
-		| 'eager'
-		| 'viewport'
-		| 'hover'
-		| 'tap'
-		| 'off'
-		| undefined
-		| null;
-	'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
-	'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
-
 	// allow any data- attribute
 	[key: `data-${string}`]: any;
 
@@ -2062,7 +2045,7 @@ export interface SvelteHTMLElements {
 			| undefined
 			| {
 					tag?: string;
-					shadow?: 'open' | 'none' | undefined;
+					shadow?: 'open' | 'none' | ShadowRootInit | undefined;
 					props?:
 						| Record<
 								string,
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index db23a2eaa8..bd07955bc3 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -122,7 +122,7 @@
 
 ## const_tag_invalid_placement
 
-> `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
+> `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
 
 ## const_tag_invalid_reference
 
@@ -411,7 +411,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_customelement
 
-> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 
 ## svelte_options_invalid_customelement_props
 
@@ -419,7 +419,9 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_customelement_shadow
 
-> "shadow" must be either "open" or "none"
+> "shadow" must be either "open", "none" or `ShadowRootInit` object.
+
+See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options for more information on valid shadow root constructor options
 
 ## svelte_options_invalid_tagname
 
diff --git a/packages/svelte/messages/server-errors/errors.md b/packages/svelte/messages/server-errors/errors.md
index ac2ecc0a40..fd4c17e2a7 100644
--- a/packages/svelte/messages/server-errors/errors.md
+++ b/packages/svelte/messages/server-errors/errors.md
@@ -43,6 +43,10 @@ This error occurs when using `hydratable` multiple times with the same key. To a
 > Cause:
 > %stack%
 
+## invalid_csp
+
+> `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+
 ## lifecycle_function_unavailable
 
 > `%name%(...)` is not available on the server
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 86838513d2..8ebb0a6b32 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.45.8",
+  "version": "5.50.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -150,7 +150,7 @@
   },
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.58.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -174,9 +174,9 @@
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
-    "devalue": "^5.5.0",
+    "devalue": "^5.6.2",
     "esm-env": "^1.2.1",
-    "esrap": "^2.2.1",
+    "esrap": "^2.2.2",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 823dbde9a4..159a568477 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -16,7 +16,7 @@ declare module '*.svelte' {
  * let count = $state(0);
  * ```
  *
- * https://svelte.dev/docs/svelte/$state
+ * @see {@link https://svelte.dev/docs/svelte/$state Documentation}
  *
  * @param initial The initial value
  */
@@ -126,7 +126,7 @@ declare namespace $state {
 	 * </button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.raw
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.raw Documentation}
 	 *
 	 * @param initial The initial value
 	 */
@@ -147,7 +147,7 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.snapshot
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation}
 	 *
 	 * @param state The value to snapshot
 	 */
@@ -173,6 +173,9 @@ declare namespace $state {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -184,7 +187,7 @@ declare namespace $state {
  * let double = $derived(count * 2);
  * ```
  *
- * https://svelte.dev/docs/svelte/$derived
+ * @see {@link https://svelte.dev/docs/svelte/$derived Documentation}
  *
  * @param expression The derived state expression
  */
@@ -206,7 +209,7 @@ declare namespace $derived {
 	 * });
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$derived#$derived.by
+	 * @see {@link https://svelte.dev/docs/svelte/$derived#$derived.by Documentation}
 	 */
 	export function by<T>(fn: () => T): T;
 
@@ -230,6 +233,9 @@ declare namespace $derived {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -245,7 +251,7 @@ declare namespace $derived {
  *
  * Does not run during server-side rendering.
  *
- * https://svelte.dev/docs/svelte/$effect
+ * @see {@link https://svelte.dev/docs/svelte/$effect Documentation}
  * @param fn The function to execute
  */
 declare function $effect(fn: () => void | (() => void)): void;
@@ -264,7 +270,7 @@ declare namespace $effect {
 	 *
 	 * Does not run during server-side rendering.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pre Documentation}
 	 * @param fn The function to execute
 	 */
 	export function pre(fn: () => void | (() => void)): void;
@@ -272,7 +278,7 @@ declare namespace $effect {
 	/**
 	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pending Documentation}
 	 */
 	export function pending(): number;
 
@@ -294,7 +300,7 @@ declare namespace $effect {
 	 *
 	 * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.tracking
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.tracking Documentation}
 	 */
 	export function tracking(): boolean;
 
@@ -322,7 +328,7 @@ declare namespace $effect {
 	 * <button onclick={() => cleanup()}>cleanup</button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.root
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.root Documentation}
 	 */
 	export function root(fn: () => void | (() => void)): () => void;
 
@@ -346,6 +352,9 @@ declare namespace $effect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -355,7 +364,7 @@ declare namespace $effect {
  * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$props
+ * @see {@link https://svelte.dev/docs/svelte/$props Documentation}
  */
 declare function $props(): any;
 
@@ -389,6 +398,9 @@ declare namespace $props {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -398,7 +410,7 @@ declare namespace $props {
  * let { propName = $bindable() }: { propName: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$bindable
+ * @see {@link https://svelte.dev/docs/svelte/$bindable Documentation}
  */
 declare function $bindable<T>(fallback?: T): T;
 
@@ -423,6 +435,9 @@ declare namespace $bindable {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -441,7 +456,7 @@ declare namespace $bindable {
  * $inspect(x, y).with(() => { debugger; });
  * ```
  *
- * https://svelte.dev/docs/svelte/$inspect
+ * @see {@link https://svelte.dev/docs/svelte/$inspect Documentation}
  */
 declare function $inspect<T extends any[]>(
 	...values: T
@@ -485,6 +500,9 @@ declare namespace $inspect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -504,7 +522,7 @@ declare namespace $inspect {
  *
  * Only available inside custom element components, and only on the client-side.
  *
- * https://svelte.dev/docs/svelte/$host
+ * @see {@link https://svelte.dev/docs/svelte/$host Documentation}
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
@@ -529,4 +547,7 @@ declare namespace $host {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index d6c2efdfdc..3997dbec32 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -977,12 +977,12 @@ export function const_tag_invalid_expression(node) {
 }
 
 /**
- * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
+ * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function const_tag_invalid_placement(node) {
-	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
+	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary>\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
 }
 
 /**
@@ -1550,12 +1550,12 @@ export function svelte_options_invalid_attribute_value(node, list) {
 }
 
 /**
- * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+ * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function svelte_options_invalid_customelement(node) {
-	e(node, 'svelte_options_invalid_customelement', `"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\nhttps://svelte.dev/e/svelte_options_invalid_customelement`);
+	e(node, 'svelte_options_invalid_customelement', `"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | \`ShadowRootInit\`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\nhttps://svelte.dev/e/svelte_options_invalid_customelement`);
 }
 
 /**
@@ -1568,12 +1568,12 @@ export function svelte_options_invalid_customelement_props(node) {
 }
 
 /**
- * "shadow" must be either "open" or "none"
+ * "shadow" must be either "open", "none" or `ShadowRootInit` object.
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function svelte_options_invalid_customelement_shadow(node) {
-	e(node, 'svelte_options_invalid_customelement_shadow', `"shadow" must be either "open" or "none"\nhttps://svelte.dev/e/svelte_options_invalid_customelement_shadow`);
+	e(node, 'svelte_options_invalid_customelement_shadow', `"shadow" must be either "open", "none" or \`ShadowRootInit\` object.\nhttps://svelte.dev/e/svelte_options_invalid_customelement_shadow`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 9095a2a2f2..acfef6a320 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -3,8 +3,9 @@
 /** @import { AST } from './public.js' */
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { convert } from './legacy.js';
-import { parse as _parse } from './phases/1-parse/index.js';
+import { parse as _parse, Parser } from './phases/1-parse/index.js';
 import { remove_typescript_nodes } from './phases/1-parse/remove_typescript_nodes.js';
+import { parse_stylesheet } from './phases/1-parse/read/style.js';
 import { analyze_component, analyze_module } from './phases/2-analyze/index.js';
 import { transform_component, transform_module } from './phases/3-transform/index.js';
 import { validate_component_options, validate_module_options } from './validate-options.js';
@@ -118,6 +119,29 @@ export function parse(source, { modern, loose } = {}) {
 	return to_public_ast(source, ast, modern);
 }
 
+/**
+ * The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
+ *
+ * @param {string} source The CSS source code
+ * @returns {Omit<AST.CSS.StyleSheet, 'attributes' | 'content'>}
+ */
+export function parseCss(source) {
+	source = remove_bom(source);
+	state.reset({ warning: () => false, filename: undefined });
+
+	state.set_source(source);
+
+	const parser = Parser.forCss(source);
+	const children = parse_stylesheet(parser);
+
+	return {
+		type: 'StyleSheet',
+		start: 0,
+		end: source.length,
+		children
+	};
+}
+
 /**
  * @param {string} source
  * @param {AST.Root} ast
diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index 3b5f83d58f..88b4352e8a 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -34,6 +34,20 @@ export class Parser {
 	/** */
 	index = 0;
 
+	/**
+	 * Creates a minimal parser instance for CSS-only parsing.
+	 * Skips Svelte component parsing setup.
+	 * @param {string} source
+	 * @returns {Parser}
+	 */
+	static forCss(source) {
+		const parser = Object.create(Parser.prototype);
+		parser.template = source;
+		parser.index = 0;
+		parser.loose = false;
+		return parser;
+	}
+
 	/** Whether we're parsing in TypeScript mode */
 	ts = false;
 
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index a36e101468..2677fb3b61 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -133,11 +133,13 @@ export default function read_options(node) {
 
 				const shadow = properties.find(([name]) => name === 'shadow')?.[1];
 				if (shadow) {
-					const shadowdom = shadow?.value;
-					if (shadowdom !== 'open' && shadowdom !== 'none') {
-						e.svelte_options_invalid_customelement_shadow(shadow);
+					if (shadow.type === 'Literal' && (shadow.value === 'open' || shadow.value === 'none')) {
+						ce.shadow = shadow.value;
+					} else if (shadow.type === 'ObjectExpression') {
+						ce.shadow = shadow;
+					} else {
+						e.svelte_options_invalid_customelement_shadow(attribute);
 					}
-					ce.shadow = shadowdom;
 				}
 
 				const extend = properties.find(([name]) => name === 'extend')?.[1];
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 9ce449f200..db3c50a8d1 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -6,6 +6,7 @@ import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_text_attribute } from '../../../utils/ast.js';
+import { locator } from '../../../state.js';
 
 const regex_closing_script_tag = /<\/script\s*>/;
 const regex_starts_with_closing_script_tag = /^<\/script\s*>/;
@@ -39,9 +40,15 @@ export function read_script(parser, start, attributes) {
 		parser.acorn_error(err);
 	}
 
-	// TODO is this necessary?
 	ast.start = script_start;
 
+	if (ast.loc) {
+		// Acorn always uses `0` as the start of a `Program`, but for sourcemap purposes
+		// we need it to be the start of the `<script>` contents
+		({ line: ast.loc.start.line, column: ast.loc.start.column } = locator(start));
+		({ line: ast.loc.end.line, column: ast.loc.end.column } = locator(parser.index));
+	}
+
 	/** @type {'default' | 'module'} */
 	let context = 'default';
 
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js
index 80ab234d92..4f2db349cd 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/style.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js
@@ -24,10 +24,11 @@ const REGEX_HTML_COMMENT_CLOSE = /-->/;
  */
 export default function read_style(parser, start, attributes) {
 	const content_start = parser.index;
-	const children = read_body(parser, '</style');
+	const children = read_body(parser, (p) => p.match('</style') || p.index >= p.template.length);
 	const content_end = parser.index;
 
-	parser.read(/^<\/style\s*>/);
+	parser.eat('</style', true);
+	parser.read(/^\s*>/);
 
 	return {
 		type: 'StyleSheet',
@@ -46,20 +47,14 @@ export default function read_style(parser, start, attributes) {
 
 /**
  * @param {Parser} parser
- * @param {string} close
- * @returns {any[]}
+ * @param {(parser: Parser) => boolean} finished
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
  */
-function read_body(parser, close) {
+function read_body(parser, finished) {
 	/** @type {Array<AST.CSS.Rule | AST.CSS.Atrule>} */
 	const children = [];
 
-	while (parser.index < parser.template.length) {
-		allow_comment_or_whitespace(parser);
-
-		if (parser.match(close)) {
-			return children;
-		}
-
+	while ((allow_comment_or_whitespace(parser), !finished(parser))) {
 		if (parser.match('@')) {
 			children.push(read_at_rule(parser));
 		} else {
@@ -67,7 +62,7 @@ function read_body(parser, close) {
 		}
 	}
 
-	e.expected_token(parser.template.length, close);
+	return children;
 }
 
 /**
@@ -513,8 +508,12 @@ function read_value(parser) {
 		if (escaped) {
 			value += '\\' + char;
 			escaped = false;
+			parser.index++;
+			continue;
 		} else if (char === '\\') {
 			escaped = true;
+			parser.index++;
+			continue;
 		} else if (char === quote_mark) {
 			quote_mark = null;
 		} else if (char === ')') {
@@ -569,7 +568,7 @@ function read_attribute_value(parser) {
 }
 
 /**
- * https://www.w3.org/TR/css-syntax-3/#ident-token-diagram
+ * @see {@link https://www.w3.org/TR/css-syntax-3/#ident-token-diagram CSS Syntax Module Level 3}
  * @param {Parser} parser
  */
 function read_identifier(parser) {
@@ -627,3 +626,12 @@ function allow_comment_or_whitespace(parser) {
 		parser.allow_whitespace();
 	}
 }
+
+/**
+ * Parse standalone CSS content (not wrapped in `<style>`).
+ * @param {Parser} parser
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
+ */
+export function parse_stylesheet(parser) {
+	return read_body(parser, (p) => p.index >= p.template.length);
+}
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js b/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
index 28b314cdd5..c8cf7f14ff 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
@@ -46,10 +46,11 @@ function levenshtein(str1, str2) {
 	/** @type {number[]} */
 	const current = [];
 	let prev = 0;
-	let value = 0;
 
 	for (let i = 0; i <= str2.length; i++) {
 		for (let j = 0; j <= str1.length; j++) {
+			let value;
+
 			if (i && j) {
 				if (str1.charAt(j - 1) === str2.charAt(i - 1)) {
 					value = prev;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 8a4d8cb350..7242c69d8c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -770,7 +770,39 @@ function get_ancestor_elements(node, adjacent_only, seen = new Set()) {
 		}
 
 		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+			// Special handling for <option> inside <select>: elements inside <option> should
+			// also be considered descendants of <selectedcontent>, which clones the selected option's content
+			if (parent.type === 'RegularElement' && parent.name === 'option') {
+				const is_direct_child = ancestors.length === 0;
+
+				const select_element = path.findLast(
+					(element, j) => element.type === 'RegularElement' && element.name === 'select' && j < i
+				);
+
+				if (select_element && (!adjacent_only || is_direct_child)) {
+					/** @type {Compiler.AST.RegularElement | null} */
+					let selectedcontent_element = null;
+					walk(select_element, null, {
+						RegularElement(child, context) {
+							if (child.name === 'selectedcontent') {
+								selectedcontent_element = child;
+								context.stop();
+								return;
+							}
+							context.next();
+						}
+					});
+
+					if (adjacent_only && is_direct_child && selectedcontent_element) {
+						return [selectedcontent_element, parent];
+					} else if (selectedcontent_element) {
+						ancestors.push(selectedcontent_element);
+					}
+				}
+			}
+
 			ancestors.push(parent);
+
 			if (adjacent_only) {
 				break;
 			}
@@ -817,6 +849,34 @@ function get_descendant_elements(node, adjacent_only, seen = new Set()) {
 
 	walk_children(node.type === 'RenderTag' ? node : node.fragment);
 
+	// Special handling for <selectedcontent>: it clones the content of the selected <option>,
+	// so descendants of <option> elements in the same <select> should also be considered descendants
+	if (node.type === 'RegularElement' && node.name === 'selectedcontent') {
+		const path = node.metadata.path;
+		const select_element = path.findLast(
+			(/** @type {Compiler.AST.SvelteNode} */ element) =>
+				element.type === 'RegularElement' && element.name === 'select'
+		);
+
+		if (select_element) {
+			walk(
+				select_element,
+				{ inside_option: false },
+				{
+					_(child, context) {
+						if (child.type === 'RegularElement' && child.name === 'option') {
+							context.next({ inside_option: true });
+						} else if (context.state.inside_option) {
+							walk_children(child);
+						} else {
+							context.next();
+						}
+					}
+				}
+			);
+		}
+	}
+
 	return descendants;
 }
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 6d23e4d265..ef0b35f560 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -657,7 +657,8 @@ export function analyze_component(root, source, options) {
 									if (
 										binding &&
 										binding.kind === 'normal' &&
-										binding.declaration_kind !== 'import'
+										binding.declaration_kind !== 'import' &&
+										binding.declaration_kind !== 'function'
 									) {
 										binding.kind = 'state';
 										binding.mutated = true;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index 81a9c1e2d1..5681966475 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -54,7 +54,9 @@ export function EachBlock(node, context) {
 
 		// collect transitive dependencies...
 		for (const binding of node.metadata.expression.dependencies) {
-			collect_transitive_dependencies(binding, node.metadata.transitive_deps);
+			if (binding.declaration_kind !== 'function') {
+				collect_transitive_dependencies(binding, node.metadata.transitive_deps);
+			}
 		}
 
 		// ...and ensure they are marked as state, so they can be turned
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
index dcdae3587f..64855abdaf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
@@ -24,4 +24,23 @@ export function IfBlock(node, context) {
 
 	context.visit(node.consequent);
 	if (node.alternate) context.visit(node.alternate);
+
+	// Check if we can flatten branches
+	const alt = node.alternate;
+
+	if (alt && alt.nodes.length === 1 && alt.nodes[0].type === 'IfBlock' && alt.nodes[0].elseif) {
+		const elseif = alt.nodes[0];
+
+		// Don't flatten if this else-if has an await expression or new blockers
+		// TODO would be nice to check the await expression itself to see if it's awaiting the same thing as a previous if expression
+		if (
+			!elseif.metadata.expression.has_await &&
+			!elseif.metadata.expression.has_more_blockers_than(node.metadata.expression)
+		) {
+			// Roll the existing flattened branches (if any) into this one, then delete those of the else-if block
+			// to avoid processing them multiple times as we walk down the chain during code transformation.
+			node.metadata.flattened = [elseif, ...(elseif.metadata.flattened ?? [])];
+			elseif.metadata.flattened = undefined;
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 5fce138089..c7b40109a3 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -7,7 +7,11 @@ import {
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { create_attribute, is_custom_element_node } from '../../nodes.js';
+import {
+	create_attribute,
+	is_custom_element_node,
+	is_customizable_select_element
+} from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
 import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
@@ -74,6 +78,15 @@ export function RegularElement(node, context) {
 		node.metadata.synthetic_value_node = child;
 	}
 
+	// Special case: <select>, <option> or <optgroup> with rich content needs special hydration handling
+	// We mark the subtree as dynamic so parent elements properly include the child init code
+	if (is_customizable_select_element(node) || node.name === 'selectedcontent') {
+		// Mark the element's own fragment as dynamic so it's not treated as static
+		node.fragment.metadata.dynamic = true;
+		// Also mark ancestor fragments so parents properly include the child init code
+		mark_subtree_dynamic(context.path);
+	}
+
 	const binding = context.state.scope.get(node.name);
 	if (
 		binding !== null &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
index 35af96ba12..e0014aa7b2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 const valid = ['onerror', 'failed', 'pending'];
 
@@ -23,5 +24,7 @@ export function SvelteBoundary(node, context) {
 		}
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
index a1b70f2207..49099c2cb1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
@@ -67,7 +67,21 @@ export const a11y_interactive_handlers = [
 	'mousemove',
 	'mouseout',
 	'mouseover',
-	'mouseup'
+	'mouseup',
+	// Pointer events
+	'pointerdown',
+	'pointerup',
+	'pointermove',
+	'pointerenter',
+	'pointerleave',
+	'pointerover',
+	'pointerout',
+	'pointercancel',
+	// Touch events
+	'touchstart',
+	'touchend',
+	'touchmove',
+	'touchcancel'
 ];
 
 export const a11y_recommended_interactive_handlers = [
@@ -160,6 +174,7 @@ export const input_type_to_implicit_role = new Map([
 export const a11y_non_interactive_element_to_interactive_role_exceptions = {
 	ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
 	ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+	menu: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
 	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
 	table: ['grid'],
 	td: ['gridcell'],
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
index 717ee4bf50..45de8b10a1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
@@ -167,7 +167,7 @@ export function check_element(node, context) {
 					if (
 						current_role === get_implicit_role(node.name, attribute_map) &&
 						// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
-						!['ul', 'ol', 'li'].includes(node.name) &&
+						!['ul', 'ol', 'li', 'menu'].includes(node.name) &&
 						// <a role="link" /> is ok because without href the a tag doesn't have a role of link
 						!(node.name === 'a' && !attribute_map.has('href'))
 					) {
@@ -824,6 +824,10 @@ function has_content(element) {
 		}
 
 		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+			if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'popover')) {
+				continue;
+			}
+
 			if (
 				node.name === 'img' &&
 				node.attributes.some((node) => node.type === 'Attribute' && node.name === 'alt')
@@ -831,6 +835,10 @@ function has_content(element) {
 				return true;
 			}
 
+			if (node.name === 'selectedcontent') {
+				return true;
+			}
+
 			if (!has_content(node)) {
 				continue;
 			}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index f51042eb7c..b50a73b8b6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -166,10 +166,12 @@ export function client_component(analysis, options) {
 		in_constructor: false,
 		instance_level_snippets: [],
 		module_level_snippets: [],
+		is_standalone: false,
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
 		consts: /** @type {any} */ (null),
+		snippets: /** @type {any} */ (null),
 		let_directives: /** @type {any} */ (null),
 		update: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
@@ -519,14 +521,9 @@ export function client_component(analysis, options) {
 
 	if (options.hmr) {
 		const id = b.id(analysis.name);
-		const HMR = b.id('$.HMR');
-
-		const existing = b.member(id, HMR, true);
-		const incoming = b.member(b.id('module.default'), HMR, true);
 
 		const accept_fn_body = [
-			b.stmt(b.assignment('=', b.member(incoming, 'source'), b.member(existing, 'source'))),
-			b.stmt(b.call('$.set', b.member(existing, 'source'), b.member(incoming, 'original')))
+			b.stmt(b.call(b.member(b.member(id, b.id('$.HMR'), true), 'update'), b.id('module.default')))
 		];
 
 		if (analysis.css.hash) {
@@ -535,8 +532,7 @@ export function client_component(analysis, options) {
 		}
 
 		const hmr = b.block([
-			b.stmt(b.assignment('=', id, b.call('$.hmr', id, b.thunk(b.member(existing, 'source'))))),
-
+			b.stmt(b.assignment('=', id, b.call('$.hmr', id))),
 			b.stmt(b.call('import.meta.hot.accept', b.arrow([b.id('module')], b.block(accept_fn_body))))
 		]);
 
@@ -643,7 +639,16 @@ export function client_component(analysis, options) {
 		const accessors_str = b.array(
 			analysis.exports.map(({ name, alias }) => b.literal(alias ?? name))
 		);
-		const use_shadow_dom = typeof ce === 'boolean' || ce.shadow !== 'none' ? true : false;
+
+		/** @type {ESTree.ObjectExpression | undefined} */
+		let shadow_root_init;
+		if (typeof ce === 'boolean' || ce.shadow === 'open' || ce.shadow === undefined) {
+			shadow_root_init = b.object([b.init('mode', b.literal('open'))]);
+		} else if (ce.shadow === 'none') {
+			shadow_root_init = undefined;
+		} else {
+			shadow_root_init = ce.shadow;
+		}
 
 		const create_ce = b.call(
 			'$.create_custom_element',
@@ -651,7 +656,7 @@ export function client_component(analysis, options) {
 			b.object(props_str),
 			slots_str,
 			accessors_str,
-			b.literal(use_shadow_dom),
+			shadow_root_init,
 			/** @type {any} */ (typeof ce !== 'boolean' ? ce.extend : undefined)
 		);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index d64b1d4126..287bf24ac6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -49,6 +49,8 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly update: Statement[];
 	/** Stuff that happens after the render effect (control blocks, dynamic elements, bindings, actions, etc) */
 	readonly after_update: Statement[];
+	/** Transformed `{#snippets }` declarations */
+	readonly snippets: Statement[];
 	/** Transformed `{@const }` declarations */
 	readonly consts: Statement[];
 	/** Transformed async `{@const }` declarations (if any) and those coming after them */
@@ -81,6 +83,9 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly instance_level_snippets: VariableDeclaration[];
 	/** Snippets hoisted to the module */
 	readonly module_level_snippets: VariableDeclaration[];
+
+	/** True if the current node is a) a component or render tag and b) the sole child of a block  */
+	readonly is_standalone: boolean;
 }
 
 export type Context = import('zimmerframe').Context<AST.SvelteNode, ClientTransformState>;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index 731569aaae..0f6a619357 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -162,7 +162,10 @@ function build_assignment(operator, left, right, context) {
 	// will be pushed to. we do this by transforming it to something like
 	// `$.assign_nullish(object, 'items', [])`
 	let should_transform =
-		dev && path.at(-1) !== 'ExpressionStatement' && is_non_coercive_operator(operator);
+		dev &&
+		path.at(-1) !== 'ExpressionStatement' &&
+		is_non_coercive_operator(operator) &&
+		!context.state.scope.evaluate(right).is_primitive;
 
 	// special case — ignore `onclick={() => (...)}`
 	if (
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
index a9f922623e..d2bd3c10dc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -1,4 +1,4 @@
-/** @import { Pattern } from 'estree' */
+/** @import { Expression, Identifier, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 /** @import { ExpressionMetadata } from '../../../nodes.js' */
@@ -88,8 +88,8 @@ export function ConstTag(node, context) {
 
 /**
  * @param {ComponentContext['state']} state
- * @param {import('estree').Identifier} id
- * @param {import('estree').Expression} expression
+ * @param {Identifier} id
+ * @param {Expression} expression
  * @param {ExpressionMetadata} metadata
  * @param {import('#compiler').Binding[]} bindings
  */
@@ -99,7 +99,9 @@ function add_const_declaration(state, id, expression, metadata, bindings) {
 	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
 
 	const has_await = metadata.has_await;
-	const blockers = [...metadata.dependencies].map((dep) => dep.blocker).filter((b) => b !== null);
+	const blockers = [...metadata.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== state.async_consts?.id);
 
 	if (has_await || state.async_consts || blockers.length > 0) {
 		const run = (state.async_consts ??= {
@@ -112,7 +114,11 @@ function add_const_declaration(state, id, expression, metadata, bindings) {
 		const assignment = b.assignment('=', id, expression);
 		const body = after.length === 0 ? assignment : b.block([b.stmt(assignment), ...after]);
 
-		if (blockers.length > 0) run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
+		if (blockers.length === 1) {
+			run.thunks.push(b.thunk(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
+		} else if (blockers.length > 0) {
+			run.thunks.push(b.thunk(b.call('$.wait', b.array(blockers))));
+		}
 
 		run.thunks.push(b.thunk(body, has_await));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index c0bfe272e5..a1371b516a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -101,15 +101,11 @@ export function EachBlock(node, context) {
 	}
 
 	// If the array is a store expression, we need to invalidate it when the array is changed.
-	// This doesn't catch all cases, but all the ones that Svelte 4 catches, too.
 	let store_to_invalidate = '';
-	if (node.expression.type === 'Identifier' || node.expression.type === 'MemberExpression') {
-		const id = object(node.expression);
-		if (id) {
-			const binding = context.state.scope.get(id.name);
-			if (binding?.kind === 'store_sub') {
-				store_to_invalidate = id.name;
-			}
+	for (const binding of node.metadata.expression.dependencies) {
+		if (binding.kind === 'store_sub') {
+			store_to_invalidate = binding.node.name;
+			break;
 		}
 	}
 
@@ -312,10 +308,10 @@ export function EachBlock(node, context) {
 		declarations.push(b.let(node.index, index));
 	}
 
-	const is_async = node.metadata.expression.is_async();
+	const has_await = node.metadata.expression.has_await;
 
-	const get_collection = b.thunk(collection, node.metadata.expression.has_await);
-	const thunk = is_async ? b.thunk(b.call('$.get', b.id('$$collection'))) : get_collection;
+	const get_collection = b.thunk(collection, has_await);
+	const thunk = has_await ? b.thunk(b.call('$.get', b.id('$$collection'))) : get_collection;
 
 	const render_args = [b.id('$$anchor'), item];
 	if (uses_index || collection_id) render_args.push(index);
@@ -338,19 +334,18 @@ export function EachBlock(node, context) {
 
 	const statements = [add_svelte_meta(b.call('$.each', ...args), node, 'each')];
 
-	if (dev && node.metadata.keyed) {
-		statements.unshift(b.stmt(b.call('$.validate_each_keys', thunk, key_function)));
-	}
-
-	if (is_async) {
+	if (node.metadata.expression.is_async()) {
 		context.state.init.push(
 			b.stmt(
 				b.call(
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					b.array([get_collection]),
-					b.arrow([context.state.node, b.id('$$collection')], b.block(statements))
+					has_await ? b.array([get_collection]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$collection')] : [context.state.node],
+						b.block(statements)
+					)
 				)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 18017ea557..be919d380c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,13 +1,13 @@
 /** @import { Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
 import * as b from '#compiler/builders';
+import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { transform_template } from '../transform-template/index.js';
+import { Template } from '../transform-template/template.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement, Memoizer } from './shared/utils.js';
-import { Template } from '../transform-template/template.js';
 
 /**
  * @param {AST.Fragment} node
@@ -47,7 +47,11 @@ export function Fragment(node, context) {
 	const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
 	const is_single_child_not_needing_template =
 		trimmed.length === 1 &&
-		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
+		(trimmed[0].type === 'SvelteFragment' ||
+			trimmed[0].type === 'TitleElement' ||
+			(trimmed[0].type === 'IfBlock' &&
+				trimmed[0].elseif &&
+				/** @type {AST.IfBlock} */ (parent).metadata.flattened?.includes(trimmed[0])));
 	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
 
 	/** @type {Statement[]} */
@@ -60,6 +64,7 @@ export function Fragment(node, context) {
 	const state = {
 		...context.state,
 		init: [],
+		snippets: [],
 		consts: [],
 		let_directives: [],
 		update: [],
@@ -119,38 +124,39 @@ export function Fragment(node, context) {
 
 			state.init.unshift(b.var(id, b.call('$.text')));
 			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		} else if (is_standalone) {
+			// no need to create a template, we can just use the existing block's anchor
+			process_children(trimmed, () => b.id('$$anchor'), false, {
+				...context,
+				state: { ...state, is_standalone }
+			});
 		} else {
-			if (is_standalone) {
-				// no need to create a template, we can just use the existing block's anchor
-				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
-			} else {
-				/** @type {(is_text: boolean) => Expression} */
-				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
-
-				process_children(trimmed, expression, false, { ...context, state });
+			/** @type {(is_text: boolean) => Expression} */
+			const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				let flags = TEMPLATE_FRAGMENT;
+			process_children(trimmed, expression, false, { ...context, state });
 
-				if (state.template.needs_import_node) {
-					flags |= TEMPLATE_USE_IMPORT_NODE;
-				}
+			let flags = TEMPLATE_FRAGMENT;
 
-				if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
-					// special case — we can use `$.comment` instead of creating a unique template
-					state.init.unshift(b.var(id, b.call('$.comment')));
-				} else {
-					const template = transform_template(state, namespace, flags);
-					state.hoisted.push(b.var(template_name, template));
+			if (state.template.needs_import_node) {
+				flags |= TEMPLATE_USE_IMPORT_NODE;
+			}
 
-					state.init.unshift(b.var(id, b.call(template_name)));
-				}
+			if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
+				// special case — we can use `$.comment` instead of creating a unique template
+				state.init.unshift(b.var(id, b.call('$.comment')));
+			} else {
+				const template = transform_template(state, namespace, flags);
+				state.hoisted.push(b.var(template_name, template));
 
-				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+				state.init.unshift(b.var(id, b.call(template_name)));
 			}
+
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 		}
 	}
 
-	body.push(...state.let_directives, ...state.consts);
+	body.push(...state.snippets, ...state.let_directives, ...state.consts);
 
 	if (state.async_consts && state.async_consts.thunks.length > 0) {
 		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
index 0567edc610..2706cf7f0a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
@@ -11,10 +11,11 @@ import { build_expression } from './shared/utils.js';
 export function HtmlTag(node, context) {
 	context.state.template.push_comment();
 
-	const is_async = node.metadata.expression.is_async();
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
 
 	const expression = build_expression(context, node.expression, node.metadata.expression);
-	const html = is_async ? b.call('$.get', b.id('$$html')) : expression;
+	const html = has_await ? b.call('$.get', b.id('$$html')) : expression;
 
 	const is_svg = context.state.metadata.namespace === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
@@ -31,15 +32,18 @@ export function HtmlTag(node, context) {
 	);
 
 	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
-	if (is_async) {
+	if (has_await || has_blockers) {
 		context.state.init.push(
 			b.stmt(
 				b.call(
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					b.array([b.thunk(expression, node.metadata.expression.has_await)]),
-					b.arrow([context.state.node, b.id('$$html')], b.block([statement]))
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$html')] : [context.state.node],
+						b.block([statement])
+					)
 				)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
index fcbb59ba74..0d31c42d11 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { BlockStatement, Expression, IfStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
@@ -10,39 +10,75 @@ import { build_expression, add_svelte_meta } from './shared/utils.js';
  */
 export function IfBlock(node, context) {
 	context.state.template.push_comment();
+
+	/** @type {Statement[]} */
 	const statements = [];
 
-	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	const consequent_id = b.id(context.state.scope.generate('consequent'));
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+	const expression = build_expression(context, node.test, node.metadata.expression);
 
-	statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
+	// Build the if/else-if/else chain
+	let index = 0;
+	/** @type {IfStatement | undefined} */
+	let first_if;
+	/** @type {IfStatement | undefined} */
+	let last_if;
+	/** @type {AST.IfBlock | undefined} */
+	let last_alt;
 
-	let alternate_id;
+	for (const branch of [node, ...(node.metadata.flattened ?? [])]) {
+		const consequent = /** @type {BlockStatement} */ (context.visit(branch.consequent));
+		const consequent_id = b.id(context.state.scope.generate('consequent'));
+		statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
 
-	if (node.alternate) {
-		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
-		alternate_id = b.id(context.state.scope.generate('alternate'));
-		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
+		// Build the test expression for this branch
+		/** @type {Expression} */
+		let test;
+
+		if (branch.metadata.expression.has_await) {
+			// Top-level condition with await: already resolved by $.async wrapper
+			test = b.call('$.get', b.id('$$condition'));
+		} else {
+			const expression = build_expression(context, branch.test, branch.metadata.expression);
+
+			if (branch.metadata.expression.has_call) {
+				const derived_id = b.id(context.state.scope.generate('d'));
+				statements.push(b.var(derived_id, b.call('$.derived', b.arrow([], expression))));
+				test = b.call('$.get', derived_id);
+			} else {
+				test = expression;
+			}
+		}
+
+		const render_call = b.stmt(b.call('$$render', consequent_id, index > 0 && b.literal(index)));
+		const new_if = b.if(test, render_call);
+
+		if (last_if) {
+			last_if.alternate = new_if;
+		} else {
+			first_if = new_if;
+		}
+
+		last_alt = branch;
+		last_if = new_if;
+		index++;
 	}
 
-	const is_async = node.metadata.expression.is_async();
+	// Handle final alternate (else branch, remaining async chain, or nothing)
+	if (last_if && last_alt?.alternate) {
+		const alternate = /** @type {BlockStatement} */ (context.visit(last_alt.alternate));
+		const alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
 
-	const expression = build_expression(context, node.test, node.metadata.expression);
-	const test = is_async ? b.call('$.get', b.id('$$condition')) : expression;
+		last_if.alternate = b.stmt(b.call('$$render', alternate_id, b.literal(false)));
+	}
 
+	// Build $.if() arguments
 	/** @type {Expression[]} */
 	const args = [
 		context.state.node,
-		b.arrow(
-			[b.id('$$render')],
-			b.block([
-				b.if(
-					test,
-					b.stmt(b.call('$$render', consequent_id)),
-					alternate_id && b.stmt(b.call('$$render', alternate_id, b.literal(false)))
-				)
-			])
-		)
+		b.arrow([b.id('$$render')], first_if ? b.block([first_if]) : b.block([]))
 	];
 
 	if (node.elseif) {
@@ -66,21 +102,26 @@ export function IfBlock(node, context) {
 		//
 		// ...even though they're logically equivalent. In the first case, the
 		// transition will only play when `y` changes, but in the second it
-		// should play when `x` or `y` change — both are considered 'local'
+		// should play when `x` or `y` change — both are considered 'local'.
+		// This could also be a non-flattened elseif (because it has an async expression).
+		// In both cases mark as elseif so the runtime uses EFFECT_TRANSPARENT for transitions.
 		args.push(b.true);
 	}
 
 	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
 
-	if (is_async) {
+	if (has_await || has_blockers) {
 		context.state.init.push(
 			b.stmt(
 				b.call(
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					b.array([b.thunk(expression, node.metadata.expression.has_await)]),
-					b.arrow([context.state.node, b.id('$$condition')], b.block(statements))
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$condition')] : [context.state.node],
+						b.block(statements)
+					)
 				)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
index d050155e8b..143a4e8edd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
@@ -11,29 +11,35 @@ import { build_expression, add_svelte_meta } from './shared/utils.js';
 export function KeyBlock(node, context) {
 	context.state.template.push_comment();
 
-	const is_async = node.metadata.expression.is_async();
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
 
 	const expression = build_expression(context, node.expression, node.metadata.expression);
-	const key = b.thunk(is_async ? b.call('$.get', b.id('$$key')) : expression);
+	const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression);
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
-	let statement = add_svelte_meta(
+	const statement = add_svelte_meta(
 		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
 		node,
 		'key'
 	);
 
-	if (is_async) {
-		statement = b.stmt(
-			b.call(
-				'$.async',
-				context.state.node,
-				node.metadata.expression.blockers(),
-				b.array([b.thunk(expression, node.metadata.expression.has_await)]),
-				b.arrow([context.state.node, b.id('$$key')], b.block([statement]))
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$key')] : [context.state.node],
+						b.block([statement])
+					)
+				)
 			)
 		);
+	} else {
+		context.state.init.push(statement);
 	}
-
-	context.state.init.push(statement);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 50cef67171..f651586dd8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -11,7 +11,12 @@ import {
 import { is_ignored } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { create_attribute, ExpressionMetadata, is_custom_element_node } from '../../../nodes.js';
+import {
+	create_attribute,
+	ExpressionMetadata,
+	is_custom_element_node,
+	is_customizable_select_element
+} from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter } from '../utils.js';
 import {
@@ -21,9 +26,12 @@ import {
 	build_set_class,
 	build_set_style
 } from './shared/element.js';
-import { process_children } from './shared/fragment.js';
+import { process_children, is_static_element } from './shared/fragment.js';
 import { build_render_statement, build_template_chunk, Memoizer } from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
+import { Template } from '../transform-template/template.js';
+import { transform_template } from '../transform-template/index.js';
+import { TEMPLATE_FRAGMENT } from '../../../../../constants.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -248,10 +256,7 @@ export function RegularElement(node, context) {
 				}
 
 				if (name !== 'class' || value) {
-					context.state.template.set_prop(
-						attribute.name,
-						is_boolean_attribute(name) && value === true ? undefined : value === true ? '' : value
-					);
+					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
 			} else if (name === 'autofocus') {
 				let { value } = build_attribute_value(attribute.value, context);
@@ -321,7 +326,7 @@ export function RegularElement(node, context) {
 	);
 
 	/** @type {typeof state} */
-	const child_state = { ...state, init: [], update: [], after_update: [] };
+	const child_state = { ...state, init: [], update: [], after_update: [], snippets: [] };
 
 	for (const node of hoisted) {
 		context.visit(node, child_state);
@@ -336,7 +341,9 @@ export function RegularElement(node, context) {
 		trimmed.every(
 			(node) =>
 				node.type === 'Text' ||
-				(!node.metadata.expression.has_state && !node.metadata.expression.has_await)
+				(!node.metadata.expression.has_state &&
+					!node.metadata.expression.has_await &&
+					!node.metadata.expression.has_blockers())
 		) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
@@ -349,13 +356,65 @@ export function RegularElement(node, context) {
 				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
 			);
 		}
+	} else if (is_customizable_select_element(node)) {
+		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
+		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
+		// We create a separate template for the rich content and append it to the element.
+
+		const element_node = context.state.node;
+
+		// Add a hydration marker inside the option element so $.child() has an anchor to find
+		context.state.template.push_comment();
+
+		// Create a separate template for the rich content
+		const template_name = context.state.scope.root.unique(`${node.name}_content`);
+		const fragment_id = b.id(context.state.scope.generate('fragment'));
+		const anchor_id = b.id(context.state.scope.generate('anchor'));
+
+		// Create state with a new template for the rich content
+		/** @type {typeof state} */
+		const select_state = {
+			...state,
+			init: [],
+			update: [],
+			after_update: [],
+			template: new Template()
+		};
+
+		process_children(
+			trimmed,
+			(is_text) => b.call('$.first_child', fragment_id, is_text && b.true),
+			false,
+			{
+				...context,
+				state: select_state
+			}
+		);
+
+		// Transform the template to $.from_html(...) and hoist it
+		const template = transform_template(select_state, metadata.namespace, TEMPLATE_FRAGMENT);
+		context.state.hoisted.push(b.var(template_name, template));
+
+		// Build the rich content function body
+		// The anchor is the child of the element (a hydration marker during hydration)
+		const body = b.block([
+			b.var(anchor_id, b.call('$.child', element_node)),
+			b.var(fragment_id, b.call(template_name)),
+			...select_state.init,
+			...(select_state.update.length > 0 ? [build_render_statement(select_state)] : []),
+			...select_state.after_update,
+			b.stmt(b.call('$.append', anchor_id, fragment_id))
+		]);
+
+		child_state.init.push(b.stmt(b.call('$.customizable_select', element_node, b.arrow([], body))));
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
 
 		// If `hydrate_node` is set inside the element, we need to reset it
-		// after the element has been hydrated
-		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+		// after the element has been hydrated. We need to check if any child
+		// would actually advance the hydrate_node cursor - static elements don't.
+		let needs_reset = trimmed.some((node) => node.type !== 'Text' && !is_static_element(node));
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -379,6 +438,7 @@ export function RegularElement(node, context) {
 		// Wrap children in `{...}` to avoid declaration conflicts
 		context.state.init.push(
 			b.block([
+				...child_state.snippets,
 				...child_state.init,
 				...element_state.init,
 				child_state.update.length > 0 ? build_render_statement(child_state) : b.empty,
@@ -395,6 +455,18 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(...element_state.after_update);
 	}
 
+	if (node.name === 'selectedcontent') {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.selectedcontent',
+					context.state.node,
+					b.arrow([b.id('$$element')], b.assignment('=', context.state.node, b.id('$$element')))
+				)
+			)
+		);
+	}
+
 	if (lookup.has('dir')) {
 		// This fixes an issue with Chromium where updates to text content within an element
 		// does not update the direction when set to auto. If we just re-assign the dir, this fixes it.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
index d14336bb7e..5d39cf2216 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
@@ -85,6 +85,10 @@ export function RenderTag(node, context) {
 				)
 			)
 		);
+
+		if (context.state.is_standalone) {
+			context.state.init.push(b.stmt(b.call('$.next')));
+		}
 	} else {
 		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 1af737f05b..6c3a48c5ea 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -89,6 +89,6 @@ export function SnippetBlock(node, context) {
 			context.state.instance_level_snippets.push(declaration);
 		}
 	} else {
-		context.state.init.push(declaration);
+		context.state.snippets.push(declaration);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
index d64fcda2e8..f929a3bc47 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
@@ -77,7 +77,7 @@ export function SvelteBoundary(node, context) {
 				/** @type {Statement[]} */
 				const statements = [];
 
-				context.visit(child, { ...context.state, init: statements });
+				context.visit(child, { ...context.state, snippets: statements });
 
 				const snippet = /** @type {VariableDeclaration} */ (statements[0]);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index cfa79b73ca..10024298fa 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -93,10 +93,11 @@ export function SvelteElement(node, context) {
 		);
 	}
 
-	const is_async = node.metadata.expression.is_async();
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
 
 	const expression = /** @type {Expression} */ (context.visit(node.tag));
-	const get_tag = b.thunk(is_async ? b.call('$.get', b.id('$$tag')) : expression);
+	const get_tag = b.thunk(has_await ? b.call('$.get', b.id('$$tag')) : expression);
 
 	/** @type {Statement[]} */
 	const inner = inner_context.state.init;
@@ -117,10 +118,10 @@ export function SvelteElement(node, context) {
 	);
 
 	if (dev) {
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 		if (node.fragment.nodes.length > 0) {
 			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
 		}
-		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 	}
 
 	const location = dev && locator(node.start);
@@ -139,15 +140,18 @@ export function SvelteElement(node, context) {
 		)
 	);
 
-	if (is_async) {
+	if (has_await || has_blockers) {
 		context.state.init.push(
 			b.stmt(
 				b.call(
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					b.array([b.thunk(expression, node.metadata.expression.has_await)]),
-					b.arrow([context.state.node, b.id('$$tag')], b.block(statements))
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$tag')] : [context.state.node],
+						b.block(statements)
+					)
 				)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 57dba202ba..16aa164d84 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -209,11 +209,11 @@ export function VariableDeclaration(node, context) {
 						let call = b.call(
 							'$.async_derived',
 							b.thunk(expression, true),
+							dev && b.literal(declarator.id.name),
 							location ? b.literal(location) : undefined
 						);
 
 						call = should_save ? save(call) : b.await(call);
-						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
 
 						declarations.push(b.declarator(declarator.id, call));
 					} else {
@@ -244,17 +244,16 @@ export function VariableDeclaration(node, context) {
 							call = b.call(
 								'$.async_derived',
 								b.thunk(expression, true),
+								dev &&
+									b.literal(
+										`[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`
+									),
 								location ? b.literal(location) : undefined
 							);
 
 							call = should_save ? save(call) : b.await(call);
 						}
 
-						if (dev) {
-							const label = `[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`;
-							call = b.call('$.tag', call, b.literal(label));
-						}
-
 						declarations.push(b.declarator(id, call));
 					}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 4651f6f733..1d6d3413bf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -333,7 +333,7 @@ export function build_component(node, component_name, loc, context) {
 			// can be used as props without creating conflicts
 			context.visit(child, {
 				...context.state,
-				init: snippet_declarations
+				snippets: snippet_declarations
 			});
 
 			push_prop(b.prop('init', child.expression, child.expression));
@@ -461,7 +461,7 @@ export function build_component(node, component_name, loc, context) {
 		memoizer.check_blockers(node.metadata.expression);
 	}
 
-	const statements = [...snippet_declarations, ...memoizer.deriveds(context.state.analysis.runes)];
+	let statements = [...snippet_declarations, ...memoizer.deriveds(context.state.analysis.runes)];
 
 	if (is_component_dynamic) {
 		const prev = fn;
@@ -515,15 +515,21 @@ export function build_component(node, component_name, loc, context) {
 	const blockers = memoizer.blockers();
 
 	if (async_values || blockers) {
-		return b.stmt(
-			b.call(
-				'$.async',
-				anchor,
-				blockers,
-				async_values,
-				b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
+		statements = [
+			b.stmt(
+				b.call(
+					'$.async',
+					anchor,
+					blockers,
+					async_values,
+					b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
+				)
 			)
-		);
+		];
+
+		if (context.state.is_standalone) {
+			statements.push(b.stmt(b.call('$.next')));
+		}
 	}
 
 	return statements.length > 1 ? b.block(statements) : statements[0];
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index ff931842d8..59b93f24ef 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -98,7 +98,7 @@ export function process_children(nodes, initial, is_element, context) {
 
 			let child_state = context.state;
 
-			if (is_static_element(node, context.state)) {
+			if (is_static_element(node)) {
 				skipped += 1;
 			} else if (
 				node.type === 'EachBlock' &&
@@ -137,9 +137,8 @@ export function process_children(nodes, initial, is_element, context) {
 
 /**
  * @param {AST.SvelteNode} node
- * @param {ComponentContext["state"]} state
  */
-function is_static_element(node, state) {
+export function is_static_element(node) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
 	if (is_custom_element_node(node)) return false; // we're setting all attributes on custom elements through properties
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 6145f66d87..7256073096 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -134,7 +134,7 @@ export function build_template_chunk(
 
 			const evaluated = state.scope.evaluate(value);
 
-			has_await ||= node.metadata.expression.has_await;
+			has_await ||= node.metadata.expression.has_await || node.metadata.expression.has_blockers();
 			has_state ||= has_await || (node.metadata.expression.has_state && !evaluated.is_known);
 
 			if (values.length === 1) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 0e2f68d0f5..b9f1441bff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -41,7 +41,6 @@ import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 import { SvelteBoundary } from './visitors/SvelteBoundary.js';
-import { call_component_renderer } from './visitors/shared/utils.js';
 
 /** @type {Visitors} */
 const global_visitors = {
@@ -105,7 +104,7 @@ export function server_component(analysis, options) {
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
 		state_fields: new Map(),
-		skip_hydration_boundaries: false,
+		is_standalone: false,
 		is_instance: false
 	};
 
@@ -260,7 +259,13 @@ export function server_component(analysis, options) {
 
 	if (should_inject_context) {
 		component_block = b.block([
-			call_component_renderer(component_block, dev && b.id(component_name))
+			b.stmt(
+				b.call(
+					'$$renderer.component',
+					b.arrow([b.id('$$renderer')], component_block, false),
+					dev && b.id(component_name)
+				)
+			)
 		]);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
index e7a72fb8ad..4912728a1e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
@@ -26,7 +26,8 @@ export interface ComponentServerTransformState extends ServerTransformState {
 	readonly template: Array<Statement | Expression>;
 	readonly namespace: Namespace;
 	readonly preserve_whitespace: boolean;
-	readonly skip_hydration_boundaries: boolean;
+	/** True if the current node is a) a component or render tag and b) the sole child of a block  */
+	readonly is_standalone: boolean;
 	/** Transformed async `{@const }` declarations (if any) and those coming after them */
 	async_consts?: {
 		id: Identifier;
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
index b8d2e42144..84c2a81612 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { block_close, create_async_block } from './shared/utils.js';
+import { block_close, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
@@ -25,13 +25,12 @@ export function AwaitBlock(node, context) {
 		)
 	);
 
-	if (node.metadata.expression.is_async()) {
-		statement = create_async_block(
-			b.block([statement]),
+	context.state.template.push(
+		...create_child_block(
+			[statement],
 			node.metadata.expression.blockers(),
 			node.metadata.expression.has_await
-		);
-	}
-
-	context.state.template.push(statement, block_close);
+		),
+		block_close
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
index fdc31e5238..d2ff9a10b4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
@@ -15,7 +15,7 @@ export function ConstTag(node, context) {
 	const has_await = node.metadata.expression.has_await;
 	const blockers = [...node.metadata.expression.dependencies]
 		.map((dep) => dep.blocker)
-		.filter((b) => b !== null);
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 
 	if (has_await || context.state.async_consts || blockers.length > 0) {
 		const run = (context.state.async_consts ??= {
@@ -30,7 +30,9 @@ export function ConstTag(node, context) {
 			context.state.init.push(b.let(identifier.name));
 		}
 
-		if (blockers.length > 0) {
+		if (blockers.length === 1) {
+			run.thunks.push(b.thunk(/** @type {Expression} */ (blockers[0])));
+		} else if (blockers.length > 0) {
 			run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
index 3c0a8c1676..cb5a61d52f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { block_close, block_open, block_open_else, create_async_block } from './shared/utils.js';
+import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -18,8 +18,8 @@ export function EachBlock(node, context) {
 
 	const array_id = state.scope.root.unique('each_array');
 
-	/** @type {Statement} */
-	let block = b.block([b.const(array_id, b.call('$.ensure_array_like', collection))]);
+	/** @type {Statement[]} */
+	let statements = [b.const(array_id, b.call('$.ensure_array_like', collection))];
 
 	/** @type {Statement[]} */
 	const each = [];
@@ -53,7 +53,7 @@ export function EachBlock(node, context) {
 
 		fallback.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
 
-		block.body.push(
+		statements.push(
 			b.if(
 				b.binary('!==', b.member(array_id, 'length'), b.literal(0)),
 				b.block([open, for_loop]),
@@ -62,19 +62,15 @@ export function EachBlock(node, context) {
 		);
 	} else {
 		state.template.push(block_open);
-		block.body.push(for_loop);
+		statements.push(for_loop);
 	}
 
-	if (node.metadata.expression.is_async()) {
-		state.template.push(
-			create_async_block(
-				block,
-				node.metadata.expression.blockers(),
-				node.metadata.expression.has_await
-			),
-			block_close
-		);
-	} else {
-		state.template.push(...block.body, block_close);
-	}
+	state.template.push(
+		...create_child_block(
+			statements,
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		),
+		block_close
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
index ef5bd985ae..a6ff33c7ab 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
@@ -28,7 +28,7 @@ export function Fragment(node, context) {
 		init: [],
 		template: [],
 		namespace,
-		skip_hydration_boundaries: is_standalone,
+		is_standalone,
 		async_consts: undefined
 	};
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
index 08fd2133ee..ee790c3e7c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
@@ -2,15 +2,24 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { create_push } from './shared/utils.js';
+import { create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {ComponentContext} context
  */
 export function HtmlTag(node, context) {
-	const expression = /** @type {Expression} */ (context.visit(node.expression));
-	const call = b.call('$.html', expression);
+	const expression = b.call('$.html', /** @type {Expression} */ (context.visit(node.expression)));
 
-	context.state.template.push(create_push(call, node.metadata.expression, true));
+	if (node.metadata.expression.is_async()) {
+		context.state.template.push(
+			...create_child_block(
+				[b.stmt(b.call('$$renderer.push', expression))],
+				node.metadata.expression.blockers(),
+				node.metadata.expression.has_await
+			)
+		);
+	} else {
+		context.state.template.push(expression);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
index e8418343be..e3f5f88705 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
@@ -1,39 +1,48 @@
-/** @import { BlockStatement, Expression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, IfStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { block_close, block_open, block_open_else, create_async_block } from './shared/utils.js';
+import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
-	const test = /** @type {Expression} */ (context.visit(node.test));
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-
-	const alternate = node.alternate
-		? /** @type {BlockStatement} */ (context.visit(node.alternate))
-		: b.block([]);
-
 	consequent.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open)));
 
-	alternate.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
+	/** @type {IfStatement} */
+	let if_statement = b.if(/** @type {Expression} */ (context.visit(node.test)), consequent);
 
-	/** @type {Statement} */
-	let statement = b.if(test, consequent, alternate);
+	let index = 1;
+	let current_if = if_statement;
+	let alt = node.alternate;
 
-	const is_async = node.metadata.expression.is_async();
+	// Walk the else-if chain, flattening branches
+	for (const elseif of node.metadata.flattened ?? []) {
+		const branch = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
+		branch.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[${index++}-->`))));
 
-	const has_await = node.metadata.expression.has_await;
-
-	if (is_async || has_await) {
-		statement = create_async_block(
-			b.block([statement]),
-			node.metadata.expression.blockers(),
-			!!has_await
+		current_if = current_if.alternate = b.if(
+			/** @type {Expression} */ (context.visit(elseif.test)),
+			branch
 		);
+		alt = elseif.alternate;
 	}
 
-	context.state.template.push(statement, block_close);
+	// Handle final else (or remaining async chain)
+	const final_alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
+
+	final_alternate.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
+	current_if.alternate = final_alternate;
+
+	context.state.template.push(
+		...create_child_block(
+			[if_statement],
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		),
+		block_close
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index f74b1185a0..1c6bb0a198 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -1,5 +1,4 @@
 /** @import { Expression } from 'estree' */
-/** @import { Location } from 'locate-character' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
@@ -8,13 +7,8 @@ import { dev, locator } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
-import {
-	process_children,
-	build_template,
-	create_child_block,
-	PromiseOptimiser,
-	create_async_block
-} from './shared/utils.js';
+import { process_children, build_template, PromiseOptimiser } from './shared/utils.js';
+import { is_customizable_select_element } from '../../../nodes.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -65,18 +59,9 @@ export function RegularElement(node, context) {
 			b.literal(`</${node.name}>`)
 		);
 
-		// TODO this is a real edge case, would be good to DRY this out
-		if (optimiser.expressions.length > 0) {
-			context.state.template.push(
-				create_child_block(
-					b.block([optimiser.apply(), ...state.init, ...build_template(state.template)]),
-					true
-				)
-			);
-		} else {
-			context.state.init.push(...state.init);
-			context.state.template.push(...state.template);
-		}
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
+		);
 
 		return;
 	}
@@ -124,15 +109,13 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
+		}
+
 		const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest));
 
-		if (optimiser.expressions.length > 0) {
-			context.state.template.push(
-				create_child_block(b.block([optimiser.apply(), ...state.init, statement]), true)
-			);
-		} else {
-			context.state.template.push(...state.init, statement);
-		}
+		context.state.template.push(...optimiser.render([...state.init, statement]));
 
 		return;
 	}
@@ -149,23 +132,37 @@ export function RegularElement(node, context) {
 			const inner_state = { ...state, template: [], init: [] };
 			process_children(trimmed, { ...context, state: inner_state });
 
-			body = b.arrow(
-				[b.id('$$renderer')],
-				b.block([...state.init, ...build_template(inner_state.template)])
-			);
+			/** @type {import('estree').Statement[]} */
+			const body_statements = [...state.init, ...build_template(inner_state.template)];
+
+			if (dev) {
+				const location = locator(node.start);
+				body_statements.unshift(
+					b.stmt(
+						b.call(
+							'$.push_element',
+							b.id('$$renderer'),
+							b.literal(node.name),
+							b.literal(location.line),
+							b.literal(location.column)
+						)
+					)
+				);
+				body_statements.push(b.stmt(b.call('$.pop_element')));
+			}
+
+			body = b.arrow([b.id('$$renderer')], b.block(body_statements));
 		}
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
+		}
+
 		const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest));
 
-		if (optimiser.expressions.length > 0) {
-			context.state.template.push(
-				create_child_block(b.block([optimiser.apply(), ...state.init, statement]), true)
-			);
-		} else {
-			context.state.template.push(...state.init, statement);
-		}
+		context.state.template.push(...optimiser.render([...state.init, statement]));
 
 		return;
 	}
@@ -192,7 +189,14 @@ export function RegularElement(node, context) {
 			)
 		);
 	} else {
+		// For optgroup or select with rich content, add hydration marker at the start
 		process_children(trimmed, { ...context, state });
+		if (
+			(node.name === 'optgroup' || node.name === 'select') &&
+			is_customizable_select_element(node)
+		) {
+			state.template.push(b.literal('<!>'));
+		}
 	}
 
 	if (!node_is_void) {
@@ -204,18 +208,9 @@ export function RegularElement(node, context) {
 	}
 
 	if (optimiser.is_async()) {
-		let statement = create_child_block(
-			b.block([optimiser.apply(), ...state.init, ...build_template(state.template)]),
-			true
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
 		);
-
-		const blockers = optimiser.blockers();
-
-		if (blockers.elements.length > 0) {
-			statement = create_async_block(b.block([statement]), blockers, false, false);
-		}
-
-		context.state.template.push(statement);
 	} else {
 		context.state.init.push(...state.init);
 		context.state.template.push(...state.template);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
index 6d7cef0d95..ac671c0188 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../types.js' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { create_async_block, empty_comment, PromiseOptimiser } from './shared/utils.js';
+import { empty_comment, PromiseOptimiser } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -35,17 +35,11 @@ export function RenderTag(node, context) {
 		)
 	);
 
-	if (optimiser.is_async()) {
-		statement = create_async_block(
-			b.block([optimiser.apply(), statement]),
-			optimiser.blockers(),
-			optimiser.has_await
-		);
-	}
-
-	context.state.template.push(statement);
+	context.state.template.push(...optimiser.render_block([statement]));
 
-	if (!context.state.skip_hydration_boundaries) {
+	// If the render tag is wrapped in $.async, that $.async call already contains surrounding markers,
+	// so we don't need to (or rather must not, to avoid hydration mismatches) add our own.
+	if (!optimiser.is_async() && !context.state.is_standalone) {
 		context.state.template.push(empty_comment);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
index d0f8e25d02..3cebdf4541 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
@@ -5,7 +5,6 @@ import * as b from '#compiler/builders';
 import {
 	build_attribute_value,
 	PromiseOptimiser,
-	create_async_block,
 	block_open,
 	block_close
 } from './shared/utils.js';
@@ -65,13 +64,5 @@ export function SlotElement(node, context) {
 		fallback
 	);
 
-	const statement = optimiser.is_async()
-		? create_async_block(
-				b.block([optimiser.apply(), b.stmt(slot)]),
-				optimiser.blockers(),
-				optimiser.has_await
-			)
-		: b.stmt(slot);
-
-	context.state.template.push(block_open, statement, block_close);
+	context.state.template.push(block_open, ...optimiser.render_block([b.stmt(slot)]), block_close);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index 6fc1ca5dfc..398ecc68a2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -1,4 +1,3 @@
-/** @import { Location } from 'locate-character' */
 /** @import { BlockStatement, Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
@@ -6,12 +5,7 @@ import { dev, locator } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes } from './shared/element.js';
-import {
-	build_template,
-	create_async_block,
-	create_child_block,
-	PromiseOptimiser
-} from './shared/utils.js';
+import { build_template, create_child_block, PromiseOptimiser } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -29,10 +23,10 @@ export function SvelteElement(node, context) {
 			tag = b.id(tag_id);
 		}
 
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 	}
 
 	const state = {
@@ -67,36 +61,29 @@ export function SvelteElement(node, context) {
 	const attributes = b.block([...state.init, ...build_template(state.template)]);
 	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
 
-	/** @type {Statement} */
-	let statement = b.stmt(
-		b.call(
-			'$.element',
-			b.id('$$renderer'),
-			tag,
-			attributes.body.length > 0 && b.thunk(attributes),
-			children.body.length > 0 && b.thunk(children)
-		)
+	statements.push(
+		...optimiser.render([
+			b.stmt(
+				b.call(
+					'$.element',
+					b.id('$$renderer'),
+					tag,
+					attributes.body.length > 0 && b.thunk(attributes),
+					children.body.length > 0 && b.thunk(children)
+				)
+			)
+		])
 	);
 
-	if (optimiser.expressions.length > 0) {
-		statement = create_child_block(b.block([optimiser.apply(), statement]), true);
-	}
-
-	statements.push(statement);
-
 	if (dev) {
 		statements.push(b.stmt(b.call('$.pop_element')));
 	}
 
-	if (node.metadata.expression.is_async()) {
-		statements = [
-			create_async_block(
-				b.block(statements),
-				node.metadata.expression.blockers(),
-				node.metadata.expression.has_await
-			)
-		];
-	}
-
-	context.state.template.push(...statements);
+	context.state.template.push(
+		...create_child_block(
+			statements,
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		)
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index a90b5e41df..6a2c6eb0be 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -1,12 +1,7 @@
 /** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import {
-	empty_comment,
-	build_attribute_value,
-	create_async_block,
-	PromiseOptimiser
-} from './utils.js';
+import { empty_comment, build_attribute_value, PromiseOptimiser } from './utils.js';
 import * as b from '#compiler/builders';
 import { is_element_node } from '../../../../nodes.js';
 import { dev } from '../../../../../state.js';
@@ -106,10 +101,16 @@ export function build_inline_component(node, expression, context) {
 			}
 
 			push_prop(b.prop('init', b.key(attribute.name), value));
-		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
+		} else if (attribute.type === 'BindDirective') {
 			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
 			optimiser.check_blockers(attribute.metadata.expression);
 
+			if (attribute.name === 'this') {
+				// bind:this is client-only, but we still need to check for blockers to ensure
+				// the server generates matching hydration markers if the client wraps in $.async
+				continue;
+			}
+
 			if (attribute.expression.type === 'SequenceExpression') {
 				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
 					.expressions;
@@ -295,22 +296,18 @@ export function build_inline_component(node, expression, context) {
 					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
 				);
 
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
 	/** @type {Statement} */
 	let statement = b.stmt(
-		(node.type === 'SvelteComponent' ? b.maybe_call : b.call)(
-			expression,
-			b.id('$$renderer'),
-			props_expression
-		)
+		(dynamic ? b.maybe_call : b.call)(expression, b.id('$$renderer'), props_expression)
 	);
 
 	if (snippet_declarations.length > 0) {
 		statement = b.block([...snippet_declarations, statement]);
 	}
 
-	const dynamic =
-		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
-
 	if (custom_css_props.length > 0) {
 		statement = b.stmt(
 			b.call(
@@ -329,32 +326,16 @@ export function build_inline_component(node, expression, context) {
 		optimiser.check_blockers(node.metadata.expression);
 	}
 
-	const is_async = optimiser.is_async();
-
-	if (is_async) {
-		statement = create_async_block(
-			b.block([
-				optimiser.apply(),
-				dynamic && custom_css_props.length === 0
-					? b.stmt(b.call('$$renderer.push', empty_comment))
-					: b.empty,
-				statement
-			]),
-			optimiser.blockers(),
-			optimiser.has_await
-		);
-	} else if (dynamic && custom_css_props.length === 0) {
-		context.state.template.push(empty_comment);
-	}
-
-	context.state.template.push(statement);
+	context.state.template.push(
+		...optimiser.render_block([
+			dynamic && custom_css_props.length === 0
+				? b.stmt(b.call('$$renderer.push', empty_comment))
+				: b.empty,
+			statement
+		])
+	);
 
-	if (
-		!is_async &&
-		!context.state.skip_hydration_boundaries &&
-		custom_css_props.length === 0 &&
-		optimiser.expressions.length === 0
-	) {
+	if (!optimiser.is_async() && !context.state.is_standalone && custom_css_props.length === 0) {
 		context.state.template.push(empty_comment);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 979efef6b9..5bc8fb15b5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -235,13 +235,7 @@ export function build_element_attributes(node, context, transform) {
 
 				if (name !== 'class' || literal_value) {
 					context.state.template.push(
-						b.literal(
-							` ${attribute.name}${
-								is_boolean_attribute(name) && literal_value === true
-									? ''
-									: `="${literal_value === true ? '' : String(literal_value)}"`
-							}`
-						)
+						b.literal(` ${attribute.name}="${literal_value === true ? '' : String(literal_value)}"`)
 					);
 				}
 
@@ -544,7 +538,7 @@ function build_attr_style(style_directives, expression, context, transform) {
 				name = name.toLowerCase();
 			}
 
-			const property = b.init(directive.name, expression);
+			const property = b.init(name, expression);
 			if (directive.modifiers.includes('important')) {
 				important_properties.push(property);
 			} else {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
index 4736a7c5da..ee14a4d135 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -81,7 +81,19 @@ export function process_children(nodes, { visit, state }) {
 			flush();
 
 			const expression = /** @type {Expression} */ (visit(node.expression));
-			state.template.push(create_push(b.call('$.escape', expression), node.metadata.expression));
+
+			let call = b.call(
+				'$$renderer.push',
+				b.thunk(b.call('$.escape', expression), node.metadata.expression.has_await)
+			);
+
+			const blockers = node.metadata.expression.blockers();
+
+			if (blockers.elements.length > 0) {
+				call = b.call('$$renderer.async', blockers, b.arrow([b.id('$$renderer')], call));
+			}
+
+			state.template.push(b.stmt(call));
 		} else if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') {
 			sequence.push(node);
 		} else {
@@ -262,73 +274,20 @@ export function build_getter(node, state) {
 }
 
 /**
- * Creates a `$$renderer.child(...)` expression statement
- * @param {BlockStatement | Expression} body
- * @param {boolean} async
- * @returns {Statement}
- */
-export function create_child_block(body, async) {
-	return b.stmt(b.call('$$renderer.child', b.arrow([b.id('$$renderer')], body, async)));
-}
-
-/**
- * Creates a `$$renderer.async(...)` expression statement
- * @param {BlockStatement | Expression} body
+ * @param {Statement[]} statements
  * @param {ArrayExpression} blockers
  * @param {boolean} has_await
- * @param {boolean} needs_hydration_markers
  */
-export function create_async_block(
-	body,
-	blockers = b.array([]),
-	has_await = true,
-	needs_hydration_markers = true
-) {
-	return b.stmt(
-		b.call(
-			needs_hydration_markers ? '$$renderer.async_block' : '$$renderer.async',
-			blockers,
-			b.arrow([b.id('$$renderer')], body, has_await)
-		)
-	);
-}
-
-/**
- * @param {Expression} expression
- * @param {ExpressionMetadata} metadata
- * @param {boolean} needs_hydration_markers
- * @returns {Expression | Statement}
- */
-export function create_push(expression, metadata, needs_hydration_markers = false) {
-	if (metadata.is_async()) {
-		let statement = b.stmt(b.call('$$renderer.push', b.thunk(expression, metadata.has_await)));
-
-		const blockers = metadata.blockers();
-
-		if (blockers.elements.length > 0) {
-			statement = create_async_block(
-				b.block([statement]),
-				blockers,
-				false,
-				needs_hydration_markers
-			);
-		}
-
-		return statement;
+export function create_child_block(statements, blockers, has_await) {
+	if (blockers.elements.length === 0 && !has_await) {
+		return statements;
 	}
 
-	return expression;
-}
+	const fn = b.arrow([b.id('$$renderer')], b.block(statements), has_await);
 
-/**
- * @param {BlockStatement | Expression} body
- * @param {Identifier | false} component_fn_id
- * @returns {Statement}
- */
-export function call_component_renderer(body, component_fn_id) {
-	return b.stmt(
-		b.call('$$renderer.component', b.arrow([b.id('$$renderer')], body, false), component_fn_id)
-	);
+	return blockers.elements.length > 0
+		? [b.stmt(b.call('$$renderer.async_block', blockers, fn))]
+		: [b.stmt(b.call('$$renderer.child_block', fn))];
 }
 
 /**
@@ -374,7 +333,7 @@ export class PromiseOptimiser {
 		}
 	}
 
-	apply() {
+	#apply() {
 		if (this.expressions.length === 0) {
 			return b.empty;
 		}
@@ -404,4 +363,38 @@ export class PromiseOptimiser {
 	is_async() {
 		return this.expressions.length > 0 || this.#blockers.size > 0;
 	}
+
+	/**
+	 * @param {Statement[]} statements
+	 * @returns {Statement[]}
+	 */
+	render(statements) {
+		if (!this.is_async()) {
+			return statements;
+		}
+
+		const fn = b.arrow(
+			[b.id('$$renderer')],
+			b.block([this.#apply(), ...statements]),
+			this.has_await
+		);
+
+		const blockers = this.blockers();
+
+		return blockers.elements.length > 0
+			? [b.stmt(b.call('$$renderer.async', blockers, fn))]
+			: [b.stmt(b.call('$$renderer.child', fn))];
+	}
+
+	/**
+	 * @param {Statement[]} statements
+	 * @returns {Statement[]}
+	 */
+	render_block(statements) {
+		if (!this.is_async()) {
+			return statements;
+		}
+
+		return create_child_block([this.#apply(), ...statements], this.blockers(), this.has_await);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
index 2b9c219d7d..95b9f585d3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
@@ -49,22 +49,25 @@ export function transform_body(instance_body, runner, transform) {
 	if (instance_body.async.length > 0) {
 		const thunks = instance_body.async.map((s) => {
 			if (s.node.type === 'VariableDeclarator') {
-				const visited = /** @type {ESTree.VariableDeclaration} */ (
+				const visited = /** @type {ESTree.VariableDeclaration | ESTree.EmptyStatement} */ (
 					transform(b.var(s.node.id, s.node.init))
 				);
 
-				const statements = visited.declarations.map((node) => {
-					if (
-						node.id.type === 'Identifier' &&
-						(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
-					) {
-						// this is an intermediate declaration created in VariableDeclaration.js;
-						// subsequent statements depend on it
-						return b.var(node.id, node.init);
-					}
+				const statements =
+					visited.type === 'VariableDeclaration'
+						? visited.declarations.map((node) => {
+								if (
+									node.id.type === 'Identifier' &&
+									(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
+								) {
+									// this is an intermediate declaration created in VariableDeclaration.js;
+									// subsequent statements depend on it
+									return b.var(node.id, node.init);
+								}
 
-					return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
-				});
+								return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
+							})
+						: [];
 
 				if (statements.length === 1) {
 					const statement = /** @type {ESTree.ExpressionStatement} */ (statements[0]);
@@ -86,7 +89,14 @@ export function transform_body(instance_body, runner, transform) {
 			}
 
 			if (s.node.type === 'ExpressionStatement') {
-				const expression = /** @type {ESTree.Expression} */ (transform(s.node.expression));
+				// the expression may be a $inspect call, which will be transformed into an empty statement
+				const expression = /** @type {ESTree.Expression | ESTree.EmptyStatement} */ (
+					transform(s.node.expression)
+				);
+
+				if (expression.type === 'EmptyStatement') {
+					return null;
+				}
 
 				return expression.type === 'AwaitExpression'
 					? b.thunk(expression, true)
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 313880cf5b..2e54f333a8 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -118,6 +118,19 @@ export class ExpressionMetadata {
 		return this.#get_blockers().size > 0;
 	}
 
+	/**
+	 * @param {ExpressionMetadata} other
+	 */
+	has_more_blockers_than(other) {
+		for (const blocker of this.#get_blockers()) {
+			if (!other.#get_blockers().has(blocker)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
 	is_async() {
 		return this.has_await || this.#get_blockers().size > 0;
 	}
@@ -148,3 +161,98 @@ export function get_name(node) {
 
 	return null;
 }
+
+/**
+ * Checks if an <option>, <optgroup>, or <select> element has rich content that requires special hydration handling.
+ * Rich content is anything beyond simple text, expressions, and comments for <option>,
+ * anything beyond <option> children for <optgroup>,
+ * or anything beyond <option>, <optgroup>, and empty text for <select>.
+ * Control flow blocks are recursively checked - they only count as rich content if they contain rich content.
+ * @param {AST.RegularElement} node
+ * @returns {boolean}
+ */
+export function is_customizable_select_element(node) {
+	if (node.name === 'select' || node.name === 'optgroup' || node.name === 'option') {
+		for (const child of find_descendants(node.fragment)) {
+			if (child.type === 'RegularElement') {
+				if (node.name === 'select' && child.name !== 'option' && child.name !== 'optgroup') {
+					return true;
+				}
+
+				if (node.name === 'optgroup' && child.name !== 'option') {
+					return true;
+				}
+
+				if (node.name === 'option') {
+					return true;
+				}
+			}
+
+			// Text nodes directly in <select> or <optgroup> are rich content
+			else if (child.type === 'Text') {
+				if (node.name === 'select' || node.name === 'optgroup') {
+					return true;
+				}
+			}
+
+			// Any non-RegularElement, non-Text node is rich content
+			else {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.Fragment | null} fragment
+ * @returns {Iterable<AST.SvelteNode>}
+ */
+function* find_descendants(fragment) {
+	if (fragment === null) return;
+
+	for (const node of fragment.nodes) {
+		switch (node.type) {
+			case 'SnippetBlock':
+			case 'DebugTag':
+			case 'ConstTag':
+			case 'Comment':
+			case 'ExpressionTag':
+				break;
+
+			case 'Text':
+				if (node.data.trim() !== '') {
+					yield node;
+				}
+				break;
+
+			case 'IfBlock':
+				yield* find_descendants(node.consequent);
+				yield* find_descendants(node.alternate);
+				break;
+
+			case 'EachBlock':
+				yield* find_descendants(node.body);
+				yield* find_descendants(node.fallback ?? null);
+				break;
+
+			case 'KeyBlock':
+				yield* find_descendants(node.fragment);
+				break;
+
+			case 'AwaitBlock':
+				yield* find_descendants(node.pending);
+				yield* find_descendants(node.then);
+				yield* find_descendants(node.catch);
+				break;
+
+			case 'SvelteBoundary':
+				yield* find_descendants(node.fragment);
+				break;
+
+			default:
+				yield node;
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 2a0c76f756..52efd93210 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -228,6 +228,13 @@ class Evaluation {
 	 */
 	is_number = true;
 
+	/**
+	 * True if the value is known to be a primitive
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_primitive = true;
+
 	/**
 	 * True if the value is known to be a function
 	 * @readonly
@@ -577,6 +584,7 @@ class Evaluation {
 
 			if (value === UNKNOWN) {
 				this.has_unknown = true;
+				this.is_primitive = false;
 			}
 		}
 
diff --git a/packages/svelte/src/compiler/print/index.js b/packages/svelte/src/compiler/print/index.js
index 4aed743dba..094c578b83 100644
--- a/packages/svelte/src/compiler/print/index.js
+++ b/packages/svelte/src/compiler/print/index.js
@@ -115,57 +115,17 @@ function base_element(node, context) {
 	const is_doctype_node = node.name.toLowerCase() === '!doctype';
 	const is_self_closing =
 		is_void(node.name) || (node.type === 'Component' && node.fragment.nodes.length === 0);
-	let multiline_content = false;
 
 	if (is_doctype_node) child_context.write(`>`);
 	else if (is_self_closing) {
 		child_context.write(`${multiline_attributes ? '' : ' '}/>`);
 	} else {
 		child_context.write('>');
-
-		// Process the element's content in a separate context for measurement
-		const content_context = child_context.new();
-		const allow_inline_content = child_context.measure() < LINE_BREAK_THRESHOLD;
-		block(content_context, node.fragment, allow_inline_content);
-
-		// Determine if content should be formatted on multiple lines
-		multiline_content = content_context.measure() > LINE_BREAK_THRESHOLD;
-
-		if (multiline_content) {
-			child_context.newline();
-
-			// Only indent if attributes are inline and content itself isn't already multiline
-			const should_indent = !multiline_attributes && !content_context.multiline;
-			if (should_indent) {
-				child_context.indent();
-			}
-
-			child_context.append(content_context);
-
-			if (should_indent) {
-				child_context.dedent();
-			}
-
-			child_context.newline();
-		} else {
-			child_context.append(content_context);
-		}
-
+		block(child_context, node.fragment, true);
 		child_context.write(`</${node.name}>`);
 	}
 
-	const break_line_after = child_context.measure() > LINE_BREAK_THRESHOLD;
-
-	if ((multiline_content || multiline_attributes) && !context.empty()) {
-		context.newline();
-	}
-
 	context.append(child_context);
-
-	if (is_self_closing) return;
-	if (multiline_content || multiline_attributes || break_line_after) {
-		context.newline();
-	}
 }
 
 /** @type {Visitors<AST.SvelteNode>} */
@@ -412,6 +372,8 @@ const svelte_visitors = {
 				}
 			} else {
 				sequence.push(child_node);
+
+				if (child_node.type === 'RegularElement') flush();
 			}
 		}
 
@@ -420,18 +382,20 @@ const svelte_visitors = {
 		let multiline = false;
 		let width = 0;
 
-		const child_contexts = items.map((sequence) => {
-			const child_context = context.new();
+		const child_contexts = items
+			.filter((x) => x.length > 0)
+			.map((sequence) => {
+				const child_context = context.new();
 
-			for (const node of sequence) {
-				child_context.visit(node);
-				multiline ||= child_context.multiline;
-			}
+				for (const node of sequence) {
+					child_context.visit(node);
+					multiline ||= child_context.multiline;
+				}
 
-			width += child_context.measure();
+				width += child_context.measure();
 
-			return child_context;
-		});
+				return child_context;
+			});
 
 		multiline ||= width > LINE_BREAK_THRESHOLD;
 
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index b529a2dda9..d44a31349a 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -87,7 +87,7 @@ export namespace AST {
 		css?: 'injected';
 		customElement?: {
 			tag?: string;
-			shadow?: 'open' | 'none';
+			shadow?: 'open' | 'none' | ObjectExpression | undefined;
 			props?: Record<
 				string,
 				{
@@ -483,6 +483,8 @@ export namespace AST {
 		alternate: Fragment | null;
 		/** @internal */
 		metadata: {
+			/** List of else-if blocks that can be flattened into this if block */
+			flattened?: IfBlock[];
 			expression: ExpressionMetadata;
 		};
 	}
diff --git a/packages/svelte/src/events/public.d.ts b/packages/svelte/src/events/public.d.ts
index ff42e523b3..bf7b20c108 100644
--- a/packages/svelte/src/events/public.d.ts
+++ b/packages/svelte/src/events/public.d.ts
@@ -8,7 +8,7 @@
 export function on<Type extends keyof WindowEventMap>(
 	window: Window,
 	type: Type,
-	handler: (this: Window, event: WindowEventMap[Type]) => any,
+	handler: (this: Window, event: WindowEventMap[Type] & { currentTarget: Window }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -19,7 +19,7 @@ export function on<Type extends keyof WindowEventMap>(
 export function on<Type extends keyof DocumentEventMap>(
 	document: Document,
 	type: Type,
-	handler: (this: Document, event: DocumentEventMap[Type]) => any,
+	handler: (this: Document, event: DocumentEventMap[Type] & { currentTarget: Document }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -30,7 +30,7 @@ export function on<Type extends keyof DocumentEventMap>(
 export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 	element: Element,
 	type: Type,
-	handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+	handler: (this: Element, event: HTMLElementEventMap[Type] & { currentTarget: Element }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -41,7 +41,7 @@ export function on<Element extends HTMLElement, Type extends keyof HTMLElementEv
 export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 	element: Element,
 	type: Type,
-	handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+	handler: (this: Element, event: MediaQueryListEventMap[Type] & { currentTarget: Element }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js
index 4ec4ecf26f..d05cb81a71 100644
--- a/packages/svelte/src/html-tree-validation.js
+++ b/packages/svelte/src/html-tree-validation.js
@@ -80,9 +80,9 @@ export function closing_tag_omitted(current, next) {
  */
 const disallowed_children = {
 	...autoclosing_children,
-	optgroup: { only: ['option', '#text'] },
 	// Strictly speaking, seeing an <option> doesn't mean we're in a <select>, but we assume it here
-	option: { only: ['#text'] },
+	// option or optgroup does not have an `only` restriction because newer browsers support rich HTML content
+	// inside option elements. For older browsers, hydration will handle the mismatch.
 	form: { descendant: ['form'] },
 	a: { descendant: ['a'] },
 	button: { descendant: ['button'] },
@@ -92,8 +92,6 @@ const disallowed_children = {
 	h4: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
 	h5: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
 	h6: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
-	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
-	select: { only: ['option', 'optgroup', '#text', 'hr', 'script', 'template'] },
 
 	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
 	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
diff --git a/packages/svelte/src/internal/client/dev/assign.js b/packages/svelte/src/internal/client/dev/assign.js
index d9ef7497d5..3b48e736b5 100644
--- a/packages/svelte/src/internal/client/dev/assign.js
+++ b/packages/svelte/src/internal/client/dev/assign.js
@@ -1,3 +1,4 @@
+import { STATE_SYMBOL } from '#client/constants';
 import { sanitize_location } from '../../../utils.js';
 import { untrack } from '../runtime.js';
 import * as w from '../warnings.js';
@@ -10,7 +11,7 @@ import * as w from '../warnings.js';
  * @param {string} location
  */
 function compare(a, b, property, location) {
-	if (a !== b) {
+	if (a !== b && typeof b === 'object' && STATE_SYMBOL in b) {
 		w.assignment_value_stale(property, /** @type {string} */ (sanitize_location(location)));
 	}
 
diff --git a/packages/svelte/src/internal/client/dev/console-log.js b/packages/svelte/src/internal/client/dev/console-log.js
index d314359ef6..38860eb767 100644
--- a/packages/svelte/src/internal/client/dev/console-log.js
+++ b/packages/svelte/src/internal/client/dev/console-log.js
@@ -28,7 +28,9 @@ export function log_if_contains_state(method, ...objects) {
 				// eslint-disable-next-line no-console
 				console.log('%c[snapshot]', 'color: grey', ...transformed);
 			}
-		} catch {}
+		} catch {
+			// Errors can occur when trying to snapshot objects with getters that throw or non-enumerable properties.
+		}
 	});
 
 	return objects;
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index 709a1b2722..9fa4e6ccbd 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/packages/svelte/src/internal/client/dev/hmr.js
@@ -1,23 +1,25 @@
-/** @import { Source, Effect, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, HMR } from '../../../constants.js';
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
-import { source } from '../reactivity/sources.js';
+import { set, source } from '../reactivity/sources.js';
 import { set_should_intro } from '../render.js';
 import { get } from '../runtime.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
- * @param {Component} original
- * @param {() => Source<Component>} get_source
+ * @param {Component} fn
  */
-export function hmr(original, get_source) {
+export function hmr(fn) {
+	const current = source(fn);
+
 	/**
 	 * @param {TemplateNode} anchor
 	 * @param {any} props
 	 */
 	function wrapper(anchor, props) {
+		let component = {};
 		let instance = {};
 
 		/** @type {Effect} */
@@ -26,8 +28,9 @@ export function hmr(original, get_source) {
 		let ran = false;
 
 		block(() => {
-			const source = get_source();
-			const component = get(source);
+			if (component === (component = get(current))) {
+				return;
+			}
 
 			if (effect) {
 				// @ts-ignore
@@ -62,16 +65,24 @@ export function hmr(original, get_source) {
 	}
 
 	// @ts-expect-error
-	wrapper[FILENAME] = original[FILENAME];
+	wrapper[FILENAME] = fn[FILENAME];
 
 	// @ts-ignore
 	wrapper[HMR] = {
-		// When we accept an update, we set the original source to the new component
-		original,
-		// The `get_source` parameter reads `wrapper[HMR].source`, but in the `accept`
-		// function we always replace it with `previous[HMR].source`, which in practice
-		// means we only ever update the original
-		source: source(original)
+		fn,
+		current,
+		update: (/** @type {any} */ incoming) => {
+			// This logic ensures that the first version of the component is the one
+			// whose update function and therefore block effect is preserved across updates.
+			// If we don't do this dance and instead just use `incoming` as the new component
+			// and then update, we'll create an ever-growing stack of block effects.
+
+			// Trigger the original block effect
+			set(wrapper[HMR].current, incoming[HMR].fn);
+
+			// Replace the incoming source with the original one
+			incoming[HMR].current = wrapper[HMR].current;
+		}
 	};
 
 	return wrapper;
diff --git a/packages/svelte/src/internal/client/dom/blocks/async.js b/packages/svelte/src/internal/client/dom/blocks/async.js
index 3d320d2ea9..e8c9cf0643 100644
--- a/packages/svelte/src/internal/client/dom/blocks/async.js
+++ b/packages/svelte/src/internal/client/dom/blocks/async.js
@@ -1,4 +1,4 @@
-/** @import { TemplateNode, Value } from '#client' */
+/** @import { Blocker, TemplateNode, Value } from '#client' */
 import { flatten } from '../../reactivity/async.js';
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import { get } from '../../runtime.js';
@@ -14,25 +14,45 @@ import { get_boundary } from './boundary.js';
 
 /**
  * @param {TemplateNode} node
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {Array<() => Promise<any>>} expressions
  * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
  */
 export function async(node, blockers = [], expressions = [], fn) {
+	var was_hydrating = hydrating;
+	var end = null;
+
+	if (was_hydrating) {
+		hydrate_next();
+		end = skip_nodes(false);
+	}
+
+	if (expressions.length === 0 && blockers.every((b) => b.settled)) {
+		fn(node);
+
+		// This is necessary because it is not guaranteed that the render function will
+		// advance the hydration node to $.async's end marker: it may stop at an inner
+		// block's end marker (in case of an inner if block for example), but it also may
+		// stop at the correct $.async end marker (in case of component child) - hence
+		// we can't just use hydrate_next()
+		// TODO this feels indicative of a bug elsewhere; ideally we wouldn't need
+		// to double-traverse in the already-resolved case
+		if (was_hydrating) {
+			set_hydrate_node(end);
+		}
+
+		return;
+	}
+
 	var boundary = get_boundary();
 	var batch = /** @type {Batch} */ (current_batch);
-	var blocking = !boundary.is_pending();
+	var blocking = boundary.is_rendered();
 
 	boundary.update_pending_count(1);
 	batch.increment(blocking);
 
-	var was_hydrating = hydrating;
-
 	if (was_hydrating) {
-		hydrate_next();
-
 		var previous_hydrate_node = hydrate_node;
-		var end = skip_nodes(false);
 		set_hydrate_node(end);
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 140e876330..ef5f0e116d 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,9 +1,12 @@
 /** @import { Effect, Source, TemplateNode, } from '#client' */
 import {
+	BLOCK_EFFECT,
 	BOUNDARY_EFFECT,
 	COMMENT_NODE,
+	DIRTY,
 	EFFECT_PRESERVED,
-	EFFECT_TRANSPARENT
+	EFFECT_TRANSPARENT,
+	MAYBE_DIRTY
 } from '#client/constants';
 import { HYDRATION_START_ELSE } from '../../../../constants.js';
 import { component_context, set_component_context } from '../../context.js';
@@ -34,11 +37,13 @@ import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
-import { Batch } from '../../reactivity/batch.js';
+import { Batch, schedule_effect } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
 import { create_text } from '../operations.js';
+import { defer_effect } from '../../reactivity/utils.js';
+import { set_signal_status } from '../../reactivity/status.js';
 
 /**
  * @typedef {{
@@ -64,7 +69,7 @@ export class Boundary {
 	/** @type {Boundary | null} */
 	parent;
 
-	#pending = false;
+	is_pending = false;
 
 	/** @type {TemplateNode} */
 	#anchor;
@@ -98,9 +103,16 @@ export class Boundary {
 
 	#local_pending_count = 0;
 	#pending_count = 0;
+	#pending_count_update_queued = false;
 
 	#is_creating_fallback = false;
 
+	/** @type {Set<Effect>} */
+	#dirty_effects = new Set();
+
+	/** @type {Set<Effect>} */
+	#maybe_dirty_effects = new Set();
+
 	/**
 	 * A source containing the number of pending async deriveds/expressions.
 	 * Only created if `$effect.pending()` is used inside the boundary,
@@ -134,7 +146,7 @@ export class Boundary {
 
 		this.parent = /** @type {Effect} */ (active_effect).b;
 
-		this.#pending = !!this.#props.pending;
+		this.is_pending = !!this.#props.pending;
 
 		this.#effect = block(() => {
 			/** @type {Effect} */ (active_effect).b = this;
@@ -151,6 +163,10 @@ export class Boundary {
 					this.#hydrate_pending_content();
 				} else {
 					this.#hydrate_resolved_content();
+
+					if (this.#pending_count === 0) {
+						this.is_pending = false;
+					}
 				}
 			} else {
 				var anchor = this.#get_anchor();
@@ -164,7 +180,7 @@ export class Boundary {
 				if (this.#pending_count > 0) {
 					this.#show_pending_snippet();
 				} else {
-					this.#pending = false;
+					this.is_pending = false;
 				}
 			}
 
@@ -184,20 +200,15 @@ export class Boundary {
 		} catch (error) {
 			this.error(error);
 		}
-
-		// Since server rendered resolved content, we never show pending state
-		// Even if client-side async operations are still running, the content is already displayed
-		this.#pending = false;
 	}
 
 	#hydrate_pending_content() {
 		const pending = this.#props.pending;
-		if (!pending) {
-			return;
-		}
+		if (!pending) return;
+
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
-		Batch.enqueue(() => {
+		queue_micro_task(() => {
 			var anchor = this.#get_anchor();
 
 			this.#main_effect = this.#run(() => {
@@ -212,7 +223,7 @@ export class Boundary {
 					this.#pending_effect = null;
 				});
 
-				this.#pending = false;
+				this.is_pending = false;
 			}
 		});
 	}
@@ -220,7 +231,7 @@ export class Boundary {
 	#get_anchor() {
 		var anchor = this.#anchor;
 
-		if (this.#pending) {
+		if (this.is_pending) {
 			this.#pending_anchor = create_text();
 			this.#anchor.before(this.#pending_anchor);
 
@@ -231,11 +242,19 @@ export class Boundary {
 	}
 
 	/**
-	 * Returns `true` if the effect exists inside a boundary whose pending snippet is shown
+	 * Defer an effect inside a pending boundary until the boundary resolves
+	 * @param {Effect} effect
+	 */
+	defer_effect(effect) {
+		defer_effect(effect, this.#dirty_effects, this.#maybe_dirty_effects);
+	}
+
+	/**
+	 * Returns `false` if the effect exists inside a boundary whose pending snippet is shown
 	 * @returns {boolean}
 	 */
-	is_pending() {
-		return this.#pending || (!!this.parent && this.parent.is_pending());
+	is_rendered() {
+		return !this.is_pending && (!this.parent || this.parent.is_rendered());
 	}
 
 	has_pending_snippet() {
@@ -298,7 +317,24 @@ export class Boundary {
 		this.#pending_count += d;
 
 		if (this.#pending_count === 0) {
-			this.#pending = false;
+			this.is_pending = false;
+
+			// any effects that were encountered and deferred during traversal
+			// should be rescheduled — after the next traversal (which will happen
+			// immediately, due to the same update that brought us here)
+			// the effects will be flushed
+			for (const e of this.#dirty_effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (const e of this.#maybe_dirty_effects) {
+				set_signal_status(e, MAYBE_DIRTY);
+				schedule_effect(e);
+			}
+
+			this.#dirty_effects.clear();
+			this.#maybe_dirty_effects.clear();
 
 			if (this.#pending_effect) {
 				pause_effect(this.#pending_effect, () => {
@@ -324,9 +360,15 @@ export class Boundary {
 
 		this.#local_pending_count += d;
 
-		if (this.#effect_pending) {
-			internal_set(this.#effect_pending, this.#local_pending_count);
-		}
+		if (!this.#effect_pending || this.#pending_count_update_queued) return;
+		this.#pending_count_update_queued = true;
+
+		queue_micro_task(() => {
+			this.#pending_count_update_queued = false;
+			if (this.#effect_pending) {
+				internal_set(this.#effect_pending, this.#local_pending_count);
+			}
+		});
 	}
 
 	get_effect_pending() {
@@ -394,7 +436,7 @@ export class Boundary {
 
 			// we intentionally do not try to find the nearest pending boundary. If this boundary has one, we'll render it on reset
 			// but it would be really weird to show the parent's boundary on a child reset.
-			this.#pending = this.has_pending_snippet();
+			this.is_pending = this.has_pending_snippet();
 
 			this.#main_effect = this.#run(() => {
 				this.#is_creating_fallback = false;
@@ -404,25 +446,20 @@ export class Boundary {
 			if (this.#pending_count > 0) {
 				this.#show_pending_snippet();
 			} else {
-				this.#pending = false;
+				this.is_pending = false;
 			}
 		};
 
-		var previous_reaction = active_reaction;
-
-		try {
-			set_active_reaction(null);
-			calling_on_error = true;
-			onerror?.(error, reset);
-			calling_on_error = false;
-		} catch (error) {
-			invoke_error_boundary(error, this.#effect && this.#effect.parent);
-		} finally {
-			set_active_reaction(previous_reaction);
-		}
+		queue_micro_task(() => {
+			try {
+				calling_on_error = true;
+				onerror?.(error, reset);
+				calling_on_error = false;
+			} catch (error) {
+				invoke_error_boundary(error, this.#effect && this.#effect.parent);
+			}
 
-		if (failed) {
-			queue_micro_task(() => {
+			if (failed) {
 				this.#failed_effect = this.#run(() => {
 					Batch.ensure();
 					this.#is_creating_fallback = true;
@@ -442,8 +479,8 @@ export class Boundary {
 						this.#is_creating_fallback = false;
 					}
 				});
-			});
-		}
+			}
+		});
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
index 527f0b0a8f..6b77903574 100644
--- a/packages/svelte/src/internal/client/dom/blocks/branches.js
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -200,17 +200,17 @@ export class BranchManager {
 		if (defer) {
 			for (const [k, effect] of this.#onscreen) {
 				if (k === key) {
-					batch.skipped_effects.delete(effect);
+					batch.unskip_effect(effect);
 				} else {
-					batch.skipped_effects.add(effect);
+					batch.skip_effect(effect);
 				}
 			}
 
 			for (const [k, branch] of this.#offscreen) {
 				if (k === key) {
-					batch.skipped_effects.delete(branch.effect);
+					batch.unskip_effect(branch.effect);
 				} else {
-					batch.skipped_effects.add(branch.effect);
+					batch.skip_effect(branch.effect);
 				}
 			}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index f7c9faf2b1..25f7cf91eb 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -34,12 +34,13 @@ import {
 } from '../../reactivity/effects.js';
 import { source, mutable_source, internal_set } from '../../reactivity/sources.js';
 import { array_from, is_array } from '../../../shared/utils.js';
-import { COMMENT_NODE, EFFECT_OFFSCREEN, INERT } from '#client/constants';
+import { BRANCH_EFFECT, COMMENT_NODE, EFFECT_OFFSCREEN, INERT } from '#client/constants';
 import { queue_micro_task } from '../task.js';
 import { get } from '../../runtime.js';
 import { DEV } from 'esm-env';
 import { derived_safe_equal } from '../../reactivity/deriveds.js';
 import { current_batch } from '../../reactivity/batch.js';
+import * as e from '../../errors.js';
 
 // When making substantive changes to this file, validate them with the each block stress test:
 // https://svelte.dev/playground/1972b2cf46564476ad8c8c6405b23b7b
@@ -257,7 +258,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 				if (item.i) internal_set(item.i, index);
 
 				if (defer) {
-					batch.skipped_effects.delete(item.e);
+					batch.unskip_effect(item.e);
 				}
 			} else {
 				item = create_item(
@@ -290,6 +291,15 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			}
 		}
 
+		if (length > keys.size) {
+			if (DEV) {
+				validate_each_keys(array, get_key);
+			} else {
+				// in prod, the additional information isn't printed, so don't bother computing it
+				e.each_key_duplicate('', '', '');
+			}
+		}
+
 		// remove excess nodes
 		if (hydrating && length > 0) {
 			set_hydrate_node(skip_nodes());
@@ -299,7 +309,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			if (defer) {
 				for (const [key, item] of items) {
 					if (!keys.has(key)) {
-						batch.skipped_effects.add(item.e);
+						batch.skip_effect(item.e);
 					}
 				}
 
@@ -336,6 +346,18 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	}
 }
 
+/**
+ * Skip past any non-branch effects (which could be created with `createSubscriber`, for example) to find the next branch effect
+ * @param {Effect | null} effect
+ * @returns {Effect | null}
+ */
+function skip_to_branch(effect) {
+	while (effect !== null && (effect.f & BRANCH_EFFECT) === 0) {
+		effect = effect.next;
+	}
+	return effect;
+}
+
 /**
  * Add, remove, or reorder items output by an each block as its input changes
  * @template V
@@ -351,7 +373,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 
 	var length = array.length;
 	var items = state.items;
-	var current = state.effect.first;
+	var current = skip_to_branch(state.effect.first);
 
 	/** @type {undefined | Set<Effect>} */
 	var seen;
@@ -431,7 +453,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 				matched = [];
 				stashed = [];
 
-				current = prev.next;
+				current = skip_to_branch(prev.next);
 				continue;
 			}
 		}
@@ -495,7 +517,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 			while (current !== null && current !== effect) {
 				(seen ??= new Set()).add(current);
 				stashed.push(current);
-				current = current.next;
+				current = skip_to_branch(current.next);
 			}
 
 			if (current === null) {
@@ -508,7 +530,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 		}
 
 		prev = effect;
-		current = effect.next;
+		current = skip_to_branch(effect.next);
 	}
 
 	if (state.outrogroups !== null) {
@@ -542,7 +564,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 				to_destroy.push(current);
 			}
 
-			current = current.next;
+			current = skip_to_branch(current.next);
 		}
 
 		var destroy_length = to_destroy.length;
@@ -664,3 +686,30 @@ function link(state, prev, next) {
 		next.prev = prev;
 	}
 }
+
+/**
+ * @param {Array<any>} array
+ * @param {(item: any, index: number) => string} key_fn
+ * @returns {void}
+ */
+function validate_each_keys(array, key_fn) {
+	const keys = new Map();
+	const length = array.length;
+
+	for (let i = 0; i < length; i++) {
+		const key = key_fn(array[i], i);
+
+		if (keys.has(key)) {
+			const a = String(keys.get(key));
+			const b = String(i);
+
+			/** @type {string | null} */
+			let k = String(key);
+			if (k.startsWith('[object ')) k = null;
+
+			e.each_key_duplicate(a, b, k);
+		}
+
+		keys.set(key, i);
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index 7fa5ca464d..f2b1cf80a5 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -9,14 +9,12 @@ import {
 	set_hydrating
 } from '../hydration.js';
 import { block } from '../../reactivity/effects.js';
-import { HYDRATION_START_ELSE } from '../../../../constants.js';
 import { BranchManager } from './branches.js';
-
-// TODO reinstate https://github.com/sveltejs/svelte/pull/15250
+import { HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
 
 /**
  * @param {TemplateNode} node
- * @param {(branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @param {(branch: (fn: (anchor: Node) => void, key?: number | false) => void) => void} fn
  * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
  * @returns {void}
  */
@@ -29,14 +27,28 @@ export function if_block(node, fn, elseif = false) {
 	var flags = elseif ? EFFECT_TRANSPARENT : 0;
 
 	/**
-	 * @param {boolean} condition,
+	 * @param {number | false} key
 	 * @param {null | ((anchor: Node) => void)} fn
 	 */
-	function update_branch(condition, fn) {
+	function update_branch(key, fn) {
 		if (hydrating) {
-			const is_else = read_hydration_instruction(node) === HYDRATION_START_ELSE;
+			const data = read_hydration_instruction(node);
+
+			/**
+			 * @type {number | false}
+			 * "[" = branch 0, "[1" = branch 1, "[2" = branch 2, ..., "[!" = else (false)
+			 */
+			var hydrated_key;
+
+			if (data === HYDRATION_START) {
+				hydrated_key = 0;
+			} else if (data === HYDRATION_START_ELSE) {
+				hydrated_key = false;
+			} else {
+				hydrated_key = parseInt(data.substring(1)); // "[1", "[2", etc.
+			}
 
-			if (condition === is_else) {
+			if (key !== hydrated_key) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
 				// This could happen with `{#if browser}...{/if}`, for example
 				var anchor = skip_nodes();
@@ -45,22 +57,22 @@ export function if_block(node, fn, elseif = false) {
 				branches.anchor = anchor;
 
 				set_hydrating(false);
-				branches.ensure(condition, fn);
+				branches.ensure(key, fn);
 				set_hydrating(true);
 
 				return;
 			}
 		}
 
-		branches.ensure(condition, fn);
+		branches.ensure(key, fn);
 	}
 
 	block(() => {
 		var has_branch = false;
 
-		fn((fn, flag = true) => {
+		fn((fn, key = 0) => {
 			has_branch = true;
-			update_branch(flag, fn);
+			update_branch(key, fn);
 		});
 
 		if (!has_branch) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index 849b1c2447..dd40d8a1b8 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -4,6 +4,8 @@ import { block } from '../../reactivity/effects.js';
 import { hydrate_next, hydrating } from '../hydration.js';
 import { BranchManager } from './branches.js';
 
+const NAN = Symbol('NaN');
+
 /**
  * @template V
  * @param {TemplateNode} node
@@ -23,6 +25,11 @@ export function key(node, get_key, render_fn) {
 	block(() => {
 		var key = get_key();
 
+		// NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily
+		if (key !== key) {
+			key = /** @type {any} */ (NAN);
+		}
+
 		// key blocks in Svelte <5 had stupid semantics
 		if (legacy && key !== null && typeof key === 'object') {
 			key = /** @type {V} */ ({});
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index c1ab97dc61..6f1fa7391e 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,4 +1,4 @@
-/** @import { Effect } from '#client' */
+/** @import { Blocker, Effect } from '#client' */
 import { DEV } from 'esm-env';
 import { hydrating, set_hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
@@ -483,7 +483,7 @@ function set_attributes(
  * @param {(...expressions: any) => Record<string | symbol, any>} fn
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {string} [css_hash]
  * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/media.js b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
index f96ee05989..87da950375 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/media.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
@@ -175,8 +175,9 @@ export function bind_paused(media, get, set = get) {
 			if (paused) {
 				media.pause();
 			} else {
-				media.play().catch(() => {
+				media.play().catch((error) => {
 					set((paused = true));
+					throw error;
 				});
 			}
 		}
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/size.js b/packages/svelte/src/internal/client/dom/elements/bindings/size.js
index a76c70aab1..016ee5a547 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/size.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/size.js
@@ -2,9 +2,8 @@ import { effect, teardown } from '../../../reactivity/effects.js';
 import { untrack } from '../../../runtime.js';
 
 /**
- * Resize observer singleton.
- * One listener per element only!
- * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ * We create one listener for all elements
+ * @see {@link https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ Explanation}
  */
 class ResizeObserverSingleton {
 	/** */
diff --git a/packages/svelte/src/internal/client/dom/elements/custom-element.js b/packages/svelte/src/internal/client/dom/elements/custom-element.js
index 2d118bfab3..40d3d68ec0 100644
--- a/packages/svelte/src/internal/client/dom/elements/custom-element.js
+++ b/packages/svelte/src/internal/client/dom/elements/custom-element.js
@@ -35,18 +35,23 @@ if (typeof HTMLElement === 'function') {
 		$$l_u = new Map();
 		/** @type {any} The managed render effect for reflecting attributes */
 		$$me;
+		/** @type {ShadowRoot | null} The ShadowRoot of the custom element */
+		$$shadowRoot = null;
 
 		/**
 		 * @param {*} $$componentCtor
 		 * @param {*} $$slots
-		 * @param {*} use_shadow_dom
+		 * @param {ShadowRootInit | undefined} shadow_root_init
 		 */
-		constructor($$componentCtor, $$slots, use_shadow_dom) {
+		constructor($$componentCtor, $$slots, shadow_root_init) {
 			super();
 			this.$$ctor = $$componentCtor;
 			this.$$s = $$slots;
-			if (use_shadow_dom) {
-				this.attachShadow({ mode: 'open' });
+
+			if (shadow_root_init) {
+				// We need to store the reference to shadow root, because `closed` shadow root cannot be
+				// accessed with `this.shadowRoot`.
+				this.$$shadowRoot = this.attachShadow(shadow_root_init);
 			}
 		}
 
@@ -136,7 +141,7 @@ if (typeof HTMLElement === 'function') {
 				}
 				this.$$c = createClassComponent({
 					component: this.$$ctor,
-					target: this.shadowRoot || this,
+					target: this.$$shadowRoot || this,
 					props: {
 						...this.$$d,
 						$$slots,
@@ -277,7 +282,7 @@ function get_custom_elements_slots(element) {
  * @param {Record<string, CustomElementPropDefinition>} props_definition  The props to observe
  * @param {string[]} slots  The slots to create
  * @param {string[]} exports  Explicitly exported values, other than props
- * @param {boolean} use_shadow_dom  Whether to use shadow DOM
+ * @param {ShadowRootInit | undefined} shadow_root_init  Options passed to shadow DOM constructor
  * @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend]
  */
 export function create_custom_element(
@@ -285,12 +290,12 @@ export function create_custom_element(
 	props_definition,
 	slots,
 	exports,
-	use_shadow_dom,
+	shadow_root_init,
 	extend
 ) {
 	let Class = class extends SvelteElement {
 		constructor() {
-			super(Component, slots, use_shadow_dom);
+			super(Component, slots, shadow_root_init);
 			this.$$p_d = props_definition;
 		}
 		static get observedAttributes() {
diff --git a/packages/svelte/src/internal/client/dom/elements/customizable-select.js b/packages/svelte/src/internal/client/dom/elements/customizable-select.js
new file mode 100644
index 0000000000..1858565d2a
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/elements/customizable-select.js
@@ -0,0 +1,98 @@
+import { hydrating, reset, set_hydrate_node, set_hydrating } from '../hydration.js';
+import { create_comment } from '../operations.js';
+import { attach } from './attachments.js';
+
+/** @type {boolean | null} */
+let supported = null;
+
+/**
+ * Checks if the browser supports rich HTML content inside `<option>` elements.
+ * Modern browsers preserve HTML elements inside options, while older browsers
+ * strip them during parsing, leaving only text content.
+ * @returns {boolean}
+ */
+function is_supported() {
+	if (supported === null) {
+		var select = document.createElement('select');
+		select.innerHTML = '<option><span>t</span></option>';
+		supported = /** @type {Element} */ (select.firstChild)?.firstChild?.nodeType === 1;
+	}
+
+	return supported;
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {(new_element: HTMLElement) => void} update_element
+ */
+export function selectedcontent(element, update_element) {
+	// if it's not supported no need for special logic
+	if (!is_supported()) return;
+
+	// we use the attach function directly just to make sure is executed when is mounted to the dom
+	attach(element, () => () => {
+		const select = element.closest('select');
+		if (!select) return;
+
+		const observer = new MutationObserver((entries) => {
+			var selected = false;
+
+			for (const entry of entries) {
+				if (entry.target === element) {
+					// the `<selectedcontent>` already changed, no need to replace it
+					return;
+				}
+
+				// if the changes doesn't include the selected `<option>` we don't need to do anything
+				selected ||= !!entry.target.parentElement?.closest('option')?.selected;
+			}
+
+			if (selected) {
+				// replace the `<selectedcontent>` with a clone
+				element.replaceWith((element = /** @type {HTMLElement} */ (element.cloneNode(true))));
+				update_element(element);
+			}
+		});
+
+		observer.observe(select, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+}
+
+/**
+ * Handles rich HTML content inside `<option>`, `<optgroup>`, or `<select>` elements with browser-specific branching.
+ * Modern browsers preserve HTML inside options, while older browsers strip it to text only.
+ *
+ * @param {HTMLOptionElement | HTMLOptGroupElement | HTMLSelectElement} element The element to process
+ * @param {() => void} rich_fn Function to process rich HTML content (modern browsers)
+ */
+export function customizable_select(element, rich_fn) {
+	var was_hydrating = hydrating;
+
+	if (!is_supported()) {
+		set_hydrating(false);
+		element.textContent = '';
+		element.append(create_comment(''));
+	}
+
+	try {
+		rich_fn();
+	} finally {
+		if (was_hydrating) {
+			if (hydrating) {
+				reset(element);
+			} else {
+				set_hydrating(true);
+				set_hydrate_node(element);
+			}
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index e9f0953df7..170b40780a 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -239,8 +239,6 @@ export function transition(flags, element, get_fn, get_params) {
 				intro?.abort();
 			}
 
-			dispatch_event(element, 'introstart');
-
 			intro = animate(element, get_options(), outro, 1, () => {
 				dispatch_event(element, 'introend');
 
@@ -260,8 +258,6 @@ export function transition(flags, element, get_fn, get_params) {
 
 			element.inert = true;
 
-			dispatch_event(element, 'outrostart');
-
 			outro = animate(element, get_options(), intro, 0, () => {
 				dispatch_event(element, 'outroend');
 				fn?.();
@@ -345,7 +341,8 @@ function animate(element, options, counterpart, t2, on_finish) {
 
 	counterpart?.deactivate();
 
-	if (!options?.duration) {
+	if (!options?.duration && !options?.delay) {
+		dispatch_event(element, is_intro ? 'introstart' : 'outrostart');
 		on_finish();
 
 		return {
@@ -385,6 +382,8 @@ function animate(element, options, counterpart, t2, on_finish) {
 		// remove dummy animation from the stack to prevent conflict with main animation
 		animation.cancel();
 
+		dispatch_event(element, is_intro ? 'introstart' : 'outrostart');
+
 		// for bidirectional transitions, we start from the current position,
 		// rather than doing a full intro/outro
 		var t1 = counterpart?.t() ?? 1 - t2;
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 7a9ef33d1b..83833f493d 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -95,7 +95,12 @@ export function skip_nodes(remove = true) {
 			if (data === HYDRATION_END) {
 				if (depth === 0) return node;
 				depth -= 1;
-			} else if (data === HYDRATION_START || data === HYDRATION_START_ELSE) {
+			} else if (
+				data === HYDRATION_START ||
+				data === HYDRATION_START_ELSE ||
+				// "[1", "[2", etc. for if blocks
+				(data[0] === '[' && !isNaN(Number(data.slice(1))))
+			) {
 				depth += 1;
 			}
 		}
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 479c2ba0a5..61a48bcbfb 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -122,6 +122,10 @@ export function child(node, is_text) {
 		return text;
 	}
 
+	if (is_text) {
+		merge_text_nodes(/** @type {Text} */ (child));
+	}
+
 	set_hydrate_node(child);
 	return child;
 }
@@ -142,14 +146,18 @@ export function first_child(node, is_text = false) {
 		return first;
 	}
 
-	// if an {expression} is empty during SSR, there might be no
-	// text node to hydrate — we must therefore create one
-	if (is_text && hydrate_node?.nodeType !== TEXT_NODE) {
-		var text = create_text();
+	if (is_text) {
+		// if an {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (hydrate_node?.nodeType !== TEXT_NODE) {
+			var text = create_text();
 
-		hydrate_node?.before(text);
-		set_hydrate_node(text);
-		return text;
+			hydrate_node?.before(text);
+			set_hydrate_node(text);
+			return text;
+		}
+
+		merge_text_nodes(/** @type {Text} */ (hydrate_node));
 	}
 
 	return hydrate_node;
@@ -175,20 +183,24 @@ export function sibling(node, count = 1, is_text = false) {
 		return next_sibling;
 	}
 
-	// if a sibling {expression} is empty during SSR, there might be no
-	// text node to hydrate — we must therefore create one
-	if (is_text && next_sibling?.nodeType !== TEXT_NODE) {
-		var text = create_text();
-		// If the next sibling is `null` and we're handling text then it's because
-		// the SSR content was empty for the text, so we need to generate a new text
-		// node and insert it after the last sibling
-		if (next_sibling === null) {
-			last_sibling?.after(text);
-		} else {
-			next_sibling.before(text);
+	if (is_text) {
+		// if a sibling {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (next_sibling?.nodeType !== TEXT_NODE) {
+			var text = create_text();
+			// If the next sibling is `null` and we're handling text then it's because
+			// the SSR content was empty for the text, so we need to generate a new text
+			// node and insert it after the last sibling
+			if (next_sibling === null) {
+				last_sibling?.after(text);
+			} else {
+				next_sibling.before(text);
+			}
+			set_hydrate_node(text);
+			return text;
 		}
-		set_hydrate_node(text);
-		return text;
+
+		merge_text_nodes(/** @type {Text} */ (next_sibling));
 	}
 
 	set_hydrate_node(next_sibling);
@@ -258,3 +270,24 @@ export function set_attribute(element, key, value = '') {
 	}
 	return element.setAttribute(key, value);
 }
+
+/**
+ * Browsers split text nodes larger than 65536 bytes when parsing.
+ * For hydration to succeed, we need to stitch them back together
+ * @param {Text} text
+ */
+export function merge_text_nodes(text) {
+	if (/** @type {string} */ (text.nodeValue).length < 65536) {
+		return;
+	}
+
+	let next = text.nextSibling;
+
+	while (next !== null && next.nodeType === TEXT_NODE) {
+		next.remove();
+
+		/** @type {string} */ (text.nodeValue) += /** @type {string} */ (next.nodeValue);
+
+		next = text.nextSibling;
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 0d827218bc..567fbeabf0 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -4,11 +4,13 @@ import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydra
 import {
 	create_text,
 	get_first_child,
+	get_next_sibling,
 	is_firefox,
 	create_element,
 	create_fragment,
 	create_comment,
-	set_attribute
+	set_attribute,
+	merge_text_nodes
 } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
@@ -310,6 +312,8 @@ export function text(value = '') {
 		// if an {expression} is empty during SSR, we need to insert an empty text node
 		node.before((node = create_text()));
 		set_hydrate_node(node);
+	} else {
+		merge_text_nodes(/** @type {Text} */ (node));
 	}
 
 	assign_nodes(node, node);
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index a2add3ec59..7fcaf77dc5 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -42,6 +42,7 @@ export {
 export { set_class } from './dom/elements/class.js';
 export { apply, event, delegate, replay_events } from './dom/elements/events.js';
 export { autofocus, remove_textarea_child } from './dom/elements/misc.js';
+export { customizable_select, selectedcontent } from './dom/elements/customizable-select.js';
 export { set_style } from './dom/elements/style.js';
 export { animation, transition } from './dom/elements/transitions.js';
 export { bind_active_element } from './dom/elements/bindings/document.js';
@@ -98,12 +99,12 @@ export {
 	with_script
 } from './dom/template.js';
 export {
-	async_body,
 	for_await_track_reactivity_loss,
 	run,
 	save,
 	track_reactivity_loss,
-	run_after_blockers
+	run_after_blockers,
+	wait
 } from './reactivity/async.js';
 export { eager, flushSync as flush } from './reactivity/batch.js';
 export {
@@ -157,7 +158,7 @@ export {
 	deep_read_state,
 	active_effect
 } from './runtime.js';
-export { validate_binding, validate_each_keys } from './validate.js';
+export { validate_binding } from './validate.js';
 export { raf } from './timing.js';
 export { proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index c8802e2672..51333e597f 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -126,7 +126,7 @@ export function proxy(value) {
 			}
 			var s = sources.get(prop);
 			if (s === undefined) {
-				s = with_parent(() => {
+				with_parent(() => {
 					var s = source(descriptor.value, stack);
 					sources.set(prop, s);
 					if (DEV && typeof prop === 'string') {
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
index e48aff3d7f..b6eba3bf8a 100644
--- a/packages/svelte/src/internal/client/reactivity/async.js
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -1,4 +1,4 @@
-/** @import { Effect, TemplateNode, Value } from '#client' */
+/** @import { Blocker, Effect, Value } from '#client' */
 import { DESTROYED, STALE_REACTION } from '#client/constants';
 import { DEV } from 'esm-env';
 import {
@@ -25,10 +25,9 @@ import {
 	set_from_async_derived
 } from './deriveds.js';
 import { aborted } from './effects.js';
-import { hydrate_next, hydrating, set_hydrate_node, skip_nodes } from '../dom/hydration.js';
 
 /**
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
  * @param {(values: Value[]) => any} fn
@@ -36,7 +35,10 @@ import { hydrate_next, hydrating, set_hydrate_node, skip_nodes } from '../dom/hy
 export function flatten(blockers, sync, async, fn) {
 	const d = is_runes() ? derived : derived_safe_equal;
 
-	if (async.length === 0 && blockers.length === 0) {
+	// Filter out already-settled blockers - no need to wait for them
+	var pending = blockers.filter((b) => !b.settled);
+
+	if (async.length === 0 && pending.length === 0) {
 		fn(sync.map(d));
 		return;
 	}
@@ -45,47 +47,52 @@ export function flatten(blockers, sync, async, fn) {
 	var parent = /** @type {Effect} */ (active_effect);
 
 	var restore = capture();
+	var blocker_promise =
+		pending.length === 1
+			? pending[0].promise
+			: pending.length > 1
+				? Promise.all(pending.map((b) => b.promise))
+				: null;
+
+	/** @param {Value[]} values */
+	function finish(values) {
+		restore();
 
-	function run() {
-		Promise.all(async.map((expression) => async_derived(expression)))
-			.then((result) => {
-				restore();
+		try {
+			fn(values);
+		} catch (error) {
+			if ((parent.f & DESTROYED) === 0) {
+				invoke_error_boundary(error, parent);
+			}
+		}
 
-				try {
-					fn([...sync.map(d), ...result]);
-				} catch (error) {
-					// ignore errors in blocks that have already been destroyed
-					if ((parent.f & DESTROYED) === 0) {
-						invoke_error_boundary(error, parent);
-					}
-				}
+		batch?.deactivate();
+		unset_context();
+	}
 
-				batch?.deactivate();
-				unset_context();
-			})
-			.catch((error) => {
-				invoke_error_boundary(error, parent);
-			});
+	// Fast path: blockers but no async expressions
+	if (async.length === 0) {
+		/** @type {Promise<any>} */ (blocker_promise).then(() => finish(sync.map(d)));
+		return;
 	}
 
-	if (blockers.length > 0) {
-		Promise.all(blockers).then(() => {
-			restore();
+	// Full path: has async expressions
+	function run() {
+		restore();
+		Promise.all(async.map((expression) => async_derived(expression)))
+			.then((result) => finish([...sync.map(d), ...result]))
+			.catch((error) => invoke_error_boundary(error, parent));
+	}
 
-			try {
-				return run();
-			} finally {
-				batch?.deactivate();
-				unset_context();
-			}
-		});
+	if (blocker_promise) {
+		blocker_promise.then(run);
 	} else {
 		run();
 	}
 }
 
 /**
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {(values: Value[]) => any} fn
  */
 export function run_after_blockers(blockers, fn) {
@@ -211,51 +218,6 @@ export function unset_context() {
 	}
 }
 
-/**
- * @param {TemplateNode} anchor
- * @param {(target: TemplateNode) => Promise<void>} fn
- */
-export async function async_body(anchor, fn) {
-	var boundary = get_boundary();
-	var batch = /** @type {Batch} */ (current_batch);
-	var blocking = !boundary.is_pending();
-
-	boundary.update_pending_count(1);
-	batch.increment(blocking);
-
-	var active = /** @type {Effect} */ (active_effect);
-
-	var was_hydrating = hydrating;
-	var next_hydrate_node = undefined;
-
-	if (was_hydrating) {
-		hydrate_next();
-		next_hydrate_node = skip_nodes(false);
-	}
-
-	try {
-		var promise = fn(anchor);
-	} finally {
-		if (next_hydrate_node) {
-			set_hydrate_node(next_hydrate_node);
-			hydrate_next();
-		}
-	}
-
-	try {
-		await promise;
-	} catch (error) {
-		if (!aborted(active)) {
-			invoke_error_boundary(error, active);
-		}
-	} finally {
-		boundary.update_pending_count(-1);
-		batch.decrement(blocking);
-
-		unset_context();
-	}
-}
-
 /**
  * @param {Array<() => void | Promise<void>>} thunks
  */
@@ -264,7 +226,7 @@ export function run(thunks) {
 
 	var boundary = get_boundary();
 	var batch = /** @type {Batch} */ (current_batch);
-	var blocking = !boundary.is_pending();
+	var blocking = boundary.is_rendered();
 
 	boundary.update_pending_count(1);
 	batch.increment(blocking);
@@ -285,7 +247,13 @@ export function run(thunks) {
 
 	var promise = Promise.resolve(thunks[0]()).catch(handle_error);
 
-	var promises = [promise];
+	/** @type {Blocker} */
+	var blocker = { promise, settled: false };
+	var blockers = [blocker];
+
+	promise.finally(() => {
+		blocker.settled = true;
+	});
 
 	for (const fn of thunks.slice(1)) {
 		promise = promise
@@ -298,20 +266,20 @@ export function run(thunks) {
 					throw STALE_REACTION;
 				}
 
-				try {
-					restore();
-					return fn();
-				} finally {
-					// TODO do we need it here as well as below?
-					unset_context();
-				}
+				restore();
+				return fn();
 			})
-			.catch(handle_error)
-			.finally(() => {
-				unset_context();
-			});
+			.catch(handle_error);
 
-		promises.push(promise);
+		const blocker = { promise, settled: false };
+		blockers.push(blocker);
+
+		promise.finally(() => {
+			blocker.settled = true;
+
+			unset_context();
+			current_batch?.deactivate();
+		});
 	}
 
 	promise
@@ -323,5 +291,12 @@ export function run(thunks) {
 			batch.decrement(blocking);
 		});
 
-	return promises;
+	return blockers;
+}
+
+/**
+ * @param {Blocker[]} blockers
+ */
+export function wait(blockers) {
+	return Promise.all(blockers.map((b) => b.promise));
 }
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index 24dee51419..9bf93c873f 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -1,5 +1,6 @@
 /** @import { Fork } from 'svelte' */
 /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
+/** @import { Boundary } from '../dom/blocks/boundary' */
 import {
 	BLOCK_EFFECT,
 	BRANCH_EFFECT,
@@ -17,18 +18,15 @@ import {
 	EAGER_EFFECT,
 	HEAD_EFFECT,
 	ERROR_VALUE,
-	WAS_MARKED,
 	MANAGED_EFFECT
 } from '#client/constants';
 import { async_mode_flag } from '../../flags/index.js';
-import { deferred, define_property } from '../../shared/utils.js';
+import { deferred, define_property, includes } from '../../shared/utils.js';
 import {
 	active_effect,
 	get,
+	increment_write_version,
 	is_dirty,
-	is_updating_effect,
-	set_is_updating_effect,
-	set_signal_status,
 	update_effect
 } from '../runtime.js';
 import * as e from '../errors.js';
@@ -37,16 +35,9 @@ import { DEV } from 'esm-env';
 import { invoke_error_boundary } from '../error-handling.js';
 import { flush_eager_effects, old_values, set_eager_effects, source, update } from './sources.js';
 import { eager_effect, unlink_effect } from './effects.js';
-
-/**
- * @typedef {{
- *   parent: EffectTarget | null;
- *   effect: Effect | null;
- *   effects: Effect[];
- *   render_effects: Effect[];
- *   block_effects: Effect[];
- * }} EffectTarget
- */
+import { defer_effect } from './utils.js';
+import { UNINITIALIZED } from '../../../constants.js';
+import { set_signal_status } from './status.js';
 
 /** @type {Set<Batch>} */
 const batches = new Set();
@@ -128,29 +119,65 @@ export class Batch {
 
 	/**
 	 * Deferred effects (which run after async work has completed) that are DIRTY
-	 * @type {Effect[]}
+	 * @type {Set<Effect>}
 	 */
-	#dirty_effects = [];
+	#dirty_effects = new Set();
 
 	/**
 	 * Deferred effects that are MAYBE_DIRTY
-	 * @type {Effect[]}
+	 * @type {Set<Effect>}
 	 */
-	#maybe_dirty_effects = [];
+	#maybe_dirty_effects = new Set();
 
 	/**
-	 * A set of branches that still exist, but will be destroyed when this batch
-	 * is committed — we skip over these during `process`
-	 * @type {Set<Effect>}
+	 * A map of branches that still exist, but will be destroyed when this batch
+	 * is committed — we skip over these during `process`.
+	 * The value contains child effects that were dirty/maybe_dirty before being reset,
+	 * so they can be rescheduled if the branch survives.
+	 * @type {Map<Effect, { d: Effect[], m: Effect[] }>}
 	 */
-	skipped_effects = new Set();
+	#skipped_branches = new Map();
 
 	is_fork = false;
 
+	#decrement_queued = false;
+
 	is_deferred() {
 		return this.is_fork || this.#blocking_pending > 0;
 	}
 
+	/**
+	 * Add an effect to the #skipped_branches map and reset its children
+	 * @param {Effect} effect
+	 */
+	skip_effect(effect) {
+		if (!this.#skipped_branches.has(effect)) {
+			this.#skipped_branches.set(effect, { d: [], m: [] });
+		}
+	}
+
+	/**
+	 * Remove an effect from the #skipped_branches map and reschedule
+	 * any tracked dirty/maybe_dirty child effects
+	 * @param {Effect} effect
+	 */
+	unskip_effect(effect) {
+		var tracked = this.#skipped_branches.get(effect);
+		if (tracked) {
+			this.#skipped_branches.delete(effect);
+
+			for (var e of tracked.d) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (e of tracked.m) {
+				set_signal_status(e, MAYBE_DIRTY);
+				schedule_effect(e);
+			}
+		}
+	}
+
 	/**
 	 *
 	 * @param {Effect[]} root_effects
@@ -158,21 +185,16 @@ export class Batch {
 	process(root_effects) {
 		queued_root_effects = [];
 
-		previous_batch = null;
-
 		this.apply();
 
-		/** @type {EffectTarget} */
-		var target = {
-			parent: null,
-			effect: null,
-			effects: [],
-			render_effects: [],
-			block_effects: []
-		};
+		/** @type {Effect[]} */
+		var effects = [];
+
+		/** @type {Effect[]} */
+		var render_effects = [];
 
 		for (const root of root_effects) {
-			this.#traverse_effect_tree(root, target);
+			this.#traverse_effect_tree(root, effects, render_effects);
 			// Note: #traverse_effect_tree runs block effects eagerly, which can schedule effects,
 			// which means queued_root_effects now may be filled again.
 
@@ -180,22 +202,29 @@ export class Batch {
 			// log_inconsistent_branches(root);
 		}
 
-		if (!this.is_fork) {
-			this.#resolve();
-		}
-
 		if (this.is_deferred()) {
-			this.#defer_effects(target.effects);
-			this.#defer_effects(target.render_effects);
-			this.#defer_effects(target.block_effects);
+			this.#defer_effects(render_effects);
+			this.#defer_effects(effects);
+
+			for (const [e, t] of this.#skipped_branches) {
+				reset_branch(e, t);
+			}
 		} else {
+			// append/remove branches
+			for (const fn of this.#commit_callbacks) fn();
+			this.#commit_callbacks.clear();
+
+			if (this.#pending === 0) {
+				this.#commit();
+			}
+
 			// If sources are written to, then work needs to happen in a separate batch, else prior sources would be mixed with
 			// newly updated sources, which could lead to infinite loops when effects run over and over again.
 			previous_batch = this;
 			current_batch = null;
 
-			flush_queued_effects(target.render_effects);
-			flush_queued_effects(target.effects);
+			flush_queued_effects(render_effects);
+			flush_queued_effects(effects);
 
 			previous_batch = null;
 
@@ -209,39 +238,50 @@ export class Batch {
 	 * Traverse the effect tree, executing effects or stashing
 	 * them for later execution as appropriate
 	 * @param {Effect} root
-	 * @param {EffectTarget} target
+	 * @param {Effect[]} effects
+	 * @param {Effect[]} render_effects
 	 */
-	#traverse_effect_tree(root, target) {
+	#traverse_effect_tree(root, effects, render_effects) {
 		root.f ^= CLEAN;
 
 		var effect = root.first;
 
+		/** @type {Effect | null} */
+		var pending_boundary = null;
+
 		while (effect !== null) {
 			var flags = effect.f;
 			var is_branch = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0;
 			var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
 
-			var skip = is_skippable_branch || (flags & INERT) !== 0 || this.skipped_effects.has(effect);
+			var skip = is_skippable_branch || (flags & INERT) !== 0 || this.#skipped_branches.has(effect);
 
-			if ((effect.f & BOUNDARY_EFFECT) !== 0 && effect.b?.is_pending()) {
-				target = {
-					parent: target,
-					effect,
-					effects: [],
-					render_effects: [],
-					block_effects: []
-				};
+			// Inside a `<svelte:boundary>` with a pending snippet,
+			// all effects are deferred until the boundary resolves
+			// (except block/async effects, which run immediately)
+			if (
+				async_mode_flag &&
+				pending_boundary === null &&
+				(flags & BOUNDARY_EFFECT) !== 0 &&
+				effect.b?.is_pending
+			) {
+				pending_boundary = effect;
 			}
 
 			if (!skip && effect.fn !== null) {
 				if (is_branch) {
 					effect.f ^= CLEAN;
+				} else if (
+					pending_boundary !== null &&
+					(flags & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0
+				) {
+					/** @type {Boundary} */ (pending_boundary.b).defer_effect(effect);
 				} else if ((flags & EFFECT) !== 0) {
-					target.effects.push(effect);
+					effects.push(effect);
 				} else if (async_mode_flag && (flags & (RENDER_EFFECT | MANAGED_EFFECT)) !== 0) {
-					target.render_effects.push(effect);
+					render_effects.push(effect);
 				} else if (is_dirty(effect)) {
-					if ((effect.f & BLOCK_EFFECT) !== 0) target.block_effects.push(effect);
+					if ((flags & BLOCK_EFFECT) !== 0) this.#maybe_dirty_effects.add(effect);
 					update_effect(effect);
 				}
 
@@ -257,15 +297,8 @@ export class Batch {
 			effect = effect.next;
 
 			while (effect === null && parent !== null) {
-				if (parent === target.effect) {
-					// TODO rather than traversing into pending boundaries and deferring the effects,
-					// could we just attach the effects _to_ the pending boundary and schedule them
-					// once the boundary is ready?
-					this.#defer_effects(target.effects);
-					this.#defer_effects(target.render_effects);
-					this.#defer_effects(target.block_effects);
-
-					target = /** @type {EffectTarget} */ (target.parent);
+				if (parent === pending_boundary) {
+					pending_boundary = null;
 				}
 
 				effect = parent.next;
@@ -278,33 +311,8 @@ export class Batch {
 	 * @param {Effect[]} effects
 	 */
 	#defer_effects(effects) {
-		for (const e of effects) {
-			const target = (e.f & DIRTY) !== 0 ? this.#dirty_effects : this.#maybe_dirty_effects;
-			target.push(e);
-
-			// Since we're not executing these effects now, we need to clear any WAS_MARKED flags
-			// so that other batches can correctly reach these effects during their own traversal
-			this.#clear_marked(e.deps);
-
-			// mark as clean so they get scheduled if they depend on pending async state
-			set_signal_status(e, CLEAN);
-		}
-	}
-
-	/**
-	 * @param {Value[] | null} deps
-	 */
-	#clear_marked(deps) {
-		if (deps === null) return;
-
-		for (const dep of deps) {
-			if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) {
-				continue;
-			}
-
-			dep.f ^= WAS_MARKED;
-
-			this.#clear_marked(/** @type {Derived} */ (dep).deps);
+		for (var i = 0; i < effects.length; i += 1) {
+			defer_effect(effects[i], this.#dirty_effects, this.#maybe_dirty_effects);
 		}
 	}
 
@@ -315,7 +323,7 @@ export class Batch {
 	 * @param {any} value
 	 */
 	capture(source, value) {
-		if (!this.previous.has(source)) {
+		if (value !== UNINITIALIZED && !this.previous.has(source)) {
 			this.previous.set(source, value);
 		}
 
@@ -362,18 +370,6 @@ export class Batch {
 		this.#discard_callbacks.clear();
 	}
 
-	#resolve() {
-		if (this.#blocking_pending === 0) {
-			// append/remove branches
-			for (const fn of this.#commit_callbacks) fn();
-			this.#commit_callbacks.clear();
-		}
-
-		if (this.#pending === 0) {
-			this.#commit();
-		}
-	}
-
 	#commit() {
 		// If there are other pending batches, they now need to be 'rebased' —
 		// in other words, we re-run block/async effects with the newly
@@ -385,15 +381,6 @@ export class Batch {
 			var previous_batch_values = batch_values;
 			var is_earlier = true;
 
-			/** @type {EffectTarget} */
-			var dummy_target = {
-				parent: null,
-				effect: null,
-				effects: [],
-				render_effects: [],
-				block_effects: []
-			};
-
 			for (const batch of batches) {
 				if (batch === this) {
 					is_earlier = false;
@@ -442,10 +429,10 @@ export class Batch {
 						batch.apply();
 
 						for (const root of queued_root_effects) {
-							batch.#traverse_effect_tree(root, dummy_target);
+							batch.#traverse_effect_tree(root, [], []);
 						}
 
-						// TODO do we need to do anything with `target`? defer block effects?
+						// TODO do we need to do anything with the dummy effect arrays?
 
 						batch.deactivate();
 					}
@@ -479,11 +466,27 @@ export class Batch {
 		this.#pending -= 1;
 		if (blocking) this.#blocking_pending -= 1;
 
-		this.revive();
+		if (this.#decrement_queued) return;
+		this.#decrement_queued = true;
+
+		queue_micro_task(() => {
+			this.#decrement_queued = false;
+
+			if (!this.is_deferred()) {
+				// we only reschedule previously-deferred effects if we expect
+				// to be able to run them after processing the batch
+				this.revive();
+			} else if (queued_root_effects.length > 0) {
+				// if other effects are scheduled, process the batch _without_
+				// rescheduling the previously-deferred effects
+				this.flush();
+			}
+		});
 	}
 
 	revive() {
 		for (const e of this.#dirty_effects) {
+			this.#maybe_dirty_effects.delete(e);
 			set_signal_status(e, DIRTY);
 			schedule_effect(e);
 		}
@@ -493,9 +496,6 @@ export class Batch {
 			schedule_effect(e);
 		}
 
-		this.#dirty_effects = [];
-		this.#maybe_dirty_effects = [];
-
 		this.flush();
 	}
 
@@ -519,7 +519,7 @@ export class Batch {
 			batches.add(current_batch);
 
 			if (!is_flushing_sync) {
-				Batch.enqueue(() => {
+				queue_micro_task(() => {
 					if (current_batch !== batch) {
 						// a flushSync happened in the meantime
 						return;
@@ -533,11 +533,6 @@ export class Batch {
 		return current_batch;
 	}
 
-	/** @param {() => void} task */
-	static enqueue(task) {
-		queue_micro_task(task);
-	}
-
 	apply() {
 		if (!async_mode_flag || (!this.is_fork && batches.size === 1)) return;
 
@@ -604,14 +599,12 @@ export function flushSync(fn) {
 }
 
 function flush_effects() {
-	var was_updating_effect = is_updating_effect;
 	is_flushing = true;
 
 	var source_stacks = DEV ? new Set() : null;
 
 	try {
 		var flush_count = 0;
-		set_is_updating_effect(true);
 
 		while (queued_root_effects.length > 0) {
 			var batch = Batch.ensure();
@@ -654,9 +647,9 @@ function flush_effects() {
 			}
 		}
 	} finally {
-		is_flushing = false;
-		set_is_updating_effect(was_updating_effect);
+		queued_root_effects = [];
 
+		is_flushing = false;
 		last_scheduled_effect = null;
 
 		if (DEV) {
@@ -821,7 +814,7 @@ function depends_on(reaction, sources, checked) {
 
 	if (reaction.deps !== null) {
 		for (const dep of reaction.deps) {
-			if (sources.includes(dep)) {
+			if (includes.call(sources, dep)) {
 				return true;
 			}
 
@@ -849,7 +842,8 @@ export function schedule_effect(signal) {
 		var flags = effect.f;
 
 		// if the effect is being scheduled because a parent (each/await/etc) block
-		// updated an internal source, bail out or we'll cause a second flush
+		// updated an internal source, or because a branch is being unskipped,
+		// bail out or we'll cause a second flush
 		if (
 			is_flushing &&
 			effect === active_effect &&
@@ -927,6 +921,34 @@ export function eager(fn) {
 	return value;
 }
 
+/**
+ * Mark all the effects inside a skipped branch CLEAN, so that
+ * they can be correctly rescheduled later. Tracks dirty and maybe_dirty
+ * effects so they can be rescheduled if the branch survives.
+ * @param {Effect} effect
+ * @param {{ d: Effect[], m: Effect[] }} tracked
+ */
+function reset_branch(effect, tracked) {
+	// clean branch = nothing dirty inside, no need to traverse further
+	if ((effect.f & BRANCH_EFFECT) !== 0 && (effect.f & CLEAN) !== 0) {
+		return;
+	}
+
+	if ((effect.f & DIRTY) !== 0) {
+		tracked.d.push(effect);
+	} else if ((effect.f & MAYBE_DIRTY) !== 0) {
+		tracked.m.push(effect);
+	}
+
+	set_signal_status(effect, CLEAN);
+
+	var e = effect.first;
+	while (e !== null) {
+		reset_branch(e, tracked);
+		e = e.next;
+	}
+}
+
 /**
  * Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
  * This is useful for speculatively loading data (for example) when you suspect that
@@ -964,13 +986,18 @@ export function fork(fn) {
 
 	flushSync(fn);
 
-	batch_values = null;
-
 	// revert state changes
 	for (var [source, value] of batch.previous) {
 		source.v = value;
 	}
 
+	// make writable deriveds dirty, so they recalculate correctly
+	for (source of batch.current.keys()) {
+		if ((source.f & DERIVED) !== 0) {
+			set_signal_status(source, DIRTY);
+		}
+	}
+
 	return {
 		commit: async () => {
 			if (committed) {
@@ -986,9 +1013,10 @@ export function fork(fn) {
 
 			batch.is_fork = false;
 
-			// apply changes
+			// apply changes and update write versions so deriveds see the change
 			for (var [source, value] of batch.current) {
 				source.v = value;
+				source.wv = increment_write_version();
 			}
 
 			// trigger any `$state.eager(...)` expressions with the new state.
@@ -1012,6 +1040,13 @@ export function fork(fn) {
 			await settled;
 		},
 		discard: () => {
+			// cause any MAYBE_DIRTY deriveds to update
+			// if they depend on things thath changed
+			// inside the discarded fork
+			for (var source of batch.current.keys()) {
+				source.wv = increment_write_version();
+			}
+
 			if (!committed && batches.has(batch)) {
 				batches.delete(batch);
 				batch.discard();
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index b2d5d59ae1..bb732bdd1e 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -3,21 +3,18 @@
 import { DEV } from 'esm-env';
 import {
 	ERROR_VALUE,
-	CLEAN,
 	DERIVED,
 	DIRTY,
 	EFFECT_PRESERVED,
-	MAYBE_DIRTY,
 	STALE_REACTION,
 	ASYNC,
 	WAS_MARKED,
-	CONNECTED,
-	DESTROYED
+	DESTROYED,
+	CLEAN
 } from '#client/constants';
 import {
 	active_reaction,
 	active_effect,
-	set_signal_status,
 	update_reaction,
 	increment_write_version,
 	set_active_effect,
@@ -36,7 +33,8 @@ import { component_context } from '../context.js';
 import { UNINITIALIZED } from '../../../constants.js';
 import { batch_values, current_batch } from './batch.js';
 import { unset_context } from './async.js';
-import { deferred } from '../../shared/utils.js';
+import { deferred, includes } from '../../shared/utils.js';
+import { set_signal_status, update_derived_status } from './status.js';
 
 /** @type {Effect | null} */
 export let current_async_effect = null;
@@ -93,11 +91,12 @@ export function derived(fn) {
 /**
  * @template V
  * @param {() => V | Promise<V>} fn
+ * @param {string} [label]
  * @param {string} [location] If provided, print a warning if the value is not read immediately after update
  * @returns {Promise<Source<V>>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function async_derived(fn, location) {
+export function async_derived(fn, label, location) {
 	let parent = /** @type {Effect | null} */ (active_effect);
 
 	if (parent === null) {
@@ -109,6 +108,8 @@ export function async_derived(fn, location) {
 	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
 	var signal = source(/** @type {V} */ (UNINITIALIZED));
 
+	if (DEV) signal.label = label;
+
 	// only suspend in async deriveds created on initialisation
 	var should_suspend = !active_reaction;
 
@@ -147,7 +148,7 @@ export function async_derived(fn, location) {
 		var batch = /** @type {Batch} */ (current_batch);
 
 		if (should_suspend) {
-			var blocking = !boundary.is_pending();
+			var blocking = boundary.is_rendered();
 
 			boundary.update_pending_count(1);
 			batch.increment(blocking);
@@ -321,7 +322,7 @@ export function execute_derived(derived) {
 		let prev_eager_effects = eager_effects;
 		set_eager_effects(new Set());
 		try {
-			if (stack.includes(derived)) {
+			if (includes.call(stack, derived)) {
 				e.derived_references_self();
 			}
 
@@ -356,15 +357,21 @@ export function update_derived(derived) {
 	var value = execute_derived(derived);
 
 	if (!derived.equals(value)) {
+		derived.wv = increment_write_version();
+
 		// in a fork, we don't update the underlying value, just `batch_values`.
 		// the underlying value will be updated when the fork is committed.
 		// otherwise, the next time we get here after a 'real world' state
 		// change, `derived.equals` may incorrectly return `true`
-		if (!current_batch?.is_fork) {
+		if (!current_batch?.is_fork || derived.deps === null) {
 			derived.v = value;
-		}
 
-		derived.wv = increment_write_version();
+			// deriveds without dependencies should never be recomputed
+			if (derived.deps === null) {
+				set_signal_status(derived, CLEAN);
+				return;
+			}
+		}
 	}
 
 	// don't mark derived clean if we're reading it inside a
@@ -382,7 +389,6 @@ export function update_derived(derived) {
 			batch_values.set(derived, value);
 		}
 	} else {
-		var status = (derived.f & CONNECTED) === 0 ? MAYBE_DIRTY : CLEAN;
-		set_signal_status(derived, status);
+		update_derived_status(derived);
 	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 717fc35006..5b8dee07b9 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -1,4 +1,4 @@
-/** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
+/** @import { Blocker, ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
 import {
 	is_dirty,
 	active_effect,
@@ -9,7 +9,6 @@ import {
 	remove_reactions,
 	set_active_reaction,
 	set_is_destroying_effect,
-	set_signal_status,
 	untrack,
 	untracking
 } from '../runtime.js';
@@ -44,6 +43,7 @@ import { component_context, dev_current_component_function, dev_stack } from '..
 import { Batch, current_batch, schedule_effect } from './batch.js';
 import { flatten } from './async.js';
 import { without_reactive_context } from '../dom/elements/bindings/shared.js';
+import { set_signal_status } from './status.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -328,7 +328,7 @@ export function legacy_pre_effect_reset() {
 
 			// If the effect is CLEAN, then make it MAYBE_DIRTY. This ensures we traverse through
 			// the effects dependencies and correctly ensure each dependency is up-to-date.
-			if ((effect.f & CLEAN) !== 0) {
+			if ((effect.f & CLEAN) !== 0 && effect.deps !== null) {
 				set_signal_status(effect, MAYBE_DIRTY);
 			}
 
@@ -361,7 +361,7 @@ export function render_effect(fn, flags = 0) {
  * @param {(...expressions: any) => void | (() => void)} fn
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  */
 export function template_effect(fn, sync = [], async = [], blockers = []) {
 	flatten(blockers, sync, async, (values) => {
@@ -374,7 +374,7 @@ export function template_effect(fn, sync = [], async = [], blockers = []) {
  * @param {(...expressions: any) => void | (() => void)} fn
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  */
 export function deferred_template_effect(fn, sync = [], async = [], blockers = []) {
 	var batch = /** @type {Batch} */ (current_batch);
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 3f8d6cb09f..52dd4ebe41 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -6,7 +6,6 @@ import {
 	untracked_writes,
 	get,
 	set_untracked_writes,
-	set_signal_status,
 	untrack,
 	increment_write_version,
 	update_effect,
@@ -14,9 +13,7 @@ import {
 	is_dirty,
 	untracking,
 	is_destroying_effect,
-	push_reaction_value,
-	set_is_updating_effect,
-	is_updating_effect
+	push_reaction_value
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import {
@@ -34,12 +31,14 @@ import {
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
+import { includes } from '../../shared/utils.js';
 import { tag_proxy } from '../dev/tracing.js';
 import { get_error } from '../../shared/dev.js';
 import { component_context, is_runes } from '../context.js';
 import { Batch, batch_values, eager_block_effects, schedule_effect } from './batch.js';
 import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
+import { set_signal_status, update_derived_status } from './status.js';
 
 /** @type {Set<any>} */
 export let eager_effects = new Set();
@@ -152,7 +151,7 @@ export function set(source, value, should_proxy = false) {
 		(!untracking || (active_reaction.f & EAGER_EFFECT) !== 0) &&
 		is_runes() &&
 		(active_reaction.f & (DERIVED | BLOCK_EFFECT | ASYNC | EAGER_EFFECT)) !== 0 &&
-		!current_sources?.includes(source)
+		(current_sources === null || !includes.call(current_sources, source))
 	) {
 		e.state_unsafe_mutation();
 	}
@@ -218,12 +217,14 @@ export function internal_set(source, value) {
 		}
 
 		if ((source.f & DERIVED) !== 0) {
+			const derived = /** @type {Derived} */ (source);
+
 			// if we are assigning to a dirty derived we set it to clean/maybe dirty but we also eagerly execute it to track the dependencies
 			if ((source.f & DIRTY) !== 0) {
-				execute_derived(/** @type {Derived} */ (source));
+				execute_derived(derived);
 			}
 
-			set_signal_status(source, (source.f & CONNECTED) !== 0 ? CLEAN : MAYBE_DIRTY);
+			update_derived_status(derived);
 		}
 
 		source.wv = increment_write_version();
@@ -259,25 +260,17 @@ export function internal_set(source, value) {
 
 export function flush_eager_effects() {
 	eager_effects_deferred = false;
-	var prev_is_updating_effect = is_updating_effect;
-	set_is_updating_effect(true);
-
-	const inspects = Array.from(eager_effects);
 
-	try {
-		for (const effect of inspects) {
-			// Mark clean inspect-effects as maybe dirty and then check their dirtiness
-			// instead of just updating the effects - this way we avoid overfiring.
-			if ((effect.f & CLEAN) !== 0) {
-				set_signal_status(effect, MAYBE_DIRTY);
-			}
+	for (const effect of eager_effects) {
+		// Mark clean inspect-effects as maybe dirty and then check their dirtiness
+		// instead of just updating the effects - this way we avoid overfiring.
+		if ((effect.f & CLEAN) !== 0) {
+			set_signal_status(effect, MAYBE_DIRTY);
+		}
 
-			if (is_dirty(effect)) {
-				update_effect(effect);
-			}
+		if (is_dirty(effect)) {
+			update_effect(effect);
 		}
-	} finally {
-		set_is_updating_effect(prev_is_updating_effect);
 	}
 
 	eager_effects.clear();
@@ -309,6 +302,7 @@ export function update_pre(source, d = 1) {
 	var value = get(source);
 
 	// @ts-expect-error
+	// eslint-disable-next-line no-useless-assignment -- `++`/`--` used for return value, not side effect on `value`
 	return set(source, d === 1 ? ++value : --value);
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/status.js b/packages/svelte/src/internal/client/reactivity/status.js
new file mode 100644
index 0000000000..024285e73a
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/status.js
@@ -0,0 +1,25 @@
+/** @import { Derived, Signal } from '#client' */
+import { CLEAN, CONNECTED, DIRTY, MAYBE_DIRTY } from '#client/constants';
+
+const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
+
+/**
+ * @param {Signal} signal
+ * @param {number} status
+ */
+export function set_signal_status(signal, status) {
+	signal.f = (signal.f & STATUS_MASK) | status;
+}
+
+/**
+ * Set a derived's status to CLEAN or MAYBE_DIRTY based on its connection state.
+ * @param {Derived} derived
+ */
+export function update_derived_status(derived) {
+	// Only mark as MAYBE_DIRTY if disconnected and has dependencies.
+	if ((derived.f & CONNECTED) !== 0 || derived.deps === null) {
+		set_signal_status(derived, CLEAN);
+	} else {
+		set_signal_status(derived, MAYBE_DIRTY);
+	}
+}
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 908576922f..8477917991 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -103,3 +103,8 @@ export interface Effect extends Reaction {
 export type Source<V = unknown> = Value<V>;
 
 export type MaybeSource<T = unknown> = T | Source<T>;
+
+export interface Blocker {
+	promise: Promise<any>;
+	settled: boolean;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/utils.js b/packages/svelte/src/internal/client/reactivity/utils.js
new file mode 100644
index 0000000000..0d27cb8b84
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/utils.js
@@ -0,0 +1,40 @@
+/** @import { Derived, Effect, Value } from '#client' */
+import { CLEAN, DERIVED, DIRTY, MAYBE_DIRTY, WAS_MARKED } from '#client/constants';
+import { set_signal_status } from './status.js';
+
+/**
+ * @param {Value[] | null} deps
+ */
+function clear_marked(deps) {
+	if (deps === null) return;
+
+	for (const dep of deps) {
+		if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) {
+			continue;
+		}
+
+		dep.f ^= WAS_MARKED;
+
+		clear_marked(/** @type {Derived} */ (dep).deps);
+	}
+}
+
+/**
+ * @param {Effect} effect
+ * @param {Set<Effect>} dirty_effects
+ * @param {Set<Effect>} maybe_dirty_effects
+ */
+export function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
+	if ((effect.f & DIRTY) !== 0) {
+		dirty_effects.add(effect);
+	} else if ((effect.f & MAYBE_DIRTY) !== 0) {
+		maybe_dirty_effects.add(effect);
+	}
+
+	// Since we're not executing these effects now, we need to clear any WAS_MARKED flags
+	// so that other batches can correctly reach these effects during their own traversal
+	clear_marked(effect.deps);
+
+	// mark as clean so they get scheduled if they depend on pending async state
+	set_signal_status(effect, CLEAN);
+}
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index c76f0b1ce7..c09f5fdd05 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -208,11 +208,9 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 				pending: () => {}
 			},
 			(anchor_node) => {
-				if (context) {
-					push({});
-					var ctx = /** @type {ComponentContext} */ (component_context);
-					ctx.c = context;
-				}
+				push({});
+				var ctx = /** @type {ComponentContext} */ (component_context);
+				if (context) ctx.c = context;
 
 				if (events) {
 					// We can't spread the object or else we'd lose the state proxy stuff, if it is one
@@ -241,9 +239,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 					}
 				}
 
-				if (context) {
-					pop();
-				}
+				pop();
 			}
 		);
 
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 64c8409b8f..70eeabb789 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1,6 +1,6 @@
-/** @import { Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
+/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
-import { get_descriptors, get_prototype_of, index_of } from '../shared/utils.js';
+import { get_descriptors, get_prototype_of, includes, index_of } from '../shared/utils.js';
 import {
 	destroy_block_effect_children,
 	destroy_effect_children,
@@ -28,7 +28,6 @@ import { old_values } from './reactivity/sources.js';
 import {
 	destroy_derived_effects,
 	execute_derived,
-	current_async_effect,
 	recent_async_deriveds,
 	update_derived
 } from './reactivity/deriveds.js';
@@ -44,7 +43,6 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from './context.js';
-import * as w from './warnings.js';
 import {
 	Batch,
 	batch_values,
@@ -56,13 +54,9 @@ import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
 import { captured_signals } from './legacy.js';
 import { without_reactive_context } from './dom/elements/bindings/shared.js';
+import { set_signal_status, update_derived_status } from './reactivity/status.js';
 
-export let is_updating_effect = false;
-
-/** @param {boolean} value */
-export function set_is_updating_effect(value) {
-	is_updating_effect = value;
-}
+let is_updating_effect = false;
 
 export let is_destroying_effect = false;
 
@@ -167,21 +161,18 @@ export function is_dirty(reaction) {
 	}
 
 	if ((flags & MAYBE_DIRTY) !== 0) {
-		var dependencies = reaction.deps;
+		var dependencies = /** @type {Value[]} */ (reaction.deps);
+		var length = dependencies.length;
 
-		if (dependencies !== null) {
-			var length = dependencies.length;
+		for (var i = 0; i < length; i++) {
+			var dependency = dependencies[i];
 
-			for (var i = 0; i < length; i++) {
-				var dependency = dependencies[i];
-
-				if (is_dirty(/** @type {Derived} */ (dependency))) {
-					update_derived(/** @type {Derived} */ (dependency));
-				}
+			if (is_dirty(/** @type {Derived} */ (dependency))) {
+				update_derived(/** @type {Derived} */ (dependency));
+			}
 
-				if (dependency.wv > reaction.wv) {
-					return true;
-				}
+			if (dependency.wv > reaction.wv) {
+				return true;
 			}
 		}
 
@@ -207,7 +198,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 
-	if (!async_mode_flag && current_sources?.includes(signal)) {
+	if (!async_mode_flag && current_sources !== null && includes.call(current_sources, signal)) {
 		return;
 	}
 
@@ -264,10 +255,16 @@ export function update_reaction(reaction) {
 		var result = fn();
 		var deps = reaction.deps;
 
+		// Don't remove reactions during fork;
+		// they must remain for when fork is discarded
+		var is_fork = current_batch?.is_fork;
+
 		if (new_deps !== null) {
 			var i;
 
-			remove_reactions(reaction, skipped_deps);
+			if (!is_fork) {
+				remove_reactions(reaction, skipped_deps);
+			}
 
 			if (deps !== null && skipped_deps > 0) {
 				deps.length = skipped_deps + new_deps.length;
@@ -283,7 +280,7 @@ export function update_reaction(reaction) {
 					(deps[i].reactions ??= []).push(reaction);
 				}
 			}
-		} else if (deps !== null && skipped_deps < deps.length) {
+		} else if (!is_fork && deps !== null && skipped_deps < deps.length) {
 			remove_reactions(reaction, skipped_deps);
 			deps.length = skipped_deps;
 		}
@@ -313,6 +310,20 @@ export function update_reaction(reaction) {
 		if (previous_reaction !== null && previous_reaction !== reaction) {
 			read_version++;
 
+			// update the `rv` of the previous reaction's deps — both existing and new —
+			// so that they are not added again
+			if (previous_reaction.deps !== null) {
+				for (let i = 0; i < previous_skipped_deps; i += 1) {
+					previous_reaction.deps[i].rv = read_version;
+				}
+			}
+
+			if (previous_deps !== null) {
+				for (const dep of previous_deps) {
+					dep.rv = read_version;
+				}
+			}
+
 			if (untracked_writes !== null) {
 				if (previous_untracked_writes === null) {
 					previous_untracked_writes = untracked_writes;
@@ -372,18 +383,22 @@ function remove_reaction(signal, dependency) {
 		// Destroying a child effect while updating a parent effect can cause a dependency to appear
 		// to be unused, when in fact it is used by the currently-updating parent. Checking `new_deps`
 		// allows us to skip the expensive work of disconnecting and immediately reconnecting it
-		(new_deps === null || !new_deps.includes(dependency))
+		(new_deps === null || !includes.call(new_deps, dependency))
 	) {
-		set_signal_status(dependency, MAYBE_DIRTY);
+		var derived = /** @type {Derived} */ (dependency);
+
 		// If we are working with a derived that is owned by an effect, then mark it as being
 		// disconnected and remove the mark flag, as it cannot be reliably removed otherwise
-		if ((dependency.f & CONNECTED) !== 0) {
-			dependency.f ^= CONNECTED;
-			dependency.f &= ~WAS_MARKED;
+		if ((derived.f & CONNECTED) !== 0) {
+			derived.f ^= CONNECTED;
+			derived.f &= ~WAS_MARKED;
 		}
+
+		update_derived_status(derived);
+
 		// Disconnect any reactions owned by this reaction
-		destroy_derived_effects(/** @type {Derived} **/ (dependency));
-		remove_reactions(/** @type {Derived} **/ (dependency), 0);
+		destroy_derived_effects(derived);
+		remove_reactions(derived, 0);
 	}
 }
 
@@ -511,7 +526,7 @@ export function get(signal) {
 		// we don't add the dependency, because that would create a memory leak
 		var destroyed = active_effect !== null && (active_effect.f & DESTROYED) !== 0;
 
-		if (!destroyed && !current_sources?.includes(signal)) {
+		if (!destroyed && (current_sources === null || !includes.call(current_sources, signal))) {
 			var deps = active_reaction.deps;
 
 			if ((active_reaction.f & REACTION_IS_UPDATING) !== 0) {
@@ -526,7 +541,7 @@ export function get(signal) {
 						skipped_deps++;
 					} else if (new_deps === null) {
 						new_deps = [signal];
-					} else if (!new_deps.includes(signal)) {
+					} else {
 						new_deps.push(signal);
 					}
 				}
@@ -539,7 +554,7 @@ export function get(signal) {
 
 				if (reactions === null) {
 					signal.reactions = [active_reaction];
-				} else if (!reactions.includes(active_reaction)) {
+				} else if (!includes.call(reactions, active_reaction)) {
 					reactions.push(active_reaction);
 				}
 			}
@@ -596,14 +611,14 @@ export function get(signal) {
 		}
 	}
 
-	if (is_destroying_effect) {
-		if (old_values.has(signal)) {
-			return old_values.get(signal);
-		}
+	if (is_destroying_effect && old_values.has(signal)) {
+		return old_values.get(signal);
+	}
 
-		if (is_derived) {
-			var derived = /** @type {Derived} */ (signal);
+	if (is_derived) {
+		var derived = /** @type {Derived} */ (signal);
 
+		if (is_destroying_effect) {
 			var value = derived.v;
 
 			// if the derived is dirty and has reactions, or depends on the values that just changed, re-execute
@@ -619,17 +634,28 @@ export function get(signal) {
 
 			return value;
 		}
-	} else if (
-		is_derived &&
-		(!batch_values?.has(signal) || (current_batch?.is_fork && !effect_tracking()))
-	) {
-		derived = /** @type {Derived} */ (signal);
+
+		// connect disconnected deriveds if we are reading them inside an effect,
+		// or inside another derived that is already connected
+		var should_connect =
+			(derived.f & CONNECTED) === 0 &&
+			!untracking &&
+			active_reaction !== null &&
+			(is_updating_effect || (active_reaction.f & CONNECTED) !== 0);
+
+		var is_new = derived.deps === null;
 
 		if (is_dirty(derived)) {
+			if (should_connect) {
+				// set the flag before `update_derived`, so that the derived
+				// is added as a reaction to its dependencies
+				derived.f |= CONNECTED;
+			}
+
 			update_derived(derived);
 		}
 
-		if (is_updating_effect && effect_tracking() && (derived.f & CONNECTED) === 0) {
+		if (should_connect && !is_new) {
 			reconnect(derived);
 		}
 	}
@@ -653,7 +679,7 @@ export function get(signal) {
 function reconnect(derived) {
 	if (derived.deps === null) return;
 
-	derived.f ^= CONNECTED;
+	derived.f |= CONNECTED;
 
 	for (const dep of derived.deps) {
 		(dep.reactions ??= []).push(derived);
@@ -718,17 +744,6 @@ export function untrack(fn) {
 	}
 }
 
-const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
-
-/**
- * @param {Signal} signal
- * @param {number} status
- * @returns {void}
- */
-export function set_signal_status(signal, status) {
-	signal.f = (signal.f & STATUS_MASK) | status;
-}
-
 /**
  * @param {Record<string | symbol, unknown>} obj
  * @param {Array<string | symbol>} keys
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 0daecdb480..a169225f1e 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -1,47 +1,14 @@
+/** @import { Blocker } from '#client' */
 import { dev_current_component_function } from './context.js';
-import { is_array } from '../shared/utils.js';
-import * as e from './errors.js';
 import { FILENAME } from '../../constants.js';
 import { render_effect } from './reactivity/effects.js';
 import * as w from './warnings.js';
 import { capture_store_binding } from './reactivity/store.js';
 import { run_after_blockers } from './reactivity/async.js';
 
-/**
- * @param {() => any} collection
- * @param {(item: any, index: number) => string} key_fn
- * @returns {void}
- */
-export function validate_each_keys(collection, key_fn) {
-	render_effect(() => {
-		const keys = new Map();
-		const maybe_array = collection();
-		const array = is_array(maybe_array)
-			? maybe_array
-			: maybe_array == null
-				? []
-				: Array.from(maybe_array);
-		const length = array.length;
-		for (let i = 0; i < length; i++) {
-			const key = key_fn(array[i], i);
-			if (keys.has(key)) {
-				const a = String(keys.get(key));
-				const b = String(i);
-
-				/** @type {string | null} */
-				let k = String(key);
-				if (k.startsWith('[object ')) k = null;
-
-				e.each_key_duplicate(a, b, k);
-			}
-			keys.set(key, i);
-		}
-	});
-}
-
 /**
  * @param {string} binding
- * @param {Array<Promise<void>>} blockers
+ * @param {Blocker[]} blockers
  * @param {() => Record<string, any>} get_object
  * @param {() => string} get_property
  * @param {number} line
diff --git a/packages/svelte/src/internal/server/context.js b/packages/svelte/src/internal/server/context.js
index 7779da4c1d..6a7dc1f883 100644
--- a/packages/svelte/src/internal/server/context.js
+++ b/packages/svelte/src/internal/server/context.js
@@ -17,7 +17,17 @@ export function set_ssr_context(v) {
  */
 export function createContext() {
 	const key = {};
-	return [() => getContext(key), (context) => setContext(key, context)];
+
+	return [
+		() => {
+			if (!hasContext(key)) {
+				e.missing_context();
+			}
+
+			return getContext(key);
+		},
+		(context) => setContext(key, context)
+	];
 }
 
 /**
diff --git a/packages/svelte/src/internal/server/crypto.js b/packages/svelte/src/internal/server/crypto.js
new file mode 100644
index 0000000000..76d66b6d1a
--- /dev/null
+++ b/packages/svelte/src/internal/server/crypto.js
@@ -0,0 +1,42 @@
+import { BROWSER } from 'esm-env';
+
+let text_encoder;
+// TODO - remove this and use global `crypto` when we drop Node 18
+let crypto;
+
+/** @param {string} data */
+export async function sha256(data) {
+	text_encoder ??= new TextEncoder();
+
+	// @ts-expect-error
+	crypto ??= globalThis.crypto?.subtle?.digest
+		? globalThis.crypto
+		: // @ts-ignore - we don't install node types in the prod build
+			// don't use 'node:crypto' because static analysers will think we rely on node when we don't
+			(await import(/* @vite-ignore */ 'node:' + 'crypto')).webcrypto;
+
+	const hash_buffer = await crypto.subtle.digest('SHA-256', text_encoder.encode(data));
+
+	return base64_encode(hash_buffer);
+}
+
+/**
+ * @param {Uint8Array} bytes
+ * @returns {string}
+ */
+export function base64_encode(bytes) {
+	// Using `Buffer` is faster than iterating
+	// @ts-ignore
+	if (!BROWSER && globalThis.Buffer) {
+		// @ts-ignore
+		return globalThis.Buffer.from(bytes).toString('base64');
+	}
+
+	let binary = '';
+
+	for (let i = 0; i < bytes.length; i++) {
+		binary += String.fromCharCode(bytes[i]);
+	}
+
+	return btoa(binary);
+}
diff --git a/packages/svelte/src/internal/server/crypto.test.ts b/packages/svelte/src/internal/server/crypto.test.ts
new file mode 100644
index 0000000000..2bde86676d
--- /dev/null
+++ b/packages/svelte/src/internal/server/crypto.test.ts
@@ -0,0 +1,15 @@
+import { assert, test } from 'vitest';
+import { sha256 } from './crypto.js';
+
+const inputs = [
+	['hello world', 'uU0nuZNNPgilLlLX2n2r+sSE7+N6U4DukIj3rOLvzek='],
+	['', '47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='],
+	['abcd', 'iNQmb9TmM40TuEX88olXnSCciXgjuSF9o+Fhk28DFYk='],
+	['the quick brown fox jumps over the lazy dog', 'Bcbgjx2f2voDFH/Lj4LxJMdtL3Dj2Ynciq2159dFC+w='],
+	['工欲善其事，必先利其器', 'oPOthkQ1c5BbPpvrr5WlUBJPyD5e6JeVdWcqBs9zvjA=']
+];
+
+test.each(inputs)('sha256("%s")', async (input, expected) => {
+	const actual = await sha256(input);
+	assert.equal(actual, expected);
+});
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index 4a6cdb8cf6..e953bac6ce 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -40,7 +40,12 @@ function print_error(renderer, message) {
 
 	// eslint-disable-next-line no-console
 	console.error(message);
-	renderer.head((r) => r.push(`<script>console.error(${JSON.stringify(message)})</script>`));
+	renderer.head((r) =>
+		r.push(
+			// ensure that `</script>` can't leak in to the script contents
+			`<script>console.error(${JSON.stringify(message).replaceAll('</', '<\\u002f')})</script>`
+		)
+	);
 }
 
 /**
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index 3d6c0ffbdd..c966c32062 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -80,6 +80,18 @@ ${stack}\nhttps://svelte.dev/e/hydratable_serialization_failed`);
 	throw error;
 }
 
+/**
+ * `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+ * @returns {never}
+ */
+export function invalid_csp() {
+	const error = new Error(`invalid_csp\n\`csp.nonce\` was set while \`csp.hash\` was \`true\`. These options cannot be used simultaneously.\nhttps://svelte.dev/e/invalid_csp`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
 /**
  * `%name%(...)` is not available on the server
  * @param {string} name
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 1ac1bd502d..24e4d1c9d6 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -1,7 +1,6 @@
 /** @import { ComponentType, SvelteComponent, Component } from 'svelte' */
-/** @import { RenderOutput } from '#server' */
+/** @import { Csp, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
-/** @import { AccumulatedContent } from './renderer.js' */
 export { FILENAME, HMR } from '../../constants.js';
 import { attr, clsx, to_class, to_style } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
@@ -18,6 +17,7 @@ import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN, BLOCK_OPEN_ELSE } from './hydra
 import { validate_store } from '../shared/validate.js';
 import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
 import { Renderer } from './renderer.js';
+import * as e from './errors.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
@@ -56,10 +56,13 @@ export function element(renderer, tag, attributes_fn = noop, children_fn = noop)
  * 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.
  * @template {Record<string, any>} Props
  * @param {Component<Props> | ComponentType<SvelteComponent<Props>>} component
- * @param {{ props?: NoInfer<Props>; context?: Map<any, any>; idPrefix?: string }} [options]
+ * @param {{ props?: Props; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} [options]
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
+	if (options.csp?.hash && options.csp.nonce) {
+		e.invalid_csp();
+	}
 	return Renderer.render(/** @type {Component<Props>} */ (component), options);
 }
 
diff --git a/packages/svelte/src/internal/server/render-context.js b/packages/svelte/src/internal/server/render-context.js
index a33fff69d3..7a014a1b15 100644
--- a/packages/svelte/src/internal/server/render-context.js
+++ b/packages/svelte/src/internal/server/render-context.js
@@ -2,7 +2,7 @@
 /** @import { AsyncLocalStorage } from 'node:async_hooks' */
 /** @import { RenderContext } from '#server' */
 
-import { deferred } from '../shared/utils.js';
+import { deferred, noop } from '../shared/utils.js';
 import * as e from './errors.js';
 
 /** @type {Promise<void> | null} */
@@ -56,14 +56,26 @@ export async function with_render_context(fn) {
 
 /** @type {AsyncLocalStorage<RenderContext | null> | null} */
 let als = null;
+/** @type {Promise<void> | null} */
+let als_import = null;
 
-export async function init_render_context() {
-	if (als !== null) return;
-	try {
-		// @ts-ignore -- we don't include node types in the production build
-		const { AsyncLocalStorage } = await import('node:async_hooks');
-		als = new AsyncLocalStorage();
-	} catch {}
+/**
+ *
+ * @returns {Promise<void>}
+ */
+export function init_render_context() {
+	// It's important the right side of this assignment can run a maximum of one time
+	// otherwise it's possible for a very, very well-timed race condition to assign to `als`
+	// at the beginning of a render, and then another render to assign to it again, which causes
+	// the first render's second half to use a new instance of `als` which doesn't have its
+	// context anymore.
+	// @ts-ignore -- we don't include node types in the production build
+	als_import ??= import('node:async_hooks')
+		.then((hooks) => {
+			als = new hooks.AsyncLocalStorage();
+		})
+		.then(noop, noop);
+	return als_import;
 }
 
 // this has to be a function because rollup won't treeshake it if it's a constant
diff --git a/packages/svelte/src/internal/server/renderer.js b/packages/svelte/src/internal/server/renderer.js
index 582bdb4b39..2db3232721 100644
--- a/packages/svelte/src/internal/server/renderer.js
+++ b/packages/svelte/src/internal/server/renderer.js
@@ -1,5 +1,5 @@
 /** @import { Component } from 'svelte' */
-/** @import { HydratableContext, RenderOutput, SSRContext, SyncRenderOutput } from './types.js' */
+/** @import { Csp, HydratableContext, RenderOutput, SSRContext, SyncRenderOutput, Sha256Source } from './types.js' */
 /** @import { MaybePromise } from '#shared' */
 import { async_mode_flag } from '../flags/index.js';
 import { abort } from './abort-signal.js';
@@ -9,7 +9,9 @@ import * as w from './warnings.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { attributes } from './index.js';
 import { get_render_context, with_render_context, init_render_context } from './render-context.js';
-import { DEV } from 'esm-env';
+import { sha256 } from './crypto.js';
+import * as devalue from 'devalue';
+import { noop } from '../shared/utils.js';
 
 /** @typedef {'head' | 'body'} RendererType */
 /** @typedef {{ [key in RendererType]: string }} AccumulatedContent */
@@ -161,9 +163,23 @@ export class Renderer {
 			promises.push(promise);
 		}
 
+		// prevent unhandled rejections, and attach the promise to the renderer instance
+		// so that rejections correctly cause rendering to fail
+		promise.catch(noop);
+		this.promise = promise;
+
 		return promises;
 	}
 
+	/**
+	 * @param {(renderer: Renderer) => MaybePromise<void>} fn
+	 */
+	child_block(fn) {
+		this.#out.push(BLOCK_OPEN);
+		this.child(fn);
+		this.#out.push(BLOCK_CLOSE);
+	}
+
 	/**
 	 * Create a child renderer. The child renderer inherits the state from the parent,
 	 * but has its own content.
@@ -219,9 +235,10 @@ export class Renderer {
 	 * @param {Record<string, boolean> | undefined} [classes]
 	 * @param {Record<string, string> | undefined} [styles]
 	 * @param {number | undefined} [flags]
+	 * @param {boolean | undefined} [is_rich]
 	 * @returns {void}
 	 */
-	select(attrs, fn, css_hash, classes, styles, flags) {
+	select(attrs, fn, css_hash, classes, styles, flags, is_rich) {
 		const { value, ...select_attrs } = attrs;
 
 		this.push(`<select${attributes(select_attrs, css_hash, classes, styles, flags)}>`);
@@ -229,7 +246,7 @@ export class Renderer {
 			renderer.local.select_value = value;
 			fn(renderer);
 		});
-		this.push('</select>');
+		this.push(`${is_rich ? '<!>' : ''}</select>`);
 	}
 
 	/**
@@ -239,8 +256,9 @@ export class Renderer {
 	 * @param {Record<string, boolean> | undefined} [classes]
 	 * @param {Record<string, string> | undefined} [styles]
 	 * @param {number | undefined} [flags]
+	 * @param {boolean | undefined} [is_rich]
 	 */
-	option(attrs, body, css_hash, classes, styles, flags) {
+	option(attrs, body, css_hash, classes, styles, flags, is_rich) {
 		this.#out.push(`<option${attributes(attrs, css_hash, classes, styles, flags)}`);
 
 		/**
@@ -257,7 +275,7 @@ export class Renderer {
 				renderer.#out.push(' selected');
 			}
 
-			renderer.#out.push(`>${body}</option>`);
+			renderer.#out.push(`>${body}${is_rich ? '<!>' : ''}</option>`);
 
 			// super edge case, but may as well handle it
 			if (head) {
@@ -376,13 +394,13 @@ export class Renderer {
 	 * 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.
 	 * @template {Record<string, any>} Props
 	 * @param {Component<Props>} component
-	 * @param {{ props?: NoInfer<Props>; context?: Map<any, any>; idPrefix?: string }} [options]
+	 * @param {{ props?: Props; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} [options]
 	 * @returns {RenderOutput}
 	 */
 	static render(component, options = {}) {
 		/** @type {AccumulatedContent | undefined} */
 		let sync;
-		/** @type {Promise<AccumulatedContent> | undefined} */
+		/** @type {Promise<AccumulatedContent & { hashes: { script: Sha256Source[] } }> | undefined} */
 		let async;
 
 		const result = /** @type {RenderOutput} */ ({});
@@ -404,6 +422,11 @@ export class Renderer {
 					return (sync ??= Renderer.#render(component, options)).body;
 				}
 			},
+			hashes: {
+				value: {
+					script: ''
+				}
+			},
 			then: {
 				value:
 					/**
@@ -420,7 +443,8 @@ export class Renderer {
 							const user_result = onfulfilled({
 								head: result.head,
 								body: result.body,
-								html: result.body
+								html: result.body,
+								hashes: { script: [] }
 							});
 							return Promise.resolve(user_result);
 						}
@@ -514,8 +538,8 @@ export class Renderer {
 	 *
 	 * @template {Record<string, any>} Props
 	 * @param {Component<Props>} component
-	 * @param {{ props?: NoInfer<Props>; context?: Map<any, any>; idPrefix?: string }} options
-	 * @returns {Promise<AccumulatedContent>}
+	 * @param {{ props?: Props; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} options
+	 * @returns {Promise<AccumulatedContent & { hashes: { script: Sha256Source[] } }>}
 	 */
 	static async #render_async(component, options) {
 		const previous_context = ssr_context;
@@ -585,35 +609,31 @@ export class Renderer {
 			await comparison;
 		}
 
-		return await Renderer.#hydratable_block(ctx);
+		return await this.#hydratable_block(ctx);
 	}
 
 	/**
 	 * @template {Record<string, any>} Props
 	 * @param {'sync' | 'async'} mode
 	 * @param {import('svelte').Component<Props>} component
-	 * @param {{ props?: NoInfer<Props>; context?: Map<any, any>; idPrefix?: string }} options
+	 * @param {{ props?: Props; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} options
 	 * @returns {Renderer}
 	 */
 	static #open_render(mode, component, options) {
 		const renderer = new Renderer(
-			new SSRState(mode, options.idPrefix ? options.idPrefix + '-' : '')
+			new SSRState(mode, options.idPrefix ? options.idPrefix + '-' : '', options.csp)
 		);
 
 		renderer.push(BLOCK_OPEN);
 
-		if (options.context) {
-			push();
-			/** @type {SSRContext} */ (ssr_context).c = options.context;
-			/** @type {SSRContext} */ (ssr_context).r = renderer;
-		}
+		push();
+		if (options.context) /** @type {SSRContext} */ (ssr_context).c = options.context;
+		/** @type {SSRContext} */ (ssr_context).r = renderer;
 
 		// @ts-expect-error
 		component(renderer, options.props ?? {});
 
-		if (options.context) {
-			pop();
-		}
+		pop();
 
 		renderer.push(BLOCK_CLOSE);
 
@@ -623,6 +643,7 @@ export class Renderer {
 	/**
 	 * @param {AccumulatedContent} content
 	 * @param {Renderer} renderer
+	 * @returns {AccumulatedContent & { hashes: { script: Sha256Source[] } }}
 	 */
 	static #close_render(content, renderer) {
 		for (const cleanup of renderer.#collect_on_destroy()) {
@@ -638,14 +659,17 @@ export class Renderer {
 
 		return {
 			head,
-			body
+			body,
+			hashes: {
+				script: renderer.global.csp.script_hashes
+			}
 		};
 	}
 
 	/**
 	 * @param {HydratableContext} ctx
 	 */
-	static async #hydratable_block(ctx) {
+	async #hydratable_block(ctx) {
 		if (ctx.lookup.size === 0) {
 			return null;
 		}
@@ -659,7 +683,7 @@ export class Renderer {
 				for (const p of v.promises) await p;
 			}
 
-			entries.push(`[${JSON.stringify(k)},${v.serialized}]`);
+			entries.push(`[${devalue.uneval(k)},${v.serialized}]`);
 		}
 
 		let prelude = `const h = (window.__svelte ??= {}).h ??= new Map();`;
@@ -669,9 +693,7 @@ export class Renderer {
 				${prelude}`;
 		}
 
-		// TODO csp -- have discussed but not implemented
-		return `
-		<script>
+		const body = `
 			{
 				${prelude}
 
@@ -681,11 +703,27 @@ export class Renderer {
 					h.set(k, v);
 				}
 			}
-		</script>`;
+		`;
+
+		let csp_attr = '';
+		if (this.global.csp.nonce) {
+			csp_attr = ` nonce="${this.global.csp.nonce}"`;
+		} else if (this.global.csp.hash) {
+			// note to future selves: this doesn't need to be optimized with a Map<body, hash>
+			// because the it's impossible for identical data to occur multiple times in a single render
+			// (this would require the same hydratable key:value pair to be serialized multiple times)
+			const hash = await sha256(body);
+			this.global.csp.script_hashes.push(`sha256-${hash}`);
+		}
+
+		return `\n\t\t<script${csp_attr}>${body}</script>`;
 	}
 }
 
 export class SSRState {
+	/** @readonly @type {Csp & { script_hashes: Sha256Source[] }} */
+	csp;
+
 	/** @readonly @type {'sync' | 'async'} */
 	mode;
 
@@ -700,10 +738,12 @@ export class SSRState {
 
 	/**
 	 * @param {'sync' | 'async'} mode
-	 * @param {string} [id_prefix]
+	 * @param {string} id_prefix
+	 * @param {Csp} csp
 	 */
-	constructor(mode, id_prefix = '') {
+	constructor(mode, id_prefix = '', csp = { hash: false }) {
 		this.mode = mode;
+		this.csp = { ...csp, script_hashes: [] };
 
 		let uid = 1;
 		this.uid = () => `${id_prefix}s${uid++}`;
diff --git a/packages/svelte/src/internal/server/types.d.ts b/packages/svelte/src/internal/server/types.d.ts
index 05ee34fb17..ea6282c176 100644
--- a/packages/svelte/src/internal/server/types.d.ts
+++ b/packages/svelte/src/internal/server/types.d.ts
@@ -15,6 +15,8 @@ export interface SSRContext {
 	element?: Element;
 }
 
+export type Csp = { nonce?: string; hash?: boolean };
+
 export interface HydratableLookupEntry {
 	value: unknown;
 	serialized: string;
@@ -33,6 +35,8 @@ export interface RenderContext {
 	hydratable: HydratableContext;
 }
 
+export type Sha256Source = `sha256-${string}`;
+
 export interface SyncRenderOutput {
 	/** HTML that goes into the `<head>` */
 	head: string;
@@ -40,6 +44,9 @@ export interface SyncRenderOutput {
 	html: string;
 	/** HTML that goes somewhere into the `<body>` */
 	body: string;
+	hashes: {
+		script: Sha256Source[];
+	};
 }
 
 export type RenderOutput = SyncRenderOutput & PromiseLike<SyncRenderOutput>;
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index 659cd10040..771f6b345c 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -2,6 +2,7 @@
 // to de-opt (this occurs often when using popular extensions).
 export var is_array = Array.isArray;
 export var index_of = Array.prototype.indexOf;
+export var includes = Array.prototype.includes;
 export var array_from = Array.from;
 export var object_keys = Object.keys;
 export var define_property = Object.defineProperty;
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index d4a053d1aa..ec90d2312c 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -3,7 +3,7 @@ import { DIRTY, LEGACY_PROPS, MAYBE_DIRTY } from '../internal/client/constants.j
 import { user_pre_effect } from '../internal/client/reactivity/effects.js';
 import { mutable_source, set } from '../internal/client/reactivity/sources.js';
 import { hydrate, mount, unmount } from '../internal/client/render.js';
-import { active_effect, get, set_signal_status } from '../internal/client/runtime.js';
+import { active_effect, get } from '../internal/client/runtime.js';
 import { flushSync } from '../internal/client/reactivity/batch.js';
 import { define_property, is_array } from '../internal/shared/utils.js';
 import * as e from '../internal/client/errors.js';
@@ -12,6 +12,7 @@ import { DEV } from 'esm-env';
 import { FILENAME } from '../constants.js';
 import { component_context, dev_current_component_function } from '../internal/client/context.js';
 import { async_mode_flag } from '../internal/flags/index.js';
+import { set_signal_status } from '../internal/client/reactivity/status.js';
 
 /**
  * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
diff --git a/packages/svelte/src/legacy/legacy-server.js b/packages/svelte/src/legacy/legacy-server.js
index a50d961751..05b329bea1 100644
--- a/packages/svelte/src/legacy/legacy-server.js
+++ b/packages/svelte/src/legacy/legacy-server.js
@@ -1,14 +1,14 @@
 /** @import { SvelteComponent } from '../index.js' */
+/** @import { Csp } from '#server' */
 import { asClassComponent as as_class_component, createClassComponent } from './legacy-client.js';
 import { render } from '../internal/server/index.js';
 import { async_mode_flag } from '../internal/flags/index.js';
-import * as w from '../internal/server/warnings.js';
 
 // By having this as a separate entry point for server environments, we save the client bundle from having to include the server runtime
 
 export { createClassComponent };
 
-/** @typedef {{ head: string, html: string, css: { code: string, map: null }}} LegacyRenderResult */
+/** @typedef {{ head: string, html: string, css: { code: string, map: null }; hashes?: { script: `sha256-${string}`[] } }} LegacyRenderResult */
 
 /**
  * Takes a Svelte 5 component and returns a Svelte 4 compatible component constructor.
@@ -25,10 +25,10 @@ export { createClassComponent };
  */
 export function asClassComponent(component) {
 	const component_constructor = as_class_component(component);
-	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; }) => LegacyRenderResult & PromiseLike<LegacyRenderResult> } */
-	const _render = (props, { context } = {}) => {
+	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; csp?: Csp }) => LegacyRenderResult & PromiseLike<LegacyRenderResult> } */
+	const _render = (props, { context, csp } = {}) => {
 		// @ts-expect-error the typings are off, but this will work if the component is compiled in SSR mode
-		const result = render(component, { props, context });
+		const result = render(component, { props, context, csp });
 
 		const munged = Object.defineProperties(
 			/** @type {LegacyRenderResult & PromiseLike<LegacyRenderResult>} */ ({}),
@@ -65,7 +65,8 @@ export function asClassComponent(component) {
 							return onfulfilled({
 								css: munged.css,
 								head: result.head,
-								html: result.body
+								html: result.body,
+								hashes: result.hashes
 							});
 						}, onrejected);
 					}
diff --git a/packages/svelte/src/reactivity/media-query.js b/packages/svelte/src/reactivity/media-query.js
index d286709719..6d1d084298 100644
--- a/packages/svelte/src/reactivity/media-query.js
+++ b/packages/svelte/src/reactivity/media-query.js
@@ -7,7 +7,7 @@ const parenthesis_regex = /\(.+\)/;
 //
 // eg: new MediaQuery('screen')
 //
-// however because of the auto-parenthesis logic in the constructor since there's no parentehesis
+// however because of the auto-parenthesis logic in the constructor since there's no parenthesis
 // in the media query they'll be surrounded by parenthesis
 //
 // however we can check if the media query is only composed of these keywords
diff --git a/packages/svelte/src/server/index.d.ts b/packages/svelte/src/server/index.d.ts
index 3291d44fa8..e063f28a34 100644
--- a/packages/svelte/src/server/index.d.ts
+++ b/packages/svelte/src/server/index.d.ts
@@ -1,4 +1,4 @@
-import type { RenderOutput } from '#server';
+import type { Csp, RenderOutput } from '#server';
 import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte';
 
 /**
@@ -16,6 +16,7 @@ export function render<
 					props?: NoInfer<Props>;
 					context?: Map<any, any>;
 					idPrefix?: string;
+					csp?: Csp;
 				}
 			]
 		: [
@@ -24,6 +25,7 @@ export function render<
 					props: NoInfer<Props>;
 					context?: Map<any, any>;
 					idPrefix?: string;
+					csp?: Csp;
 				}
 			]
 ): RenderOutput;
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 69dae8a24e..0af5fb8ca0 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.45.8';
+export const VERSION = '5.50.1';
 export const PUBLIC_VERSION = '5';
diff --git a/packages/svelte/tests/README.md b/packages/svelte/tests/README.md
index 6dde66f6cb..9e450a7176 100644
--- a/packages/svelte/tests/README.md
+++ b/packages/svelte/tests/README.md
@@ -1,6 +1,6 @@
 # Test repo
 
-This repo tries to migrate as many tests from the currente Svelte project over to test against the new compiler/runtime.
+This repo tries to migrate as many tests from the current Svelte project over to test against the new compiler/runtime.
 
 ## Differences to the old test suite
 
diff --git a/packages/svelte/tests/css-parse.test.ts b/packages/svelte/tests/css-parse.test.ts
new file mode 100644
index 0000000000..4d8ef8601b
--- /dev/null
+++ b/packages/svelte/tests/css-parse.test.ts
@@ -0,0 +1,153 @@
+import { assert, describe, it } from 'vitest';
+import { parseCss } from 'svelte/compiler';
+
+describe('parseCss', () => {
+	it('parses a simple rule', () => {
+		const ast = parseCss('div { color: red; }');
+		assert.equal(ast.type, 'StyleSheet');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Rule');
+	});
+
+	it('parses at-rules', () => {
+		const ast = parseCss('@media (min-width: 800px) { div { color: red; } }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'media');
+		}
+	});
+
+	it('parses @import', () => {
+		const ast = parseCss("@import 'foo.css';");
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'import');
+			assert.equal(ast.children[0].block, null);
+		}
+	});
+
+	it('parses multiple rules', () => {
+		const ast = parseCss('div { color: red; } span { color: blue; }');
+		assert.equal(ast.children.length, 2);
+	});
+
+	it('has correct start/end positions', () => {
+		const ast = parseCss('div { color: red; }');
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 19);
+	});
+
+	it('strips BOM', () => {
+		const ast = parseCss('\uFEFFdiv { color: red; }');
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 19);
+	});
+
+	it('parses nested rules', () => {
+		const ast = parseCss('div { color: red; span { color: blue; } }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		assert.equal(rule.type, 'Rule');
+		if (rule.type === 'Rule') {
+			assert.equal(rule.block.children.length, 2); // declaration + nested rule
+		}
+	});
+
+	it('parses empty stylesheet', () => {
+		const ast = parseCss('');
+		assert.equal(ast.type, 'StyleSheet');
+		assert.equal(ast.children.length, 0);
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 0);
+	});
+
+	it('parses whitespace-only stylesheet', () => {
+		const ast = parseCss('   \n\t  ');
+		assert.equal(ast.children.length, 0);
+	});
+
+	it('parses comments', () => {
+		const ast = parseCss('/* comment */ div { color: red; }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Rule');
+	});
+
+	it('parses complex selectors', () => {
+		const ast = parseCss('div > span + p ~ a { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			assert.equal(rule.prelude.type, 'SelectorList');
+			assert.equal(rule.prelude.children.length, 1);
+			// div > span + p ~ a has 4 relative selectors
+			assert.equal(rule.prelude.children[0].children.length, 4);
+		}
+	});
+
+	it('parses pseudo-classes and pseudo-elements', () => {
+		const ast = parseCss('div:hover::before { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 3); // div, :hover, ::before
+			assert.equal(selectors[0].type, 'TypeSelector');
+			assert.equal(selectors[1].type, 'PseudoClassSelector');
+			assert.equal(selectors[2].type, 'PseudoElementSelector');
+		}
+	});
+
+	it('parses @keyframes', () => {
+		const ast = parseCss('@keyframes fade { from { opacity: 0; } to { opacity: 1; } }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'keyframes');
+			assert.notEqual(ast.children[0].block, null);
+		}
+	});
+
+	it('parses class and id selectors', () => {
+		const ast = parseCss('.foo#bar { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 2);
+			assert.equal(selectors[0].type, 'ClassSelector');
+			assert.equal(selectors[1].type, 'IdSelector');
+		}
+	});
+
+	it('parses attribute selectors', () => {
+		const ast = parseCss('[data-foo="bar"] { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 1);
+			assert.equal(selectors[0].type, 'AttributeSelector');
+			if (selectors[0].type === 'AttributeSelector') {
+				assert.equal(selectors[0].name, 'data-foo');
+				assert.equal(selectors[0].value, 'bar');
+			}
+		}
+	});
+
+	it('parses escaped characters', () => {
+		const ast = parseCss("div { background: url('./example.png?\\''); }");
+		assert.equal(ast.type, 'StyleSheet');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		assert.equal(rule.type, 'Rule');
+		if (rule.type === 'Rule') {
+			const declaration = rule.block.children[0];
+			assert.equal(declaration.type, 'Declaration');
+			if (declaration.type === 'Declaration') {
+				assert.equal(declaration.value, "url('./example.png?\\'')");
+			}
+		}
+	});
+});
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index 18a56e9a97..84b4989f76 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -9,12 +9,12 @@ export default test({
 			start: {
 				line: 73,
 				column: 1,
-				character: 964
+				character: 966
 			},
 			end: {
 				line: 73,
 				column: 16,
-				character: 979
+				character: 981
 			}
 		},
 		{
@@ -23,12 +23,12 @@ export default test({
 			start: {
 				line: 104,
 				column: 29,
-				character: 1270
+				character: 1272
 			},
 			end: {
 				line: 104,
 				column: 43,
-				character: 1284
+				character: 1286
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index be1838fd98..ef68280093 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -39,7 +39,7 @@
 		/*}*/
 	}
 
-	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	/* ...which is equivalent to `div :global { &.x { ...} }` ... */
 	div.svelte-xyz {
 		&.x {
 			color: green;
@@ -51,7 +51,7 @@
 		color: green;
 	}
 
-	/* ...and therefore `div { :global.x { ... }` aswell */
+	/* ...and therefore `div { :global.x { ... }` as well */
 	div.svelte-xyz {
 		&.x {
 			color: green;
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index 86d438031a..1a9993bfe0 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -41,7 +41,7 @@
 		}
 	}
 
-	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	/* ...which is equivalent to `div :global { &.x { ...} }` ... */
 	div :global {
 		&.x {
 			color: green;
@@ -53,7 +53,7 @@
 		color: green;
 	}
 
-	/* ...and therefore `div { :global.x { ... }` aswell */
+	/* ...and therefore `div { :global.x { ... }` as well */
 	div {
 		:global.x {
 			color: green;
diff --git a/packages/svelte/tests/css/samples/selectedcontent/expected.css b/packages/svelte/tests/css/samples/selectedcontent/expected.css
new file mode 100644
index 0000000000..87b4e04de7
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selectedcontent/expected.css
@@ -0,0 +1,44 @@
+
+	select.svelte-xyz,
+	.svelte-xyz::picker(select) {
+	  appearance: base-select;
+	}
+	selectedcontent.svelte-xyz b:where(.svelte-xyz){
+		color: red;
+	}
+	e.svelte-xyz{
+		selectedcontent:where(.svelte-xyz) &{
+			color: green;
+		}
+	}
+	select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) > b:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) i:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	selectedcontent.svelte-xyz:has(b:where(.svelte-xyz)){
+		background-color: rebeccapurple;
+	}
+
+	selectedcontent.svelte-xyz:has(i:where(.svelte-xyz)){
+		background-color: rebeccapurple;
+	}
+
+	option.svelte-xyz > b:where(.svelte-xyz){
+		color: orange;
+	}
+
+	option.svelte-xyz b:where(.svelte-xyz){
+		color: #ff3e00;
+	}
+
+	option.svelte-xyz > b:where(.svelte-xyz) > i:where(.svelte-xyz){
+		text-decoration: underline;
+	}
+
+	option.svelte-xyz i:where(.svelte-xyz){
+		text-decoration: dashed;
+	}
diff --git a/packages/svelte/tests/css/samples/selectedcontent/input.svelte b/packages/svelte/tests/css/samples/selectedcontent/input.svelte
new file mode 100644
index 0000000000..b8305551d7
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selectedcontent/input.svelte
@@ -0,0 +1,53 @@
+<select>
+	<button aria-label="Selected value">
+		<selectedcontent></selectedcontent>
+	</button>
+	<option>plain text</option>
+	<option><b>rich <i>italic</i></b><e>content</e></option>
+</select>
+
+<style>
+	select,
+	::picker(select) {
+	  appearance: base-select;
+	}
+	selectedcontent b{
+		color: red;
+	}
+	e{
+		selectedcontent &{
+			color: green;
+		}
+	}
+	select > button > selectedcontent > b {
+		color: blue;
+	}
+
+	select > button > selectedcontent i {
+		color: blue;
+	}
+
+	selectedcontent:has(b){
+		background-color: rebeccapurple;
+	}
+
+	selectedcontent:has(i){
+		background-color: rebeccapurple;
+	}
+
+	option > b{
+		color: orange;
+	}
+
+	option b{
+		color: #ff3e00;
+	}
+
+	option > b > i{
+		text-decoration: underline;
+	}
+
+	option i{
+		text-decoration: dashed;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/html_equal.js b/packages/svelte/tests/html_equal.js
index 76a4a957a5..cdb8f52e37 100644
--- a/packages/svelte/tests/html_equal.js
+++ b/packages/svelte/tests/html_equal.js
@@ -9,7 +9,9 @@ function clean_children(node, opts) {
 	let previous = null;
 	let has_element_children = false;
 	let template =
-		node.nodeName === 'TEMPLATE' ? /** @type {HTMLTemplateElement} */ (node) : undefined;
+		node.nodeName.toUpperCase() === 'TEMPLATE'
+			? /** @type {HTMLTemplateElement} */ (node)
+			: undefined;
 
 	if (template) {
 		const div = document.createElement('div');
@@ -23,22 +25,20 @@ function clean_children(node, opts) {
 	});
 
 	attributes.forEach((attr) => {
-		node.removeAttribute(attr.name);
+		if (attr.name !== 'xmlns') node.removeAttribute(attr.name);
 	});
 
-	attributes.forEach((attr) => {
+	attributes.forEach(({ name, value }) => {
 		// Strip out the special onload/onerror hydration events from the test output
-		if ((attr.name === 'onload' || attr.name === 'onerror') && attr.value === 'this.__e=event') {
+		if (['onload', 'onerror', 'xmlns'].includes(name) && value === 'this.__e=event') {
 			return;
 		}
 
-		let value = attr.value;
-
-		if (attr.name === 'class') {
+		if (name === 'class') {
 			value = value.replace(/svelte-\w+/, 'svelte-xyz123');
 		}
 
-		node.setAttribute(attr.name, value);
+		node.setAttribute(name, value);
 	});
 
 	for (let child of [...node.childNodes]) {
diff --git a/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js b/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js
new file mode 100644
index 0000000000..2bdb29e436
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+/** @type {typeof console.log} */
+let log;
+
+export default test({
+	before_test() {
+		log = console.log;
+		console.log = () => {};
+	},
+
+	after_test() {
+		console.log = log;
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte b/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte
new file mode 100644
index 0000000000..915aa0152d
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let test = 42;
+</script>
+
+<div>
+	{@debug test}
+	<span>something</span>
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/no-reset-snippet/_config.js b/packages/svelte/tests/hydration/samples/no-reset-snippet/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-snippet/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte b/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte
new file mode 100644
index 0000000000..c6668c0684
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte
@@ -0,0 +1,6 @@
+<div>
+	{#snippet test()}
+		
+	{/snippet}
+	<span>something</span>
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js
new file mode 100644
index 0000000000..36ca2e6ae5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that hydration works correctly for
+	// optgroup elements with rich HTML content (non-option elements inside optgroup)
+	snapshot(target) {
+		const select = target.querySelector('select');
+
+		return {
+			select
+		};
+	},
+
+	async test(assert, target) {
+		const optgroup = target.querySelector('optgroup');
+		const options = target.querySelectorAll('option');
+		const button = target.querySelector('button');
+
+		// Check options content - the span inside optgroup gets stripped but text remains
+		assert.equal(options[0]?.textContent, 'hello hello');
+		assert.equal(options[1]?.textContent, 'Plain option');
+
+		// Update via button click
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(options[0]?.textContent, 'changed changed');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html
new file mode 100644
index 0000000000..911b92770b
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html
@@ -0,0 +1 @@
+<select><optgroup label="Fruits">hello <option value="a"><span>hello</span> hello</option><option value="b">Plain option</option></optgroup><optgroup label="Static Group"><option value="c">Another option</option></optgroup></select> <button></button>
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte
new file mode 100644
index 0000000000..227c4d56d5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let label = $state('hello');
+</script>
+
+<select>
+	<optgroup label="Fruits">
+		<span class="group-header">{label}</span>
+		<option value="a"><span>{label}</span> {label}</option>
+		<option value="b">Plain option</option>
+	</optgroup>
+	<optgroup label="Static Group">
+		<option value="c">Another option</option>
+	</optgroup>
+</select>
+
+<button onclick={() => label = "changed"}></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js
new file mode 100644
index 0000000000..a2163b7c67
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js
@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that hydration continues correctly after
+	// an option element with rich HTML content
+	snapshot(target) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+		const p = target.querySelector('p');
+		const button = target.querySelector('button');
+
+		return {
+			select,
+			option1: options[0],
+			option2: options[1],
+			p,
+			button
+		};
+	},
+
+	async test(assert, target) {
+		const option = target.querySelector('option');
+		const button = target.querySelector('button');
+
+		assert.equal(option?.textContent, 'hello hello');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(option?.textContent, 'changed changed');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html
new file mode 100644
index 0000000000..d3e209c990
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html
@@ -0,0 +1 @@
+<select><option value="a">hello hello</option><option value="b">Plain text</option></select> <button></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte
new file mode 100644
index 0000000000..47edc28035
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let label = $state('hello');
+	let count = $state(42);
+</script>
+
+<select>
+	<!-- this would fail during hydration if rich_option handling is not correct -->
+	<option value="a"><span>{label}</span> {label}</option>
+	<option value="b">Plain text</option>
+</select>
+	
+<button onclick={() => label = "changed"}></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js
new file mode 100644
index 0000000000..ca8c2b6ec1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js
@@ -0,0 +1,39 @@
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that completely static select with rich option content
+	// hydrates correctly and the content is preserved
+	snapshot(target) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		return {
+			select,
+			option1: options[0],
+			option2: options[1],
+			option3: options[2]
+		};
+	},
+
+	async test(assert, target) {
+		const options = target.querySelectorAll('option');
+
+		// Verify the rich content is present in the options
+		assert.equal(options[0]?.textContent, 'Bold Option');
+		assert.equal(options[1]?.textContent, 'Italic Option');
+		assert.equal(options[2]?.textContent, 'Plain Option');
+
+		// Check that the rich elements are actually there (on supporting browsers)
+		const strong = options[0]?.querySelector('strong');
+		const em = options[1]?.querySelector('em');
+
+		// These may or may not exist depending on browser support
+		// but the text content should always be correct
+		if (strong) {
+			assert.equal(strong.textContent, 'Bold');
+		}
+		if (em) {
+			assert.equal(em.textContent, 'Italic');
+		}
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html
new file mode 100644
index 0000000000..93cfa49dd1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html
@@ -0,0 +1 @@
+<select><option value="a"><strong>Bold</strong> Option</option><option value="b"><em>Italic</em> Option</option><option value="c">Plain Option</option></select>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte
new file mode 100644
index 0000000000..bd81687434
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte
@@ -0,0 +1,5 @@
+<select>
+	<option value="a"><strong>Bold</strong> Option</option>
+	<option value="b"><em>Italic</em> Option</option>
+	<option value="c">Plain Option</option>
+</select>
diff --git a/packages/svelte/tests/hydration/samples/rich-select/Option.svelte b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte
new file mode 100644
index 0000000000..783915d571
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte
@@ -0,0 +1 @@
+<option>Option component</option>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/rich-select/_config.js b/packages/svelte/tests/hydration/samples/rich-select/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/hydration/samples/rich-select/main.svelte b/packages/svelte/tests/hydration/samples/rich-select/main.svelte
new file mode 100644
index 0000000000..bb77d8e57a
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/main.svelte
@@ -0,0 +1,173 @@
+<script>
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	import Option from './Option.svelte';
+</script>
+
+<!-- select with rich option (has span inside) - SHOULD use customizable_select_element -->
+<select>
+	<option><span>Rich</span></option>
+</select>
+
+<!-- select with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<!-- select with if containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		<option>Visible</option>
+	{/if}
+</select>
+
+<!-- select with key containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#key items}
+		<option>Keyed</option>
+	{/key}
+</select>
+
+<!-- select with snippet defined at top level and rendered - should NOT use customizable_select_element -->
+{#snippet opt()}
+	<option>Snippet</option>
+{/snippet}
+<select>
+	{@render opt()}
+</select>
+
+<!-- select with const inside each (should be ignored) - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		{@const x = item * 2}
+		<option>{x}</option>
+	{/each}
+</select>
+
+<!-- optgroup with rich option - SHOULD use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		<option><strong>Bold</strong></option>
+	</optgroup>
+</select>
+
+<!-- optgroup with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	</optgroup>
+</select>
+
+<!-- option with rich content (span) - SHOULD use customizable_select_element -->
+<select>
+	<option value="a"><em>Italic</em> text</option>
+</select>
+
+<!-- nested: select > each > option with rich content - SHOULD use customizable_select_element on option -->
+<select>
+	{#each items as item}
+		<option><span>{item}</span></option>
+	{/each}
+</select>
+
+<!-- nested: select > if > each > plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	{/if}
+</select>
+
+<!-- select with svelte:boundary containing plain options - should NOT use customizable_select_element -->
+<select>
+	<svelte:boundary>
+		<option>Boundary</option>
+	</svelte:boundary>
+</select>
+
+<!-- select with svelte:boundary containing rich options - SHOULD use customizable_select_element on option -->
+<select>
+	<svelte:boundary>
+		<option><span>Rich in boundary</span></option>
+	</svelte:boundary>
+</select>
+
+<!-- select with Component - SHOULD be treated as rich content -->
+<select>
+	<Option />
+</select>
+
+<!-- select with @render snippet - SHOULD be treated as rich content -->
+{#snippet option_snippet()}
+	<option>Rendered</option>
+{/snippet}
+<select>
+	{@render option_snippet()}
+</select>
+
+<!-- select with @html - SHOULD be treated as rich content -->
+<select>
+	{@html html}
+</select>
+
+<!-- optgroup with Component - SHOULD be treated as rich content -->
+<select>
+	<optgroup label="Group">
+		<Option />
+	</optgroup>
+</select>
+
+<!-- optgroup with @render - SHOULD be treated as rich content -->
+{#snippet option_snippet2()}
+	<option>Rendered in group</option>
+{/snippet}
+<select>
+	<optgroup label="Group">
+		{@render option_snippet2()}
+	</optgroup>
+</select>
+
+<!-- option with @html inside - SHOULD use customizable_select_element -->
+<select>
+	<option>{@html '<strong>Bold HTML</strong>'}</option>
+</select>
+
+<!-- each block inside select with Component - SHOULD be treated as rich -->
+<select>
+	{#each items as item}
+		<Option />
+	{/each}
+</select>
+
+<!-- if block inside select with @render - SHOULD be treated as rich -->
+{#snippet conditional_option()}
+	<option>Conditional</option>
+{/snippet}
+<select>
+	{#if show}
+		{@render conditional_option()}
+	{/if}
+</select>
+
+<!-- select with button/selectedcontent and static options - SHOULD use customizable_select_element -->
+<select>
+	<button><selectedcontent></selectedcontent></button>
+	<option>cool</option>
+	<option>cooler</option>
+	<option>coolerone</option>
+</select>
+
+<!-- select with button/selectedcontent and dynamic options - SHOULD use customizable_select_element -->
+<select>
+	<button><selectedcontent></selectedcontent></button>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte b/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte
new file mode 100644
index 0000000000..a62bd4ec90
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	const message = `call +636-555-3226 now`;
+</script>
+
+<hr />
+{message}
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js b/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js
new file mode 100644
index 0000000000..cf22ff2c85
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html b/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html
new file mode 100644
index 0000000000..17ec01970a
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html
@@ -0,0 +1 @@
+<!--[--><hr> call <a href="tel:+636-555-3226">+636-555-3226</a> now<!----> <p>42</p><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte b/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte
new file mode 100644
index 0000000000..daa25067ec
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+<p>{40 + 2}</p>
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index ba13d2c611..16e4070303 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -53,6 +53,8 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		await compile_directory(cwd, 'server', config.compileOptions);
 	}
 
+	config.before_test?.();
+
 	const target = window.document.body;
 	const head = window.document.head;
 
@@ -72,8 +74,6 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		head.innerHTML = override_head ?? rendered.head;
 	}
 
-	config.before_test?.();
-
 	try {
 		const snapshot = config.snapshot ? config.snapshot(target) : {};
 
@@ -131,19 +131,12 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		flushSync();
 
-		const normalize = (string: string) =>
-			string
-				.trim()
-				.replaceAll('\r\n', '\n')
-				.replaceAll('/>', '>')
-				.replace(/<!--.+?-->/g, '');
-
 		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
-		assert.equal(normalize(target.innerHTML), normalize(expected));
+		assert_html_equal(target.innerHTML, expected);
 
 		if (rendered.head) {
 			const expected = read(`${cwd}/_expected_head.html`) ?? rendered.head;
-			assert.equal(normalize(head.innerHTML), normalize(expected));
+			assert_html_equal(head.innerHTML, expected);
 		}
 
 		if (config.snapshot) {
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
index 26012e1115..90d2e2e036 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
@@ -4,4 +4,4 @@
 </script>
 <Component>
 	<slot name="derived" slot="derived" />
-</Component>
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
index 328966b63b..20e41646b3 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
@@ -3,4 +3,4 @@
 	let body;
 </script>
 
-<slot name="body"></slot>
+<slot name="body"></slot>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
index 1e763577df..49e9462768 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
@@ -1,2 +1,2 @@
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (dashed-name to dashed_name) making the component unusable -->
-<slot name="dashed-name"></slot>
+<slot name="dashed-name"></slot>
\ No newline at end of file
diff --git a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
index 9c48025ff9..711bd54525 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
@@ -63,7 +63,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/binding/output.json b/packages/svelte/tests/parser-legacy/samples/binding/output.json
index 17a78f051c..b103e03683 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
index ee19d58742..76bb6c7eb6 100644
--- a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
@@ -21,7 +21,7 @@
 				},
 				"end": {
 					"line": 9,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json b/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
index 637da24aea..684051e304 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
@@ -190,7 +190,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
index 9cb5d765e8..76605f5192 100644
--- a/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
@@ -258,7 +258,7 @@
 				},
 				"end": {
 					"line": 2,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
index 4723564f17..3775c48228 100644
--- a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
@@ -298,7 +298,7 @@
 				},
 				"end": {
 					"line": 31,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/refs/output.json b/packages/svelte/tests/parser-legacy/samples/refs/output.json
index 7f30946fc5..1e8efe78f8 100644
--- a/packages/svelte/tests/parser-legacy/samples/refs/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/refs/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json b/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
index e0b50e3b92..4ad004c88a 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json b/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
index b04a823e8d..0f7d0b8465 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
@@ -37,7 +37,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json b/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
index 64250cb302..34a640200c 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
@@ -24,12 +24,12 @@
 			"end": 77,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 5,
 					"column": 0
 				},
 				"end": {
 					"line": 7,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -84,7 +84,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/script/output.json b/packages/svelte/tests/parser-legacy/samples/script/output.json
index d3d4abd6b2..14d2805216 100644
--- a/packages/svelte/tests/parser-legacy/samples/script/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json b/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
index 69b2382442..8853c32f9c 100644
--- a/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
@@ -72,8 +72,8 @@
 					"column": 0
 				},
 				"end": {
-					"line": 3,
-					"column": 0
+					"line": 8,
+					"column": 1
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
index 13cc5fea7b..27692e98b4 100644
--- a/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
@@ -272,7 +272,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
index 8d77165297..8840aad85a 100644
--- a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
@@ -34,12 +34,12 @@
 			"end": 67,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 2,
 					"column": 0
 				},
 				"end": {
 					"line": 4,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
index 8e1654feed..f29eb6fc72 100644
--- a/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
+++ b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
@@ -296,7 +296,7 @@
 				},
 				"end": {
 					"line": 2,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json
index b428cff0b2..441cf71519 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json
+++ b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json
@@ -227,7 +227,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-modern/samples/options/output.json b/packages/svelte/tests/parser-modern/samples/options/output.json
index 08ce8d43b7..c220811175 100644
--- a/packages/svelte/tests/parser-modern/samples/options/output.json
+++ b/packages/svelte/tests/parser-modern/samples/options/output.json
@@ -111,12 +111,12 @@
 			"end": 93,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 3,
 					"column": 0
 				},
 				"end": {
 					"line": 4,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
@@ -182,12 +182,12 @@
 			"end": 160,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 6,
 					"column": 0
 				},
 				"end": {
 					"line": 7,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json
index b5e42e9217..db58a62148 100644
--- a/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json
+++ b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json
@@ -93,7 +93,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-modern/samples/snippets/output.json b/packages/svelte/tests/parser-modern/samples/snippets/output.json
index c217ef94e9..f358e2a60c 100644
--- a/packages/svelte/tests/parser-modern/samples/snippets/output.json
+++ b/packages/svelte/tests/parser-modern/samples/snippets/output.json
@@ -230,7 +230,7 @@
 				},
 				"end": {
 					"line": 1,
-					"column": 18
+					"column": 27
 				}
 			},
 			"body": [],
diff --git a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
index a1d6ed56bf..7b521513f4 100644
--- a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
+++ b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
@@ -396,7 +396,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/print/samples/formatting/input.svelte b/packages/svelte/tests/print/samples/formatting/input.svelte
index 9b1898e9c8..43c3b363cb 100644
--- a/packages/svelte/tests/print/samples/formatting/input.svelte
+++ b/packages/svelte/tests/print/samples/formatting/input.svelte
@@ -1 +1,8 @@
-<script>import { setLocale } from '$lib/paraglide/runtime';import { m } from '$lib/paraglide/messages.js';</script><h1>{m.hello_world({ name: 'SvelteKit User' })}</h1><div><button onclick={() => setLocale('en')}>en</button><button	onclick={() => setLocale('es')}>es</button></div><p>If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a>for a better i18n experience.</p>
+<script>import { setLocale } from '$lib/paraglide/runtime';import { m } from '$lib/paraglide/messages.js';</script>
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1><div><button onclick={() => setLocale('en')}>en</button><button	onclick={() => setLocale('es')}>es</button></div><p>If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a>for a better i18n experience.</p>
+
+<Component><div><button>Hello, this is a test</button><button>Hello, this is a test</button></div></Component>
+<Component><button>Hello, this is a test</button><button>Hello, this is a test</button></Component>
+<button class="foo bar" aria-label="click" onclick={() => console.log("clicked")}>Click me!</button>
+<button class="foo bar" aria-label="click" onclick={() => console.log("clicked")}><span>some fancy looking</span><span>really long button text</span></button>
diff --git a/packages/svelte/tests/print/samples/formatting/output.svelte b/packages/svelte/tests/print/samples/formatting/output.svelte
index 7b40642580..ba871c66a5 100644
--- a/packages/svelte/tests/print/samples/formatting/output.svelte
+++ b/packages/svelte/tests/print/samples/formatting/output.svelte
@@ -4,18 +4,46 @@
 </script>
 
 <h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+
 <div>
 	<button onclick={() => setLocale('en')}>en</button>
 	<button onclick={() => setLocale('es')}>es</button>
 </div>
+
 <p>
 	If you use VSCode, install the 
 
 	<a
 		href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
 		target="_blank"
-	>
-		Sherlock i18n extension
-	</a>
+	>Sherlock i18n extension</a>
+
 	for a better i18n experience.
 </p>
+
+<Component>
+	<div>
+		<button>Hello, this is a test</button>
+		<button>Hello, this is a test</button>
+	</div>
+</Component>
+
+<Component>
+	<button>Hello, this is a test</button>
+	<button>Hello, this is a test</button>
+</Component>
+
+<button
+	class="foo bar"
+	aria-label="click"
+	onclick={() => console.log("clicked")}
+>Click me!</button>
+
+<button
+	class="foo bar"
+	aria-label="click"
+	onclick={() => console.log("clicked")}
+>
+	<span>some fancy looking</span>
+	<span>really long button text</span>
+</button>
diff --git a/packages/svelte/tests/print/samples/html-document/output.svelte b/packages/svelte/tests/print/samples/html-document/output.svelte
index 765f9ca84b..94ef78d0a3 100644
--- a/packages/svelte/tests/print/samples/html-document/output.svelte
+++ b/packages/svelte/tests/print/samples/html-document/output.svelte
@@ -1,12 +1,16 @@
 <!doctype html>
+
 <html>
 	<head>
 		<meta charset="utf-8" />
+
 		<meta
 			name="viewport"
 			content="width=device-width, initial-scale=1.0"
 		/>
+
 		<title>Svelte App</title>
 	</head>
+
 	<body><div>Hello World</div></body>
 </html>
diff --git a/packages/svelte/tests/print/samples/style-directive/output.svelte b/packages/svelte/tests/print/samples/style-directive/output.svelte
index 5aa3a6dcdb..27c12c5d47 100644
--- a/packages/svelte/tests/print/samples/style-directive/output.svelte
+++ b/packages/svelte/tests/print/samples/style-directive/output.svelte
@@ -1,8 +1,7 @@
 <div style:color="red">...</div>
+
 <div
 	style:color
 	style:width="12rem"
 	style:background-color={darkMode ? 'black' : 'white'}
->
-	...
-</div>
+>...</div>
diff --git a/packages/svelte/tests/print/samples/svelte-fragment/output.svelte b/packages/svelte/tests/print/samples/svelte-fragment/output.svelte
index eb80023626..73a4451ed8 100644
--- a/packages/svelte/tests/print/samples/svelte-fragment/output.svelte
+++ b/packages/svelte/tests/print/samples/svelte-fragment/output.svelte
@@ -4,6 +4,7 @@
 
 <Widget>
 	<h1 slot="header">Hello</h1>
+
 	<svelte:fragment slot="footer">
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
diff --git a/packages/svelte/tests/print/samples/svelte-head/output.svelte b/packages/svelte/tests/print/samples/svelte-head/output.svelte
index 68d352260e..da4345d731 100644
--- a/packages/svelte/tests/print/samples/svelte-head/output.svelte
+++ b/packages/svelte/tests/print/samples/svelte-head/output.svelte
@@ -1,5 +1,6 @@
 <svelte:head>
 	<title>Hello world!</title>
+
 	<meta
 		name="description"
 		content="This is where the description goes for SEO"
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js
new file mode 100644
index 0000000000..9e09967dab
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+
+		const el = target.querySelector('custom-element');
+
+		assert.equal(el.shadowRoot, null);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte
new file mode 100644
index 0000000000..93744481b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte
@@ -0,0 +1,3 @@
+<svelte:options customElement={{ tag: "custom-element", shadow: { mode: 'closed' } }} />
+
+<h1>Hello world!</h1>
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js
new file mode 100644
index 0000000000..106d27929e
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+
+		/** @type {ShadowRoot} */
+		const shadowRoot = target.querySelector('custom-element').shadowRoot;
+
+		assert.equal(shadowRoot.mode, 'open');
+		assert.equal(shadowRoot.clonable, true);
+		assert.equal(shadowRoot.delegatesFocus, true);
+		assert.equal(shadowRoot.serializable, true);
+		assert.equal(shadowRoot.slotAssignment, 'manual');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte
new file mode 100644
index 0000000000..25d69d7ef9
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options
+	customElement={{
+		tag: 'custom-element',
+		shadow: {
+			mode: 'open',
+			clonable: true,
+			delegatesFocus: true,
+			serializable: true,
+			slotAssignment: 'manual',
+		},
+	}}
+/>
+
+<h1>Hello world!</h1>
diff --git a/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js b/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
index 3ff1bf7286..4f0e53925b 100644
--- a/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
@@ -4,7 +4,7 @@ export default test({
 	mode: ['client'],
 	async test({ assert, window }) {
 		// wait the script to load (maybe there a better way)
-		await new Promise((resolve) => setTimeout(resolve, 1));
+		await new Promise((resolve) => setTimeout(resolve, 100));
 		assert.htmlEqual(
 			window.document.body.innerHTML,
 			`<main><b id="r1">1</b><b id="r2">2</b><b id="r3">3</b></main>`
diff --git a/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js
new file mode 100644
index 0000000000..3a52b1ccd3
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js
@@ -0,0 +1,24 @@
+import { test } from '../../assert';
+
+// Browsers split text nodes > 65536 characters into multiple consecutive text nodes
+// during HTML parsing. This test verifies that hydration correctly merges them.
+const LARGE_TEXT = 'x'.repeat(70000);
+
+export default test({
+	mode: ['hydrate'],
+	skip_mode: ['client'],
+
+	props: {
+		text: LARGE_TEXT
+	},
+
+	async test({ assert, target }) {
+		const [p] = target.querySelectorAll('p');
+
+		// The text content should be preserved after hydration
+		assert.equal(p.textContent?.trim(), LARGE_TEXT);
+		// After hydration, there should be only one text node (plus possible comment nodes)
+		const textNodes = [...p.childNodes].filter((node) => node.nodeType === 3);
+		assert.equal(textNodes.length, 1, `Expected 1 text node, got ${textNodes.length}`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte
new file mode 100644
index 0000000000..d65358dabc
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { text } = $props();
+</script>
+
+<p>{text}</p>
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
index 63e601b115..54cdc0f8be 100644
--- a/packages/svelte/tests/runtime-browser/test.ts
+++ b/packages/svelte/tests/runtime-browser/test.ts
@@ -164,6 +164,7 @@ async function run_test(
 				}
 			],
 			bundle: true,
+			platform: 'node',
 			format: 'iife',
 			globalName: 'test_ssr'
 		});
@@ -196,6 +197,7 @@ async function run_test(
 		const page = await browser.newPage();
 		page.on('console', (message) => {
 			let method = message.type();
+			// @ts-ignore
 			if (method === 'warning') method = 'warn';
 			// @ts-ignore
 			console[method](message.text());
@@ -211,7 +213,7 @@ async function run_test(
 		}
 
 		// uncomment to see what was generated
-		// fs.writeFileSync(`${test_dir}/_actual.js`, build_result.outputFiles[0].text);
+		// fs.writeFileSync(`${test_dir}/_output/bundle-${hydrate}.js`, build_result.outputFiles[0].text);
 		const test_result = await page.evaluate(
 			build_result.outputFiles[0].text + ";test.default(document.querySelector('main'))"
 		);
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js
new file mode 100644
index 0000000000..f17a7f4825
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `<input>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte
new file mode 100644
index 0000000000..9c1e23a0f4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte
@@ -0,0 +1,11 @@
+<script>
+  $: items = [{ value: 'hello' }];
+
+  function fn(value) {
+		return true;
+	}
+</script>
+
+{#each items.filter(fn) as item}
+  <input bind:value={item.value} />
+{/each}
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js
new file mode 100644
index 0000000000..b0dcaa8fdc
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	get props() {
+		return { tag: true };
+	},
+
+	error:
+		'svelte_element_invalid_this_value\n' +
+		'The `this` prop on `<svelte:element>` must be a string, if defined'
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte
new file mode 100644
index 0000000000..cc6736a497
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let tag;
+</script>
+
+<svelte:element this={tag}>content</svelte:element>
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js
new file mode 100644
index 0000000000..1134b20d0c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		ok(input);
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		input.dispatchEvent(event);
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input>
+			<p>changed</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte
new file mode 100644
index 0000000000..77731ea5a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([
+		{ id: 0, text: 'initial' }
+	]);
+</script>
+
+{#each $items ?? [] as item}
+	<input bind:value={item.text}>
+{/each}
+
+<p>{$items[0].text}</p>
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 13975c68ee..c5317f822e 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -47,9 +47,9 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 	mode?: Array<'server' | 'async-server' | 'client' | 'hydrate'>;
 	/** Temporarily skip specific modes, without skipping the entire test */
 	skip_mode?: Array<'server' | 'async-server' | 'client' | 'hydrate'>;
-	/** Skip if running with process.env.NO_ASYNC */
+	/** Skip if running with process.env.SVELTE_NO_ASYNC */
 	skip_no_async?: boolean;
-	/** Skip if running without process.env.NO_ASYNC */
+	/** Skip if running without process.env.SVELTE_NO_ASYNC */
 	skip_async?: boolean;
 	html?: string;
 	ssrHtml?: string;
@@ -521,6 +521,8 @@ async function run_test_variant(
 						errors,
 						hydrate: hydrate_fn
 					});
+
+					flushSync();
 				}
 
 				if (config.runtime_error && !unhandled_rejection) {
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js
new file mode 100644
index 0000000000..bc945876ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, 'https://svelte.dev/e/each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte
new file mode 100644
index 0000000000..f8ba50d866
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let data = $state([1, 2, 3]);
+</script>
+
+<button onclick={() => data = [1, 1, 1]}>add</button>
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js
new file mode 100644
index 0000000000..7e1840200a
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	error: 'each_key_duplicate'
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte
new file mode 100644
index 0000000000..a05781bcb9
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let data = [1, 1, 1];
+</script>
+
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js
new file mode 100644
index 0000000000..bc945876ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, 'https://svelte.dev/e/each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte
new file mode 100644
index 0000000000..3d52179372
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let data = $state([1, 2, 3, 4, 5]);
+</script>
+
+<button onclick={() => data = [1, 1, 3, 1]}>add</button>
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte b/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte
new file mode 100644
index 0000000000..36b548ab8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { foo = $bindable(42) } = $props();
+</script>
+
+{foo};
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/_config.js b/packages/svelte/tests/runtime-production/samples/production-internals/_config.js
new file mode 100644
index 0000000000..6ac08f7012
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		flushSync();
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte b/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte
new file mode 100644
index 0000000000..0629644a01
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from "./Child.svelte";
+
+	let foo;
+
+	function onerror(err) {
+		// re-throw if it isn't the production error
+		// do in a such way because config.error is checked via `includes`
+		if (err.message !== 'https://svelte.dev/e/props_invalid_value') {
+			throw err;
+		}
+	}
+</script>
+
+<svelte:boundary {onerror}>
+	<Child bind:foo />
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-production/samples/production/main.svelte b/packages/svelte/tests/runtime-production/samples/production/main.svelte
new file mode 100644
index 0000000000..d9cff745d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production/main.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { DEV } from "esm-env";
+
+    if (DEV) {
+        throw new Error("Dev-only code must not run");
+    }
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-production/test.ts b/packages/svelte/tests/runtime-production/test.ts
new file mode 100644
index 0000000000..1c9a00ab83
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/test.ts
@@ -0,0 +1,17 @@
+// @vitest-environment jsdom
+
+import { vi } from 'vitest';
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+vi.mock('esm-env', async (importEnv) => {
+	return {
+		...(await importEnv()),
+		DEV: false
+	};
+});
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte
new file mode 100644
index 0000000000..99f885189b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte
@@ -0,0 +1,4 @@
+<script>
+  let { children } = $props()
+</script>
+<div>{@render children?.()}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte
new file mode 100644
index 0000000000..99f885189b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte
@@ -0,0 +1,4 @@
+<script>
+  let { children } = $props()
+</script>
+<div>{@render children?.()}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte
new file mode 100644
index 0000000000..fc434d748e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte
@@ -0,0 +1,7 @@
+<script lang='ts'>
+  import type { Attachment } from 'svelte/attachments'
+
+  export function action(): Attachment<HTMLElement> {
+    return ()=>{}
+  }
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js
new file mode 100644
index 0000000000..d77ba45ae4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<div><div>foo</div></div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte
new file mode 100644
index 0000000000..6cfc73ca25
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  import Outer from './Outer.svelte'
+  import Inner from './Inner.svelte'
+  import Trigger from './Trigger.svelte'
+
+  const data = $derived(await Promise.resolve(['a', 'b']))
+  let trigger = $state()
+</script>
+
+<Outer>
+  <Inner {@attach trigger?.action}>
+    foo
+  </Inner>
+</Outer>
+
+<Trigger bind:this={trigger} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js
new file mode 100644
index 0000000000..e89065865f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// ensure in-place object mutations stay reactive in async
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 1, computed: 10</p><button>mutate</button>`);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 2, computed: 20</p><button>mutate</button>`);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 3, computed: 30</p><button>mutate</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte
new file mode 100644
index 0000000000..327c775d6e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const data = writable({ count: 1 });
+
+	function mutate_count() {
+		data.update(d => {
+			d.count++;
+			return d;
+		});
+	}
+
+	async function compute(d) {
+		return Promise.resolve(d.count * 10);
+	}
+</script>
+
+<svelte:boundary>
+	<p>count: {$data.count}, computed: {await compute($data)}</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={mutate_count}>mutate</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/Child.svelte
new file mode 100644
index 0000000000..d156cc99af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { x, y, deferred } = $props();
+
+	y = await deferred.promise;
+</script>
+
+<p>x: {x}</p>
+
+<svelte:boundary>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	<p>y: {y}</p>
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js
new file mode 100644
index 0000000000..fbf003f8e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>x</button>
+		<button>y</button>
+		<p>loading...</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		button2.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>x</button>
+				<button>y</button>
+				<p>x: x2</p>
+				<p>y: y2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte
new file mode 100644
index 0000000000..57ab32a6ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('x1');
+	let y = $state('y1');
+
+	const deferred = Promise.withResolvers();
+</script>
+
+<button onclick={() => x = 'x2'}>x</button>
+<button onclick={() => deferred.resolve('y2')}>y</button>
+
+<svelte:boundary>
+	<Child {x} {y} {deferred} />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js b/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js
new file mode 100644
index 0000000000..fe85c0393a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	props: {
+		a_promise: Promise.resolve(10),
+		b_promise: Promise.resolve(20)
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>30</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte
new file mode 100644
index 0000000000..b5e6d90f7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let { a_promise, b_promise } = $props();
+</script>
+
+<svelte:boundary>
+	{@const a = await a_promise}
+	{#if true}
+		<svelte:boundary>
+			{@const b = await b_promise}
+			{#if true}
+				{@const sum = a + b}
+				<p>{sum}</p>
+			{/if}
+		</svelte:boundary>
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/Child.svelte
new file mode 100644
index 0000000000..fecbe222e3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { id } = $props();
+
+	// BUG: This logs 'undefined' on unmount when parent has async derived
+	const data = $derived(await Promise.resolve(id).then((x) => {
+		console.log('promise resolved with:', x);
+		return x;
+	}));
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js
new file mode 100644
index 0000000000..2f371bc6b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, ['promise resolved with:', 'some-id']);
+
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+
+		assert.deepEqual(logs, ['promise resolved with:', 'some-id']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte
new file mode 100644
index 0000000000..d5cdd5967e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Child from './Child.svelte';
+
+	// This async derived in parent triggers the bug
+	const something = $derived(await Promise.resolve('test'));
+
+	let active = $state('some-id');
+</script>
+
+{#if active}
+	<Child id={active} />
+{/if}
+
+<button onclick={() => active = undefined}>close</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js
new file mode 100644
index 0000000000..49428f90ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>baz: 69</p>
+				<p></p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte
new file mode 100644
index 0000000000..0e05d0c414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let foo = $state(null);
+
+	$effect(() => {
+		foo = 69;
+	});
+
+	let bar = $derived(await 1);
+
+	let baz = $derived(foo ? foo * bar : null);
+
+	const qux = "qux";
+</script>
+
+<p>baz: {baz}</p>
+
+<svelte:boundary>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	{#if qux}
+		<p></p>
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js
new file mode 100644
index 0000000000..165577af96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li></ul><button>add</button>`
+		);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li><li data-item="2"><span>20</span><span>40</span></li></ul><button>add</button>`
+		);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li><li data-item="2"><span>20</span><span>40</span></li><li data-item="3"><span>30</span><span>60</span></li></ul><button>add</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte
new file mode 100644
index 0000000000..41982b767d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([{ id: 1 }]);
+
+	function add_item() {
+		items.update(arr => [...arr, { id: arr.length + 1 }]);
+	}
+
+	function query(item) {
+		return Promise.resolve([item.id * 10, item.id * 20]);
+	}
+</script>
+
+<svelte:boundary>
+	<ul>
+		{#each $items as item (item.id)}
+			<li data-item={item.id}>
+				{#each await query(item) as value}
+					<span>{value}</span>
+				{/each}
+			</li>
+		{/each}
+	</ul>
+	
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={add_item}>add</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte
new file mode 100644
index 0000000000..9f4e638629
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { message, another } = $props()
+</script>
+
+<p>{message}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js
new file mode 100644
index 0000000000..2e20f83f7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	ssrHtml: `<p>item 1</p><p>item 2</p><p>item 3</p>`,
+	html: `<p>item 1</p><p>item 2</p><p>item 3</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>item 1</p><p>item 2</p><p>item 3</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte
new file mode 100644
index 0000000000..ae54b63414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+
+	const messages = await Promise.resolve(["item 1", "item 2", "item 3"])
+	const another = { test: 'test' }
+</script>
+
+{#each messages as message}
+	<Component {message} {another} />
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/_config.js
new file mode 100644
index 0000000000..2e0fab473c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate'],
+	error: 'oops'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte
new file mode 100644
index 0000000000..64d9e6ce08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	await 1;
+
+	throw new Error('oops');
+</script>
+
+<h1>hello</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js
new file mode 100644
index 0000000000..b089b714ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		// d should be 10 (real-world: s=1, d=1*10) before commit, not 20 (fork: s=2, d=2*10)
+		// After commit, d should be 99 (the written value)
+		assert.deepEqual(logs, [10, 99]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte
new file mode 100644
index 0000000000..bc118a558a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(1);
+	let d = $derived(s * 10);
+</script>
+
+<button onclick={async () => {
+	const f = fork(() => {
+		// First modify s, then write to d
+		// If d is evaluated in fork context, it would see s=2 and compute d=20
+		// But it should evaluate in real-world context to get d=10
+		s = 2;
+		d = 99;
+	});
+
+	// Should be 10 (real-world value: s=1, so d=1*10=10), not 20 (fork value)
+	console.log(d);
+	await f.commit();
+	// Should be 99 (the value we wrote)
+	console.log(d);
+}}>++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js
new file mode 100644
index 0000000000..59ae376167
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [1, 2]);
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [1, 2, 2, 3]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte
new file mode 100644
index 0000000000..93761869d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(1);
+	let d = $derived(s);
+</script>
+
+<button onclick={async () => {
+	const f = fork(() => {
+		s = s + 1;
+	});
+
+	console.log(d);
+	await f.commit();
+	console.log(d);
+}}>++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js
new file mode 100644
index 0000000000..2fb00562f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target }) {
+		const [fork] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>fork</button><button>false</button>');
+
+		const [, toggle] = target.querySelectorAll('button');
+
+		toggle.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>fork</button><button>true</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte
new file mode 100644
index 0000000000..6945fcd153
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { fork } from 'svelte';
+
+	let condition = $state(false);
+	let checked = $state(false);
+
+	const d = $derived({ checked });
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		condition = true;
+	}).commit();
+}}>fork</button>
+
+{#if condition}
+	<!-- in dev, snippet arguments are read eagerly, outside a tracking context -->
+	<!-- this test checks that doing so doesn't prevent the derived from connecting -->
+	{#snippet foo({ checked })}
+		{checked}
+	{/snippet}
+
+	<button onclick={() => (checked = !checked)}>
+		{@render foo(d)}
+	</button>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte
new file mode 100644
index 0000000000..02ef294d99
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+    let { b } = $props();
+</script>
+
+{b}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js
new file mode 100644
index 0000000000..8132e9c522
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<div><p>hello</p></div> <div>true</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte
new file mode 100644
index 0000000000..3b08d41640
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Child from "./Child.svelte";
+
+	await 1;
+	let b = true;
+	let a = true;
+</script>
+
+{#if a}
+	<div>
+		{#if b}
+			<p>hello</p>
+		{/if}
+	</div>
+	<div>
+		<Child {b} />
+	</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js
new file mode 100644
index 0000000000..49cae28cc4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate', 'client'],
+	ssrHtml: `bar blocking`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'bar blocking');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte
new file mode 100644
index 0000000000..cfb17e3c76
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte
@@ -0,0 +1,21 @@
+<script>
+  let foo = $state(false);
+  let blocking = $derived(await foo);
+  let bar = Promise.resolve(true);
+</script>
+
+{#if foo}
+  foo
+{:else if await bar}
+  bar
+{:else}
+  else
+{/if}
+
+{#if foo}
+  foo
+{:else if !blocking}
+  blocking
+{:else}
+  else
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js
new file mode 100644
index 0000000000..2e37b0b9ac
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `Count: 1 Double: 2`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte
new file mode 100644
index 0000000000..e26ff87567
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	let count = $state(1);
+	async function getDouble(count: number) {
+		return count * 2;
+	}
+	const double = $derived(await getDouble(count));
+</script>
+
+Count: {count}
+
+{#snippet ssr(num: number)}
+	{num}
+{/snippet}
+
+Double: {@render ssr(double)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/Child.svelte
new file mode 100644
index 0000000000..2684005fcf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/Child.svelte
@@ -0,0 +1,3 @@
+<script>
+	$effect(() => {})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js
new file mode 100644
index 0000000000..a837d02f9f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js
@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, resolve] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+
+		b.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a (true)</button>
+				<button>b (true)</button>
+				<button>resolve</button>
+				42
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte
new file mode 100644
index 0000000000..48940017a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Child from './Child.svelte';
+
+	let a = $state(false);
+	let b = $state(false);
+
+	let deferred = [];
+
+	function push(value) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(value))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => a = !a}>a ({a})</button>
+<button onclick={() => b = !b}>b ({b})</button>
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if a}
+	{await push(42)}
+	<Child />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte
new file mode 100644
index 0000000000..5b85a553d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import B from "./B.svelte";
+
+	let greeting = 'hello';
+	setContext("greeting", greeting);
+
+	await Promise.resolve();
+
+	let recipient = 'world';
+</script>
+
+<B {recipient} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte
new file mode 100644
index 0000000000..2c93263ca5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import C from "./C.svelte";
+
+	let { recipient } = $props();
+
+	// svelte-ignore state_referenced_locally
+	setContext("recipient", recipient);
+	await Promise.resolve();
+</script>
+
+<C />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte
similarity index 60%
rename from packages/svelte/tests/runtime-runes/samples/async-set-context/Inner.svelte
rename to packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte
index 2c7fd5d43d..2aebf7a64f 100644
--- a/packages/svelte/tests/runtime-runes/samples/async-set-context/Inner.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte
@@ -2,6 +2,7 @@
 	import { getContext } from "svelte";
 
   let greeting = getContext("greeting");
+  let recipient = getContext("recipient");
 </script>
 
-<p>{greeting}</p>
\ No newline at end of file
+<p>{greeting} {recipient}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/Outer.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/Outer.svelte
deleted file mode 100644
index 9a493c5b75..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/async-set-context/Outer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { setContext } from "svelte";
-	import Inner from "./Inner.svelte";
-
-	setContext("greeting", "hi");
-	await Promise.resolve();
-</script>
-
-<Inner />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js b/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js
index 041f67a39e..aebed211cc 100644
--- a/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js
@@ -3,9 +3,9 @@ import { test } from '../../test';
 
 export default test({
 	mode: ['client', 'async-server'],
-	ssrHtml: `<p>hi</p>`,
+	ssrHtml: `<p>hello world</p>`,
 	async test({ assert, target }) {
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<p>hi</p>');
+		assert.htmlEqual(target.innerHTML, '<p>hello world</p>');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte
index 01b46bda93..e2189e7eb8 100644
--- a/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Outer from "./Outer.svelte";
+	import A from "./A.svelte";
 
 	await Promise.resolve();
 </script>
 
-<Outer />
+<A />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js
new file mode 100644
index 0000000000..f6f6c81350
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+	skip_no_async: true,
+
+	ssrHtml: `<div>1</div><p>after</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<div>1</div><p>after</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte
new file mode 100644
index 0000000000..1b1dc17242
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	const n = $derived(await Promise.resolve(1));
+</script>
+
+{#snippet child(n)}
+	<div>{n}</div>
+{/snippet}
+
+{#if n}
+	{@render child(n)}
+{/if}
+
+<p>after</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js
new file mode 100644
index 0000000000..9741b1e836
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork_btn, counter_btn] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			fork_btn.click();
+		});
+
+		assert.equal(counter_btn.textContent, '0');
+
+		flushSync(() => {
+			counter_btn.click();
+		});
+
+		assert.equal(counter_btn.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte
new file mode 100644
index 0000000000..163609ac58
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let show = $state(false);
+	let show_async = $state(false);
+	let count = $state(0);
+</script>
+
+<button onclick={() => {
+	show = true;
+	show_async = true;
+}}>show</button>
+
+{#if show}
+	hi
+{:else}
+	{#if show || !show}
+		<button onclick={() => count++}>{count}</button>
+	{/if}
+{/if}
+
+{#if show_async}
+	{await new Promise(() => {})}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte
new file mode 100644
index 0000000000..6b765526c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { x } = $props();
+	console.log(x);
+	$effect(() => console.log('$effect: '+ x))
+</script>
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js
new file mode 100644
index 0000000000..f2091eb6ab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js
@@ -0,0 +1,47 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // this fails on main, too; skip for now
+	async test({ assert, target, logs }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+		assert.deepEqual(logs, ['universe']);
+
+		y.click();
+		await tick();
+		assert.deepEqual(logs, ['universe', 'world', '$effect: world']);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			world
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [
+			'universe',
+			'world',
+			'$effect: world',
+			'$effect: universe',
+			'$effect: universe'
+		]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			universe
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte
new file mode 100644
index 0000000000..8edc718de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js
new file mode 100644
index 0000000000..5c95b3149c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<p>hello</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte
new file mode 100644
index 0000000000..9ecc839c3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	await 0;
+	let message = $derived('hello');
+</script>
+
+<p>{message}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js
new file mode 100644
index 0000000000..2e4a27cf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte
new file mode 100644
index 0000000000..03c4ada55a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	await Promise.resolve(42);
+	const { name } = $props();
+</script>
+
+{name}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js
new file mode 100644
index 0000000000..e7983a3de9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['hydrate'],
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte
new file mode 100644
index 0000000000..3b9ce94e61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte
@@ -0,0 +1 @@
+<div>{@html await Promise.resolve(`<span>Foo</span>`)}</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte
new file mode 100644
index 0000000000..3e39d5043e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get } from './main.svelte';
+
+	const message = get();
+</script>
+
+<h1>{message}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js
new file mode 100644
index 0000000000..f4374c8759
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div><h1>hello</h1></div>`,
+
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte
new file mode 100644
index 0000000000..3c42dbf180
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte
@@ -0,0 +1,20 @@
+<script module>
+	import { createContext, mount } from 'svelte';
+	import Child from './Child.svelte';
+
+	/** @type {ReturnType<typeof createContext<string>>} */
+	const [get, set] = createContext();
+
+	export { get };
+
+	function Wrapper(Component) {
+		return (...args) => {
+			set('hello');
+			return Component(...args);
+		};
+	}
+</script>
+
+<div {@attach (target) => {
+	mount(Wrapper(Child), { target });
+}}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js
new file mode 100644
index 0000000000..f3a71b93e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js
@@ -0,0 +1,47 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>+1</button>
+		<button>add number</button>
+		<p>1, 2, 3</p>
+	`,
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>2, 4, 6</p>
+			`
+		);
+
+		button2.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>2, 4, 6, 8</p>
+			`
+		);
+
+		button1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>3, 6, 9, 12</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte
new file mode 100644
index 0000000000..0b5096dfa4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	class Item {
+		product: number;
+
+		constructor(n: number) {
+			this.product = $derived(multiplier * n);
+		}
+	}
+
+	let numbers = $state([1, 2, 3]);
+	let multiplier = $state(1);
+
+	let items = $derived(numbers.map((n) => new Item(n)))
+	let products = $derived(items.map(item => item.product));
+</script>
+
+<button onclick={() => {
+	multiplier += 1;
+}}>+1</button>
+
+<button onclick={() => {
+	numbers.push(numbers.length + 1);
+
+	// this is load-bearing — by reading it outside a reaction, we recompute
+	// `products`, removing it as a reaction from `Item.product` dependencies,
+	// but we don't add it as a reaction to the new `Item.product` dependencies
+	products;
+}}>add number</button>
+
+<p>{products.join(', ')}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js
new file mode 100644
index 0000000000..acf84f6809
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js
@@ -0,0 +1,43 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const addBtn = /** @type {HTMLElement} */ (target.querySelector('button.add'));
+		const removeBtn = /** @type {HTMLElement} */ (target.querySelector('button.remove'));
+
+		const btnHtml = '<button class="add">add</button><button class="remove">remove</button>';
+
+		assert.htmlEqual(target.innerHTML, btnHtml);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span><span>3</span>${btnHtml}`);
+
+		removeBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+
+		removeBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte
new file mode 100644
index 0000000000..7869d095dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	let items = $state([]);
+
+	const proxy = new Proxy(items, {
+		get: (target, prop) => {
+			try {
+				$effect.pre(() => {
+					return () => {};
+				});
+			} catch {}
+
+			return Reflect.get(target, prop);
+		}
+	});
+
+	function add() {
+		items.push(items.length + 1);
+	}
+
+	function remove() {
+		items.pop();
+	}
+</script>
+
+{#each proxy as item}
+	<span>{item}</span>
+{/each}
+
+<button class="add" onclick={add}>add</button>
+<button class="remove" onclick={remove}>remove</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
index 57f60c2b44..44cf5b09e2 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
@@ -11,11 +11,12 @@ export default test({
 	test({ assert, errors }) {
 		const [button] = document.querySelectorAll('button');
 
-		try {
+		assert.throws(() => {
 			flushSync(() => button.click());
-		} catch (e) {
-			assert.equal(errors.length, 1); // for whatever reason we can't get the name which should be 'updated at'
-			assert.ok(/** @type {Error} */ (e).message.startsWith('effect_update_depth_exceeded'));
-		}
+		}, /effect_update_depth_exceeded/);
+
+		assert.equal(errors.length, 1);
+
+		assert.doesNotThrow(flushSync);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
index d9dee1e2b0..748acab91e 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
@@ -15,6 +15,6 @@
 	{d}
 
 	{#snippet failed()}
-		<p>Error occured</p>
+		<p>Error occurred</p>
 	{/snippet}
 </svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte
new file mode 100644
index 0000000000..cd25ece1b5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	throw new Error('child error');
+</script>
+
+<p>Child content</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js
new file mode 100644
index 0000000000..b5b5f296d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		// When exception is set by onerror, the {#if !exception} block should hide
+		// and only the {#if exception} block should be visible
+		assert.htmlEqual(target.innerHTML, '<p>caught error: child error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte
new file mode 100644
index 0000000000..5116580003
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let exception = $state();
+	const onerror = (e) => {
+		exception = e;
+	};
+</script>
+
+{#if !exception}
+	<p>condition is {String(!exception)}</p>
+	<svelte:boundary {onerror}>
+		<Child />
+	</svelte:boundary>
+{/if}
+
+{#if exception}
+	<p>caught error: {exception.message}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte
new file mode 100644
index 0000000000..3d5770fc61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	// it's important for the test that this isn't an `Error`
+	throw 'child error'
+</script>
+
+<p>
+	boom
+</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js
new file mode 100644
index 0000000000..b5b5f296d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		// When exception is set by onerror, the {#if !exception} block should hide
+		// and only the {#if exception} block should be visible
+		assert.htmlEqual(target.innerHTML, '<p>caught error: child error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte
new file mode 100644
index 0000000000..243d10cf3a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let exception = $state();
+	const onerror = (e) => {
+		exception = e;
+	};
+</script>
+
+{#if !exception}
+	<p>condition is {String(!exception)}</p>
+	<svelte:boundary {onerror}>
+		<Child />
+	</svelte:boundary>
+{/if}
+
+{#if exception}
+	<p>caught error: {exception}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js
new file mode 100644
index 0000000000..feac447536
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+
+		const [, increment] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+
+		assert.equal(p?.textContent, '0');
+
+		increment.click();
+		await tick();
+
+		assert.equal(p?.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte
new file mode 100644
index 0000000000..3623c1df66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from 'svelte';
+
+	class Counter {
+		count = $state(0);
+	}
+
+	let condition = $state(false);
+	let counter = $derived(new Counter());
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		condition = true;
+	}).commit();
+}}>fork</button>
+
+{#if condition}
+	<button onclick={() => {
+		counter.count++;
+	}}>click</button>
+	<p>{counter.count}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js
new file mode 100644
index 0000000000..c5db69f7d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork_btn, _toggle_btn, inc_count_1_btn] = target.querySelectorAll('button');
+		const p = /** @type {HTMLElement} */ (target.querySelector('p'));
+
+		assert.equal(p.textContent, '0');
+
+		// Trigger derived to re-evaluate during fork and switch to tracking count_2
+		flushSync(() => {
+			fork_btn.click();
+		});
+
+		assert.equal(p.textContent, '0');
+
+		flushSync(() => {
+			inc_count_1_btn.click();
+		});
+
+		assert.equal(p.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte
new file mode 100644
index 0000000000..800c82b56b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { fork } from 'svelte';
+
+	let show_count_1 = $state(true);
+	let count_1 = $state(0);
+	let count_2 = $state(0);
+
+	const count = $derived(show_count_1 ? count_1 : count_2);
+</script>
+
+<!-- This if block causes the derived to execute during the fork, switching its dependency
+     away from count_1 and over to count_2. After discard, count_1 should still be tracked. -->
+{#if count}
+{/if}
+
+<button onclick={() => {
+	const f = fork(() => {
+		show_count_1 = !show_count_1;
+	});
+	f.discard();
+}}>fork toggle</button>
+
+<button onclick={() => show_count_1 = !show_count_1}>toggle</button>
+<button onclick={() => count_1++}>increment count 1</button>
+<button onclick={() => count_2++}>increment count 2</button>
+
+<p>{count}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js
new file mode 100644
index 0000000000..fb50ceb9b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// derived is first evaluated in block effect, then discarded
+		flushSync(() => fork.click());
+
+		// should not throw "Cannot convert a Symbol value to a string" due to cached UNINITIALIZED from first fork
+		flushSync(() => fork.click());
+
+		// should not reflect the temporary change to `clicks` inside the fork
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		flushSync(() => increment.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js
new file mode 100644
index 0000000000..21ab140fc0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js
@@ -0,0 +1,38 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// derived is first evaluated in block effect, then discarded
+		flushSync(() => fork.click());
+
+		// should not reflect the temporary change to `clicks` inside the fork
+		// or throw "Cannot convert a Symbol value to a string" due to cached UNINITIALIZED
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		flushSync(() => increment.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js
new file mode 100644
index 0000000000..4827aa99f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// initialize derived by showing it
+		flushSync(() => toggle.click());
+		flushSync(() => toggle.click());
+
+		// increment clicks
+		flushSync(() => increment.click());
+
+		// update derived, but without writing to `derived.v`
+		flushSync(() => fork.click());
+
+		// show derived
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js
new file mode 100644
index 0000000000..bc51795565
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['hydrate'],
+
+	props: {
+		key: '</script><script>throw new Error("pwned")</script>'
+	},
+
+	async test() {
+		// this test will fail when evaluating the `head` script if the vulnerability is present
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte
new file mode 100644
index 0000000000..1327492190
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { hydratable } from "svelte";
+
+	const { key } = $props();
+
+	const value = await hydratable(key, () => Promise.resolve('safe'));
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js
new file mode 100644
index 0000000000..bd0dd06761
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>update</button><p>it rendered</p>',
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['rendering']);
+
+		const btn = target.querySelector('button');
+		flushSync(() => btn?.click());
+
+		// should not re-render
+		assert.deepEqual(logs, ['rendering']);
+		assert.htmlEqual(target.innerHTML, '<button>update</button><p>it rendered</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte
new file mode 100644
index 0000000000..24f7f2d179
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let x = $state(NaN);
+</script>
+
+<button onclick={() => x = NaN}>update</button>
+
+{#key x}
+	{console.log('rendering')}
+	<p>it rendered</p>
+{/key}
diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js
new file mode 100644
index 0000000000..9de60bcb56
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that optgroup with rich HTML content (non-option elements) and dynamic expressions works correctly
+export default test({
+	mode: ['client', 'hydrate'],
+	test({ assert, target }) {
+		const select = /** @type {HTMLSelectElement} */ (target.querySelector('select'));
+		const optgroups = target.querySelectorAll('optgroup');
+		const options = target.querySelectorAll('option');
+		const button = /** @type {HTMLButtonElement} */ (target.querySelector('button'));
+
+		assert.ok(select);
+		assert.equal(optgroups.length, 2);
+		assert.equal(options.length, 4);
+
+		// Check initial option content (rich content inside optgroup)
+		assert.equal(options[0]?.textContent, 'apple apple');
+		assert.equal(options[1]?.textContent, 'banana');
+		assert.equal(options[2]?.textContent, 'carrot carrot');
+		assert.equal(options[3]?.textContent, 'Plain celery');
+
+		// Click button to change dynamic content
+		button.click();
+		flushSync();
+
+		// Check updated option content
+		assert.equal(options[0]?.textContent, 'orange orange');
+		assert.equal(options[2]?.textContent, 'broccoli broccoli');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte
new file mode 100644
index 0000000000..03777a1cfb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let fruit = $state('apple');
+	let vegetable = $state('carrot');
+</script>
+
+<select>
+	<optgroup label="Fruits">
+		<span class="fruits-header">{fruit}</span>
+		<option value="a"><span>{fruit}</span> {fruit}</option>
+		<option value="b">banana</option>
+	</optgroup>
+	<optgroup label="Vegetables">
+		<em class="veggies-header">{vegetable}</em>
+		<option value="c"><em>{vegetable}</em> {vegetable}</option>
+		<option value="d">Plain celery</option>
+	</optgroup>
+</select>
+
+<button onclick={() => { fruit = 'orange'; vegetable = 'broccoli'; }}>Change</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js
new file mode 100644
index 0000000000..3c9e5847cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js
@@ -0,0 +1,37 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that rich HTML content in <option> elements compiles without errors
+// and that the component functions correctly (on browsers that support it)
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		const select = /** @type {HTMLSelectElement} */ (target.querySelector('select'));
+		const p = /** @type {HTMLParagraphElement} */ (target.querySelector('p'));
+		const button = /** @type {HTMLButtonElement} */ (target.querySelector('button'));
+
+		assert.ok(select);
+		assert.ok(p);
+		assert.ok(button);
+		assert.equal(select.value, 'a');
+		assert.equal(p.textContent, 'Selected: a');
+
+		// Verify options exist
+		assert.equal(select.options.length, 3);
+
+		// Change selection
+		select.value = 'b';
+		select.dispatchEvent(new Event('change'));
+		flushSync();
+
+		assert.equal(p.textContent, 'Selected: b');
+
+		// Test reactivity of content within option (only works on browsers that support rich options)
+		// On modern browsers, clicking the button should update the text inside the span
+		button.click();
+		flushSync();
+
+		// The option text content should be updated on browsers that support rich options
+		// For this test, we just verify the component doesn't crash
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte
new file mode 100644
index 0000000000..37351ab058
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let selected = $state('a');
+	let label_a = $state('Option');
+	let label_b = $state('Strong');
+</script>
+
+<select bind:value={selected}>
+	<option value="a"><span>{label_a}</span> A</option>
+	<option value="b"><strong>{label_b}</strong> B</option>
+	<option value="c">Plain C</option>
+</select>
+
+<p>Selected: {selected}</p>
+
+<button onclick={() => label_a = 'Changed'}>Change A</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
index 4462f492fa..2ff2634822 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
@@ -6,31 +6,26 @@ export default test({
 		dev: true
 	},
 
-	html: `<button>items: null</button> <div>x</div> <input type="checkbox" value="1"><input type="checkbox" value="2"><input>`,
-
 	test({ assert, target, warnings }) {
-		const btn = target.querySelector('button');
-		ok(btn);
+		const [button1, button2, button3] = target.querySelectorAll('button');
+		ok(button1);
 
-		flushSync(() => btn.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>items: []</button> <div>x</div> <input type="checkbox" value="1"><input type="checkbox" value="2"><input>`
-		);
+		flushSync(() => button1.click());
+		assert.htmlEqual(button1.innerHTML, `items: []`);
 
-		flushSync(() => btn.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>items: [0]</button> <div>x</div> <input type="checkbox" value="1"><input type="checkbox" value="2"><input>`
-		);
+		flushSync(() => button1.click());
+		assert.htmlEqual(button1.innerHTML, `items: [0]`);
 
 		const input = target.querySelector('input');
 		ok(input);
 		input.checked = true;
 		flushSync(() => input.dispatchEvent(new Event('change', { bubbles: true })));
 
+		flushSync(() => button2.click());
+		flushSync(() => button3.click());
+
 		assert.deepEqual(warnings, [
-			'Assignment to `items` property (main.svelte:9:24) will evaluate to the right-hand side, not the value of `items` following the assignment. This may result in unexpected behaviour.'
+			'Assignment to `items` property (main.svelte:17:24) will evaluate to the right-hand side, not the value of `items` following the assignment. This may result in unexpected behaviour.'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
index a79fe873b7..02320a3128 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
@@ -1,9 +1,17 @@
  <script>
 	import Test from './Test.svelte';
 
+	let { opacity = 0.5 } = $props();
+
 	let entries = $state([]);
 	let object = $state({ items: null, group: [] });
 	let elementFunBind = $state();
+
+	// should omit $.assign via static analysis
+	const fixed = (node) => node.style.opacity = 0.5;
+
+	// should use $.assign, but it should not warn
+	const unknown = (node) => node.style.opacity = opacity;
 </script>
 
 <button onclick={() => (object.items ??= []).push(object.items.length)}>
@@ -23,3 +31,6 @@
 	<input bind:this={() => {}, (e) => (context.element = e)} />
 {/snippet}
 {@render funBind({ set element(e) { elementFunBind = e } })}
+
+<button onclick={(e) => (fixed(e.currentTarget))}>change opacity (fixed)</button>
+<button onclick={(e) => (unknown(e.currentTarget))}>change opacity (unknown)</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte b/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte
new file mode 100644
index 0000000000..437ab3e793
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { text } = $props();
+</script>
+
+<span>{text}</span>
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js b/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js
new file mode 100644
index 0000000000..39d0db6590
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js
@@ -0,0 +1,26 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that components can be used inside <option> elements.
+// This tests two scenarios:
+// 1. A component that wraps the entire <option> element
+// 2. A component used as content inside an <option> element
+//
+// In jsdom (which doesn't support rich options), the HTML content is stripped,
+// so we only verify the component doesn't crash and values work correctly.
+export default test({
+	test({ assert, target }) {
+		const option1 = target.querySelector('option');
+		const button = target.querySelector('button');
+
+		assert.ok(option1);
+
+		assert.equal(option1?.textContent, 'bb');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(option1?.textContent, 'aa');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte
new file mode 100644
index 0000000000..aed1342dfd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Content from './Content.svelte';
+
+	let content = $state('b');
+</script>
+
+
+<!-- Test 2: Option with component as content -->
+<select>
+	<option value="x"><span>{content}</span><Content text={content} /></option>
+</select>
+
+<button onclick={() => content = content === 'a' ? 'b' : 'a'}>
+	Toggle Content
+</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js
new file mode 100644
index 0000000000..27f013d6d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte
new file mode 100644
index 0000000000..70c7d64f18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	{@const xx = test}
+	{#snippet test()}{/snippet}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js
new file mode 100644
index 0000000000..d986ed8cd5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div><div>test</div></div>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte
new file mode 100644
index 0000000000..7f43a1afaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte
@@ -0,0 +1,5 @@
+<div>
+	<svelte:boundary>
+		<div>test</div>
+	</svelte:boundary>
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
index 414a8b0cc2..1bdf3a5a2e 100644
--- a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 
 /**
  * $.component() should not break transition
- * https://github.com/sveltejs/svelte/issues/13645
+ * @see {@link https://github.com/sveltejs/svelte/issues/13645}
  */
 export default test({
 	test({ assert, raf, target }) {
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js
new file mode 100644
index 0000000000..36daefa3b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		// in
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, []);
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+
+		raf.tick(100);
+		assert.deepEqual(logs, ['introstart']);
+
+		raf.tick(200);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		// out
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, ['introstart', 'introend']);
+		raf.tick(201);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		raf.tick(300);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart']);
+
+		raf.tick(400);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart', 'outroend']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte
new file mode 100644
index 0000000000..cd91790c17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	function fade(_) {
+		return {
+			delay: 100,
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
+	}
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<p
+		transition:fade
+		onintrostart={() => console.log('introstart')}
+		onintroend={() => console.log('introend')}
+		onoutrostart={() => console.log('outrostart')}
+		onoutroend={() => console.log('outroend')}
+	>delayed fade</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js
new file mode 100644
index 0000000000..36daefa3b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		// in
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, []);
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+
+		raf.tick(100);
+		assert.deepEqual(logs, ['introstart']);
+
+		raf.tick(200);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		// out
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, ['introstart', 'introend']);
+		raf.tick(201);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		raf.tick(300);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart']);
+
+		raf.tick(400);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart', 'outroend']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte
new file mode 100644
index 0000000000..c7167aa8c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	function fade(node) {
+		return {
+			delay: 100,
+			duration: 100,
+			tick: (t) => node.style.opacity = t
+		};
+	}
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<p
+		transition:fade
+		onintrostart={() => console.log('introstart')}
+		onintroend={() => console.log('introend')}
+		onoutrostart={() => console.log('outrostart')}
+		onoutroend={() => console.log('outroend')}
+	>delayed fade</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte
new file mode 100644
index 0000000000..82db611c12
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte
@@ -0,0 +1,2 @@
+<div foo=bar></div>
+<div foo='bar baz'></div>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte
new file mode 100644
index 0000000000..18a4463ce1
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte
@@ -0,0 +1,6 @@
+<ul><li><li></ul>
+<dl><dt><dd><dd></dl>
+<p><p><div></div>
+<ruby><rp><rt><rt></ruby>
+<select><option><optgroup><optgroup></select>
+<table><thead><tbody><tfoot><tbody><tr><td><th></tr><tr></table>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte
new file mode 100644
index 0000000000..3d2fc88d10
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte
@@ -0,0 +1 @@
+<input disabled hidden>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte
new file mode 100644
index 0000000000..8dd87ce81e
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte
@@ -0,0 +1 @@
+{#each [1,2] as i}{i}{/each}
diff --git a/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js
new file mode 100644
index 0000000000..52dddb4ad7
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `<div>div</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte
new file mode 100644
index 0000000000..27a4378d0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let elem = $state();
+	let nodeName = $derived(elem?.nodeName);
+</script>
+<div bind:this={elem}>{nodeName}</div>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js b/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte
new file mode 100644
index 0000000000..08ea2838b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte
@@ -0,0 +1,15 @@
+<area alt="">
+<base>
+<br>
+<col>
+<embed>
+<hr>
+<img alt="">
+<input>
+<keygen>
+<link>
+<meta>
+<param>
+<source>
+<track>
+<wbr>
diff --git a/packages/svelte/tests/runtime-xhtml/test.ts b/packages/svelte/tests/runtime-xhtml/test.ts
new file mode 100644
index 0000000000..416300dc58
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/test.ts
@@ -0,0 +1,9 @@
+// @vitest-environment vitest-xhtml-environment.ts
+
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js
new file mode 100644
index 0000000000..575844faf6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	error: 'missing_context'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte
new file mode 100644
index 0000000000..c52ad927c7
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte
@@ -0,0 +1,9 @@
+<script module>
+	import { createContext } from 'svelte';
+
+	const [get] = createContext();
+</script>
+
+<script>
+	get();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js
new file mode 100644
index 0000000000..03626fc37b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { hash: true, nonce: 'test-nonce' },
+	error: 'invalid_csp'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html
new file mode 100644
index 0000000000..fb3c95f51f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html
@@ -0,0 +1,12 @@
+<script nonce="test-nonce">
+{
+	const r = (v) => Promise.resolve(v);
+	const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js
new file mode 100644
index 0000000000..fe28087d86
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { hash: true },
+	script_hashes: ['sha256-J0xwNm40i0NVEdHYeMRThG7y90X+P/I1ElZGnpQ0AbU=']
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html
new file mode 100644
index 0000000000..56319255d6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html
@@ -0,0 +1,12 @@
+<script>
+{
+	const r = (v) => Promise.resolve(v);
+				const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js
new file mode 100644
index 0000000000..320c0f67f8
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { nonce: 'test-nonce' }
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html
new file mode 100644
index 0000000000..fb3c95f51f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html
@@ -0,0 +1,12 @@
+<script nonce="test-nonce">
+{
+	const r = (v) => Promise.resolve(v);
+	const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html
new file mode 100644
index 0000000000..d87d3602f8
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html
@@ -0,0 +1 @@
+<h1>Test</h1>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte
new file mode 100644
index 0000000000..ee6dabc9aa
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let Component = $state();
+</script>
+
+<h1>Test</h1>
+<Component />
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte
index 358488c3ac..64d30b2a7f 100644
--- a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
     import { hydratable } from 'svelte';
 
-    hydratable('key', () => Promise.resolve({
+    const a = await hydratable('key', () => Promise.resolve({
         nested: Promise.resolve({
             one: Promise.resolve(1),
         }),
         two: Promise.resolve(2),
     }));
-    hydratable('key', () => Promise.resolve({
+    const b = await hydratable('key', () => Promise.resolve({
         nested: Promise.resolve({
             one: Promise.resolve(2),
         }),
         two: Promise.resolve(2),
     }));
-</script>
\ No newline at end of file
+</script>
+
+<p>{await (await (a.nested)).one}</p>
+<p>{await a.two}</p>
+<p>{await (await (b.nested)).one}</p>
+<p>{await b.two}</p>
diff --git a/packages/svelte/tests/server-side-rendering/test.ts b/packages/svelte/tests/server-side-rendering/test.ts
index 4b33685608..ca98fdd9aa 100644
--- a/packages/svelte/tests/server-side-rendering/test.ts
+++ b/packages/svelte/tests/server-side-rendering/test.ts
@@ -12,6 +12,7 @@ import { assert_html_equal_with_options } from '../html_equal.js';
 import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
 import { seen } from '../../src/internal/server/dev.js';
+import type { SyncRenderOutput } from '#server';
 
 interface SSRTest extends BaseTest {
 	mode?: ('sync' | 'async')[];
@@ -21,6 +22,8 @@ interface SSRTest extends BaseTest {
 	id_prefix?: string;
 	withoutNormalizeHtml?: boolean;
 	error?: string;
+	csp?: { nonce: string } | { hash: true };
+	script_hashes?: string[];
 }
 
 // TODO remove this shim when we can
@@ -74,12 +77,18 @@ const { test, run } = suite_with_variants<SSRTest, 'sync' | 'async', CompileOpti
 
 		let rendered;
 		let errored = false;
+		let body: SyncRenderOutput['body'];
+		let head: SyncRenderOutput['head'];
+		let hashes: SyncRenderOutput['hashes'];
 		try {
 			const render_result = render(Component, {
 				props: config.props || {},
-				idPrefix: config.id_prefix
+				idPrefix: config.id_prefix,
+				csp: config.csp
 			});
 			rendered = is_async ? await render_result : render_result;
+			// we need to access these inside the try-catch otherwise errors in the script tag are not caught
+			({ body, head, hashes } = rendered);
 		} catch (error) {
 			errored = true;
 			if (config.error) {
@@ -94,8 +103,6 @@ const { test, run } = suite_with_variants<SSRTest, 'sync' | 'async', CompileOpti
 			assert.fail('Expected an error to be thrown, but rendering succeeded.');
 		}
 
-		const { body, head } = rendered;
-
 		fs.writeFileSync(
 			`${test_dir}/_output/${is_async ? 'async_rendered.html' : 'rendered.html'}`,
 			body
@@ -140,6 +147,10 @@ const { test, run } = suite_with_variants<SSRTest, 'sync' | 'async', CompileOpti
 				}
 			}
 		}
+
+		if (config.script_hashes !== undefined) {
+			assert.deepEqual(hashes.script, config.script_hashes);
+		}
 	}
 );
 
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 23c4bb42f9..5486ccdb45 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -21,7 +21,7 @@ import { disable_async_mode_flag, enable_async_mode_flag } from '../../src/inter
 
 /**
  * @param runes runes mode
- * @param fn A function that returns a function because we first need to setup all the signals
+ * @param fn A function that returns a function because we first need to set up all the signals
  * 			 and then execute the test in order to simulate a real component
  */
 function run_test(runes: boolean, fn: (runes: boolean) => () => void) {
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_config.js b/packages/svelte/tests/snapshot/samples/async-const/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..8bd7e97780
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
@@ -0,0 +1,35 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root_1 = $.from_html(`<p> </p>`);
+
+export default function Async_const($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			let a;
+			let b;
+
+			var promises = $.run([
+				async () => a = (await $.save($.async_derived(async () => (await $.save(1))())))(),
+				() => b = $.derived(() => $.get(a) + 1)
+			]);
+
+			var p = root_1();
+			var text = $.child(p, true);
+
+			$.reset(p);
+			$.template_effect(() => $.set_text(text, $.get(b)), void 0, void 0, [promises[1]]);
+			$.append($$anchor, p);
+		};
+
+		$.if(node, ($$render) => {
+			if (true) $$render(consequent);
+		});
+	}
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..03bbc5ba88
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js
@@ -0,0 +1,29 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_const($$renderer) {
+	if (true) {
+		$$renderer.push('<!--[-->');
+
+		let a;
+		let b;
+
+		var promises = $$renderer.run([
+			async () => {
+				a = (await $.save(1))();
+			},
+
+			() => {
+				b = a + 1;
+			}
+		]);
+
+		$$renderer.push(`<p>`);
+		$$renderer.async([promises[1]], ($$renderer) => $$renderer.push(() => $.escape(b)));
+		$$renderer.push(`</p>`);
+	} else {
+		$$renderer.push('<!--[!-->');
+	}
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-const/index.svelte b/packages/svelte/tests/snapshot/samples/async-const/index.svelte
new file mode 100644
index 0000000000..cf1bb40d88
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/index.svelte
@@ -0,0 +1,6 @@
+{#if true}
+	{@const a = await 1}
+	{@const b = a + 1}
+
+	<p>{b}</p>
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
index 7249fd6e4f..b331875d04 100644
--- a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/server';
 
 export default function Async_each_fallback_hoisting($$renderer) {
-	$$renderer.async_block([], async ($$renderer) => {
+	$$renderer.child_block(async ($$renderer) => {
 		const each_array = $.ensure_array_like((await $.save(Promise.resolve([])))());
 
 		if (each_array.length !== 0) {
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
index 43fe9414eb..86948b4a3a 100644
--- a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
@@ -8,7 +8,7 @@ export default function Async_each_hoisting($$renderer) {
 
 	$$renderer.push(`<!--[-->`);
 
-	$$renderer.async_block([], async ($$renderer) => {
+	$$renderer.child_block(async ($$renderer) => {
 		const each_array = $.ensure_array_like((await $.save(Promise.resolve([first, second, third])))());
 
 		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
index 1e7330429a..c69c038973 100644
--- a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/server';
 
 export default function Async_if_alternate_hoisting($$renderer) {
-	$$renderer.async_block([], async ($$renderer) => {
+	$$renderer.child_block(async ($$renderer) => {
 		if ((await $.save(Promise.resolve(false)))()) {
 			$$renderer.push('<!--[-->');
 			$$renderer.push(async () => $.escape(await Promise.reject('no no no')));
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..b55e3010b8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
@@ -0,0 +1,201 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<!> <!> <!> <!> <!>`, 1);
+
+export default function Async_if_chain($$anchor) {
+	function complex1() {
+		return 1;
+	}
+
+	let foo = true;
+	var blocking;
+	var $$promises = $.run([async () => blocking = await $.async_derived(() => foo)]);
+	var fragment = root();
+	var node = $.first_child(fragment);
+
+	$.async(node, [$$promises[0]], void 0, (node) => {
+		var consequent = ($$anchor) => {
+			var text = $.text('foo');
+
+			$.append($$anchor, text);
+		};
+
+		var consequent_1 = ($$anchor) => {
+			var text_1 = $.text('bar');
+
+			$.append($$anchor, text_1);
+		};
+
+		var alternate = ($$anchor) => {
+			var text_2 = $.text('else');
+
+			$.append($$anchor, text_2);
+		};
+
+		$.if(node, ($$render) => {
+			if (foo) $$render(consequent); else if (bar) $$render(consequent_1, 1); else $$render(alternate, false);
+		});
+	});
+
+	var node_1 = $.sibling(node, 2);
+
+	$.async(node_1, [$$promises[0]], [() => foo], (node_1, $$condition) => {
+		var consequent_2 = ($$anchor) => {
+			var text_3 = $.text('foo');
+
+			$.append($$anchor, text_3);
+		};
+
+		var consequent_3 = ($$anchor) => {
+			var text_4 = $.text('bar');
+
+			$.append($$anchor, text_4);
+		};
+
+		var alternate_2 = ($$anchor) => {
+			var fragment_1 = $.comment();
+			var node_2 = $.first_child(fragment_1);
+
+			$.async(node_2, [], [() => baz], (node_2, $$condition) => {
+				var consequent_4 = ($$anchor) => {
+					var text_5 = $.text('baz');
+
+					$.append($$anchor, text_5);
+				};
+
+				var alternate_1 = ($$anchor) => {
+					var text_6 = $.text('else');
+
+					$.append($$anchor, text_6);
+				};
+
+				$.if(
+					node_2,
+					($$render) => {
+						if ($.get($$condition)) $$render(consequent_4); else $$render(alternate_1, false);
+					},
+					true
+				);
+			});
+
+			$.append($$anchor, fragment_1);
+		};
+
+		$.if(node_1, ($$render) => {
+			if ($.get($$condition)) $$render(consequent_2); else if (bar) $$render(consequent_3, 1); else $$render(alternate_2, false);
+		});
+	});
+
+	var node_3 = $.sibling(node_1, 2);
+
+	$.async(node_3, [$$promises[0]], [async () => (await $.save(foo))() > 10], (node_3, $$condition) => {
+		var consequent_5 = ($$anchor) => {
+			var text_7 = $.text('foo');
+
+			$.append($$anchor, text_7);
+		};
+
+		var consequent_6 = ($$anchor) => {
+			var text_8 = $.text('bar');
+
+			$.append($$anchor, text_8);
+		};
+
+		var alternate_4 = ($$anchor) => {
+			var fragment_2 = $.comment();
+			var node_4 = $.first_child(fragment_2);
+
+			$.async(node_4, [$$promises[0]], [async () => (await $.save(foo))() > 5], (node_4, $$condition) => {
+				var consequent_7 = ($$anchor) => {
+					var text_9 = $.text('baz');
+
+					$.append($$anchor, text_9);
+				};
+
+				var alternate_3 = ($$anchor) => {
+					var text_10 = $.text('else');
+
+					$.append($$anchor, text_10);
+				};
+
+				$.if(
+					node_4,
+					($$render) => {
+						if ($.get($$condition)) $$render(consequent_7); else $$render(alternate_3, false);
+					},
+					true
+				);
+			});
+
+			$.append($$anchor, fragment_2);
+		};
+
+		$.if(node_3, ($$render) => {
+			if ($.get($$condition)) $$render(consequent_5); else if (bar) $$render(consequent_6, 1); else $$render(alternate_4, false);
+		});
+	});
+
+	var node_5 = $.sibling(node_3, 2);
+
+	{
+		var consequent_8 = ($$anchor) => {
+			var text_11 = $.text('foo');
+
+			$.append($$anchor, text_11);
+		};
+
+		var consequent_9 = ($$anchor) => {
+			var text_12 = $.text('bar');
+
+			$.append($$anchor, text_12);
+		};
+
+		var consequent_10 = ($$anchor) => {
+			var text_13 = $.text('baz');
+
+			$.append($$anchor, text_13);
+		};
+
+		var d = $.derived(() => complex1() * complex2 > 100);
+
+		var alternate_5 = ($$anchor) => {
+			var text_14 = $.text('else');
+
+			$.append($$anchor, text_14);
+		};
+
+		$.if(node_5, ($$render) => {
+			if (simple1) $$render(consequent_8); else if (simple2 > 10) $$render(consequent_9, 1); else if ($.get(d)) $$render(consequent_10, 2); else $$render(alternate_5, false);
+		});
+	}
+
+	var node_6 = $.sibling(node_5, 2);
+
+	$.async(node_6, [$$promises[0]], void 0, (node_6) => {
+		var consequent_11 = ($$anchor) => {
+			var text_15 = $.text('foo');
+
+			$.append($$anchor, text_15);
+		};
+
+		var consequent_12 = ($$anchor) => {
+			var text_16 = $.text('bar');
+
+			$.append($$anchor, text_16);
+		};
+
+		var alternate_6 = ($$anchor) => {
+			var text_17 = $.text('else');
+
+			$.append($$anchor, text_17);
+		};
+
+		$.if(node_6, ($$render) => {
+			if ($.get(blocking) > 10) $$render(consequent_11); else if ($.get(blocking) > 5) $$render(consequent_12, 1); else $$render(alternate_6, false);
+		});
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..91315edb94
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js
@@ -0,0 +1,110 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_if_chain($$renderer) {
+	function complex1() {
+		return 1;
+	}
+
+	let foo = true;
+	var blocking;
+	var $$promises = $$renderer.run([async () => blocking = await foo]);
+
+	$$renderer.async_block([$$promises[0]], ($$renderer) => {
+		if (foo) {
+			$$renderer.push('<!--[-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[!-->');
+			$$renderer.push(`else`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+		if ((await $.save(foo))()) {
+			$$renderer.push('<!--[-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[!-->');
+
+			$$renderer.child_block(async ($$renderer) => {
+				if ((await $.save(baz))()) {
+					$$renderer.push('<!--[-->');
+					$$renderer.push(`baz`);
+				} else {
+					$$renderer.push('<!--[!-->');
+					$$renderer.push(`else`);
+				}
+			});
+
+			$$renderer.push(`<!--]-->`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+		if ((await $.save(foo))() > 10) {
+			$$renderer.push('<!--[-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[!-->');
+
+			$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+				if ((await $.save(foo))() > 5) {
+					$$renderer.push('<!--[-->');
+					$$renderer.push(`baz`);
+				} else {
+					$$renderer.push('<!--[!-->');
+					$$renderer.push(`else`);
+				}
+			});
+
+			$$renderer.push(`<!--]-->`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	if (simple1) {
+		$$renderer.push('<!--[-->');
+		$$renderer.push(`foo`);
+	} else if (simple2 > 10) {
+		$$renderer.push('<!--[1-->');
+		$$renderer.push(`bar`);
+	} else if (complex1() * complex2 > 100) {
+		$$renderer.push('<!--[2-->');
+		$$renderer.push(`baz`);
+	} else {
+		$$renderer.push('<!--[!-->');
+		$$renderer.push(`else`);
+	}
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], ($$renderer) => {
+		if (blocking > 10) {
+			$$renderer.push('<!--[-->');
+			$$renderer.push(`foo`);
+		} else if (blocking > 5) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[!-->');
+			$$renderer.push(`else`);
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte b/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte
new file mode 100644
index 0000000000..1f216af0b0
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte
@@ -0,0 +1,59 @@
+<script>
+  function complex1() {
+    return 1;
+  }
+
+  let foo = $state(true);
+  let blocking = $derived(await foo);
+</script>
+
+<!-- simple chain - should have no nested $.if() -->
+{#if foo}
+  foo
+{:else if bar}
+  bar
+{:else}
+  else
+{/if}
+
+<!-- simple chain with await expressions - should have $.if() at each await expression -->
+{#if await foo}
+  foo
+{:else if bar}
+  bar
+{:else if await baz}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with await expressions #2 - should have $.if() at each await expression (ideally we can detect that await foo is unnecessary to await multiple times and this is one $.if()) -->
+{#if await foo > 10}
+  foo
+{:else if bar}
+  bar
+{:else if await foo > 5}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with some expressions that cause a $.derived - should be one $.if() -->
+{#if simple1}
+  foo
+{:else if simple2 > 10}
+  bar
+{:else if complex1() * complex2 > 100}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with blocking expressions - should be one $.if() -->
+{#if blocking > 10}
+  foo
+{:else if blocking > 5}
+  bar
+{:else}
+  else
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
index 1ca24cf81a..1355ba34f0 100644
--- a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/server';
 
 export default function Async_if_hoisting($$renderer) {
-	$$renderer.async_block([], async ($$renderer) => {
+	$$renderer.child_block(async ($$renderer) => {
 		if ((await $.save(Promise.resolve(true)))()) {
 			$$renderer.push('<!--[-->');
 			$$renderer.push(async () => $.escape(await Promise.resolve('yes yes yes')));
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
index 7d1fe4ec67..a8b1a43495 100644
--- a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
@@ -10,7 +10,6 @@ export default function Async_in_derived($$anchor, $$props) {
 	var $$promises = $.run([
 		async () => yes1 = await $.async_derived(() => 1),
 		async () => yes2 = await $.async_derived(async () => foo(await 1)),
-
 		() => no1 = $.derived(async () => {
 			return await 1;
 		}),
@@ -33,7 +32,6 @@ export default function Async_in_derived($$anchor, $$props) {
 			var promises = $.run([
 				async () => yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))(),
 				async () => yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))(),
-
 				() => no1 = $.derived(() => (async () => {
 					return await 1;
 				})()),
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
index 1fd184fa79..58358b3ded 100644
--- a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
@@ -8,7 +8,6 @@ export default function Async_in_derived($$renderer, $$props) {
 		var $$promises = $$renderer.run([
 			async () => yes1 = await 1,
 			async () => yes2 = foo(await 1),
-
 			() => no1 = (async () => {
 				return await 1;
 			})(),
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js
new file mode 100644
index 0000000000..6214e6b429
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		experimental: { async: true },
+		dev: false
+	}
+});
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..e8aa8dfa11
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
@@ -0,0 +1,16 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<p> </p>`);
+
+export default function Async_top_level_inspect_server($$anchor) {
+	var data;
+	var $$promises = $.run([async () => data = await Promise.resolve(42),,]);
+	var p = root();
+	var text = $.child(p, true);
+
+	$.reset(p);
+	$.template_effect(() => $.set_text(text, data), void 0, void 0, [$$promises[1]]);
+	$.append($$anchor, p);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..cff5f2d569
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js
@@ -0,0 +1,11 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_top_level_inspect_server($$renderer) {
+	var data;
+	var $$promises = $$renderer.run([async () => data = await Promise.resolve(42),,]);
+
+	$$renderer.push(`<p>`);
+	$$renderer.async([$$promises[1]], ($$renderer) => $$renderer.push(() => $.escape(data)));
+	$$renderer.push(`</p>`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte
new file mode 100644
index 0000000000..06bb995b1e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte
@@ -0,0 +1,6 @@
+<script>
+	let data = await Promise.resolve(42);
+	$inspect(data);
+</script>
+
+<p>{data}</p>
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
index 218951b836..762a23754c 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
@@ -14,7 +14,6 @@ export default function Function_prop_no_getter($$anchor) {
 		onmousedown: () => $.set(count, $.get(count) + 1),
 		onmouseup,
 		onmouseenter: () => $.set(count, plusOne($.get(count)), true),
-
 		children: ($$anchor, $$slotProps) => {
 			$.next();
 
@@ -23,7 +22,6 @@ export default function Function_prop_no_getter($$anchor) {
 			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
 			$.append($$anchor, text);
 		},
-
 		$$slots: { default: true }
 	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
index 855ae30d21..e2936b7f6e 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
@@ -13,11 +13,9 @@ export default function Function_prop_no_getter($$renderer) {
 		onmousedown: () => count += 1,
 		onmouseup,
 		onmouseenter: () => count = plusOne(count),
-
 		children: ($$renderer) => {
 			$$renderer.push(`<!---->clicks: ${$.escape(count)}`);
 		},
-
 		$$slots: { default: true }
 	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
index d4034dc55d..792d5421e1 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
@@ -6,7 +6,6 @@ var root = $.from_tree(
 	[
 		['h1', null, 'hello'],
 		' ',
-
 		[
 			'div',
 			{ class: 'potato' },
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 1fac1338c5..66d1a5af5a 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -11,11 +11,10 @@ function Hmr($$anchor) {
 }
 
 if (import.meta.hot) {
-	Hmr = $.hmr(Hmr, () => Hmr[$.HMR].source);
+	Hmr = $.hmr(Hmr);
 
 	import.meta.hot.accept((module) => {
-		module.default[$.HMR].source = Hmr[$.HMR].source;
-		$.set(Hmr[$.HMR].source, module.default[$.HMR].original);
+		Hmr[$.HMR].update(module.default);
 	});
 }
 
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte b/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte
new file mode 100644
index 0000000000..89c9c1c111
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte
@@ -0,0 +1 @@
+<option>Component Option</option>
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
new file mode 100644
index 0000000000..a4b18a011b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
@@ -0,0 +1,11 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<option>Component Option</option>`);
+
+export default function Option($$anchor) {
+	var option = root();
+
+	$.append($$anchor, option);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..8f8b115d70
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
@@ -0,0 +1,412 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+import Option from './Option.svelte';
+
+const opt = ($$anchor) => {
+	var option = root_1();
+
+	$.append($$anchor, option);
+};
+
+const option_snippet = ($$anchor) => {
+	var option_1 = root_2();
+
+	$.append($$anchor, option_1);
+};
+
+const option_snippet2 = ($$anchor) => {
+	var option_2 = root_3();
+
+	$.append($$anchor, option_2);
+};
+
+const conditional_option = ($$anchor) => {
+	var option_3 = root_4();
+
+	$.append($$anchor, option_3);
+};
+
+var root_1 = $.from_html(`<option>Snippet</option>`);
+var root_2 = $.from_html(`<option>Rendered</option>`);
+var root_3 = $.from_html(`<option>Rendered in group</option>`);
+var root_4 = $.from_html(`<option>Conditional</option>`);
+var option_content = $.from_html(`<span>Rich</span>`, 1);
+var root_5 = $.from_html(`<option> </option>`);
+var root_6 = $.from_html(`<option>Visible</option>`);
+var root_7 = $.from_html(`<option>Keyed</option>`);
+var select_content = $.from_html(`<!>`, 1);
+var root_8 = $.from_html(`<option> </option>`);
+var option_content_1 = $.from_html(`<strong>Bold</strong>`, 1);
+var root_9 = $.from_html(`<option> </option>`);
+var option_content_2 = $.from_html(`<em>Italic</em> text`, 1);
+var option_content_3 = $.from_html(`<span> </span>`, 1);
+var root_10 = $.from_html(`<option><!></option>`);
+var root_12 = $.from_html(`<option> </option>`);
+var root_13 = $.from_html(`<option>Boundary</option>`);
+var option_content_4 = $.from_html(`<span>Rich in boundary</span>`, 1);
+var root_14 = $.from_html(`<option><!></option>`);
+var select_content_1 = $.from_html(`<!>`, 1);
+var select_content_2 = $.from_html(`<!>`, 1);
+var select_content_3 = $.from_html(`<!>`, 1);
+var optgroup_content = $.from_html(`<!>`, 1);
+var optgroup_content_1 = $.from_html(`<!>`, 1);
+var option_content_5 = $.from_html(`<!>`, 1);
+var select_content_4 = $.from_html(`<!>`, 1);
+var select_content_5 = $.from_html(`<!>`, 1);
+var root = $.from_html(`<select><option><!></option></select> <select></select> <select><!></select> <select><!></select>  <select><!></select> <select></select> <select><optgroup label="Group"><option><!></option></optgroup></select> <select><optgroup label="Group"></optgroup></select> <select><option><!></option></select> <select></select> <select><!></select> <select><!></select> <select><!></select> <select><!></select>  <select><!></select> <select><!></select> <select><optgroup label="Group"><!></optgroup></select>  <select><optgroup label="Group"><!></optgroup></select> <select><option><!></option></select> <select><!></select>  <select><!></select>`, 1);
+
+export default function Select_with_rich_content($$anchor) {
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+	var fragment = root();
+	var select = $.first_child(fragment);
+	var option_4 = $.child(select);
+
+	$.customizable_select(option_4, () => {
+		var anchor = $.child(option_4);
+		var fragment_1 = option_content();
+
+		$.append(anchor, fragment_1);
+	});
+
+	$.reset(select);
+
+	var select_1 = $.sibling(select, 2);
+
+	$.each(select_1, 5, () => items, $.index, ($$anchor, item) => {
+		var option_5 = root_5();
+		var text = $.child(option_5, true);
+
+		$.reset(option_5);
+
+		var option_5_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text, $.get(item));
+
+			if (option_5_value !== (option_5_value = $.get(item))) {
+				option_5.__value = $.get(item);
+			}
+		});
+
+		$.append($$anchor, option_5);
+	});
+
+	$.reset(select_1);
+
+	var select_2 = $.sibling(select_1, 2);
+	var node = $.child(select_2);
+
+	{
+		var consequent = ($$anchor) => {
+			var option_6 = root_6();
+
+			$.append($$anchor, option_6);
+		};
+
+		$.if(node, ($$render) => {
+			if (show) $$render(consequent);
+		});
+	}
+
+	$.reset(select_2);
+
+	var select_3 = $.sibling(select_2, 2);
+	var node_1 = $.child(select_3);
+
+	$.key(node_1, () => items, ($$anchor) => {
+		var option_7 = root_7();
+
+		$.append($$anchor, option_7);
+	});
+
+	$.reset(select_3);
+
+	var select_4 = $.sibling(select_3, 2);
+
+	$.customizable_select(select_4, () => {
+		var anchor_1 = $.child(select_4);
+		var fragment_2 = select_content();
+		var node_2 = $.first_child(fragment_2);
+
+		opt(node_2);
+		$.append(anchor_1, fragment_2);
+	});
+
+	var select_5 = $.sibling(select_4, 2);
+
+	$.each(select_5, 5, () => items, $.index, ($$anchor, item) => {
+		const x = $.derived_safe_equal(() => $.get(item) * 2);
+		var option_8 = root_8();
+		var text_1 = $.child(option_8, true);
+
+		$.reset(option_8);
+
+		var option_8_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text_1, $.get(x));
+
+			if (option_8_value !== (option_8_value = $.get(x))) {
+				option_8.__value = $.get(x);
+			}
+		});
+
+		$.append($$anchor, option_8);
+	});
+
+	$.reset(select_5);
+
+	var select_6 = $.sibling(select_5, 2);
+	var optgroup = $.child(select_6);
+	var option_9 = $.child(optgroup);
+
+	$.customizable_select(option_9, () => {
+		var anchor_2 = $.child(option_9);
+		var fragment_3 = option_content_1();
+
+		$.append(anchor_2, fragment_3);
+	});
+
+	$.reset(optgroup);
+	$.reset(select_6);
+
+	var select_7 = $.sibling(select_6, 2);
+	var optgroup_1 = $.child(select_7);
+
+	$.each(optgroup_1, 5, () => items, $.index, ($$anchor, item) => {
+		var option_10 = root_9();
+		var text_2 = $.child(option_10, true);
+
+		$.reset(option_10);
+
+		var option_10_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text_2, $.get(item));
+
+			if (option_10_value !== (option_10_value = $.get(item))) {
+				option_10.__value = $.get(item);
+			}
+		});
+
+		$.append($$anchor, option_10);
+	});
+
+	$.reset(optgroup_1);
+	$.reset(select_7);
+
+	var select_8 = $.sibling(select_7, 2);
+	var option_11 = $.child(select_8);
+
+	$.customizable_select(option_11, () => {
+		var anchor_3 = $.child(option_11);
+		var fragment_4 = option_content_2();
+
+		$.next();
+		$.append(anchor_3, fragment_4);
+	});
+
+	option_11.value = option_11.__value = 'a';
+	$.reset(select_8);
+
+	var select_9 = $.sibling(select_8, 2);
+
+	$.each(select_9, 5, () => items, $.index, ($$anchor, item) => {
+		var option_12 = root_10();
+
+		$.customizable_select(option_12, () => {
+			var anchor_4 = $.child(option_12);
+			var fragment_5 = option_content_3();
+			var span = $.first_child(fragment_5);
+			var text_3 = $.child(span, true);
+
+			$.reset(span);
+			$.template_effect(() => $.set_text(text_3, $.get(item)));
+			$.append(anchor_4, fragment_5);
+		});
+
+		$.append($$anchor, option_12);
+	});
+
+	$.reset(select_9);
+
+	var select_10 = $.sibling(select_9, 2);
+	var node_3 = $.child(select_10);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			var fragment_6 = $.comment();
+			var node_4 = $.first_child(fragment_6);
+
+			$.each(node_4, 1, () => items, $.index, ($$anchor, item) => {
+				var option_13 = root_12();
+				var text_4 = $.child(option_13, true);
+
+				$.reset(option_13);
+
+				var option_13_value = {};
+
+				$.template_effect(() => {
+					$.set_text(text_4, $.get(item));
+
+					if (option_13_value !== (option_13_value = $.get(item))) {
+						option_13.__value = $.get(item);
+					}
+				});
+
+				$.append($$anchor, option_13);
+			});
+
+			$.append($$anchor, fragment_6);
+		};
+
+		$.if(node_3, ($$render) => {
+			if (show) $$render(consequent_1);
+		});
+	}
+
+	$.reset(select_10);
+
+	var select_11 = $.sibling(select_10, 2);
+	var node_5 = $.child(select_11);
+
+	$.boundary(node_5, {}, ($$anchor) => {
+		var option_14 = root_13();
+
+		$.append($$anchor, option_14);
+	});
+
+	$.reset(select_11);
+
+	var select_12 = $.sibling(select_11, 2);
+	var node_6 = $.child(select_12);
+
+	$.boundary(node_6, {}, ($$anchor) => {
+		var option_15 = root_14();
+
+		$.customizable_select(option_15, () => {
+			var anchor_5 = $.child(option_15);
+			var fragment_7 = option_content_4();
+
+			$.append(anchor_5, fragment_7);
+		});
+
+		$.append($$anchor, option_15);
+	});
+
+	$.reset(select_12);
+
+	var select_13 = $.sibling(select_12, 2);
+
+	$.customizable_select(select_13, () => {
+		var anchor_6 = $.child(select_13);
+		var fragment_8 = select_content_1();
+		var node_7 = $.first_child(fragment_8);
+
+		Option(node_7, {});
+		$.append(anchor_6, fragment_8);
+	});
+
+	var select_14 = $.sibling(select_13, 2);
+
+	$.customizable_select(select_14, () => {
+		var anchor_7 = $.child(select_14);
+		var fragment_9 = select_content_2();
+		var node_8 = $.first_child(fragment_9);
+
+		option_snippet(node_8);
+		$.append(anchor_7, fragment_9);
+	});
+
+	var select_15 = $.sibling(select_14, 2);
+
+	$.customizable_select(select_15, () => {
+		var anchor_8 = $.child(select_15);
+		var fragment_10 = select_content_3();
+		var node_9 = $.first_child(fragment_10);
+
+		$.html(node_9, () => html);
+		$.append(anchor_8, fragment_10);
+	});
+
+	var select_16 = $.sibling(select_15, 2);
+	var optgroup_2 = $.child(select_16);
+
+	$.customizable_select(optgroup_2, () => {
+		var anchor_9 = $.child(optgroup_2);
+		var fragment_11 = optgroup_content();
+		var node_10 = $.first_child(fragment_11);
+
+		Option(node_10, {});
+		$.append(anchor_9, fragment_11);
+	});
+
+	$.reset(select_16);
+
+	var select_17 = $.sibling(select_16, 2);
+	var optgroup_3 = $.child(select_17);
+
+	$.customizable_select(optgroup_3, () => {
+		var anchor_10 = $.child(optgroup_3);
+		var fragment_12 = optgroup_content_1();
+		var node_11 = $.first_child(fragment_12);
+
+		option_snippet2(node_11);
+		$.append(anchor_10, fragment_12);
+	});
+
+	$.reset(select_17);
+
+	var select_18 = $.sibling(select_17, 2);
+	var option_16 = $.child(select_18);
+
+	$.customizable_select(option_16, () => {
+		var anchor_11 = $.child(option_16);
+		var fragment_13 = option_content_5();
+		var node_12 = $.first_child(fragment_13);
+
+		$.html(node_12, () => '<strong>Bold HTML</strong>');
+		$.append(anchor_11, fragment_13);
+	});
+
+	$.reset(select_18);
+
+	var select_19 = $.sibling(select_18, 2);
+
+	$.customizable_select(select_19, () => {
+		var anchor_12 = $.child(select_19);
+		var fragment_14 = select_content_4();
+		var node_13 = $.first_child(fragment_14);
+
+		$.each(node_13, 1, () => items, $.index, ($$anchor, item) => {
+			Option($$anchor, {});
+		});
+
+		$.append(anchor_12, fragment_14);
+	});
+
+	var select_20 = $.sibling(select_19, 2);
+
+	$.customizable_select(select_20, () => {
+		var anchor_13 = $.child(select_20);
+		var fragment_16 = select_content_5();
+		var node_14 = $.first_child(fragment_16);
+
+		{
+			var consequent_2 = ($$anchor) => {
+				conditional_option($$anchor);
+			};
+
+			$.if(node_14, ($$render) => {
+				if (show) $$render(consequent_2);
+			});
+		}
+
+		$.append(anchor_13, fragment_16);
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js
new file mode 100644
index 0000000000..1c76c9493b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js
@@ -0,0 +1,7 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Option($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Component Option`);
+	});
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..acf873ac09
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js
@@ -0,0 +1,233 @@
+import * as $ from 'svelte/internal/server';
+import Option from './Option.svelte';
+
+function opt($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Snippet`);
+	});
+}
+
+function option_snippet($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Rendered`);
+	});
+}
+
+function option_snippet2($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Rendered in group`);
+	});
+}
+
+function conditional_option($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Conditional`);
+	});
+}
+
+export default function Select_with_rich_content($$renderer) {
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	$$renderer.push(`<select>`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`<span>Rich</span>`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array = $.ensure_array_like(items);
+
+	for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+		let item = each_array[$$index];
+
+		$$renderer.option({}, item);
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[-->');
+
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Visible`);
+		});
+	} else {
+		$$renderer.push('<!--[!-->');
+	}
+
+	$$renderer.push(`<!--]--></select> <select><!---->`);
+
+	{
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Keyed`);
+		});
+	}
+
+	$$renderer.push(`<!----></select>  <select>`);
+	opt($$renderer);
+	$$renderer.push(`<!----><!></select> <select><!--[-->`);
+
+	const each_array_1 = $.ensure_array_like(items);
+
+	for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+		let item = each_array_1[$$index_1];
+		const x = item * 2;
+
+		$$renderer.option({}, x);
+	}
+
+	$$renderer.push(`<!--]--></select> <select><optgroup label="Group">`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`<strong>Bold</strong>`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</optgroup></select> <select><optgroup label="Group"><!--[-->`);
+
+	const each_array_2 = $.ensure_array_like(items);
+
+	for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+		let item = each_array_2[$$index_2];
+
+		$$renderer.option({}, item);
+	}
+
+	$$renderer.push(`<!--]--></optgroup></select> <select>`);
+
+	$$renderer.option(
+		{ value: 'a' },
+		($$renderer) => {
+			$$renderer.push(`<em>Italic</em> text`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array_3 = $.ensure_array_like(items);
+
+	for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+		let item = each_array_3[$$index_3];
+
+		$$renderer.option(
+			{},
+			($$renderer) => {
+				$$renderer.push(`<span>${$.escape(item)}</span>`);
+			},
+			void 0,
+			void 0,
+			void 0,
+			void 0,
+			true
+		);
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[-->');
+		$$renderer.push(`<!--[-->`);
+
+		const each_array_4 = $.ensure_array_like(items);
+
+		for (let $$index_4 = 0, $$length = each_array_4.length; $$index_4 < $$length; $$index_4++) {
+			let item = each_array_4[$$index_4];
+
+			$$renderer.option({}, item);
+		}
+
+		$$renderer.push(`<!--]-->`);
+	} else {
+		$$renderer.push('<!--[!-->');
+	}
+
+	$$renderer.push(`<!--]--></select> <select><!--[-->`);
+
+	{
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Boundary`);
+		});
+	}
+
+	$$renderer.push(`<!--]--></select> <select><!--[-->`);
+
+	{
+		$$renderer.option(
+			{},
+			($$renderer) => {
+				$$renderer.push(`<span>Rich in boundary</span>`);
+			},
+			void 0,
+			void 0,
+			void 0,
+			void 0,
+			true
+		);
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+	Option($$renderer, {});
+	$$renderer.push(`<!----><!></select>  <select>`);
+	option_snippet($$renderer);
+	$$renderer.push(`<!----><!></select> <select>${$.html(html)}<!></select> <select><optgroup label="Group">`);
+	Option($$renderer, {});
+	$$renderer.push(`<!----><!></optgroup></select>  <select><optgroup label="Group">`);
+	option_snippet2($$renderer);
+	$$renderer.push(`<!----><!></optgroup></select> <select>`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`${$.html('<strong>Bold HTML</strong>')}`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array_5 = $.ensure_array_like(items);
+
+	for (let $$index_5 = 0, $$length = each_array_5.length; $$index_5 < $$length; $$index_5++) {
+		let item = each_array_5[$$index_5];
+
+		Option($$renderer, {});
+	}
+
+	$$renderer.push(`<!--]--><!></select>  <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[-->');
+		conditional_option($$renderer);
+	} else {
+		$$renderer.push('<!--[!-->');
+	}
+
+	$$renderer.push(`<!--]--><!></select>`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte
new file mode 100644
index 0000000000..0363bf6a96
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte
@@ -0,0 +1,157 @@
+<script>
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	import Option from './Option.svelte';
+</script>
+
+<!-- select with rich option (has span inside) - SHOULD use customizable_select_element -->
+<select>
+	<option><span>Rich</span></option>
+</select>
+
+<!-- select with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<!-- select with if containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		<option>Visible</option>
+	{/if}
+</select>
+
+<!-- select with key containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#key items}
+		<option>Keyed</option>
+	{/key}
+</select>
+
+<!-- select with snippet defined at top level and rendered - should NOT use customizable_select_element -->
+{#snippet opt()}
+	<option>Snippet</option>
+{/snippet}
+<select>
+	{@render opt()}
+</select>
+
+<!-- select with const inside each (should be ignored) - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		{@const x = item * 2}
+		<option>{x}</option>
+	{/each}
+</select>
+
+<!-- optgroup with rich option - SHOULD use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		<option><strong>Bold</strong></option>
+	</optgroup>
+</select>
+
+<!-- optgroup with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	</optgroup>
+</select>
+
+<!-- option with rich content (span) - SHOULD use customizable_select_element -->
+<select>
+	<option value="a"><em>Italic</em> text</option>
+</select>
+
+<!-- nested: select > each > option with rich content - SHOULD use customizable_select_element on option -->
+<select>
+	{#each items as item}
+		<option><span>{item}</span></option>
+	{/each}
+</select>
+
+<!-- nested: select > if > each > plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	{/if}
+</select>
+
+<!-- select with svelte:boundary containing plain options - should NOT use customizable_select_element -->
+<select>
+	<svelte:boundary>
+		<option>Boundary</option>
+	</svelte:boundary>
+</select>
+
+<!-- select with svelte:boundary containing rich options - SHOULD use customizable_select_element on option -->
+<select>
+	<svelte:boundary>
+		<option><span>Rich in boundary</span></option>
+	</svelte:boundary>
+</select>
+
+<!-- select with Component - SHOULD be treated as rich content -->
+<select>
+	<Option />
+</select>
+
+<!-- select with @render snippet - SHOULD be treated as rich content -->
+{#snippet option_snippet()}
+	<option>Rendered</option>
+{/snippet}
+<select>
+	{@render option_snippet()}
+</select>
+
+<!-- select with @html - SHOULD be treated as rich content -->
+<select>
+	{@html html}
+</select>
+
+<!-- optgroup with Component - SHOULD be treated as rich content -->
+<select>
+	<optgroup label="Group">
+		<Option />
+	</optgroup>
+</select>
+
+<!-- optgroup with @render - SHOULD be treated as rich content -->
+{#snippet option_snippet2()}
+	<option>Rendered in group</option>
+{/snippet}
+<select>
+	<optgroup label="Group">
+		{@render option_snippet2()}
+	</optgroup>
+</select>
+
+<!-- option with @html inside - SHOULD use customizable_select_element -->
+<select>
+	<option>{@html '<strong>Bold HTML</strong>'}</option>
+</select>
+
+<!-- each block inside select with Component - SHOULD be treated as rich -->
+<select>
+	{#each items as item}
+		<Option />
+	{/each}
+</select>
+
+<!-- if block inside select with @render - SHOULD be treated as rich -->
+{#snippet conditional_option()}
+	<option>Conditional</option>
+{/snippet}
+<select>
+	{#if show}
+		{@render conditional_option()}
+	{/if}
+</select>
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 7a9f6193d7..b1babb514c 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,7 +3,7 @@ import * as $ from 'svelte/internal/server';
 export default function Skip_static_subtree($$renderer, $$props) {
 	let { title, content } = $$props;
 
-	$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select>`);
+	$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus=""/></div> <div><source muted=""/></div> <select>`);
 
 	$$renderer.option({ value: 'a' }, ($$renderer) => {
 		$$renderer.push(`a`);
diff --git a/packages/svelte/tests/sourcemaps/test.ts b/packages/svelte/tests/sourcemaps/test.ts
index c654258b34..6749483079 100644
--- a/packages/svelte/tests/sourcemaps/test.ts
+++ b/packages/svelte/tests/sourcemaps/test.ts
@@ -8,9 +8,9 @@ import { decode } from '@jridgewell/sourcemap-codec';
 type SourceMapEntry =
 	| string
 	| {
-			/** If not the first occurence, but the nth should be found */
+			/** If not the first occurrence, but the nth should be found */
 			idxOriginal?: number;
-			/** If not the first occurence, but the nth should be found */
+			/** If not the first occurrence, but the nth should be found */
 			idxGenerated?: number;
 			/** The original string to find */
 			str: string;
@@ -96,6 +96,20 @@ const { test, run } = suite<SourcemapTest>(async (config, cwd) => {
 
 		const decoded = decode(map.mappings);
 
+		/*
+		Decoded sourcemap mappings contain absolute line/column numbers.
+		Negative values are invalid and can cause errors in downstream processing
+		*/
+		for (let l = 0; l < decoded.length; l++) {
+			for (let m of decoded[l]) {
+				if (m.some((i) => i < 0)) {
+					throw new Error(
+						`Invalid mapping with negative value ${JSON.stringify(m)} at line ${l} of the decoded mappings of ${info} sourcemap\n${JSON.stringify(map)}`
+					);
+				}
+			}
+		}
+
 		try {
 			for (let entry of entries) {
 				entry = typeof entry === 'string' ? { str: entry } : entry;
diff --git a/packages/svelte/tests/types/events.ts b/packages/svelte/tests/types/events.ts
index 77891952be..a334cb5493 100644
--- a/packages/svelte/tests/types/events.ts
+++ b/packages/svelte/tests/types/events.ts
@@ -8,6 +8,8 @@ on(window, 'click', (e) => e.button);
 
 on(document, 'click', (e) => e.button);
 
+on(document.createElement('input'), 'input', (e) => e.currentTarget.value);
+
 on(
 	document.body,
 	'clidck',
diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
index 463889dc4f..023ca920e9 100644
--- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
@@ -14,3 +14,14 @@
 <button>Click me</button>
 <a href="/#">Link text</a>
 <a href="/#"><img src="./icon.svg" alt="Link text"></a>
+
+<select>
+	<!-- valid if button contains <selectedcontent> -->
+	<button>
+		<selectedcontent></selectedcontent>
+	</button>
+
+	<option>one</option>
+	<option>two</option>
+	<option>three</option>
+</select>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
index e5db8719b0..edfa3eeada 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
@@ -69,6 +69,13 @@
 <li role="menuitem"></li>
 <li role="row"></li>
 <li role="treeitem" aria-selected={false}></li>
+<!-- menu -->
+<menu role="menu"></menu>
+<menu role="menubar"></menu>
+<menu role="radiogroup"></menu>
+<menu role="tablist"></menu>
+<menu role="tree"></menu>
+<menu role="treegrid"></menu>
 
 <!-- VALID: elements assigned an interactive role. -->
 <div role="button"></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
index 2ccd765aa2..9e06ebe420 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
@@ -22,7 +22,7 @@
 <!-- <li role="listitem" /> allowed since CSS list-style none removes semantic meaning and role brings it back -->
 <link role="link" />
 <main role="main"></main>
-<menu role="list"></menu>
+<!-- <menu role="list" /> allowed, same as ul/ol above -->
 <nav role="navigation"></nav>
 <!-- <ol role="list" /> allowed, see comment above -->
 <optgroup role="group"></optgroup>
@@ -44,5 +44,5 @@
 <footer role="contentinfo"></footer>
 
 <!-- Allowed -->
-<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<!-- menu has same interactive role exceptions as ul/ol -->
 <menu role="menu"></menu>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
index 861f000aef..e041037d71 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -275,18 +275,6 @@
 			"line": 24
 		}
 	},
-	{
-		"code": "a11y_no_redundant_roles",
-		"end": {
-			"column": 17,
-			"line": 25
-		},
-		"message": "Redundant role 'list'",
-		"start": {
-			"column": 6,
-			"line": 25
-		}
-	},
 	{
 		"code": "a11y_no_redundant_roles",
 		"end": {
diff --git a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
index ee7ed4f084..8829d784c8 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
@@ -17,3 +17,6 @@
 <div on:keydown={() => {}}></div>
 <!-- svelte-ignore a11y_missing_attribute -->
 <a on:mousedown={() => {}} on:mouseup={() => {}} on:copy={() => {}}>link</a>
+<div on:pointerdown={() => {}}></div>
+<div on:pointerenter={() => {}}></div>
+<div on:touchstart={() => {}}></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
index ab4b58a839..41325a8756 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
@@ -22,5 +22,41 @@
 			"column": 0,
 			"line": 19
 		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 37,
+			"line": 20
+		},
+		"message": "`<div>` with a pointerdown handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 20
+		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 38,
+			"line": 21
+		},
+		"message": "`<div>` with a pointerenter handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 21
+		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 36,
+			"line": 22
+		},
+		"message": "`<div>` with a touchstart handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 22
+		}
 	}
 ]
diff --git a/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte
new file mode 100644
index 0000000000..6fafa0a10c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte
@@ -0,0 +1,3 @@
+<button interestfor="my-hint">
+	<div id="my-hint" popover="hint">hello</div>
+</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json b/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json
new file mode 100644
index 0000000000..f5fd09c89d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "a11y_consider_explicit_label",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
+		"start": {
+			"line": 1,
+			"column": 0
+		},
+		"end": {
+			"line": 3,
+			"column": 9
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json b/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
index 514e5d0561..f7f5803e74 100644
--- a/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "const_tag_invalid_placement",
-		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`",
+		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`",
 		"start": {
 			"line": 5,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json b/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
index 6b968f7eda..d008c6ce4c 100644
--- a/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "const_tag_invalid_placement",
-		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`",
+		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`",
 		"start": {
 			"line": 7,
 			"column": 4
diff --git a/packages/svelte/tests/validator/samples/tag-non-string/errors.json b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
index 71f8df4d00..5473e18b7d 100644
--- a/packages/svelte/tests/validator/samples/tag-non-string/errors.json
+++ b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_customelement",
-		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
+		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 53b9a3d1ae..bdbc459c4a 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -888,6 +888,12 @@ declare module 'svelte/compiler' {
 		modern?: false;
 		loose?: boolean;
 	} | undefined): Record<string, any>;
+	/**
+	 * The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
+	 *
+	 * @param source The CSS source code
+	 * */
+	export function parseCss(source: string): Omit<AST.CSS.StyleSheet, "attributes" | "content">;
 	/**
 	 * @deprecated Replace this with `import { walk } from 'estree-walker'`
 	 * */
@@ -1232,7 +1238,7 @@ declare module 'svelte/compiler' {
 			css?: 'injected';
 			customElement?: {
 				tag?: string;
-				shadow?: 'open' | 'none';
+				shadow?: 'open' | 'none' | ObjectExpression | undefined;
 				props?: Record<
 					string,
 					{
@@ -2557,6 +2563,7 @@ declare module 'svelte/server' {
 						props?: NoInfer<Props>;
 						context?: Map<any, any>;
 						idPrefix?: string;
+						csp?: Csp;
 					}
 				]
 			: [
@@ -2565,9 +2572,14 @@ declare module 'svelte/server' {
 						props: NoInfer<Props>;
 						context?: Map<any, any>;
 						idPrefix?: string;
+						csp?: Csp;
 					}
 				]
 	): RenderOutput;
+	type Csp = { nonce?: string; hash?: boolean };
+
+	type Sha256Source = `sha256-${string}`;
+
 	interface SyncRenderOutput {
 		/** HTML that goes into the `<head>` */
 		head: string;
@@ -2575,6 +2587,9 @@ declare module 'svelte/server' {
 		html: string;
 		/** HTML that goes somewhere into the `<body>` */
 		body: string;
+		hashes: {
+			script: Sha256Source[];
+		};
 	}
 
 	type RenderOutput = SyncRenderOutput & PromiseLike<SyncRenderOutput>;
@@ -2805,7 +2820,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof WindowEventMap>(
 		window: Window,
 		type: Type,
-		handler: (this: Window, event: WindowEventMap[Type]) => any,
+		handler: (this: Window, event: WindowEventMap[Type] & { currentTarget: Window }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2816,7 +2831,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof DocumentEventMap>(
 		document: Document,
 		type: Type,
-		handler: (this: Document, event: DocumentEventMap[Type]) => any,
+		handler: (this: Document, event: DocumentEventMap[Type] & { currentTarget: Document }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2827,7 +2842,7 @@ declare module 'svelte/events' {
 	export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+		handler: (this: Element, event: HTMLElementEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2838,7 +2853,7 @@ declare module 'svelte/events' {
 	export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+		handler: (this: Element, event: MediaQueryListEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -3177,7 +3192,7 @@ declare module 'svelte/types/compiler/interfaces' {
  * let count = $state(0);
  * ```
  *
- * https://svelte.dev/docs/svelte/$state
+ * @see {@link https://svelte.dev/docs/svelte/$state Documentation}
  *
  * @param initial The initial value
  */
@@ -3287,7 +3302,7 @@ declare namespace $state {
 	 * </button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.raw
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.raw Documentation}
 	 *
 	 * @param initial The initial value
 	 */
@@ -3308,7 +3323,7 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.snapshot
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation}
 	 *
 	 * @param state The value to snapshot
 	 */
@@ -3334,6 +3349,9 @@ declare namespace $state {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3345,7 +3363,7 @@ declare namespace $state {
  * let double = $derived(count * 2);
  * ```
  *
- * https://svelte.dev/docs/svelte/$derived
+ * @see {@link https://svelte.dev/docs/svelte/$derived Documentation}
  *
  * @param expression The derived state expression
  */
@@ -3367,7 +3385,7 @@ declare namespace $derived {
 	 * });
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$derived#$derived.by
+	 * @see {@link https://svelte.dev/docs/svelte/$derived#$derived.by Documentation}
 	 */
 	export function by<T>(fn: () => T): T;
 
@@ -3391,6 +3409,9 @@ declare namespace $derived {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3406,7 +3427,7 @@ declare namespace $derived {
  *
  * Does not run during server-side rendering.
  *
- * https://svelte.dev/docs/svelte/$effect
+ * @see {@link https://svelte.dev/docs/svelte/$effect Documentation}
  * @param fn The function to execute
  */
 declare function $effect(fn: () => void | (() => void)): void;
@@ -3425,7 +3446,7 @@ declare namespace $effect {
 	 *
 	 * Does not run during server-side rendering.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pre Documentation}
 	 * @param fn The function to execute
 	 */
 	export function pre(fn: () => void | (() => void)): void;
@@ -3433,7 +3454,7 @@ declare namespace $effect {
 	/**
 	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pending Documentation}
 	 */
 	export function pending(): number;
 
@@ -3455,7 +3476,7 @@ declare namespace $effect {
 	 *
 	 * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.tracking
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.tracking Documentation}
 	 */
 	export function tracking(): boolean;
 
@@ -3483,7 +3504,7 @@ declare namespace $effect {
 	 * <button onclick={() => cleanup()}>cleanup</button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.root
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.root Documentation}
 	 */
 	export function root(fn: () => void | (() => void)): () => void;
 
@@ -3507,6 +3528,9 @@ declare namespace $effect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3516,7 +3540,7 @@ declare namespace $effect {
  * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$props
+ * @see {@link https://svelte.dev/docs/svelte/$props Documentation}
  */
 declare function $props(): any;
 
@@ -3550,6 +3574,9 @@ declare namespace $props {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3559,7 +3586,7 @@ declare namespace $props {
  * let { propName = $bindable() }: { propName: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$bindable
+ * @see {@link https://svelte.dev/docs/svelte/$bindable Documentation}
  */
 declare function $bindable<T>(fallback?: T): T;
 
@@ -3584,6 +3611,9 @@ declare namespace $bindable {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3602,7 +3632,7 @@ declare namespace $bindable {
  * $inspect(x, y).with(() => { debugger; });
  * ```
  *
- * https://svelte.dev/docs/svelte/$inspect
+ * @see {@link https://svelte.dev/docs/svelte/$inspect Documentation}
  */
 declare function $inspect<T extends any[]>(
 	...values: T
@@ -3646,6 +3676,9 @@ declare namespace $inspect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3665,7 +3698,7 @@ declare namespace $inspect {
  *
  * Only available inside custom element components, and only on the client-side.
  *
- * https://svelte.dev/docs/svelte/$host
+ * @see {@link https://svelte.dev/docs/svelte/$host Documentation}
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
@@ -3690,6 +3723,9 @@ declare namespace $host {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 //# sourceMappingURL=index.d.ts.map
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 35bffb67a2..f79243d4e7 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -95,6 +95,7 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		if (generate === 'server' || FROM_HTML) {
 			from_html = compile(source, {
 				dev: DEV,
+				hmr: DEV,
 				filename: input,
 				generate,
 				runes: argv.values.runes,
diff --git a/playgrounds/sandbox/scripts/create-test.js b/playgrounds/sandbox/scripts/create-test.js
index c733f19419..d183098b22 100644
--- a/playgrounds/sandbox/scripts/create-test.js
+++ b/playgrounds/sandbox/scripts/create-test.js
@@ -1,6 +1,16 @@
-// Creates a test from the existing playground. cwd needs to be playground/sandbox
+// Creates a test from the existing playground. Can be called from anywhere.
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the directory where this script is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Base paths relative to this script's location
+const sandbox_dir = path.resolve(__dirname, '..');
+const src_dir = path.join(sandbox_dir, 'src');
+const tests_dir = path.resolve(__dirname, '../../../packages/svelte/tests');
 
 // Get target folder from command line arguments
 let target_folder = process.argv[2];
@@ -20,7 +30,7 @@ if (!target_folder.startsWith('runtime-')) {
 	process.exit(1);
 }
 target_folder = path.join(
-	path.resolve('../../packages/svelte/tests', target_folder.split('/')[0]),
+	path.resolve(tests_dir, target_folder.split('/')[0]),
 	'samples',
 	target_folder.split('/')[1]
 );
@@ -56,8 +66,8 @@ if (exists) {
 	const files = fs.readdirSync(target_folder);
 	for (const file of files) {
 		if (file !== '_config.js') {
-			const filePath = path.join(target_folder, file);
-			fs.rmSync(filePath, { recursive: true, force: true });
+			const file_path = path.join(target_folder, file);
+			fs.rmSync(file_path, { recursive: true, force: true });
 		}
 	}
 } else {
@@ -65,7 +75,7 @@ if (exists) {
 }
 
 // Starting file
-const app_svelte_path = path.resolve('./src/App.svelte');
+const app_svelte_path = path.join(src_dir, 'App.svelte');
 const collected_files = new Set();
 const processed_files = new Set();
 
@@ -117,7 +127,7 @@ collect_imports(app_svelte_path);
 
 // Copy collected files to target folder
 for (const file_path of collected_files) {
-	const relative_path = path.relative(path.resolve('./src'), file_path);
+	const relative_path = path.relative(src_dir, file_path);
 	let target_path = path.join(target_folder, relative_path);
 
 	// Rename App.svelte to main.svelte
diff --git a/playgrounds/sandbox/scripts/download.js b/playgrounds/sandbox/scripts/download.js
index 5678f69ee3..538b4956fe 100644
--- a/playgrounds/sandbox/scripts/download.js
+++ b/playgrounds/sandbox/scripts/download.js
@@ -1,52 +1,739 @@
 import fs from 'node:fs';
+import path from 'node:path';
+import { parseArgs } from 'node:util';
+import { execSync } from 'node:child_process';
+import { chromium } from 'playwright';
 
-const arg = process.argv[2];
+const { values, positionals } = parseArgs({
+	options: {
+		'create-test': {
+			type: 'string'
+		}
+	},
+	allowPositionals: true
+});
 
-/** @type {URL} */
-let url;
+const create_test_name = values['create-test'] ?? null;
+const url_arg = positionals[0];
 
-try {
-	url = new URL(arg);
-} catch (e) {
-	console.error(`${arg} is not a URL`);
+if (!url_arg) {
+	console.error(`Missing URL argument`);
 	process.exit(1);
 }
 
-if (url.origin !== 'https://svelte.dev' || !url.pathname.startsWith('/playground/')) {
-	console.error(`${arg} is not a Svelte playground URL`);
-	process.exit(1);
+const base_dir = import.meta.dirname;
+
+/**
+ * Check if the argument is a local directory path
+ * @param {string} arg
+ * @returns {boolean}
+ */
+function is_local_directory(arg) {
+	try {
+		return fs.existsSync(arg) && fs.statSync(arg).isDirectory();
+	} catch {
+		return false;
+	}
 }
 
-let files;
+// Check if it's a local directory first (before URL parsing)
+const is_local = is_local_directory(url_arg);
+
+const resolved_test_path = ['runtime-runes', 'runtime-legacy']
+	.map((d) => path.resolve(`${base_dir}/../../../packages/svelte/tests/${d}/samples/${url_arg}`))
+	.find(fs.existsSync);
 
-if (url.hash.length > 1) {
-	const decoded = atob(url.hash.slice(1).replaceAll('-', '+').replaceAll('_', '/'));
-	// putting it directly into the blob gives a corrupted file
-	const u8 = new Uint8Array(decoded.length);
-	for (let i = 0; i < decoded.length; i++) {
-		u8[i] = decoded.charCodeAt(i);
+/** @type {URL | null} */
+let url = null;
+
+if (!is_local && !resolved_test_path) {
+	try {
+		url = new URL(url_arg);
+	} catch (e) {
+		console.error(`${url_arg} is not a valid URL or local directory`);
+		process.exit(1);
 	}
-	const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
-	const json = await new Response(stream).text();
+}
 
-	files = JSON.parse(json).files;
-} else {
-	const id = url.pathname.split('/')[2];
-	const response = await fetch(`https://svelte.dev/playground/api/${id}.json`);
-
-	files = (await response.json()).components.map((data) => {
-		const basename = `${data.name}.${data.type}`;
-
-		return {
-			type: 'file',
-			name: basename,
-			basename,
-			contents: data.source,
-			text: true
-		};
+/**
+ * Check if URL is a GitHub repository URL
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_github_url(url) {
+	return url.hostname === 'github.com' && url.pathname.split('/').filter(Boolean).length >= 2;
+}
+
+/**
+ * Check if URL is a StackBlitz GitHub project URL
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_stackblitz_github_url(url) {
+	return url.hostname === 'stackblitz.com' && url.pathname.startsWith('/github/');
+}
+
+/**
+ * Check if URL is a StackBlitz edit project URL (non-GitHub)
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_stackblitz_edit_url(url) {
+	return url.hostname === 'stackblitz.com' && url.pathname.startsWith('/edit/');
+}
+
+/**
+ * Extract GitHub repo info from a StackBlitz GitHub URL
+ * @param {URL} url
+ * @returns {{ owner: string, repo: string, path?: string }}
+ */
+function extract_stackblitz_github_info(url) {
+	// URL format: /github/owner/repo or /github/owner/repo/tree/branch/path
+	const parts = url.pathname.split('/').filter(Boolean);
+	// parts[0] = 'github', parts[1] = owner, parts[2] = repo
+	return {
+		owner: parts[1],
+		repo: parts[2],
+		path: parts.length > 3 ? parts.slice(3).join('/') : undefined
+	};
+}
+
+/**
+ * Clone a GitHub repository to a temporary directory
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+function clone_github_repo(url, target_dir) {
+	// Extract repo URL (handle both https://github.com/owner/repo and https://github.com/owner/repo/tree/branch/path)
+	const parts = url.pathname.split('/').filter(Boolean);
+	const owner = parts[0];
+	const repo = parts[1];
+	const repo_url = `https://github.com/${owner}/${repo}.git`;
+
+	console.log(`Cloning ${repo_url}...`);
+	execSync(`git clone --depth 1 ${repo_url} "${target_dir}"`, { stdio: 'inherit' });
+}
+
+/**
+ * Clone a StackBlitz GitHub project to a temporary directory
+ * (Converts to regular GitHub clone)
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+function clone_stackblitz_github_project(url, target_dir) {
+	const info = extract_stackblitz_github_info(url);
+	const repo_url = `https://github.com/${info.owner}/${info.repo}.git`;
+
+	console.log(`StackBlitz GitHub project detected, cloning from ${repo_url}...`);
+
+	execSync(`git clone --depth 1 ${repo_url} "${target_dir}"`, { stdio: 'inherit' });
+}
+
+/**
+ * Download a StackBlitz project using browser automation
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+async function download_stackblitz_project(url, target_dir) {
+	console.log(`Downloading StackBlitz project via browser automation...`);
+	console.log(`URL: ${url.href}`);
+
+	const browser = await chromium.launch({ headless: true });
+	const context = await browser.newContext({ acceptDownloads: true });
+	const page = await context.newPage();
+
+	try {
+		// Navigate to the StackBlitz project
+		console.log('Loading StackBlitz project (this may take a moment)...');
+		await page.goto(url.href, { waitUntil: 'domcontentloaded', timeout: 20000 });
+
+		// Set up download handler
+		const downloadPromise = page.waitForEvent('download', { timeout: 30000 });
+		await page.locator('button[aria-label*="Download Project" i]', { timeout: 30000 }).click();
+		console.log('Triggering download...');
+
+		// Wait for the download to start
+		const download = await downloadPromise;
+
+		// Save the downloaded file
+		const zip_path = path.join(target_dir, 'project.zip');
+		await download.saveAs(zip_path);
+
+		console.log('Download complete, extracting...');
+
+		// Extract the zip file
+		if (process.platform === 'win32') {
+			execSync(
+				`powershell -Command "Expand-Archive -Path '${zip_path}' -DestinationPath '${target_dir}' -Force"`,
+				{ stdio: 'inherit' }
+			);
+		} else {
+			execSync(`unzip -o "${zip_path}" -d "${target_dir}"`, { stdio: 'inherit' });
+		}
+
+		// Remove the zip file
+		fs.unlinkSync(zip_path);
+
+		// Check if files were extracted into a subdirectory
+		const entries = fs.readdirSync(target_dir);
+		if (entries.length === 1) {
+			const subdir = path.join(target_dir, entries[0]);
+			if (fs.statSync(subdir).isDirectory()) {
+				// Move files from subdirectory to target_dir
+				const subentries = fs.readdirSync(subdir);
+				for (const entry of subentries) {
+					fs.renameSync(path.join(subdir, entry), path.join(target_dir, entry));
+				}
+				fs.rmdirSync(subdir);
+			}
+		}
+
+		console.log('StackBlitz project downloaded successfully');
+	} finally {
+		await browser.close();
+	}
+}
+
+/**
+ * Recursively get all files in a directory
+ * @param {string} dir
+ * @param {string} base
+ * @returns {Array<{path: string, name: string, contents: string}>}
+ */
+function get_all_files(dir, base = '') {
+	/** @type {Array<{path: string, name: string, contents: string}>} */
+	const results = [];
+
+	if (!fs.existsSync(dir)) return results;
+
+	const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const full_path = path.join(dir, entry.name);
+		const relative_path = base ? `${base}/${entry.name}` : entry.name;
+
+		if (entry.isDirectory()) {
+			// Skip node_modules, .git, etc.
+			if (['node_modules', '.git', '.svelte-kit', 'build', 'dist'].includes(entry.name)) {
+				continue;
+			}
+			results.push(...get_all_files(full_path, relative_path));
+		} else if (
+			entry.name.endsWith('.svelte') ||
+			entry.name.endsWith('.js') ||
+			entry.name.endsWith('.ts')
+		) {
+			results.push({
+				path: relative_path,
+				name: entry.name,
+				contents: fs.readFileSync(full_path, 'utf-8')
+			});
+		}
+	}
+
+	return results;
+}
+
+/**
+ * Detect project type from files
+ * @param {Array<{path: string, name: string, contents: string}>} files
+ * @returns {{ type: 'sveltekit' | 'vite', has_app_imports: boolean, has_page_svelte: boolean }}
+ */
+function detect_project_type(files) {
+	let has_app_imports = false;
+	let has_page_svelte = false;
+
+	for (const file of files) {
+		// Check for $app/* imports
+		if (/from\s+['"](\$app\/[^'"]+)['"]/.test(file.contents)) {
+			has_app_imports = true;
+		}
+		// Check for +page.svelte or +layout.svelte
+		if (file.name === '+page.svelte' || file.name === '+layout.svelte') {
+			has_page_svelte = true;
+		}
+	}
+
+	return {
+		type: has_page_svelte ? 'sveltekit' : 'vite',
+		has_app_imports,
+		has_page_svelte
+	};
+}
+
+/**
+ * Convert a route path to a PascalCase component name
+ * @param {string} route_path - e.g., "about", "blog/post"
+ * @returns {string} - e.g., "About", "BlogPost"
+ */
+function route_to_component_name(route_path) {
+	if (!route_path || route_path === '') return 'Page';
+
+	return route_path
+		.split('/')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join('');
+}
+
+/**
+ * Transform $lib/* imports to relative imports (flattened)
+ * @param {string} content
+ * @returns {string}
+ */
+function transform_lib_imports(content) {
+	// Replace $lib/ imports with relative paths to flattened files
+	return content.replace(/from\s+['"](\$lib\/[^'"]+)['"]/g, (match, import_path) => {
+		// Get just the filename from the lib path
+		const lib_path = import_path.replace('$lib/', '');
+		const filename = path.basename(lib_path);
+		return `from './${filename}'`;
 	});
 }
 
-for (const file of files) {
-	fs.writeFileSync(`src/${file.name}`, file.contents);
+/**
+ * Build the route tree from SvelteKit files
+ * @param {Array<{path: string, name: string, contents: string}>} files
+ * @param {string} routes_prefix - e.g., "src/routes"
+ * @returns {Map<string, {layout?: {path: string, contents: string}, page?: {path: string, contents: string}}>}
+ */
+function build_route_tree(files, routes_prefix) {
+	/** @type {Map<string, {layout?: {path: string, contents: string}, page?: {path: string, contents: string}}>} */
+	const routes = new Map();
+
+	for (const file of files) {
+		if (!file.path.startsWith(routes_prefix)) continue;
+
+		const relative_to_routes = file.path.slice(routes_prefix.length + 1); // +1 for the slash
+		const dir = path.dirname(relative_to_routes);
+		const route_key = dir === '.' ? '' : dir;
+
+		if (!routes.has(route_key)) {
+			routes.set(route_key, {});
+		}
+
+		const route = routes.get(route_key);
+		if (file.name === '+layout.svelte') {
+			route.layout = { path: file.path, contents: file.contents };
+		} else if (file.name === '+page.svelte') {
+			route.page = { path: file.path, contents: file.contents };
+		}
+	}
+
+	return routes;
+}
+
+/**
+ * Get child routes of a given route
+ * @param {Map<string, any>} routes
+ * @param {string} parent_route
+ * @returns {string[]}
+ */
+function get_child_routes(routes, parent_route) {
+	const children = [];
+	for (const route of routes.keys()) {
+		if (route === parent_route) continue;
+
+		const parent_prefix = parent_route === '' ? '' : parent_route + '/';
+		if (
+			parent_route === ''
+				? !route.includes('/')
+				: route.startsWith(parent_prefix) && !route.slice(parent_prefix.length).includes('/')
+		) {
+			children.push(route);
+		}
+	}
+	return children;
+}
+
+/**
+ * Transform a layout file's content to replace {@render children()} with a component
+ * @param {string} content
+ * @param {string} child_component_name
+ * @returns {string}
+ */
+function transform_layout_content(content, child_component_name) {
+	// Add import for the child component at the top of the script
+	const import_statement = `import ${child_component_name} from './${child_component_name}.svelte';`;
+
+	// Check if there's already a script tag
+	if (/<script[^>]*>/.test(content)) {
+		// Add import after the opening script tag
+		content = content.replace(/(<script[^>]*>)/, `$1\n\t${import_statement}`);
+	} else {
+		// Add a new script block at the beginning
+		content = `<script>\n\t${import_statement}\n</script>\n\n${content}`;
+	}
+
+	// Replace {@render children()} or {@render children?.()} with the component
+	content = content.replace(/\{@render\s+children\?\.\(\)\}/g, `<${child_component_name} />`);
+	content = content.replace(/\{@render\s+children\(\)\}/g, `<${child_component_name} />`);
+
+	return content;
+}
+
+/**
+ * Convert a SvelteKit project to plain Svelte components
+ * @param {string} repo_dir
+ * @returns {Array<{name: string, contents: string}>}
+ */
+function convert_sveltekit_project(repo_dir) {
+	const all_files = get_all_files(repo_dir);
+	/** @type {Array<{name: string, contents: string}>} */
+	const output_files = [];
+
+	// Find the routes directory
+	let routes_prefix = '';
+	for (const file of all_files) {
+		if (file.path.includes('src/routes/')) {
+			routes_prefix = 'src/routes';
+			break;
+		}
+	}
+
+	if (!routes_prefix) {
+		console.error('Could not find src/routes directory');
+		process.exit(1);
+	}
+
+	// Build route tree
+	const routes = build_route_tree(all_files, routes_prefix);
+
+	// Process lib files - flatten them to root level
+	const lib_files = all_files.filter((f) => f.path.startsWith('src/lib/'));
+	for (const file of lib_files) {
+		// Flatten to just the filename
+		const new_path = path.basename(file.path);
+		let contents = file.contents;
+		contents = transform_lib_imports(contents);
+		output_files.push({
+			name: new_path,
+			contents
+		});
+	}
+
+	// Sort routes by depth (deepest first) so we can process children before parents
+	const sorted_routes = [...routes.keys()].sort((a, b) => {
+		const depth_a = a === '' ? 0 : a.split('/').length;
+		const depth_b = b === '' ? 0 : b.split('/').length;
+		return depth_b - depth_a;
+	});
+
+	// Map to store what component each route renders
+	/** @type {Map<string, string>} */
+	const route_component_map = new Map();
+
+	// First pass: convert all pages
+	for (const route_key of sorted_routes) {
+		const route = routes.get(route_key);
+		if (route?.page) {
+			const component_name = route_to_component_name(route_key);
+			let contents = route.page.contents;
+			contents = transform_lib_imports(contents);
+			output_files.push({
+				name: `${component_name}.svelte`,
+				contents
+			});
+			// If no layout, this is what the route renders
+			if (!route.layout) {
+				route_component_map.set(route_key, component_name);
+			}
+		}
+	}
+
+	// Second pass: convert layouts (from deepest to root)
+	for (const route_key of sorted_routes) {
+		const route = routes.get(route_key);
+		if (route?.layout) {
+			const is_root = route_key === '';
+			const component_name = is_root ? 'App' : route_to_component_name(route_key) + 'Layout';
+
+			// Determine what child component this layout should render
+			let child_component = '';
+
+			// Check if there's a page at this route level
+			if (route.page) {
+				child_component = route_to_component_name(route_key);
+			} else {
+				// Find child routes that have content
+				const children = get_child_routes(routes, route_key);
+				if (children.length > 0) {
+					// Use the first child's component (or its layout if it has one)
+					const first_child = children[0];
+					child_component =
+						route_component_map.get(first_child) || route_to_component_name(first_child);
+				}
+			}
+
+			let contents = route.layout.contents;
+			contents = transform_lib_imports(contents);
+
+			if (child_component) {
+				contents = transform_layout_content(contents, child_component);
+			} else {
+				// No child, just remove {@render children()} or {@render children?.()}
+				contents = contents.replace(/\{@render\s+children\?\.\(\)\}/g, '<!-- no child content -->');
+				contents = contents.replace(/\{@render\s+children\(\)\}/g, '<!-- no child content -->');
+			}
+
+			output_files.push({
+				name: `${component_name}.svelte`,
+				contents
+			});
+
+			// This route now renders the layout
+			route_component_map.set(route_key, component_name);
+		}
+	}
+
+	// If there's no root layout but there's a root page, rename it to App.svelte
+	if (!routes.get('')?.layout && routes.get('')?.page) {
+		const page_index = output_files.findIndex((f) => f.name === 'Page.svelte');
+		if (page_index !== -1) {
+			output_files[page_index].name = 'App.svelte';
+		}
+	}
+
+	// If there's no App.svelte yet, create one that imports the first available component
+	if (!output_files.some((f) => f.name === 'App.svelte')) {
+		const first_component = output_files.find(
+			(f) => f.name.endsWith('.svelte') && !f.name.includes('/')
+		);
+		if (first_component) {
+			const comp_name = first_component.name.replace('.svelte', '');
+			output_files.push({
+				name: 'App.svelte',
+				contents: `<script>\n\timport ${comp_name} from './${first_component.name}';\n</script>\n\n<${comp_name} />\n`
+			});
+		}
+	}
+
+	return output_files;
+}
+
+/**
+ * Convert a regular Vite+Svelte project
+ * @param {string} repo_dir
+ * @returns {Array<{name: string, contents: string}>}
+ */
+function convert_vite_project(repo_dir) {
+	const all_files = get_all_files(repo_dir);
+	/** @type {Array<{name: string, contents: string}>} */
+	const output_files = [];
+
+	// Find src directory
+	const src_files = all_files.filter(
+		(f) =>
+			f.path.startsWith('src/') &&
+			(f.name.endsWith('.svelte') || f.name.endsWith('.js') || f.name.endsWith('.ts'))
+	);
+
+	for (const file of src_files) {
+		// Flatten all files to root level (just the filename)
+		const new_path = path.basename(file.path);
+
+		let contents = file.contents;
+		contents = transform_lib_imports(contents);
+
+		output_files.push({
+			name: new_path,
+			contents
+		});
+	}
+
+	return output_files;
+}
+
+/**
+ * Process a local or cloned directory
+ * @param {string} dir_path
+ * @returns {Array<{name: string, contents: string}>}
+ */
+function process_directory(dir_path) {
+	const all_files = get_all_files(dir_path);
+	const project_info = detect_project_type(all_files);
+
+	console.log(`Detected project type: ${project_info.type}`);
+
+	// Check for $app/* imports
+	if (project_info.has_app_imports) {
+		console.error('Error: This SvelteKit project uses $app/* imports which cannot be converted.');
+		console.error('The playground does not support SvelteKit runtime features.');
+		process.exit(1);
+	}
+
+	// Convert based on project type
+	if (project_info.type === 'sveltekit') {
+		console.log('Converting SvelteKit project to plain Svelte...');
+		return convert_sveltekit_project(dir_path);
+	} else {
+		console.log('Processing Vite+Svelte project...');
+		return convert_vite_project(dir_path);
+	}
+}
+
+/**
+ * Reset a directory so it exists and is empty
+ * @param {string} dir_path
+ */
+/**
+ * Create a temporary directory, run an action, and always clean up
+ * @param {string} base_dir
+ * @param {(dir: string) => void | Promise<void>} action
+ */
+async function with_tmp_dir(base_dir, action) {
+	const tmp_dir = path.join(base_dir, '.tmp-repo');
+
+	try {
+		if (fs.existsSync(tmp_dir)) {
+			fs.rmSync(tmp_dir, { recursive: true, force: true });
+		}
+		fs.mkdirSync(tmp_dir, { recursive: true });
+		await action(tmp_dir);
+	} finally {
+		if (fs.existsSync(tmp_dir)) {
+			fs.rmSync(tmp_dir, { recursive: true, force: true });
+		}
+	}
+}
+
+// Main logic
+let files;
+
+// Check if it's a local directory first (before URL parsing)
+if (is_local) {
+	console.log(`Processing local directory: ${url_arg}`);
+	files = process_directory(url_arg);
+} else if (resolved_test_path) {
+	// Copy files from test
+	console.log(`Processing test ${url_arg}`);
+	files = get_all_files(resolved_test_path)
+		.filter((file) => !file.path.includes('_'))
+		.map((file) => {
+			return {
+				name: file.name === 'main.svelte' ? 'App.svelte' : file.name,
+				contents: file.contents
+			};
+		});
+} else if (url && is_github_url(url)) {
+	// GitHub repository handling
+	await with_tmp_dir(base_dir, (tmp_dir) => {
+		clone_github_repo(url, tmp_dir);
+		files = process_directory(tmp_dir);
+	});
+} else if (url && is_stackblitz_github_url(url)) {
+	// StackBlitz GitHub project handling (redirect to GitHub clone)
+	await with_tmp_dir(base_dir, (tmp_dir) => {
+		clone_stackblitz_github_project(url, tmp_dir);
+		files = process_directory(tmp_dir);
+	});
+} else if (url && is_stackblitz_edit_url(url)) {
+	// StackBlitz edit URLs - use browser automation to download
+	await with_tmp_dir(base_dir, async (tmp_dir) => {
+		await download_stackblitz_project(url, tmp_dir);
+		files = process_directory(tmp_dir);
+	});
+} else if (url && url.origin === 'https://svelte.dev' && url.pathname.startsWith('/playground/')) {
+	// Svelte playground URL handling (existing logic)
+	if (url.hash.length > 1) {
+		// Decode percent-encoded characters (e.g., %5F => _), and replace base64 chars.
+		let decoded;
+		try {
+			// First, decode URI components to handle %xx encodings (e.g. %5F -> _) (LLMs calling this script sometimes encode them for some reason)
+			decoded = url.hash.slice(1);
+			decoded = decodeURIComponent(decoded);
+
+			// Now, restore for base64 (replace -/+, _/ /)
+			decoded = atob(decoded.replaceAll('-', '+').replaceAll('_', '/'));
+		} catch (e) {
+			console.error('Failed to decode URL hash:', e);
+			process.exit(1);
+		}
+		// putting it directly into the blob gives a corrupted file
+		const u8 = new Uint8Array(decoded.length);
+		for (let i = 0; i < decoded.length; i++) {
+			u8[i] = decoded.charCodeAt(i);
+		}
+		const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
+		const json = await new Response(stream).text();
+
+		files = JSON.parse(json).files;
+	} else {
+		const id = url.pathname.split('/')[2];
+		const response = await fetch(`https://svelte.dev/playground/api/${id}.json`);
+
+		files = (await response.json()).components.map((data) => {
+			const basename = `${data.name}.${data.type}`;
+
+			return {
+				type: 'file',
+				name: basename,
+				basename,
+				contents: data.source,
+				text: true
+			};
+		});
+	}
+} else {
+	console.error(
+		`${url_arg} is not a supported URL (Svelte playground, GitHub repository, or StackBlitz project)`
+	);
+	process.exit(1);
+}
+
+// Output files
+if (create_test_name) {
+	const test_parts = create_test_name.split('/').filter(Boolean);
+
+	if (test_parts.length > 2) {
+		console.error(
+			`Invalid test name "${create_test_name}". Expected e.g. "hello-world" or "runtime-legacy/hello-world"`
+		);
+		process.exit(1);
+	}
+
+	const suite_name = test_parts.length === 2 ? test_parts[0] : 'runtime-runes';
+	const test_name = test_parts[test_parts.length - 1];
+
+	const output_dir = path.join(
+		base_dir,
+		'../../..',
+		'packages/svelte/tests',
+		suite_name,
+		'samples',
+		test_name
+	);
+	if (fs.existsSync(output_dir)) {
+		console.warn(`Test folder "${output_dir}" already exists, overriding its contents`);
+		fs.rmSync(output_dir, { recursive: true, force: true });
+	}
+	fs.mkdirSync(output_dir, { recursive: true });
+
+	for (const file of files) {
+		const output_name = file.name === 'App.svelte' ? 'main.svelte' : file.name;
+		const output_path = path.join(output_dir, output_name);
+
+		fs.mkdirSync(path.dirname(output_path), { recursive: true });
+		fs.writeFileSync(output_path, file.contents);
+	}
+
+	fs.writeFileSync(
+		path.join(output_dir, '_config.js'),
+		`import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+	}
+});
+`
+	);
+
+	console.log(`Test created at ${output_dir}`);
+} else {
+	for (const file of files) {
+		const output_path = path.join(base_dir, '..', 'src', file.name);
+		fs.mkdirSync(path.dirname(output_path), { recursive: true });
+		fs.writeFileSync(output_path, file.contents);
+	}
+
+	console.log(`Files written to ${path.join(base_dir, '..', 'src')}`);
 }
diff --git a/playgrounds/sandbox/scripts/hash.js b/playgrounds/sandbox/scripts/hash.js
index e70dfc471a..fdfe2d1aa7 100644
--- a/playgrounds/sandbox/scripts/hash.js
+++ b/playgrounds/sandbox/scripts/hash.js
@@ -1,16 +1,44 @@
 import fs from 'node:fs';
 
+/**
+ * Detects if a file is text or binary by checking for null bytes
+ * and validating UTF-8 encoding
+ * @param {string} filepath - Path to the file
+ * @returns {boolean} - true if file is text, false if binary
+ */
+function is_text_file(filepath) {
+	const buffer = fs.readFileSync(filepath);
+	// Check for null bytes which indicate binary files
+	for (let i = 0; i < buffer.length; i++) {
+		if (buffer[i] === 0) {
+			return false;
+		}
+	}
+	// Validate UTF-8 encoding
+	try {
+		const text = buffer.toString('utf-8');
+		// Verify round-trip encoding to ensure valid UTF-8
+		const encoded = Buffer.from(text, 'utf-8');
+		return buffer.equals(encoded);
+	} catch {
+		return false;
+	}
+}
+
 const files = [];
 
 for (const basename of fs.readdirSync('src')) {
 	if (fs.statSync(`src/${basename}`).isDirectory()) continue;
 
+	const filepath = `src/${basename}`;
+	const text = is_text_file(filepath);
+
 	files.push({
 		type: 'file',
 		name: basename,
 		basename,
-		contents: fs.readFileSync(`src/${basename}`, 'utf-8'),
-		text: true // TODO might not be
+		contents: fs.readFileSync(filepath, text ? 'utf-8' : 'base64'),
+		text
 	});
 }
 
diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js
index 68ac605385..33e8c98908 100644
--- a/playgrounds/sandbox/svelte.config.js
+++ b/playgrounds/sandbox/svelte.config.js
@@ -1,5 +1,8 @@
 export default {
+	/** @type {import('svelte/compiler').CompileOptions} */
 	compilerOptions: {
+		css: 'injected',
+
 		hmr: false,
 
 		experimental: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05298fe8e3..48c2a52cc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,12 @@ importers:
       '@changesets/cli':
         specifier: ^2.29.8
         version: 2.29.8(@types/node@20.19.17)
+      '@eslint/js':
+        specifier: ^10.0.0
+        version: 10.0.1(eslint@10.0.0)
       '@sveltejs/eslint-config':
-        specifier: ^8.3.3
-        version: 8.3.3(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.48.1(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
+        specifier: ^8.3.5
+        version: 8.3.5(@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0))(eslint-config-prettier@9.1.0(eslint@10.0.0))(eslint-plugin-n@17.16.1(eslint@10.0.0)(typescript@5.5.4))(eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte))(eslint@10.0.0)(typescript-eslint@8.55.0(eslint@10.0.0)(typescript@5.5.4))(typescript@5.5.4)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
@@ -27,20 +30,20 @@ importers:
         specifier: ^2.1.9
         version: 2.1.9(vitest@2.1.9(@types/node@20.19.17)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       eslint:
-        specifier: ^9.9.1
-        version: 9.9.1
+        specifier: ^10.0.0
+        version: 10.0.0
       eslint-plugin-lube:
-        specifier: ^0.4.3
-        version: 0.4.3
+        specifier: ^0.5.1
+        version: 0.5.1(eslint@10.0.0)
       eslint-plugin-svelte:
-        specifier: ^3.11.0
-        version: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
+        specifier: ^3.15.0
+        version: 3.15.0(eslint@10.0.0)(svelte@packages+svelte)
       jsdom:
         specifier: 25.0.1
         version: 25.0.1
       playwright:
-        specifier: ^1.46.1
-        version: 1.46.1
+        specifier: ^1.58.0
+        version: 1.58.0
       prettier:
         specifier: ^3.2.4
         version: 3.2.4
@@ -54,8 +57,8 @@ importers:
         specifier: ^5.5.4
         version: 5.5.4
       typescript-eslint:
-        specifier: ^8.48.1
-        version: 8.48.1(eslint@9.9.1)(typescript@5.5.4)
+        specifier: ^8.55.0
+        version: 8.55.0(eslint@10.0.0)(typescript@5.5.4)
       v8-natives:
         specifier: ^1.2.5
         version: 1.2.5
@@ -90,14 +93,14 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       devalue:
-        specifier: ^5.5.0
-        version: 5.5.0
+        specifier: ^5.6.2
+        version: 5.6.2
       esm-env:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^2.2.1
-        version: 2.2.1
+        specifier: ^2.2.2
+        version: 2.2.2
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -115,8 +118,8 @@ importers:
         specifier: ^0.3.25
         version: 0.3.31
       '@playwright/test':
-        specifier: ^1.46.1
-        version: 1.46.1
+        specifier: ^1.58.0
+        version: 1.58.0
       '@rollup/plugin-commonjs':
         specifier: ^28.0.1
         version: 28.0.1(rollup@4.52.5)
@@ -570,8 +573,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -580,28 +583,49 @@ packages:
     resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.18.0':
-    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/config-array@0.23.1':
+    resolution: {integrity: sha512-uVSdg/V4dfQmTjJzR0szNczjOH/J+FyUMMjYtr07xFRXR7EDf9i1qdxrD0VusZH9knj1/ecxzCQQxyic5NzAiA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/config-helpers@0.5.2':
+    resolution: {integrity: sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/js@9.9.1':
-    resolution: {integrity: sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/core@1.1.0':
+    resolution: {integrity: sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/object-schema@2.1.4':
-    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/js@10.0.1':
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
+  '@eslint/object-schema@3.0.1':
+    resolution: {integrity: sha512-P9cq2dpr+LU8j3qbLygLcSZrl2/ds/pUpfnHNNuk5HW7mnngHs+6WSq5C9mO3rqRX8A1poxqLTC9cu0KOyJlBg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.6.0':
+    resolution: {integrity: sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/retry@0.3.0':
-    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
   '@inquirer/external-editor@1.0.2':
@@ -613,6 +637,14 @@ packages:
       '@types/node':
         optional: true
 
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.1':
+    resolution: {integrity: sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==}
+    engines: {node: 20 || >=22}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -667,8 +699,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.46.1':
-    resolution: {integrity: sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==}
+  '@playwright/test@1.58.0':
+    resolution: {integrity: sha512-fWza+Lpbj6SkQKCrU6si4iu+fD2dD3gxNHFhUPxsfXBPhnv3rRSQVd0NtBUT9Z/RhF/boCBcuUaMUSTRTopjZg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -841,8 +873,8 @@ packages:
     peerDependencies:
       acorn: ^8.9.0
 
-  '@sveltejs/eslint-config@8.3.3':
-    resolution: {integrity: sha512-vkrQgEmhokFEOpuTo7NlVXJJMJJGNzxjmkQCTkHSwIOdzQSUukDIJ4038IjdcnIERSIlo4OpLAydWLx52BVyQA==}
+  '@sveltejs/eslint-config@8.3.5':
+    resolution: {integrity: sha512-f8g5v1GNQePIJq6Rh3mf0riXx+7+IsRaTS7nn8w7r2RZFPPkuBAHGcHST9BTJOQb5UCSnPmst7BJHEDIlVtP3A==}
     peerDependencies:
       '@stylistic/eslint-plugin-js': '>= 1'
       eslint: '>= 9'
@@ -877,6 +909,9 @@ packages:
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -898,63 +933,63 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@typescript-eslint/eslint-plugin@8.48.1':
-    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
+  '@typescript-eslint/eslint-plugin@8.55.0':
+    resolution: {integrity: sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.48.1
+      '@typescript-eslint/parser': ^8.55.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.48.1':
-    resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==}
+  '@typescript-eslint/parser@8.55.0':
+    resolution: {integrity: sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.48.1':
-    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
+  '@typescript-eslint/project-service@8.55.0':
+    resolution: {integrity: sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.48.1':
-    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
+  '@typescript-eslint/scope-manager@8.55.0':
+    resolution: {integrity: sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.48.1':
-    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
+  '@typescript-eslint/tsconfig-utils@8.55.0':
+    resolution: {integrity: sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.48.1':
-    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
+  '@typescript-eslint/type-utils@8.55.0':
+    resolution: {integrity: sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.48.1':
-    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
+  '@typescript-eslint/types@8.55.0':
+    resolution: {integrity: sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.48.1':
-    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
+  '@typescript-eslint/typescript-estree@8.55.0':
+    resolution: {integrity: sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.48.1':
-    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
+  '@typescript-eslint/utils@8.55.0':
+    resolution: {integrity: sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.48.1':
-    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
+  '@typescript-eslint/visitor-keys@8.55.0':
+    resolution: {integrity: sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@vitest/coverage-v8@2.1.9':
@@ -1079,9 +1114,6 @@ packages:
   birpc@2.5.0:
     resolution: {integrity: sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==}
 
-  brace-expansion@1.1.12:
-    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
-
   brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
@@ -1100,18 +1132,10 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
   chardet@2.1.0:
     resolution: {integrity: sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==}
 
@@ -1148,9 +1172,6 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1219,8 +1240,8 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  devalue@5.5.0:
-    resolution: {integrity: sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==}
+  devalue@5.6.2:
+    resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
 
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -1295,8 +1316,10 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
-  eslint-plugin-lube@0.4.3:
-    resolution: {integrity: sha512-BVO83tRo090d6a04cl45Gb761SD79cOT6wKxxWrpsH7Rv8I0SJvc79ijE11vvyxxCMiGUVq/w4NqqPJAHyYfSQ==}
+  eslint-plugin-lube@0.5.1:
+    resolution: {integrity: sha512-z01UM0LAI/Z+b9qGoVqN3RNycXbYXi6i4/QT0He58LdBVmmOd+z4tJQmvOqEh3A4TVtSQcGYq4/4wX/OebGISQ==}
+    peerDependencies:
+      eslint: '>=9.0.0'
 
   eslint-plugin-n@17.16.1:
     resolution: {integrity: sha512-/7FVAwjUrix9P5lycnsYRIQRwFo/DZROD+ZXWLpE+/EZWLyuLvyFaRdAPYJSz+nlAdZIZp+LAzlBerQSVYUNFg==}
@@ -1304,11 +1327,11 @@ packages:
     peerDependencies:
       eslint: '>=8.23.0'
 
-  eslint-plugin-svelte@3.11.0:
-    resolution: {integrity: sha512-KliWlkieHyEa65aQIkRwUFfHzT5Cn4u3BQQsu3KlkJOs7c1u7ryn84EWaOjEzilbKgttT4OfBURA8Uc4JBSQIw==}
+  eslint-plugin-svelte@3.15.0:
+    resolution: {integrity: sha512-QKB7zqfuB8aChOfBTComgDptMf2yxiJx7FE04nneCmtQzgTHvY8UJkuh8J2Rz7KB9FFV9aTHX6r7rdYGvG8T9Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.1 || ^9.0.0
+      eslint: ^8.57.1 || ^9.0.0 || ^10.0.0
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
@@ -1318,6 +1341,10 @@ packages:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  eslint-scope@9.1.0:
+    resolution: {integrity: sha512-CkWE42hOJsNj9FJRaoMX9waUFYhqY4jmyLFdAdzZr6VaCg3ynLYx4WnOdkaIifGfH4gsUcBTn4OZbHXkpLD0FQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1326,9 +1353,13 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.9.1:
-    resolution: {integrity: sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  eslint-visitor-keys@5.0.0:
+    resolution: {integrity: sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.0.0:
+    resolution: {integrity: sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -1343,6 +1374,10 @@ packages:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@11.1.0:
+    resolution: {integrity: sha512-WFWYhO1fV4iYkqOOvq8FbqIhr2pYfoDY0kCotMkDeNtGpiGGkZ1iov2u8ydjtgM8yF8rzK7oaTbw2NAzbAbehw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1352,12 +1387,12 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
-  esrap@2.2.1:
-    resolution: {integrity: sha512-GiYWG34AN/4CUyaWAgunGt0Rxvr1PTMlGC0vvEov/uOQYWne2bpN03Um+k8jT+q3op33mKouP2zeJ6OlM+qeUg==}
+  esrap@2.2.2:
+    resolution: {integrity: sha512-zA6497ha+qKvoWIK+WM9NAh5ni17sKZKhbS5B3PoYbBvaYHZWoS33zmFybmyqpn07RLUxSmn+RCls2/XF+d0oQ==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -1474,12 +1509,9 @@ packages:
 
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
   globals@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
@@ -1488,6 +1520,10 @@ packages:
     resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
     engines: {node: '>=18'}
 
+  globals@17.3.0:
+    resolution: {integrity: sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==}
+    engines: {node: '>=18'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1495,9 +1531,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1544,10 +1577,6 @@ packages:
   immutable@4.3.7:
     resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -1588,10 +1617,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -1751,9 +1776,6 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
@@ -1789,8 +1811,9 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimatch@10.1.2:
+    resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
+    engines: {node: 20 || >=22}
 
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
@@ -1883,10 +1906,6 @@ packages:
   package-manager-detector@0.2.11:
     resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
 
@@ -1937,13 +1956,13 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  playwright-core@1.46.1:
-    resolution: {integrity: sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==}
+  playwright-core@1.58.0:
+    resolution: {integrity: sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.46.1:
-    resolution: {integrity: sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==}
+  playwright@1.58.0:
+    resolution: {integrity: sha512-2SVA0sbPktiIY/MCOPX8e86ehA/e+tDNq+e5Y8qjKYti2Z/JG7xnronT/TXTIkKbYGWlCbuucZ6dziEgkoEjQQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -2028,10 +2047,6 @@ packages:
     resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
     engines: {node: '>=8'}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -2162,10 +2177,6 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2174,9 +2185,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-eslint-parser@1.3.0:
-    resolution: {integrity: sha512-VCgMHKV7UtOGcGLGNFSbmdm6kEKjtzo5nnpGU/mnx4OsFY6bZ7QwRF5DUx+Hokw5Lvdyo8dpk8B1m8mliomrNg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  svelte-eslint-parser@1.4.1:
+    resolution: {integrity: sha512-1eqkfQ93goAhjAXxZiu1SaKI9+0/sxp4JIWQwUpsz7ybehRE5L8dNuz7Iry7K22R47p5/+s9EM+38nHV2OlgXA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0, pnpm: 10.24.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
@@ -2203,9 +2214,6 @@ packages:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2268,8 +2276,8 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
@@ -2283,8 +2291,8 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  typescript-eslint@8.48.1:
-    resolution: {integrity: sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==}
+  typescript-eslint@8.55.0:
+    resolution: {integrity: sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2471,6 +2479,7 @@ packages:
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
@@ -2860,42 +2869,50 @@ snapshots:
   '@esbuild/win32-x64@0.25.11':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.9.1)':
+  '@eslint-community/eslint-utils@4.9.1(eslint@10.0.0)':
     dependencies:
-      eslint: 9.9.1
+      eslint: 10.0.0
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/config-array@0.18.0':
+  '@eslint/config-array@0.23.1':
     dependencies:
-      '@eslint/object-schema': 2.1.4
+      '@eslint/object-schema': 3.0.1
       debug: 4.4.3
-      minimatch: 3.1.2
+      minimatch: 10.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/eslintrc@3.1.0':
+  '@eslint/config-helpers@0.5.2':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.4.3
-      espree: 10.1.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.0
-      js-yaml: 4.1.1
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
+      '@eslint/core': 1.1.0
 
-  '@eslint/js@9.9.1': {}
+  '@eslint/core@1.1.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
 
-  '@eslint/object-schema@2.1.4': {}
+  '@eslint/js@10.0.1(eslint@10.0.0)':
+    optionalDependencies:
+      eslint: 10.0.0
+
+  '@eslint/object-schema@3.0.1': {}
+
+  '@eslint/plugin-kit@0.6.0':
+    dependencies:
+      '@eslint/core': 1.1.0
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.3.0': {}
+  '@humanwhocodes/retry@0.4.3': {}
 
   '@inquirer/external-editor@1.0.2(@types/node@20.19.17)':
     dependencies:
@@ -2904,6 +2921,12 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.17
 
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.1':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -2973,9 +2996,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.46.1':
+  '@playwright/test@1.58.0':
     dependencies:
-      playwright: 1.46.1
+      playwright: 1.58.0
 
   '@polka/url@1.0.0-next.25': {}
 
@@ -3087,12 +3110,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
-  '@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1)':
+  '@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0)':
     dependencies:
       '@types/eslint': 8.56.12
       acorn: 8.15.0
       escape-string-regexp: 4.0.0
-      eslint: 9.9.1
+      eslint: 10.0.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
 
@@ -3100,16 +3123,16 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/eslint-config@8.3.3(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.48.1(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)':
+  '@sveltejs/eslint-config@8.3.5(@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0))(eslint-config-prettier@9.1.0(eslint@10.0.0))(eslint-plugin-n@17.16.1(eslint@10.0.0)(typescript@5.5.4))(eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte))(eslint@10.0.0)(typescript-eslint@8.55.0(eslint@10.0.0)(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
-      '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.9.1)
-      eslint: 9.9.1
-      eslint-config-prettier: 9.1.0(eslint@9.9.1)
-      eslint-plugin-n: 17.16.1(eslint@9.9.1)(typescript@5.5.4)
-      eslint-plugin-svelte: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
-      globals: 15.15.0
+      '@stylistic/eslint-plugin-js': 1.8.0(eslint@10.0.0)
+      eslint: 10.0.0
+      eslint-config-prettier: 9.1.0(eslint@10.0.0)
+      eslint-plugin-n: 17.16.1(eslint@10.0.0)(typescript@5.5.4)
+      eslint-plugin-svelte: 3.15.0(eslint@10.0.0)(svelte@packages+svelte)
+      globals: 17.3.0
       typescript: 5.5.4
-      typescript-eslint: 8.48.1(eslint@9.9.1)(typescript@5.5.4)
+      typescript-eslint: 8.55.0(eslint@10.0.0)(typescript@5.5.4)
 
   '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.0(svelte@packages+svelte)(vite@7.1.11(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@7.1.11(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
@@ -3146,6 +3169,8 @@ snapshots:
       '@types/estree': 1.0.8
       '@types/json-schema': 7.0.15
 
+  '@types/esrecurse@4.3.1': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}
@@ -3164,96 +3189,95 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
-  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.9.1)(typescript@5.5.4))(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/eslint-plugin@8.55.0(@typescript-eslint/parser@8.55.0(eslint@10.0.0)(typescript@5.5.4))(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/type-utils': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      eslint: 9.9.1
-      graphemer: 1.4.0
+      '@typescript-eslint/parser': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/type-utils': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 8.55.0
+      eslint: 10.0.0
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.5.4)
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.48.1(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/parser@8.55.0(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 8.55.0
       debug: 4.4.3
-      eslint: 9.9.1
+      eslint: 10.0.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.48.1(typescript@5.5.4)':
+  '@typescript-eslint/project-service@8.55.0(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/tsconfig-utils': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/types': 8.55.0
       debug: 4.4.3
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.48.1':
+  '@typescript-eslint/scope-manager@8.55.0':
     dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/visitor-keys': 8.55.0
 
-  '@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.5.4)':
+  '@typescript-eslint/tsconfig-utils@8.55.0(typescript@5.5.4)':
     dependencies:
       typescript: 5.5.4
 
-  '@typescript-eslint/type-utils@8.48.1(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/type-utils@8.55.0(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
       debug: 4.4.3
-      eslint: 9.9.1
-      ts-api-utils: 2.1.0(typescript@5.5.4)
+      eslint: 10.0.0
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.48.1': {}
+  '@typescript-eslint/types@8.55.0': {}
 
-  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.5.4)':
+  '@typescript-eslint/typescript-estree@8.55.0(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/project-service': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/project-service': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/tsconfig-utils': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/visitor-keys': 8.55.0
       debug: 4.4.3
       minimatch: 9.0.5
       semver: 7.7.3
       tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.5.4)
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.48.1(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/utils@8.55.0(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.9.1)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.5.4)
-      eslint: 9.9.1
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.5.4)
+      eslint: 10.0.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.48.1':
+  '@typescript-eslint/visitor-keys@8.55.0':
     dependencies:
-      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/types': 8.55.0
       eslint-visitor-keys: 4.2.1
 
   '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.19.17)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
@@ -3380,11 +3404,6 @@ snapshots:
 
   birpc@2.5.0: {}
 
-  brace-expansion@1.1.12:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-
   brace-expansion@2.0.2:
     dependencies:
       balanced-match: 1.0.2
@@ -3401,8 +3420,6 @@ snapshots:
 
   cac@6.7.14: {}
 
-  callsites@3.1.0: {}
-
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -3411,11 +3428,6 @@ snapshots:
       loupe: 3.2.1
       pathval: 2.0.0
 
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
   chardet@2.1.0: {}
 
   check-error@2.1.1: {}
@@ -3451,8 +3463,6 @@ snapshots:
 
   commondir@1.0.1: {}
 
-  concat-map@0.0.1: {}
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3500,7 +3510,7 @@ snapshots:
   detect-libc@1.0.3:
     optional: true
 
-  devalue@5.5.0: {}
+  devalue@5.6.2: {}
 
   dir-glob@3.0.1:
     dependencies:
@@ -3599,31 +3609,33 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.9.1):
+  eslint-compat-utils@0.5.1(eslint@10.0.0):
     dependencies:
-      eslint: 9.9.1
+      eslint: 10.0.0
       semver: 7.7.3
 
-  eslint-config-prettier@9.1.0(eslint@9.9.1):
+  eslint-config-prettier@9.1.0(eslint@10.0.0):
     dependencies:
-      eslint: 9.9.1
+      eslint: 10.0.0
 
-  eslint-plugin-es-x@7.8.0(eslint@9.9.1):
+  eslint-plugin-es-x@7.8.0(eslint@10.0.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
       '@eslint-community/regexpp': 4.12.2
-      eslint: 9.9.1
-      eslint-compat-utils: 0.5.1(eslint@9.9.1)
+      eslint: 10.0.0
+      eslint-compat-utils: 0.5.1(eslint@10.0.0)
 
-  eslint-plugin-lube@0.4.3: {}
+  eslint-plugin-lube@0.5.1(eslint@10.0.0):
+    dependencies:
+      eslint: 10.0.0
 
-  eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4):
+  eslint-plugin-n@17.16.1(eslint@10.0.0)(typescript@5.5.4):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.9.1)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      '@typescript-eslint/utils': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
       enhanced-resolve: 5.18.3
-      eslint: 9.9.1
-      eslint-plugin-es-x: 7.8.0(eslint@9.9.1)
+      eslint: 10.0.0
+      eslint-plugin-es-x: 7.8.0(eslint@10.0.0)
       get-tsconfig: 4.13.0
       globals: 15.15.0
       ignore: 5.3.2
@@ -3634,11 +3646,11 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte):
+  eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 9.9.1
+      eslint: 10.0.0
       esutils: 2.0.3
       globals: 16.3.0
       known-css-properties: 0.37.0
@@ -3646,7 +3658,7 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.6)
       postcss-safe-parser: 7.0.1(postcss@8.5.6)
       semver: 7.7.3
-      svelte-eslint-parser: 1.3.0(svelte@packages+svelte)
+      svelte-eslint-parser: 1.4.1(svelte@packages+svelte)
     optionalDependencies:
       svelte: link:packages/svelte
     transitivePeerDependencies:
@@ -3657,29 +3669,39 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
+  eslint-scope@9.1.0:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-visitor-keys@3.4.3: {}
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.9.1:
+  eslint-visitor-keys@5.0.0: {}
+
+  eslint@10.0.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
       '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.18.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.9.1
+      '@eslint/config-array': 0.23.1
+      '@eslint/config-helpers': 0.5.2
+      '@eslint/core': 1.1.0
+      '@eslint/plugin-kit': 0.6.0
+      '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.0
-      '@nodelib/fs.walk': 1.2.8
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
       ajv: 6.12.6
-      chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.1.0
-      esquery: 1.5.0
+      eslint-scope: 9.1.0
+      eslint-visitor-keys: 5.0.0
+      espree: 11.1.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
@@ -3688,15 +3710,10 @@ snapshots:
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 10.1.2
       natural-compare: 1.4.0
       optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
@@ -3708,6 +3725,12 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 4.2.1
 
+  espree@11.1.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 5.0.0
+
   espree@9.6.1:
     dependencies:
       acorn: 8.15.0
@@ -3716,11 +3739,11 @@ snapshots:
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
+  esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@2.2.1:
+  esrap@2.2.2:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -3841,12 +3864,12 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
-  globals@14.0.0: {}
-
   globals@15.15.0: {}
 
   globals@16.3.0: {}
 
+  globals@17.3.0: {}
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -3858,8 +3881,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
   has-flag@4.0.0: {}
 
   hasown@2.0.0:
@@ -3903,11 +3924,6 @@ snapshots:
   immutable@4.3.7:
     optional: true
 
-  import-fresh@3.3.0:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
   imurmurhash@0.1.4: {}
 
   is-binary-path@2.1.0:
@@ -3937,8 +3953,6 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-potential-custom-element-name@1.0.1: {}
 
   is-reference@1.2.1:
@@ -4102,8 +4116,6 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  lodash.merge@4.6.2: {}
-
   lodash.startcase@4.4.0: {}
 
   loupe@3.2.1: {}
@@ -4137,9 +4149,9 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  minimatch@3.1.2:
+  minimatch@10.1.2:
     dependencies:
-      brace-expansion: 1.1.12
+      '@isaacs/brace-expansion': 5.0.1
 
   minimatch@9.0.5:
     dependencies:
@@ -4216,10 +4228,6 @@ snapshots:
     dependencies:
       quansync: 0.2.11
 
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
   parse5@7.1.2:
     dependencies:
       entities: 4.5.0
@@ -4253,11 +4261,11 @@ snapshots:
 
   pify@4.0.1: {}
 
-  playwright-core@1.46.1: {}
+  playwright-core@1.58.0: {}
 
-  playwright@1.46.1:
+  playwright@1.58.0:
     dependencies:
-      playwright-core: 1.46.1
+      playwright-core: 1.58.0
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -4327,8 +4335,6 @@ snapshots:
 
   regexparam@3.0.0: {}
 
-  resolve-from@4.0.0: {}
-
   resolve-from@5.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -4466,15 +4472,13 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
-  strip-json-comments@3.1.1: {}
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-eslint-parser@1.3.0(svelte@packages+svelte):
+  svelte-eslint-parser@1.4.1(svelte@packages+svelte):
     dependencies:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -4504,8 +4508,6 @@ snapshots:
       glob: 10.5.0
       minimatch: 9.0.5
 
-  text-table@0.2.0: {}
-
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -4553,7 +4555,7 @@ snapshots:
     dependencies:
       typescript: 5.5.4
 
-  ts-api-utils@2.1.0(typescript@5.5.4):
+  ts-api-utils@2.4.0(typescript@5.5.4):
     dependencies:
       typescript: 5.5.4
 
@@ -4566,13 +4568,13 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.48.1(eslint@9.9.1)(typescript@5.5.4):
+  typescript-eslint@8.55.0(eslint@10.0.0)(typescript@5.5.4):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.9.1)(typescript@5.5.4))(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/parser': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.9.1)(typescript@5.5.4)
-      eslint: 9.9.1
+      '@typescript-eslint/eslint-plugin': 8.55.0(@typescript-eslint/parser@8.55.0(eslint@10.0.0)(typescript@5.5.4))(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/parser': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.55.0(eslint@10.0.0)(typescript@5.5.4)
+      eslint: 10.0.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
diff --git a/vitest-xhtml-environment.ts b/vitest-xhtml-environment.ts
new file mode 100644
index 0000000000..dc8b271440
--- /dev/null
+++ b/vitest-xhtml-environment.ts
@@ -0,0 +1,19 @@
+import { type Environment, builtinEnvironments } from 'vitest/environments';
+
+const xhtml_page = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html>`;
+
+export default <Environment>{
+	name: 'jsdom-xhtml',
+	transformMode: 'web',
+	setup(global, { jsdom = {} }) {
+		return builtinEnvironments.jsdom.setup(global, {
+			jsdom: {
+				...jsdom,
+				html: xhtml_page,
+				contentType: 'application/xhtml+xml'
+			}
+		});
+	}
+};