From 0e7e873a1b9a4b5c999ccc2525172d658fc73e25 Mon Sep 17 00:00:00 2001
From: "Dominik G." <dominik.goepel@gmx.de>
Date: Thu, 10 Jul 2025 15:41:47 +0200
Subject: [PATCH 01/76] chore: update svelte-ecosystem-ci trigger (#16315)

---
 .github/workflows/ecosystem-ci-trigger.yml | 43 +++++++++++++++-------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index 71df3242e8..7c6b740370 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -8,9 +8,17 @@ jobs:
   trigger:
     runs-on: ubuntu-latest
     if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
+    permissions:
+      issues: write # to add / delete reactions
+      pull-requests: read # to read PR data
+      actions: read # to check workflow status
+      contents: read # to clone the repo
     steps:
-      - uses: GitHubSecurityLab/actions-permissions/monitor@v1
-      - uses: actions/github-script@v6
+      - name: monitor action permissions
+        uses: GitHubSecurityLab/actions-permissions/monitor@v1
+      - name: check user authorization # user needs triage permission
+        uses: actions/github-script@v7
+        id: check-permissions
         with:
           script: |
             const user = context.payload.sender.login
@@ -29,7 +37,7 @@ jobs:
             }
 
             if (hasTriagePermission) {
-              console.log('Allowed')
+              console.log('User is allowed. Adding +1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
@@ -37,16 +45,18 @@ jobs:
                 content: '+1',
               })
             } else {
-              console.log('Not allowed')
+              console.log('User is not allowed. Adding -1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 comment_id: context.payload.comment.id,
                 content: '-1',
               })
-              throw new Error('not allowed')
+              throw new Error('User does not have the necessary permissions.')
             }
-      - uses: actions/github-script@v6
+
+      - name: Get PR Data
+        uses: actions/github-script@v7
         id: get-pr-data
         with:
           script: |
@@ -59,21 +69,27 @@ jobs:
             return {
               num: context.issue.number,
               branchName: pr.head.ref,
+              commit: pr.head.sha,
               repo: pr.head.repo.full_name
             }
-      - id: generate-token
-        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0
+
+      - name: Generate Token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
         with:
-          app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
-          private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
-          repository: '${{ github.repository_owner }}/svelte-ecosystem-ci'
-      - uses: actions/github-script@v6
+          app-id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
+          repositories: |
+            svelte
+            svelte-ecosystem-ci
+
+      - name: Trigger Downstream Workflow
+        uses: actions/github-script@v7
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
         with:
           github-token: ${{ steps.generate-token.outputs.token }}
-          result-encoding: string
           script: |
             const comment = process.env.COMMENT.trim()
             const prData = ${{ steps.get-pr-data.outputs.result }}
@@ -89,6 +105,7 @@ jobs:
                 prNumber: '' + prData.num,
                 branchName: prData.branchName,
                 repo: prData.repo,
+                commit: prData.commit,
                 suite: suite === '' ? '-' : suite
               }
             })

From 443e76e4baa6b57739b263d4dbb74868508ec2e1 Mon Sep 17 00:00:00 2001
From: "Dominik G." <dominik.goepel@gmx.de>
Date: Thu, 10 Jul 2025 16:56:41 +0200
Subject: [PATCH 02/76] fix: set write permission for PR in
 ecosystem-ci-trigger workflow (#16337)

* fix: set write permission for PR in ecosystem-ci-trigger workflow

* chore: match wording with vites trigger
---
 .github/workflows/ecosystem-ci-trigger.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index 7c6b740370..9be1f00104 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -10,7 +10,7 @@ jobs:
     if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
     permissions:
       issues: write # to add / delete reactions
-      pull-requests: read # to read PR data
+      pull-requests: write # to read PR data, and to add labels
       actions: read # to check workflow status
       contents: read # to clone the repo
     steps:

From 6f0aec527177d4c3ec56b94d1e8b21d28266bbb7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Jul 2025 12:36:10 -0400
Subject: [PATCH 03/76] chore: simplify source ownership (#16333)

* simplify source ownership

* rename

* changeset

* make it unnecessary to hand onto `current_sources` past the initial update
---
 .changeset/eight-walls-mate.md                |  5 ++++
 packages/svelte/src/internal/client/proxy.js  | 29 +++++++++++++++----
 .../src/internal/client/reactivity/sources.js |  4 +--
 .../svelte/src/internal/client/runtime.js     | 28 +++++++++---------
 4 files changed, 45 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/eight-walls-mate.md

diff --git a/.changeset/eight-walls-mate.md b/.changeset/eight-walls-mate.md
new file mode 100644
index 0000000000..a7de4e6278
--- /dev/null
+++ b/.changeset/eight-walls-mate.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: simplify reaction/source ownership tracking
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 97c8da9d33..5da1b7e188 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -1,6 +1,13 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { get, active_effect, active_reaction, set_active_reaction } from './runtime.js';
+import {
+	get,
+	active_effect,
+	update_version,
+	active_reaction,
+	set_update_version,
+	set_active_reaction
+} from './runtime.js';
 import {
 	array_prototype,
 	get_descriptor,
@@ -41,7 +48,7 @@ export function proxy(value) {
 	var version = source(0);
 
 	var stack = DEV && tracing_mode_flag ? get_stack('CreatedAt') : null;
-	var reaction = active_reaction;
+	var parent_version = update_version;
 
 	/**
 	 * Executes the proxy in the context of the reaction it was originally created in, if any
@@ -49,13 +56,23 @@ export function proxy(value) {
 	 * @param {() => T} fn
 	 */
 	var with_parent = (fn) => {
-		var previous_reaction = active_reaction;
-		set_active_reaction(reaction);
+		if (update_version === parent_version) {
+			return fn();
+		}
+
+		// child source is being created after the initial proxy —
+		// prevent it from being associated with the current reaction
+		var reaction = active_reaction;
+		var version = update_version;
+
+		set_active_reaction(null);
+		set_update_version(parent_version);
 
-		/** @type {T} */
 		var result = fn();
 
-		set_active_reaction(previous_reaction);
+		set_active_reaction(reaction);
+		set_update_version(version);
+
 		return result;
 	};
 
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 9f08354cc0..f84312e31c 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -11,7 +11,7 @@ import {
 	untrack,
 	increment_write_version,
 	update_effect,
-	source_ownership,
+	current_sources,
 	check_dirtiness,
 	untracking,
 	is_destroying_effect,
@@ -140,7 +140,7 @@ export function set(source, value, should_proxy = false) {
 		(!untracking || (active_reaction.f & INSPECT_EFFECT) !== 0) &&
 		is_runes() &&
 		(active_reaction.f & (DERIVED | BLOCK_EFFECT | INSPECT_EFFECT)) !== 0 &&
-		!(source_ownership?.reaction === active_reaction && source_ownership.sources.includes(source))
+		!current_sources?.includes(source)
 	) {
 		e.state_unsafe_mutation();
 	}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index d6e7325ba3..6477e2942a 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -88,17 +88,17 @@ export function set_active_effect(effect) {
 /**
  * When sources are created within a reaction, reading and writing
  * them within that reaction should not cause a re-run
- * @type {null | { reaction: Reaction, sources: Source[] }}
+ * @type {null | Source[]}
  */
-export let source_ownership = null;
+export let current_sources = null;
 
 /** @param {Value} value */
 export function push_reaction_value(value) {
 	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
-		if (source_ownership === null) {
-			source_ownership = { reaction: active_reaction, sources: [value] };
+		if (current_sources === null) {
+			current_sources = [value];
 		} else {
-			source_ownership.sources.push(value);
+			current_sources.push(value);
 		}
 	}
 }
@@ -136,6 +136,11 @@ let read_version = 0;
 
 export let update_version = read_version;
 
+/** @param {number} value */
+export function set_update_version(value) {
+	update_version = value;
+}
+
 // If we are working with a get() chain that has no active container,
 // to prevent memory leaks, we skip adding the reaction.
 export let skip_reaction = false;
@@ -236,7 +241,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 
-	if (source_ownership?.reaction === active_reaction && source_ownership.sources.includes(signal)) {
+	if (current_sources?.includes(signal)) {
 		return;
 	}
 
@@ -263,7 +268,7 @@ export function update_reaction(reaction) {
 	var previous_untracked_writes = untracked_writes;
 	var previous_reaction = active_reaction;
 	var previous_skip_reaction = skip_reaction;
-	var previous_reaction_sources = source_ownership;
+	var previous_sources = current_sources;
 	var previous_component_context = component_context;
 	var previous_untracking = untracking;
 	var previous_update_version = update_version;
@@ -277,7 +282,7 @@ export function update_reaction(reaction) {
 		(flags & UNOWNED) !== 0 && (untracking || !is_updating_effect || active_reaction === null);
 	active_reaction = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null;
 
-	source_ownership = null;
+	current_sources = null;
 	set_component_context(reaction.ctx);
 	untracking = false;
 	update_version = ++read_version;
@@ -365,7 +370,7 @@ export function update_reaction(reaction) {
 		untracked_writes = previous_untracked_writes;
 		active_reaction = previous_reaction;
 		skip_reaction = previous_skip_reaction;
-		source_ownership = previous_reaction_sources;
+		current_sources = previous_sources;
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
 		update_version = previous_update_version;
@@ -759,10 +764,7 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (
-			source_ownership?.reaction !== active_reaction ||
-			!source_ownership?.sources.includes(signal)
-		) {
+		if (!current_sources?.includes(signal)) {
 			var deps = active_reaction.deps;
 			if (signal.rv < read_version) {
 				signal.rv = read_version;

From ca1eb55e970243dbed1c032e038860218325d63a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 10 Jul 2025 20:41:02 -0400
Subject: [PATCH 04/76] Version Packages (#16334)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/eight-walls-mate.md  | 5 -----
 .changeset/new-candles-marry.md | 5 -----
 packages/svelte/CHANGELOG.md    | 8 ++++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/eight-walls-mate.md
 delete mode 100644 .changeset/new-candles-marry.md

diff --git a/.changeset/eight-walls-mate.md b/.changeset/eight-walls-mate.md
deleted file mode 100644
index a7de4e6278..0000000000
--- a/.changeset/eight-walls-mate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: simplify reaction/source ownership tracking
diff --git a/.changeset/new-candles-marry.md b/.changeset/new-candles-marry.md
deleted file mode 100644
index 4d55980c72..0000000000
--- a/.changeset/new-candles-marry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: simplify internal component `pop()`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 19aa1466c0..8f158c528f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.35.6
+
+### Patch Changes
+
+- chore: simplify reaction/source ownership tracking ([#16333](https://github.com/sveltejs/svelte/pull/16333))
+
+- chore: simplify internal component `pop()` ([#16331](https://github.com/sveltejs/svelte/pull/16331))
+
 ## 5.35.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4ac497ed41..4eed145f3f 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.35.5",
+  "version": "5.35.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index eb68753d71..266b0b9491 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.35.5';
+export const VERSION = '5.35.6';
 export const PUBLIC_VERSION = '5';

From e802d3b2cc0b6b5f96f853833fc6852705554a6c Mon Sep 17 00:00:00 2001
From: "Ahmad S." <navorite@gmail.com>
Date: Fri, 11 Jul 2025 20:31:22 +0300
Subject: [PATCH 05/76] chore: replace inline regex with variable (#16340)

* chore: replace inline regex with variable

* Update packages/svelte/src/compiler/phases/patterns.js

Co-authored-by: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>

* Update a11y.js

* Update a11y.js

---------

Co-authored-by: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
---
 .changeset/tiny-news-whisper.md                             | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/shared/a11y.js   | 6 ++++--
 packages/svelte/src/compiler/phases/patterns.js             | 2 ++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tiny-news-whisper.md

diff --git a/.changeset/tiny-news-whisper.md b/.changeset/tiny-news-whisper.md
new file mode 100644
index 0000000000..8bf877085d
--- /dev/null
+++ b/.changeset/tiny-news-whisper.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: replace inline regex with variable
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index 1f58a28cad..e103e3eb80 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -6,7 +6,9 @@ import { roles as roles_map, aria, elementRoles } from 'aria-query';
 import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
 import {
 	regex_heading_tags,
+	regex_js_prefix,
 	regex_not_whitespace,
+	regex_redundant_img_alt,
 	regex_starts_with_vowel,
 	regex_whitespaces
 } from '../../../patterns.js';
@@ -1011,7 +1013,7 @@ export function check_element(node, context) {
 		if (href) {
 			const href_value = get_static_text_value(href);
 			if (href_value !== null) {
-				if (href_value === '' || href_value === '#' || /^\W*javascript:/i.test(href_value)) {
+				if (href_value === '' || href_value === '#' || regex_js_prefix.test(href_value)) {
 					w.a11y_invalid_attribute(href, href_value, href.name);
 				}
 			}
@@ -1061,7 +1063,7 @@ export function check_element(node, context) {
 		const alt_attribute = get_static_text_value(attribute_map.get('alt'));
 		const aria_hidden = get_static_value(attribute_map.get('aria-hidden'));
 		if (alt_attribute && !aria_hidden && !has_spread) {
-			if (/\b(image|picture|photo)\b/i.test(alt_attribute)) {
+			if (regex_redundant_img_alt.test(alt_attribute)) {
 				w.a11y_img_redundant_alt(node);
 			}
 		}
diff --git a/packages/svelte/src/compiler/phases/patterns.js b/packages/svelte/src/compiler/phases/patterns.js
index 2bee717131..448be7f949 100644
--- a/packages/svelte/src/compiler/phases/patterns.js
+++ b/packages/svelte/src/compiler/phases/patterns.js
@@ -23,3 +23,5 @@ export const regex_heading_tags = /^h[1-6]$/;
 export const regex_illegal_attribute_character = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
 export const regex_bidirectional_control_characters =
 	/[\u202a\u202b\u202c\u202d\u202e\u2066\u2067\u2068\u2069]+/g;
+export const regex_js_prefix = /^\W*javascript:/i;
+export const regex_redundant_img_alt = /\b(image|picture|photo)\b/i;

From 96c1a10042475c4ef8b55dfdca8538a25e792626 Mon Sep 17 00:00:00 2001
From: "Ahmad S." <navorite@gmail.com>
Date: Fri, 11 Jul 2025 20:41:59 +0300
Subject: [PATCH 06/76] fix: silence autofocus a11y warning inside `<dialog>`
 (#16341)

---
 .changeset/cuddly-humans-end.md                            | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/shared/a11y.js  | 2 +-
 .../tests/validator/samples/a11y-no-autofocus/input.svelte | 7 ++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/cuddly-humans-end.md

diff --git a/.changeset/cuddly-humans-end.md b/.changeset/cuddly-humans-end.md
new file mode 100644
index 0000000000..d02e08de7a
--- /dev/null
+++ b/.changeset/cuddly-humans-end.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: silence autofocus a11y warning inside `<dialog>`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index e103e3eb80..152e679bf5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -877,7 +877,7 @@ export function check_element(node, context) {
 		}
 
 		// no-autofocus
-		if (name === 'autofocus') {
+		if (name === 'autofocus' && node.name !== 'dialog' && !is_parent(context.path, ['dialog'])) {
 			w.a11y_autofocus(attribute);
 		}
 
diff --git a/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
index 769dbe8c5b..7b1dccd1e8 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
@@ -1 +1,6 @@
-<div autofocus></div>
\ No newline at end of file
+<div autofocus></div>
+<dialog autofocus>
+</dialog>
+<dialog>
+	<input autofocus>
+</dialog>

From 58baf80a70433a27a58bf5a642b4ccfd0c23349b Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sun, 13 Jul 2025 02:40:26 -0700
Subject: [PATCH 07/76] docs: add note about proxying state proxies (#16354)

---
 documentation/docs/02-runes/02-$state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 8e6c91fad7..7c4571e575 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -50,7 +50,7 @@ todos.push({
 });
 ```
 
-> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you desire to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
 
 Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
 

From 61f75651d6a4f1106a55c2cd357751d473729e55 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Jul 2025 12:48:08 -0400
Subject: [PATCH 08/76] chore: re-export shared errors (#16356)

---
 .../process-messages/templates/client-errors.js       |  2 ++
 .../process-messages/templates/server-errors.js       |  2 ++
 packages/svelte/src/index-client.js                   | 11 +++++------
 packages/svelte/src/internal/client/context.js        |  4 ++--
 packages/svelte/src/internal/client/dev/validation.js |  7 ++++---
 packages/svelte/src/internal/client/errors.js         |  2 ++
 packages/svelte/src/internal/server/context.js        |  2 +-
 packages/svelte/src/internal/server/dev.js            |  4 ++--
 packages/svelte/src/internal/server/errors.js         |  2 +-
 packages/svelte/src/legacy/legacy-client.js           |  4 ++--
 10 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/svelte/scripts/process-messages/templates/client-errors.js b/packages/svelte/scripts/process-messages/templates/client-errors.js
index c72e9f9d5e..ef749b4ba3 100644
--- a/packages/svelte/scripts/process-messages/templates/client-errors.js
+++ b/packages/svelte/scripts/process-messages/templates/client-errors.js
@@ -1,5 +1,7 @@
 import { DEV } from 'esm-env';
 
+export * from '../shared/errors.js';
+
 /**
  * MESSAGE
  * @param {string} PARAMETER
diff --git a/packages/svelte/scripts/process-messages/templates/server-errors.js b/packages/svelte/scripts/process-messages/templates/server-errors.js
index 6fb7924564..0bbe801abc 100644
--- a/packages/svelte/scripts/process-messages/templates/server-errors.js
+++ b/packages/svelte/scripts/process-messages/templates/server-errors.js
@@ -1,3 +1,5 @@
+export * from '../shared/errors.js';
+
 /**
  * MESSAGE
  * @param {string} PARAMETER
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index 0d962aacd1..ae1caf16d9 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -5,7 +5,6 @@ import { active_reaction, untrack } from './internal/client/runtime.js';
 import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
-import { lifecycle_outside_component } from './internal/shared/errors.js';
 import { legacy_mode_flag } from './internal/flags/index.js';
 import { component_context } from './internal/client/context.js';
 import { DEV } from 'esm-env';
@@ -91,7 +90,7 @@ export function getAbortSignal() {
  */
 export function onMount(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('onMount');
+		e.lifecycle_outside_component('onMount');
 	}
 
 	if (legacy_mode_flag && component_context.l !== null) {
@@ -115,7 +114,7 @@ export function onMount(fn) {
  */
 export function onDestroy(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('onDestroy');
+		e.lifecycle_outside_component('onDestroy');
 	}
 
 	onMount(() => () => untrack(fn));
@@ -158,7 +157,7 @@ function create_custom_event(type, detail, { bubbles = false, cancelable = false
 export function createEventDispatcher() {
 	const active_component_context = component_context;
 	if (active_component_context === null) {
-		lifecycle_outside_component('createEventDispatcher');
+		e.lifecycle_outside_component('createEventDispatcher');
 	}
 
 	return (type, detail, options) => {
@@ -196,7 +195,7 @@ export function createEventDispatcher() {
  */
 export function beforeUpdate(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('beforeUpdate');
+		e.lifecycle_outside_component('beforeUpdate');
 	}
 
 	if (component_context.l === null) {
@@ -219,7 +218,7 @@ export function beforeUpdate(fn) {
  */
 export function afterUpdate(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('afterUpdate');
+		e.lifecycle_outside_component('afterUpdate');
 	}
 
 	if (component_context.l === null) {
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index 6876a89f57..eae326f9bb 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -1,7 +1,7 @@
 /** @import { ComponentContext, DevStackEntry } from '#client' */
 
 import { DEV } from 'esm-env';
-import { lifecycle_outside_component } from '../shared/errors.js';
+import * as e from './errors.js';
 import { source } from './reactivity/sources.js';
 import {
 	active_effect,
@@ -205,7 +205,7 @@ export function is_runes() {
  */
 function get_or_init_context_map(name) {
 	if (component_context === null) {
-		lifecycle_outside_component(name);
+		e.lifecycle_outside_component(name);
 	}
 
 	return (component_context.c ??= new Map(get_parent_context(component_context) || undefined));
diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
index e41e4c4628..60d140c718 100644
--- a/packages/svelte/src/internal/client/dev/validation.js
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -1,15 +1,16 @@
-import { invalid_snippet_arguments } from '../../shared/errors.js';
+import * as e from '../errors.js';
 /**
  * @param {Node} anchor
  * @param {...(()=>any)[]} args
  */
 export function validate_snippet_args(anchor, ...args) {
 	if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
-		invalid_snippet_arguments();
+		e.invalid_snippet_arguments();
 	}
+
 	for (let arg of args) {
 		if (typeof arg !== 'function') {
-			invalid_snippet_arguments();
+			e.invalid_snippet_arguments();
 		}
 	}
 }
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 5c3f5340e1..64dc34e8d0 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -2,6 +2,8 @@
 
 import { DEV } from 'esm-env';
 
+export *  from '../shared/errors.js';
+
 /**
  * Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
  * @returns {never}
diff --git a/packages/svelte/src/internal/server/context.js b/packages/svelte/src/internal/server/context.js
index 4e547f48cb..bae93beb53 100644
--- a/packages/svelte/src/internal/server/context.js
+++ b/packages/svelte/src/internal/server/context.js
@@ -1,7 +1,7 @@
 /** @import { Component } from '#server' */
 import { DEV } from 'esm-env';
 import { on_destroy } from './index.js';
-import * as e from '../shared/errors.js';
+import * as e from './errors.js';
 
 /** @type {Component | null} */
 export var current_component = null;
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index efc761d7c5..3c320f9698 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -5,7 +5,7 @@ import {
 	is_tag_valid_with_parent
 } from '../../html-tree-validation.js';
 import { current_component } from './context.js';
-import { invalid_snippet_arguments } from '../shared/errors.js';
+import * as e from './errors.js';
 import { HeadPayload, Payload } from './payload.js';
 
 /**
@@ -102,6 +102,6 @@ export function validate_snippet_args(payload) {
 		// for some reason typescript consider the type of payload as never after the first instanceof
 		!(payload instanceof Payload || /** @type {any} */ (payload) instanceof HeadPayload)
 	) {
-		invalid_snippet_arguments();
+		e.invalid_snippet_arguments();
 	}
 }
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index e47530c9aa..458937218f 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -1,6 +1,6 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
-
+export *  from '../shared/errors.js';
 
 /**
  * `%name%(...)` is not available on the server
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 45c478ecab..61acbeaa28 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -4,8 +4,8 @@ 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, flushSync, get, set_signal_status } from '../internal/client/runtime.js';
-import { lifecycle_outside_component } from '../internal/shared/errors.js';
 import { define_property, is_array } from '../internal/shared/utils.js';
+import * as e from '../internal/client/errors.js';
 import * as w from '../internal/client/warnings.js';
 import { DEV } from 'esm-env';
 import { FILENAME } from '../constants.js';
@@ -245,7 +245,7 @@ export function handlers(...handlers) {
 export function createBubbler() {
 	const active_component_context = component_context;
 	if (active_component_context === null) {
-		lifecycle_outside_component('createBubbler');
+		e.lifecycle_outside_component('createBubbler');
 	}
 
 	return (/**@type {string}*/ type) => (/**@type {Event}*/ event) => {

From 4ef53a75a9f7428efe169ab2e037e87508c3ac87 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Jul 2025 15:15:02 -0400
Subject: [PATCH 09/76] chore: tidy up some stuff (#16357)

* chore: tidy up some stuff

* shut up dumbass
---
 packages/svelte/knip.json                           | 4 ----
 packages/svelte/src/compiler/phases/scope.js        | 6 +++---
 packages/svelte/src/internal/client/context.js      | 9 +--------
 packages/svelte/src/internal/server/abort-signal.js | 2 +-
 packages/svelte/src/internal/shared/validate.js     | 2 --
 packages/svelte/src/utils.js                        | 2 +-
 6 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/svelte/knip.json b/packages/svelte/knip.json
index 7a27a64a91..0d1bf17e9f 100644
--- a/packages/svelte/knip.json
+++ b/packages/svelte/knip.json
@@ -1,10 +1,6 @@
 {
 	"$schema": "https://unpkg.com/knip@5/schema.json",
 	"entry": [
-		"src/*/index.js",
-		"src/index-client.ts",
-		"src/index-server.ts",
-		"src/index.d.ts",
 		"tests/**/*.js",
 		"tests/**/*.ts",
 		"!tests/**/*.svelte",
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 8a2cc39ba7..662924b52c 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -18,9 +18,9 @@ import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
 
 const UNKNOWN = Symbol('unknown');
 /** Includes `BigInt` */
-export const NUMBER = Symbol('number');
-export const STRING = Symbol('string');
-export const FUNCTION = Symbol('string');
+const NUMBER = Symbol('number');
+const STRING = Symbol('string');
+const FUNCTION = Symbol('string');
 
 /** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
 const globals = {
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index eae326f9bb..a9ceafcd11 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -1,15 +1,8 @@
 /** @import { ComponentContext, DevStackEntry } from '#client' */
-
 import { DEV } from 'esm-env';
 import * as e from './errors.js';
 import { source } from './reactivity/sources.js';
-import {
-	active_effect,
-	active_reaction,
-	set_active_effect,
-	set_active_reaction
-} from './runtime.js';
-import { create_user_effect, teardown } from './reactivity/effects.js';
+import { create_user_effect } from './reactivity/effects.js';
 import { legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
 
diff --git a/packages/svelte/src/internal/server/abort-signal.js b/packages/svelte/src/internal/server/abort-signal.js
index da579b2592..a769a46e3d 100644
--- a/packages/svelte/src/internal/server/abort-signal.js
+++ b/packages/svelte/src/internal/server/abort-signal.js
@@ -1,7 +1,7 @@
 import { STALE_REACTION } from '#client/constants';
 
 /** @type {AbortController | null} */
-export let controller = null;
+let controller = null;
 
 export function abort() {
 	controller?.abort(STALE_REACTION);
diff --git a/packages/svelte/src/internal/shared/validate.js b/packages/svelte/src/internal/shared/validate.js
index bbb237594b..8f3e2807e7 100644
--- a/packages/svelte/src/internal/shared/validate.js
+++ b/packages/svelte/src/internal/shared/validate.js
@@ -1,5 +1,3 @@
-/** @import { TemplateNode } from '#client' */
-/** @import { Getters } from '#shared' */
 import { is_void } from '../../utils.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 921eaec57c..2fc21220f0 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -428,7 +428,7 @@ export function is_mathml(name) {
 	return MATHML_ELEMENTS.includes(name);
 }
 
-export const STATE_CREATION_RUNES = /** @type {const} */ ([
+const STATE_CREATION_RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
 	'$derived',

From a23599a196380ce7fc3fb374dac4daee173776b7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Jul 2025 18:20:29 -0400
Subject: [PATCH 10/76] fix: don't show adjusted error messages in boundaries
 (#16360)

---
 .changeset/large-balloons-agree.md            |  5 ++
 .../src/internal/client/error-handling.js     | 47 ++++++++++++-------
 .../samples/error-boundary-3/_config.js       |  2 +-
 .../samples/error-boundary-3/main.svelte      |  6 +--
 4 files changed, 38 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/large-balloons-agree.md

diff --git a/.changeset/large-balloons-agree.md b/.changeset/large-balloons-agree.md
new file mode 100644
index 0000000000..9355336862
--- /dev/null
+++ b/.changeset/large-balloons-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't show adjusted error messages in boundaries
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index 378f7408ef..b12f21adfc 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -7,14 +7,16 @@ import { BOUNDARY_EFFECT, EFFECT_RAN } from './constants.js';
 import { define_property, get_descriptor } from '../shared/utils.js';
 import { active_effect } from './runtime.js';
 
+const adjustments = new WeakMap();
+
 /**
  * @param {unknown} error
  */
 export function handle_error(error) {
 	var effect = /** @type {Effect} */ (active_effect);
 
-	if (DEV && error instanceof Error) {
-		adjust_error(error, effect);
+	if (DEV && error instanceof Error && !adjustments.has(error)) {
+		adjustments.set(error, get_adjustments(error, effect));
 	}
 
 	if ((effect.f & EFFECT_RAN) === 0) {
@@ -48,21 +50,19 @@ export function invoke_error_boundary(error, effect) {
 		effect = effect.parent;
 	}
 
+	if (error instanceof Error) {
+		apply_adjustments(error);
+	}
+
 	throw error;
 }
 
-/** @type {WeakSet<Error>} */
-const adjusted_errors = new WeakSet();
-
 /**
  * Add useful information to the error message/stack in development
  * @param {Error} error
  * @param {Effect} effect
  */
-function adjust_error(error, effect) {
-	if (adjusted_errors.has(error)) return;
-	adjusted_errors.add(error);
-
+function get_adjustments(error, effect) {
 	const message_descriptor = get_descriptor(error, 'message');
 
 	// if the message was already changed and it's not configurable we can't change it
@@ -78,17 +78,28 @@ function adjust_error(error, effect) {
 		context = context.p;
 	}
 
-	define_property(error, 'message', {
-		value: error.message + `\n${component_stack}\n`
-	});
+	return {
+		message: error.message + `\n${component_stack}\n`,
+		stack: error.stack
+			?.split('\n')
+			.filter((line) => !line.includes('svelte/src/internal'))
+			.join('\n')
+	};
+}
+
+/**
+ * @param {Error} error
+ */
+function apply_adjustments(error) {
+	const adjusted = adjustments.get(error);
+
+	if (adjusted) {
+		define_property(error, 'message', {
+			value: adjusted.message
+		});
 
-	if (error.stack) {
-		// Filter out internal modules
 		define_property(error, 'stack', {
-			value: error.stack
-				.split('\n')
-				.filter((line) => !line.includes('svelte/src/internal'))
-				.join('\n')
+			value: adjusted.stack
 		});
 	}
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
index 040e13676e..06da8f667c 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
@@ -9,6 +9,6 @@ export default test({
 		flushSync();
 
 		assert.deepEqual(logs, ['error caught']);
-		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+		assert.htmlEqual(target.innerHTML, `<div>oh no!</div><button>+</button>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
index bad84666c0..bc7fe072c4 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	function throw_error() {
-		throw new Error('test')
+		throw new Error('oh no!')
 	}
 
 	let count = $state(0);
@@ -9,8 +9,8 @@
 <svelte:boundary onerror={(e) => console.log('error caught')}>
 	{count > 0 ? throw_error() : null}
 
-	{#snippet failed()}
-		<div>Fallback!</div>
+	{#snippet failed(e)}
+		<div>{e.message}</div>
 	{/snippet}
 </svelte:boundary>
 

From 3f3cf9ff36608ecec9d45e3777eabc074e99f5e5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Jul 2025 18:21:10 -0400
Subject: [PATCH 11/76] chore: rename check_dirtiness -> is_dirty (#16359)

---
 .../svelte/src/internal/client/reactivity/effects.js   |  4 ++--
 .../svelte/src/internal/client/reactivity/sources.js   |  4 ++--
 packages/svelte/src/internal/client/runtime.js         | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 51c6805529..b6a40a68be 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -1,6 +1,6 @@
 /** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
 import {
-	check_dirtiness,
+	is_dirty,
 	active_effect,
 	active_reaction,
 	update_effect,
@@ -307,7 +307,7 @@ export function legacy_pre_effect_reset() {
 				set_signal_status(effect, MAYBE_DIRTY);
 			}
 
-			if (check_dirtiness(effect)) {
+			if (is_dirty(effect)) {
 				update_effect(effect);
 			}
 
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index f84312e31c..c04443c93e 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -12,7 +12,7 @@ import {
 	increment_write_version,
 	update_effect,
 	current_sources,
-	check_dirtiness,
+	is_dirty,
 	untracking,
 	is_destroying_effect,
 	push_reaction_value
@@ -218,7 +218,7 @@ export function internal_set(source, value) {
 				if ((effect.f & CLEAN) !== 0) {
 					set_signal_status(effect, MAYBE_DIRTY);
 				}
-				if (check_dirtiness(effect)) {
+				if (is_dirty(effect)) {
 					update_effect(effect);
 				}
 			}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 6477e2942a..5eca31e8cf 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -163,7 +163,7 @@ export function increment_write_version() {
  * @param {Reaction} reaction
  * @returns {boolean}
  */
-export function check_dirtiness(reaction) {
+export function is_dirty(reaction) {
 	var flags = reaction.f;
 
 	if ((flags & DIRTY) !== 0) {
@@ -212,7 +212,7 @@ export function check_dirtiness(reaction) {
 			for (i = 0; i < length; i++) {
 				dependency = dependencies[i];
 
-				if (check_dirtiness(/** @type {Derived} */ (dependency))) {
+				if (is_dirty(/** @type {Derived} */ (dependency))) {
 					update_derived(/** @type {Derived} */ (dependency));
 				}
 
@@ -588,7 +588,7 @@ function flush_queued_effects(effects) {
 		var effect = effects[i];
 
 		if ((effect.f & (DESTROYED | INERT)) === 0) {
-			if (check_dirtiness(effect)) {
+			if (is_dirty(effect)) {
 				var wv = write_version;
 
 				update_effect(effect);
@@ -675,7 +675,7 @@ function process_effects(root) {
 			} else if (is_branch) {
 				effect.f ^= CLEAN;
 			} else {
-				if (check_dirtiness(effect)) {
+				if (is_dirty(effect)) {
 					update_effect(effect);
 				}
 			}
@@ -802,7 +802,7 @@ export function get(signal) {
 	if (is_derived && !is_destroying_effect) {
 		derived = /** @type {Derived} */ (signal);
 
-		if (check_dirtiness(derived)) {
+		if (is_dirty(derived)) {
 			update_derived(derived);
 		}
 	}

From df5801c5fef7735fa67b016ebf0fea5acb8f2fc2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 09:50:55 -0400
Subject: [PATCH 12/76] chore: remove unused option validators (#16361)

---
 .../svelte/src/compiler/validate-options.js   | 27 -------------------
 1 file changed, 27 deletions(-)

diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 85305d7ce9..1fd89139d5 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -241,19 +241,6 @@ function validator(fallback, fn) {
 	};
 }
 
-/**
- * @param {number} fallback
- * @returns {Validator}
- */
-function number(fallback) {
-	return validator(fallback, (input, keypath) => {
-		if (typeof input !== 'number') {
-			throw_error(`${keypath} should be a number, if specified`);
-		}
-		return input;
-	});
-}
-
 /**
  * @param {string | undefined} fallback
  * @param {boolean} allow_empty
@@ -273,20 +260,6 @@ function string(fallback, allow_empty = true) {
 	});
 }
 
-/**
- * @param {string[]} fallback
- * @returns {Validator}
- */
-function string_array(fallback) {
-	return validator(fallback, (input, keypath) => {
-		if (input && !Array.isArray(input)) {
-			throw_error(`${keypath} should be a string array, if specified`);
-		}
-
-		return input;
-	});
-}
-
 /**
  * @param {boolean | undefined} fallback
  * @returns {Validator}

From f6a2599ee13ba58b959ce690d9f26acc1c698d63 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 09:53:30 -0400
Subject: [PATCH 13/76] chore: remove memoize_expression (#16358)

---
 .../client/visitors/SlotElement.js            | 25 ++++++-------
 .../client/visitors/shared/component.js       | 37 +++++++++----------
 .../client/visitors/shared/utils.js           | 12 +-----
 3 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index 401cfde428..e37cdb2bea 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -1,9 +1,9 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Literal, Property } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Literal, Property, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
 import { build_attribute_value } from './shared/element.js';
-import { memoize_expression } from './shared/utils.js';
+import { Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.SlotElement} node
@@ -22,7 +22,7 @@ export function SlotElement(node, context) {
 	/** @type {ExpressionStatement[]} */
 	const lets = [];
 
-	let is_default = true;
+	const memoizer = new Memoizer();
 
 	let name = b.literal('default');
 
@@ -33,12 +33,11 @@ export function SlotElement(node, context) {
 			const { value, has_state } = build_attribute_value(
 				attribute.value,
 				context,
-				(value, metadata) => (metadata.has_call ? memoize_expression(context.state, value) : value)
+				(value, metadata) => (metadata.has_call ? b.call('$.get', memoizer.add(value)) : value)
 			);
 
 			if (attribute.name === 'name') {
 				name = /** @type {Literal} */ (value);
-				is_default = false;
 			} else if (attribute.name !== 'slot') {
 				if (has_state) {
 					props.push(b.get(attribute.name, [b.return(value)]));
@@ -51,9 +50,14 @@ export function SlotElement(node, context) {
 		}
 	}
 
+	memoizer.apply();
+
 	// Let bindings first, they can be used on attributes
 	context.state.init.push(...lets);
 
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
 	const props_expression =
 		spreads.length === 0 ? b.object(props) : b.call('$.spread_props', b.object(props), ...spreads);
 
@@ -62,14 +66,9 @@ export function SlotElement(node, context) {
 			? b.null
 			: b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)));
 
-	const slot = b.call(
-		'$.slot',
-		context.state.node,
-		b.id('$$props'),
-		name,
-		props_expression,
-		fallback
+	statements.push(
+		b.stmt(b.call('$.slot', context.state.node, b.id('$$props'), name, props_expression, fallback))
 	);
 
-	context.state.init.push(b.stmt(slot));
+	context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
 }
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 aa3704b50b..6b52db55ba 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
@@ -4,12 +4,7 @@
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import {
-	build_bind_this,
-	memoize_expression,
-	validate_binding,
-	add_svelte_meta
-} from '../shared/utils.js';
+import { add_svelte_meta, build_bind_this, Memoizer, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
 import { determine_slot } from '../../../../../utils/slot.js';
@@ -48,6 +43,8 @@ export function build_component(node, component_name, context) {
 	/** @type {Record<string, Expression[]>} */
 	const events = {};
 
+	const memoizer = new Memoizer();
+
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
@@ -133,15 +130,13 @@ export function build_component(node, component_name, context) {
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
 			if (attribute.metadata.expression.has_state) {
-				let value = expression;
-
-				if (attribute.metadata.expression.has_call) {
-					const id = b.id(context.state.scope.generate('spread_element'));
-					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
-					value = b.call('$.get', id);
-				}
-
-				props_and_spreads.push(b.thunk(value));
+				props_and_spreads.push(
+					b.thunk(
+						attribute.metadata.expression.has_call
+							? b.call('$.get', memoizer.add(expression))
+							: expression
+					)
+				);
 			} else {
 				props_and_spreads.push(expression);
 			}
@@ -150,10 +145,10 @@ export function build_component(node, component_name, context) {
 				custom_css_props.push(
 					b.init(
 						attribute.name,
-						build_attribute_value(attribute.value, context, (value, metadata) =>
+						build_attribute_value(attribute.value, context, (value, metadata) => {
 							// TODO put the derived in the local block
-							metadata.has_call ? memoize_expression(context.state, value) : value
-						).value
+							return metadata.has_call ? b.call('$.get', memoizer.add(value)) : value;
+						}).value
 					)
 				);
 				continue;
@@ -184,7 +179,7 @@ export function build_component(node, component_name, context) {
 						);
 					});
 
-					return should_wrap_in_derived ? memoize_expression(context.state, value) : value;
+					return should_wrap_in_derived ? b.call('$.get', memoizer.add(value)) : value;
 				}
 			);
 
@@ -444,7 +439,7 @@ export function build_component(node, component_name, context) {
 		};
 	}
 
-	const statements = [...snippet_declarations];
+	const statements = [...snippet_declarations, ...memoizer.deriveds(context.state.analysis.runes)];
 
 	if (is_component_dynamic) {
 		const prev = fn;
@@ -492,5 +487,7 @@ export function build_component(node, component_name, context) {
 		statements.push(add_svelte_meta(fn(anchor), node, 'component', { componentTag: node.name }));
 	}
 
+	memoizer.apply();
+
 	return statements.length > 1 ? b.block(statements) : statements[0];
 }
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 de74fede0c..eed806339d 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
@@ -8,17 +8,7 @@ import { sanitize_template_string } from '../../../../../utils/sanitize_template
 import { regex_is_valid_identifier } from '../../../../patterns.js';
 import is_reference from 'is-reference';
 import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
-import { build_getter, create_derived } from '../../utils.js';
-
-/**
- * @param {ComponentClientTransformState} state
- * @param {Expression} value
- */
-export function memoize_expression(state, value) {
-	const id = b.id(state.scope.generate('expression'));
-	state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-	return b.call('$.get', id);
-}
+import { build_getter } from '../../utils.js';
 
 /**
  * A utility for extracting complex expressions (such as call expressions)

From 6d8f39f8d2e7c78cb5dc4bbfea8ae76150351b2b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 12:36:21 -0400
Subject: [PATCH 14/76] Version Packages (#16347)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/cuddly-humans-end.md    |  5 -----
 .changeset/large-balloons-agree.md |  5 -----
 .changeset/tiny-news-whisper.md    |  5 -----
 packages/svelte/CHANGELOG.md       | 10 ++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/cuddly-humans-end.md
 delete mode 100644 .changeset/large-balloons-agree.md
 delete mode 100644 .changeset/tiny-news-whisper.md

diff --git a/.changeset/cuddly-humans-end.md b/.changeset/cuddly-humans-end.md
deleted file mode 100644
index d02e08de7a..0000000000
--- a/.changeset/cuddly-humans-end.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: silence autofocus a11y warning inside `<dialog>`
diff --git a/.changeset/large-balloons-agree.md b/.changeset/large-balloons-agree.md
deleted file mode 100644
index 9355336862..0000000000
--- a/.changeset/large-balloons-agree.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't show adjusted error messages in boundaries
diff --git a/.changeset/tiny-news-whisper.md b/.changeset/tiny-news-whisper.md
deleted file mode 100644
index 8bf877085d..0000000000
--- a/.changeset/tiny-news-whisper.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: replace inline regex with variable
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8f158c528f..7b822ee9b1 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.35.7
+
+### Patch Changes
+
+- fix: silence autofocus a11y warning inside `<dialog>` ([#16341](https://github.com/sveltejs/svelte/pull/16341))
+
+- fix: don't show adjusted error messages in boundaries ([#16360](https://github.com/sveltejs/svelte/pull/16360))
+
+- chore: replace inline regex with variable ([#16340](https://github.com/sveltejs/svelte/pull/16340))
+
 ## 5.35.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4eed145f3f..44957964b7 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.35.6",
+  "version": "5.35.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 266b0b9491..0674d46652 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.35.6';
+export const VERSION = '5.35.7';
 export const PUBLIC_VERSION = '5';

From 82f648157e50a1498082dd24b78594f7a18e39a5 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Mon, 14 Jul 2025 12:06:00 -0700
Subject: [PATCH 15/76] chore: clean up a11y analysis code (#16345)

* chore: clean up a11y analysis code

* lint

* apply changes from #16340 and #16341

* `utils.js` -> `index.js`

* remove unused exports

* remove unused exports

* newlines are free :)

* consolidate loops

* put the exported function up top

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/warm-olives-applaud.md             |    5 +
 .../2-analyze/visitors/RegularElement.js      |    2 +-
 .../2-analyze/visitors/SvelteElement.js       |    2 +-
 .../visitors/shared/a11y/constants.js         |  319 ++++
 .../shared/{a11y.js => a11y/index.js}         | 1529 +++++++----------
 5 files changed, 975 insertions(+), 882 deletions(-)
 create mode 100644 .changeset/warm-olives-applaud.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
 rename packages/svelte/src/compiler/phases/2-analyze/visitors/shared/{a11y.js => a11y/index.js} (55%)

diff --git a/.changeset/warm-olives-applaud.md b/.changeset/warm-olives-applaud.md
new file mode 100644
index 0000000000..63a7803b99
--- /dev/null
+++ b/.changeset/warm-olives-applaud.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: clean up a11y analysis code
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 d5689e5d55..fab5d46e1b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -9,7 +9,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_attribute, is_custom_element_node } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
-import { check_element } from './shared/a11y.js';
+import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index c45859408c..f2e298f7ea 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import { is_text_attribute } from '../../../utils/ast.js';
-import { check_element } from './shared/a11y.js';
+import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
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
new file mode 100644
index 0000000000..a1b70f2207
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
@@ -0,0 +1,319 @@
+/** @import { ARIARoleRelationConcept  } from 'aria-query' */
+import { roles as roles_map, elementRoles } from 'aria-query';
+// @ts-expect-error package doesn't provide typings
+import { AXObjects, elementAXObjects } from 'axobject-query';
+
+export const aria_attributes =
+	'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
+		' '
+	);
+
+/** @type {Record<string, string[]>} */
+export const a11y_required_attributes = {
+	a: ['href'],
+	area: ['alt', 'aria-label', 'aria-labelledby'],
+	// html-has-lang
+	html: ['lang'],
+	// iframe-has-title
+	iframe: ['title'],
+	img: ['alt'],
+	object: ['title', 'aria-label', 'aria-labelledby']
+};
+
+export const a11y_distracting_elements = ['blink', 'marquee'];
+
+// this excludes `<a>` and `<button>` because they are handled separately
+export const a11y_required_content = [
+	// heading-has-content
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6'
+];
+
+export const a11y_labelable = [
+	'button',
+	'input',
+	'keygen',
+	'meter',
+	'output',
+	'progress',
+	'select',
+	'textarea'
+];
+
+export const a11y_interactive_handlers = [
+	// Keyboard events
+	'keypress',
+	'keydown',
+	'keyup',
+	// Click events
+	'click',
+	'contextmenu',
+	'dblclick',
+	'drag',
+	'dragend',
+	'dragenter',
+	'dragexit',
+	'dragleave',
+	'dragover',
+	'dragstart',
+	'drop',
+	'mousedown',
+	'mouseenter',
+	'mouseleave',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup'
+];
+
+export const a11y_recommended_interactive_handlers = [
+	'click',
+	'mousedown',
+	'mouseup',
+	'keypress',
+	'keydown',
+	'keyup'
+];
+
+export const a11y_nested_implicit_semantics = new Map([
+	['header', 'banner'],
+	['footer', 'contentinfo']
+]);
+
+export const a11y_implicit_semantics = new Map([
+	['a', 'link'],
+	['area', 'link'],
+	['article', 'article'],
+	['aside', 'complementary'],
+	['body', 'document'],
+	['button', 'button'],
+	['datalist', 'listbox'],
+	['dd', 'definition'],
+	['dfn', 'term'],
+	['dialog', 'dialog'],
+	['details', 'group'],
+	['dt', 'term'],
+	['fieldset', 'group'],
+	['figure', 'figure'],
+	['form', 'form'],
+	['h1', 'heading'],
+	['h2', 'heading'],
+	['h3', 'heading'],
+	['h4', 'heading'],
+	['h5', 'heading'],
+	['h6', 'heading'],
+	['hr', 'separator'],
+	['img', 'img'],
+	['li', 'listitem'],
+	['link', 'link'],
+	['main', 'main'],
+	['menu', 'list'],
+	['meter', 'progressbar'],
+	['nav', 'navigation'],
+	['ol', 'list'],
+	['option', 'option'],
+	['optgroup', 'group'],
+	['output', 'status'],
+	['progress', 'progressbar'],
+	['section', 'region'],
+	['summary', 'button'],
+	['table', 'table'],
+	['tbody', 'rowgroup'],
+	['textarea', 'textbox'],
+	['tfoot', 'rowgroup'],
+	['thead', 'rowgroup'],
+	['tr', 'row'],
+	['ul', 'list']
+]);
+
+export const menuitem_type_to_implicit_role = new Map([
+	['command', 'menuitem'],
+	['checkbox', 'menuitemcheckbox'],
+	['radio', 'menuitemradio']
+]);
+
+export const input_type_to_implicit_role = new Map([
+	['button', 'button'],
+	['image', 'button'],
+	['reset', 'button'],
+	['submit', 'button'],
+	['checkbox', 'checkbox'],
+	['radio', 'radio'],
+	['range', 'slider'],
+	['number', 'spinbutton'],
+	['email', 'textbox'],
+	['search', 'searchbox'],
+	['tel', 'textbox'],
+	['text', 'textbox'],
+	['url', 'textbox']
+]);
+
+/**
+ * Exceptions to the rule which follows common A11y conventions
+ * TODO make this configurable by the user
+ * @type {Record<string, string[]>}
+ */
+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'],
+	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+	table: ['grid'],
+	td: ['gridcell'],
+	fieldset: ['radiogroup', 'presentation']
+};
+
+export const combobox_if_list = ['email', 'search', 'tel', 'text', 'url'];
+
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
+export const address_type_tokens = ['shipping', 'billing'];
+
+export const autofill_field_name_tokens = [
+	'',
+	'on',
+	'off',
+	'name',
+	'honorific-prefix',
+	'given-name',
+	'additional-name',
+	'family-name',
+	'honorific-suffix',
+	'nickname',
+	'username',
+	'new-password',
+	'current-password',
+	'one-time-code',
+	'organization-title',
+	'organization',
+	'street-address',
+	'address-line1',
+	'address-line2',
+	'address-line3',
+	'address-level4',
+	'address-level3',
+	'address-level2',
+	'address-level1',
+	'country',
+	'country-name',
+	'postal-code',
+	'cc-name',
+	'cc-given-name',
+	'cc-additional-name',
+	'cc-family-name',
+	'cc-number',
+	'cc-exp',
+	'cc-exp-month',
+	'cc-exp-year',
+	'cc-csc',
+	'cc-type',
+	'transaction-currency',
+	'transaction-amount',
+	'language',
+	'bday',
+	'bday-day',
+	'bday-month',
+	'bday-year',
+	'sex',
+	'url',
+	'photo'
+];
+
+export const contact_type_tokens = ['home', 'work', 'mobile', 'fax', 'pager'];
+
+export const autofill_contact_field_name_tokens = [
+	'tel',
+	'tel-country-code',
+	'tel-national',
+	'tel-area-code',
+	'tel-local',
+	'tel-local-prefix',
+	'tel-local-suffix',
+	'tel-extension',
+	'email',
+	'impp'
+];
+
+export const ElementInteractivity = /** @type {const} */ ({
+	Interactive: 'interactive',
+	NonInteractive: 'non-interactive',
+	Static: 'static'
+});
+
+export const invisible_elements = ['meta', 'html', 'script', 'style'];
+
+export const aria_roles = roles_map.keys();
+
+export const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
+
+const non_abstract_roles = aria_roles.filter((name) => !abstract_roles.includes(name));
+
+export const non_interactive_roles = non_abstract_roles
+	.filter((name) => {
+		const role = roles_map.get(name);
+		return (
+			// 'toolbar' does not descend from widget, but it does support
+			// aria-activedescendant, thus in practice we treat it as a widget.
+			// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
+			// 'generic' is meant to have no semantic meaning.
+			// 'cell' is treated as CellRole by the AXObject which is interactive, so we treat 'cell' it as interactive as well.
+			!['toolbar', 'tabpanel', 'generic', 'cell'].includes(name) &&
+			!role?.superClass.some((classes) => classes.includes('widget') || classes.includes('window'))
+		);
+	})
+	.concat(
+		// The `progressbar` is descended from `widget`, but in practice, its
+		// value is always `readonly`, so we treat it as a non-interactive role.
+		'progressbar'
+	);
+
+export const interactive_roles = non_abstract_roles.filter(
+	(name) =>
+		!non_interactive_roles.includes(name) &&
+		// 'generic' is meant to have no semantic meaning.
+		name !== 'generic'
+);
+
+export const presentation_roles = ['presentation', 'none'];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const non_interactive_element_role_schemas = [];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const interactive_element_role_schemas = [];
+
+for (const [schema, roles] of elementRoles.entries()) {
+	if ([...roles].every((role) => role !== 'generic' && non_interactive_roles.includes(role))) {
+		non_interactive_element_role_schemas.push(schema);
+	}
+
+	if ([...roles].every((role) => interactive_roles.includes(role))) {
+		interactive_element_role_schemas.push(schema);
+	}
+}
+
+const interactive_ax_objects = [...AXObjects.keys()].filter(
+	(name) => AXObjects.get(name).type === 'widget'
+);
+
+/** @type {ARIARoleRelationConcept[]} */
+export const interactive_element_ax_object_schemas = [];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const non_interactive_element_ax_object_schemas = [];
+
+const non_interactive_ax_objects = [...AXObjects.keys()].filter((name) =>
+	['windows', 'structure'].includes(AXObjects.get(name).type)
+);
+
+for (const [schema, ax_object] of elementAXObjects.entries()) {
+	if ([...ax_object].every((role) => interactive_ax_objects.includes(role))) {
+		interactive_element_ax_object_schemas.push(schema);
+	}
+
+	if ([...ax_object].every((role) => non_interactive_ax_objects.includes(role))) {
+		non_interactive_element_ax_object_schemas.push(schema);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
similarity index 55%
rename from packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
rename to packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
index 152e679bf5..5db31314d4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
@@ -1,688 +1,53 @@
-/** @import { Context } from '../../types.js' */
 /** @import { AST } from '#compiler' */
+/** @import { Context } from '../../../types.js' */
 /** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
-import { roles as roles_map, aria, elementRoles } from 'aria-query';
-// @ts-expect-error package doesn't provide typings
-import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
-import {
-	regex_heading_tags,
-	regex_js_prefix,
-	regex_not_whitespace,
-	regex_redundant_img_alt,
-	regex_starts_with_vowel,
-	regex_whitespaces
-} from '../../../patterns.js';
-import * as w from '../../../../warnings.js';
-import fuzzymatch from '../../../1-parse/utils/fuzzymatch.js';
-import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
-import { walk } from 'zimmerframe';
-import { list } from '../../../../utils/string.js';
-import { is_content_editable_binding } from '../../../../../utils.js';
-
-const aria_roles = roles_map.keys();
-const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
-const non_abstract_roles = aria_roles.filter((name) => !abstract_roles.includes(name));
-const non_interactive_roles = non_abstract_roles
-	.filter((name) => {
-		const role = roles_map.get(name);
-		return (
-			// 'toolbar' does not descend from widget, but it does support
-			// aria-activedescendant, thus in practice we treat it as a widget.
-			// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
-			// 'generic' is meant to have no semantic meaning.
-			// 'cell' is treated as CellRole by the AXObject which is interactive, so we treat 'cell' it as interactive as well.
-			!['toolbar', 'tabpanel', 'generic', 'cell'].includes(name) &&
-			!role?.superClass.some((classes) => classes.includes('widget') || classes.includes('window'))
-		);
-	})
-	.concat(
-		// The `progressbar` is descended from `widget`, but in practice, its
-		// value is always `readonly`, so we treat it as a non-interactive role.
-		'progressbar'
-	);
-const interactive_roles = non_abstract_roles.filter(
-	(name) =>
-		!non_interactive_roles.includes(name) &&
-		// 'generic' is meant to have no semantic meaning.
-		name !== 'generic'
-);
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_non_interactive_roles(role) {
-	return non_interactive_roles.includes(role);
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_interactive_roles(role) {
-	return interactive_roles.includes(role);
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_abstract_role(role) {
-	return abstract_roles.includes(role);
-}
-
-const presentation_roles = ['presentation', 'none'];
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_presentation_role(role) {
-	return presentation_roles.includes(role);
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function is_hidden_from_screen_reader(tag_name, attribute_map) {
-	if (tag_name === 'input') {
-		const type = get_static_value(attribute_map.get('type'));
-		if (type === 'hidden') {
-			return true;
-		}
-	}
-
-	const aria_hidden = attribute_map.get('aria-hidden');
-	if (!aria_hidden) return false;
-	const aria_hidden_value = get_static_value(aria_hidden);
-	if (aria_hidden_value === null) return true;
-	return aria_hidden_value === true || aria_hidden_value === 'true';
-}
-
-/**
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function has_disabled_attribute(attribute_map) {
-	const disabled_attr_value = get_static_value(attribute_map.get('disabled'));
-	if (disabled_attr_value) {
-		return true;
-	}
-
-	const aria_disabled_attr = attribute_map.get('aria-disabled');
-	if (aria_disabled_attr) {
-		const aria_disabled_attr_value = get_static_value(aria_disabled_attr);
-		if (aria_disabled_attr_value === 'true') {
-			return true;
-		}
-	}
-	return false;
-}
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const non_interactive_element_role_schemas = [];
-elementRoles.entries().forEach(([schema, roles]) => {
-	if ([...roles].every((role) => role !== 'generic' && non_interactive_roles.includes(role))) {
-		non_interactive_element_role_schemas.push(schema);
-	}
-});
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const interactive_element_role_schemas = [];
-elementRoles.entries().forEach(([schema, roles]) => {
-	if ([...roles].every((role) => interactive_roles.includes(role))) {
-		interactive_element_role_schemas.push(schema);
-	}
-});
-const interactive_ax_objects = [...AXObjects.keys()].filter(
-	(name) => AXObjects.get(name).type === 'widget'
-);
-const non_interactive_ax_objects = [...AXObjects.keys()].filter((name) =>
-	['windows', 'structure'].includes(AXObjects.get(name).type)
-);
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const interactive_element_ax_object_schemas = [];
-elementAXObjects.entries().forEach(
-	/**
-	 * @param {any} _
-	 */
-	([schema, ax_object]) => {
-		if ([...ax_object].every((role) => interactive_ax_objects.includes(role))) {
-			interactive_element_ax_object_schemas.push(schema);
-		}
-	}
-);
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const non_interactive_element_ax_object_schemas = [];
-elementAXObjects.entries().forEach(
-	/**
-	 * @param {any} _
-	 */
-	([schema, ax_object]) => {
-		if ([...ax_object].every((role) => non_interactive_ax_objects.includes(role))) {
-			non_interactive_element_ax_object_schemas.push(schema);
-		}
-	}
-);
-
-/**
- * @param {ARIARoleRelationConcept} schema
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function match_schema(schema, tag_name, attribute_map) {
-	if (schema.name !== tag_name) return false;
-	if (!schema.attributes) return true;
-	return schema.attributes.every((schema_attribute) => {
-		const attribute = attribute_map.get(schema_attribute.name);
-		if (!attribute) return false;
-		if (schema_attribute.value && schema_attribute.value !== get_static_text_value(attribute)) {
-			return false;
-		}
-		return true;
-	});
-}
-
-const ElementInteractivity = /** @type {const} */ ({
-	Interactive: 'interactive',
-	NonInteractive: 'non-interactive',
-	Static: 'static'
-});
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {ElementInteractivity[keyof ElementInteractivity]}
- */
-function element_interactivity(tag_name, attribute_map) {
-	if (
-		interactive_element_role_schemas.some((schema) => match_schema(schema, tag_name, attribute_map))
-	) {
-		return ElementInteractivity.Interactive;
-	}
-	if (
-		tag_name !== 'header' &&
-		non_interactive_element_role_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.NonInteractive;
-	}
-	if (
-		interactive_element_ax_object_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.Interactive;
-	}
-	if (
-		non_interactive_element_ax_object_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.NonInteractive;
-	}
-	return ElementInteractivity.Static;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_interactive_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Interactive;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_non_interactive_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.NonInteractive;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_static_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Static;
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function is_semantic_role_element(role, tag_name, attribute_map) {
-	for (const [schema, ax_object] of elementAXObjects.entries()) {
-		if (
-			schema.name === tag_name &&
-			(!schema.attributes ||
-				schema.attributes.every(
-					/** @param {any} attr */
-					(attr) =>
-						attribute_map.has(attr.name) &&
-						get_static_value(attribute_map.get(attr.name)) === attr.value
-				))
-		) {
-			for (const name of ax_object) {
-				const roles = AXObjectRoles.get(name);
-				if (roles) {
-					for (const { name } of roles) {
-						if (name === role) {
-							return true;
-						}
-					}
-				}
-			}
-		}
-	}
-	return false;
-}
-
-// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
-const address_type_tokens = ['shipping', 'billing'];
-const autofill_field_name_tokens = [
-	'',
-	'on',
-	'off',
-	'name',
-	'honorific-prefix',
-	'given-name',
-	'additional-name',
-	'family-name',
-	'honorific-suffix',
-	'nickname',
-	'username',
-	'new-password',
-	'current-password',
-	'one-time-code',
-	'organization-title',
-	'organization',
-	'street-address',
-	'address-line1',
-	'address-line2',
-	'address-line3',
-	'address-level4',
-	'address-level3',
-	'address-level2',
-	'address-level1',
-	'country',
-	'country-name',
-	'postal-code',
-	'cc-name',
-	'cc-given-name',
-	'cc-additional-name',
-	'cc-family-name',
-	'cc-number',
-	'cc-exp',
-	'cc-exp-month',
-	'cc-exp-year',
-	'cc-csc',
-	'cc-type',
-	'transaction-currency',
-	'transaction-amount',
-	'language',
-	'bday',
-	'bday-day',
-	'bday-month',
-	'bday-year',
-	'sex',
-	'url',
-	'photo'
-];
-const contact_type_tokens = ['home', 'work', 'mobile', 'fax', 'pager'];
-const autofill_contact_field_name_tokens = [
-	'tel',
-	'tel-country-code',
-	'tel-national',
-	'tel-area-code',
-	'tel-local',
-	'tel-local-prefix',
-	'tel-local-suffix',
-	'tel-extension',
-	'email',
-	'impp'
-];
-
-/**
- * @param {null | true | string} autocomplete
- */
-function is_valid_autocomplete(autocomplete) {
-	if (autocomplete === true) {
-		return false;
-	} else if (!autocomplete) {
-		return true; // dynamic value
-	}
-	const tokens = autocomplete.trim().toLowerCase().split(regex_whitespaces);
-	if (typeof tokens[0] === 'string' && tokens[0].startsWith('section-')) {
-		tokens.shift();
-	}
-	if (address_type_tokens.includes(tokens[0])) {
-		tokens.shift();
-	}
-	if (autofill_field_name_tokens.includes(tokens[0])) {
-		tokens.shift();
-	} else {
-		if (contact_type_tokens.includes(tokens[0])) {
-			tokens.shift();
-		}
-		if (autofill_contact_field_name_tokens.includes(tokens[0])) {
-			tokens.shift();
-		} else {
-			return false;
-		}
-	}
-	if (tokens[0] === 'webauthn') {
-		tokens.shift();
-	}
-	return tokens.length === 0;
-}
-
-const aria_attributes =
-	'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
-		' '
-	);
-/** @type {Record<string, string[]>} */
-const a11y_required_attributes = {
-	a: ['href'],
-	area: ['alt', 'aria-label', 'aria-labelledby'],
-	// html-has-lang
-	html: ['lang'],
-	// iframe-has-title
-	iframe: ['title'],
-	img: ['alt'],
-	object: ['title', 'aria-label', 'aria-labelledby']
-};
-const a11y_distracting_elements = ['blink', 'marquee'];
-
-// this excludes `<a>` and `<button>` because they are handled separately
-const a11y_required_content = [
-	// heading-has-content
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6'
-];
-const a11y_labelable = [
-	'button',
-	'input',
-	'keygen',
-	'meter',
-	'output',
-	'progress',
-	'select',
-	'textarea'
-];
-const a11y_interactive_handlers = [
-	// Keyboard events
-	'keypress',
-	'keydown',
-	'keyup',
-	// Click events
-	'click',
-	'contextmenu',
-	'dblclick',
-	'drag',
-	'dragend',
-	'dragenter',
-	'dragexit',
-	'dragleave',
-	'dragover',
-	'dragstart',
-	'drop',
-	'mousedown',
-	'mouseenter',
-	'mouseleave',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup'
-];
-const a11y_recommended_interactive_handlers = [
-	'click',
-	'mousedown',
-	'mouseup',
-	'keypress',
-	'keydown',
-	'keyup'
-];
-const a11y_nested_implicit_semantics = new Map([
-	['header', 'banner'],
-	['footer', 'contentinfo']
-]);
-const a11y_implicit_semantics = new Map([
-	['a', 'link'],
-	['area', 'link'],
-	['article', 'article'],
-	['aside', 'complementary'],
-	['body', 'document'],
-	['button', 'button'],
-	['datalist', 'listbox'],
-	['dd', 'definition'],
-	['dfn', 'term'],
-	['dialog', 'dialog'],
-	['details', 'group'],
-	['dt', 'term'],
-	['fieldset', 'group'],
-	['figure', 'figure'],
-	['form', 'form'],
-	['h1', 'heading'],
-	['h2', 'heading'],
-	['h3', 'heading'],
-	['h4', 'heading'],
-	['h5', 'heading'],
-	['h6', 'heading'],
-	['hr', 'separator'],
-	['img', 'img'],
-	['li', 'listitem'],
-	['link', 'link'],
-	['main', 'main'],
-	['menu', 'list'],
-	['meter', 'progressbar'],
-	['nav', 'navigation'],
-	['ol', 'list'],
-	['option', 'option'],
-	['optgroup', 'group'],
-	['output', 'status'],
-	['progress', 'progressbar'],
-	['section', 'region'],
-	['summary', 'button'],
-	['table', 'table'],
-	['tbody', 'rowgroup'],
-	['textarea', 'textbox'],
-	['tfoot', 'rowgroup'],
-	['thead', 'rowgroup'],
-	['tr', 'row'],
-	['ul', 'list']
-]);
-const menuitem_type_to_implicit_role = new Map([
-	['command', 'menuitem'],
-	['checkbox', 'menuitemcheckbox'],
-	['radio', 'menuitemradio']
-]);
-const input_type_to_implicit_role = new Map([
-	['button', 'button'],
-	['image', 'button'],
-	['reset', 'button'],
-	['submit', 'button'],
-	['checkbox', 'checkbox'],
-	['radio', 'radio'],
-	['range', 'slider'],
-	['number', 'spinbutton'],
-	['email', 'textbox'],
-	['search', 'searchbox'],
-	['tel', 'textbox'],
-	['text', 'textbox'],
-	['url', 'textbox']
-]);
-
-/**
- * Exceptions to the rule which follows common A11y conventions
- * TODO make this configurable by the user
- * @type {Record<string, string[]>}
- */
-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'],
-	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
-	table: ['grid'],
-	td: ['gridcell'],
-	fieldset: ['radiogroup', 'presentation']
-};
-
-const combobox_if_list = ['email', 'search', 'tel', 'text', 'url'];
-
-/** @param {Map<string, AST.Attribute>} attribute_map */
-function input_implicit_role(attribute_map) {
-	const type_attribute = attribute_map.get('type');
-	if (!type_attribute) return;
-	const type = get_static_text_value(type_attribute);
-	if (!type) return;
-	const list_attribute_exists = attribute_map.has('list');
-	if (list_attribute_exists && combobox_if_list.includes(type)) {
-		return 'combobox';
-	}
-	return input_type_to_implicit_role.get(type);
-}
-
-/** @param {Map<string, AST.Attribute>} attribute_map */
-function menuitem_implicit_role(attribute_map) {
-	const type_attribute = attribute_map.get('type');
-	if (!type_attribute) return;
-	const type = get_static_text_value(type_attribute);
-	if (!type) return;
-	return menuitem_type_to_implicit_role.get(type);
-}
-
-/**
- * @param {string} name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function get_implicit_role(name, attribute_map) {
-	if (name === 'menuitem') {
-		return menuitem_implicit_role(attribute_map);
-	} else if (name === 'input') {
-		return input_implicit_role(attribute_map);
-	} else {
-		return a11y_implicit_semantics.get(name);
-	}
-}
-
-const invisible_elements = ['meta', 'html', 'script', 'style'];
-
-/**
- * @param {AST.SvelteNode[]} path
- * @param {string[]} elements
- */
-function is_parent(path, elements) {
-	let i = path.length;
-	while (i--) {
-		const parent = path[i];
-		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
-		if (parent.type === 'RegularElement') {
-			return elements.includes(parent.name);
-		}
-	}
-	return false;
-}
-
-/**
- * @param {AST.Attribute} attribute
- * @param {ARIAProperty} name
- * @param {ARIAPropertyDefinition} schema
- * @param {string | true | null} value
- */
-function validate_aria_attribute_value(attribute, name, schema, value) {
-	const type = schema.type;
-
-	if (value === null) return;
-	if (value === true) value = '';
-
-	if (type === 'boolean' && value !== 'true' && value !== 'false') {
-		w.a11y_incorrect_aria_attribute_type_boolean(attribute, name);
-	} else if (type === 'integer' && (value === '' || !Number.isInteger(+value))) {
-		w.a11y_incorrect_aria_attribute_type_integer(attribute, name);
-	} else if (type === 'number' && (value === '' || isNaN(+value))) {
-		w.a11y_incorrect_aria_attribute_type(attribute, name, 'number');
-	} else if ((type === 'string' || type === 'id') && value === '') {
-		w.a11y_incorrect_aria_attribute_type(attribute, name, 'non-empty string');
-	} else if (type === 'idlist' && value === '') {
-		w.a11y_incorrect_aria_attribute_type_idlist(attribute, name);
-	} else if (type === 'token') {
-		const values = (schema.values ?? []).map((value) => value.toString());
-		if (!values.includes(value.toLowerCase())) {
-			w.a11y_incorrect_aria_attribute_type_token(
-				attribute,
-				name,
-				list(values.map((v) => `"${v}"`))
-			);
-		}
-	} else if (type === 'tokenlist') {
-		const values = (schema.values ?? []).map((value) => value.toString());
-		if (
-			value
-				.toLowerCase()
-				.split(regex_whitespaces)
-				.some((value) => !values.includes(value))
-		) {
-			w.a11y_incorrect_aria_attribute_type_tokenlist(
-				attribute,
-				name,
-				list(values.map((v) => `"${v}"`))
-			);
-		}
-	} else if (type === 'tristate' && value !== 'true' && value !== 'false' && value !== 'mixed') {
-		w.a11y_incorrect_aria_attribute_type_tristate(attribute, name);
-	}
-}
-
-/**
- * @param {AST.RegularElement |AST.SvelteElement} node
- * @param {string[]} attributes
- * @param {string} name
- */
-function warn_missing_attribute(node, attributes, name = node.name) {
-	const article =
-		regex_starts_with_vowel.test(attributes[0]) || attributes[0] === 'href' ? 'an' : 'a';
-	const sequence =
-		attributes.length > 1
-			? attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}`
-			: attributes[0];
-
-	w.a11y_missing_attribute(node, name, article, sequence);
-}
-
-/**
- * @param {AST.Attribute | undefined} attribute
- */
-function get_static_value(attribute) {
-	if (!attribute) return null;
-	if (attribute.value === true) return true;
-	if (is_text_attribute(attribute)) return attribute.value[0].data;
-	return null;
-}
-
-/**
- * @param {AST.Attribute | undefined} attribute
- */
-function get_static_text_value(attribute) {
-	const value = get_static_value(attribute);
-	if (value === true) return null;
-	return value;
-}
+import {
+	a11y_distracting_elements,
+	a11y_implicit_semantics,
+	a11y_interactive_handlers,
+	a11y_labelable,
+	a11y_nested_implicit_semantics,
+	a11y_non_interactive_element_to_interactive_role_exceptions,
+	a11y_recommended_interactive_handlers,
+	a11y_required_attributes,
+	a11y_required_content,
+	abstract_roles,
+	address_type_tokens,
+	aria_attributes,
+	aria_roles,
+	autofill_contact_field_name_tokens,
+	autofill_field_name_tokens,
+	combobox_if_list,
+	contact_type_tokens,
+	ElementInteractivity,
+	input_type_to_implicit_role,
+	interactive_element_ax_object_schemas,
+	interactive_element_role_schemas,
+	interactive_roles,
+	invisible_elements,
+	menuitem_type_to_implicit_role,
+	non_interactive_element_ax_object_schemas,
+	non_interactive_element_role_schemas,
+	non_interactive_roles,
+	presentation_roles
+} from './constants.js';
+import { roles as roles_map, aria } from 'aria-query';
+// @ts-expect-error package doesn't provide typings
+import { AXObjectRoles, elementAXObjects } from 'axobject-query';
+import {
+	regex_heading_tags,
+	regex_js_prefix,
+	regex_not_whitespace,
+	regex_redundant_img_alt,
+	regex_starts_with_vowel,
+	regex_whitespaces
+} from '../../../../patterns.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import { list } from '../../../../../utils/string.js';
+import { walk } from 'zimmerframe';
+import fuzzymatch from '../../../../1-parse/utils/fuzzymatch.js';
+import { is_content_editable_binding } from '../../../../../../utils.js';
+import * as w from '../../../../../warnings.js';
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
@@ -705,22 +70,33 @@ export function check_element(node, context) {
 	let has_contenteditable_binding = false;
 
 	for (const attribute of node.attributes) {
-		if (attribute.type === 'SpreadAttribute') {
-			has_spread = true;
-		} else if (attribute.type === 'OnDirective') {
-			handlers.add(attribute.name);
-		} else if (attribute.type === 'Attribute') {
-			if (is_event_attribute(attribute)) {
-				handlers.add(attribute.name.slice(2));
-			} else {
-				attributes.push(attribute);
-				attribute_map.set(attribute.name, attribute);
-				if (attribute.name === 'contenteditable') {
-					has_contenteditable_attr = true;
+		switch (attribute.type) {
+			case 'Attribute': {
+				if (is_event_attribute(attribute)) {
+					handlers.add(attribute.name.slice(2));
+				} else {
+					attributes.push(attribute);
+					attribute_map.set(attribute.name, attribute);
+					if (attribute.name === 'contenteditable') {
+						has_contenteditable_attr = true;
+					}
+				}
+				break;
+			}
+			case 'SpreadAttribute': {
+				has_spread = true;
+				break;
+			}
+			case 'BindDirective': {
+				if (is_content_editable_binding(attribute.name)) {
+					has_contenteditable_binding = true;
 				}
+				break;
+			}
+			case 'OnDirective': {
+				handlers.add(attribute.name);
+				break;
 			}
-		} else if (attribute.type === 'BindDirective' && is_content_editable_binding(attribute.name)) {
-			has_contenteditable_binding = true;
 		}
 	}
 
@@ -765,15 +141,18 @@ export function check_element(node, context) {
 			}
 		}
 
-		// aria-role
-		if (name === 'role') {
-			if (invisible_elements.includes(node.name)) {
-				// aria-unsupported-elements
-				w.a11y_misplaced_role(attribute, node.name);
-			}
+		switch (name) {
+			// aria-role
+			case 'role': {
+				if (invisible_elements.includes(node.name)) {
+					// aria-unsupported-elements
+					w.a11y_misplaced_role(attribute, node.name);
+				}
 
-			const value = get_static_value(attribute);
-			if (typeof value === 'string') {
+				const value = get_static_value(attribute);
+				if (typeof value !== 'string') {
+					break;
+				}
 				for (const c_r of value.split(regex_whitespaces)) {
 					const current_role = /** @type {ARIARoleDefinitionKey} current_role */ (c_r);
 
@@ -868,30 +247,35 @@ export function check_element(node, context) {
 						w.a11y_no_noninteractive_element_to_interactive_role(node, node.name, current_role);
 					}
 				}
+				break;
 			}
-		}
-
-		// no-access-key
-		if (name === 'accesskey') {
-			w.a11y_accesskey(attribute);
-		}
-
-		// no-autofocus
-		if (name === 'autofocus' && node.name !== 'dialog' && !is_parent(context.path, ['dialog'])) {
-			w.a11y_autofocus(attribute);
-		}
-
-		// scope
-		if (name === 'scope' && !is_dynamic_element && node.name !== 'th') {
-			w.a11y_misplaced_scope(attribute);
-		}
-
-		// tabindex-no-positive
-		if (name === 'tabindex') {
-			const value = get_static_value(attribute);
-			// @ts-ignore todo is tabindex=true correct case?
-			if (!isNaN(value) && +value > 0) {
-				w.a11y_positive_tabindex(attribute);
+			// no-access-key
+			case 'accesskey': {
+				w.a11y_accesskey(attribute);
+				break;
+			}
+			// no-autofocus
+			case 'autofocus': {
+				if (node.name !== 'dialog' && !is_parent(context.path, ['dialog'])) {
+					w.a11y_autofocus(attribute);
+				}
+				break;
+			}
+			// scope
+			case 'scope': {
+				if (!is_dynamic_element && node.name !== 'th') {
+					w.a11y_misplaced_scope(attribute);
+				}
+				break;
+			}
+			// tabindex-no-positive
+			case 'tabindex': {
+				const value = get_static_value(attribute);
+				// @ts-ignore todo is tabindex=true correct case?
+				if (!isNaN(value) && +value > 0) {
+					w.a11y_positive_tabindex(attribute);
+				}
+				break;
 			}
 		}
 	}
@@ -989,174 +373,429 @@ export function check_element(node, context) {
 		}
 	}
 
-	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
-		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
+	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
+		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
+	}
+
+	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
+		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
+	}
+
+	// element-specific checks
+	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
+
+	switch (node.name) {
+		case 'a':
+		case 'button': {
+			const is_hidden = get_static_value(attribute_map.get('aria-hidden')) === 'true';
+			if (!has_spread && !is_hidden && !is_labelled && !has_content(node)) {
+				w.a11y_consider_explicit_label(node);
+			}
+			if (node.name === 'button') {
+				break;
+			}
+			const href = attribute_map.get('href') || attribute_map.get('xlink:href');
+			if (href) {
+				const href_value = get_static_text_value(href);
+				if (href_value !== null) {
+					if (href_value === '' || href_value === '#' || regex_js_prefix.test(href_value)) {
+						w.a11y_invalid_attribute(href, href_value, href.name);
+					}
+				}
+			} else if (!has_spread) {
+				const id_attribute = get_static_value(attribute_map.get('id'));
+				const name_attribute = get_static_value(attribute_map.get('name'));
+				const aria_disabled_attribute = get_static_value(attribute_map.get('aria-disabled'));
+				if (!id_attribute && !name_attribute && aria_disabled_attribute !== 'true') {
+					warn_missing_attribute(node, ['href']);
+				}
+			}
+			break;
+		}
+		case 'input': {
+			const type = attribute_map.get('type');
+			const type_value = get_static_text_value(type);
+			if (type_value === 'image' && !has_spread) {
+				const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
+				const has_attribute = required_attributes.some((name) => attribute_map.has(name));
+				if (!has_attribute) {
+					warn_missing_attribute(node, required_attributes, 'input type="image"');
+				}
+			}
+			// autocomplete-valid
+			const autocomplete = attribute_map.get('autocomplete');
+			if (type && autocomplete) {
+				const autocomplete_value = get_static_value(autocomplete);
+				if (!is_valid_autocomplete(autocomplete_value)) {
+					w.a11y_autocomplete_valid(
+						autocomplete,
+						/** @type {string} */ (autocomplete_value),
+						type_value ?? '...'
+					);
+				}
+			}
+			break;
+		}
+		case 'img': {
+			const alt_attribute = get_static_text_value(attribute_map.get('alt'));
+			const aria_hidden = get_static_value(attribute_map.get('aria-hidden'));
+			if (alt_attribute && !aria_hidden && !has_spread) {
+				if (regex_redundant_img_alt.test(alt_attribute)) {
+					w.a11y_img_redundant_alt(node);
+				}
+			}
+			break;
+		}
+		case 'label': {
+			/** @param {AST.TemplateNode} node */
+			const has_input_child = (node) => {
+				let has = false;
+				walk(
+					node,
+					{},
+					{
+						_(node, { next }) {
+							if (
+								node.type === 'SvelteElement' ||
+								node.type === 'SlotElement' ||
+								node.type === 'Component' ||
+								node.type === 'RenderTag' ||
+								(node.type === 'RegularElement' &&
+									(a11y_labelable.includes(node.name) || node.name === 'slot'))
+							) {
+								has = true;
+							} else {
+								next();
+							}
+						}
+					}
+				);
+				return has;
+			};
+			if (!has_spread && !attribute_map.has('for') && !has_input_child(node)) {
+				w.a11y_label_has_associated_control(node);
+			}
+			break;
+		}
+		case 'video': {
+			const aria_hidden_attribute = attribute_map.get('aria-hidden');
+			const aria_hidden_exist = aria_hidden_attribute && get_static_value(aria_hidden_attribute);
+			if (attribute_map.has('muted') || aria_hidden_exist === 'true' || has_spread) {
+				return;
+			}
+			let has_caption = false;
+			const track = /** @type {AST.RegularElement | undefined} */ (
+				node.fragment.nodes.find((i) => i.type === 'RegularElement' && i.name === 'track')
+			);
+			if (track) {
+				has_caption = track.attributes.some(
+					(a) =>
+						a.type === 'SpreadAttribute' ||
+						(a.type === 'Attribute' && a.name === 'kind' && get_static_value(a) === 'captions')
+				);
+			}
+			if (!has_caption) {
+				w.a11y_media_has_caption(node);
+			}
+			break;
+		}
+		case 'figcaption': {
+			if (!is_parent(context.path, ['figure'])) {
+				w.a11y_figcaption_parent(node);
+			}
+			break;
+		}
+		case 'figure': {
+			const children = node.fragment.nodes.filter((node) => {
+				if (node.type === 'Comment') return false;
+				if (node.type === 'Text') return regex_not_whitespace.test(node.data);
+				return true;
+			});
+			const index = children.findIndex(
+				(child) => child.type === 'RegularElement' && child.name === 'figcaption'
+			);
+			if (index !== -1 && index !== 0 && index !== children.length - 1) {
+				w.a11y_figcaption_index(children[index]);
+			}
+			break;
+		}
+	}
+
+	if (!has_spread && node.name !== 'a') {
+		const required_attributes = a11y_required_attributes[node.name];
+		if (required_attributes) {
+			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
+			if (!has_attribute) {
+				warn_missing_attribute(node, required_attributes);
+			}
+		}
+	}
+
+	if (a11y_distracting_elements.includes(node.name)) {
+		// no-distracting-elements
+		w.a11y_distracting_elements(node, node.name);
+	}
+
+	// Check content
+	if (
+		!has_spread &&
+		!is_labelled &&
+		!has_contenteditable_binding &&
+		a11y_required_content.includes(node.name) &&
+		!has_content(node)
+	) {
+		w.a11y_missing_content(node, node.name);
+	}
+}
+
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_presentation_role(role) {
+	return presentation_roles.includes(role);
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function is_hidden_from_screen_reader(tag_name, attribute_map) {
+	if (tag_name === 'input') {
+		const type = get_static_value(attribute_map.get('type'));
+		if (type === 'hidden') {
+			return true;
+		}
+	}
+
+	const aria_hidden = attribute_map.get('aria-hidden');
+	if (!aria_hidden) return false;
+	const aria_hidden_value = get_static_value(aria_hidden);
+	if (aria_hidden_value === null) return true;
+	return aria_hidden_value === true || aria_hidden_value === 'true';
+}
+
+/**
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function has_disabled_attribute(attribute_map) {
+	const disabled_attr_value = get_static_value(attribute_map.get('disabled'));
+	if (disabled_attr_value) {
+		return true;
+	}
+
+	const aria_disabled_attr = attribute_map.get('aria-disabled');
+	if (aria_disabled_attr) {
+		const aria_disabled_attr_value = get_static_value(aria_disabled_attr);
+		if (aria_disabled_attr_value === 'true') {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {ElementInteractivity[keyof ElementInteractivity]}
+ */
+function element_interactivity(tag_name, attribute_map) {
+	if (
+		interactive_element_role_schemas.some((schema) => match_schema(schema, tag_name, attribute_map))
+	) {
+		return ElementInteractivity.Interactive;
+	}
+	if (
+		tag_name !== 'header' &&
+		non_interactive_element_role_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.NonInteractive;
+	}
+	if (
+		interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.Interactive;
+	}
+	if (
+		non_interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.NonInteractive;
+	}
+	return ElementInteractivity.Static;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_interactive_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Interactive;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_non_interactive_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.NonInteractive;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_static_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Static;
+}
+
+/**
+ * @param {ARIARoleDefinitionKey} role
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function is_semantic_role_element(role, tag_name, attribute_map) {
+	for (const [schema, ax_object] of elementAXObjects.entries()) {
+		if (
+			schema.name === tag_name &&
+			(!schema.attributes ||
+				schema.attributes.every(
+					/** @param {any} attr */
+					(attr) =>
+						attribute_map.has(attr.name) &&
+						get_static_value(attribute_map.get(attr.name)) === attr.value
+				))
+		) {
+			for (const name of ax_object) {
+				const roles = AXObjectRoles.get(name);
+				if (roles) {
+					for (const { name } of roles) {
+						if (name === role) {
+							return true;
+						}
+					}
+				}
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {null | true | string} autocomplete
+ */
+function is_valid_autocomplete(autocomplete) {
+	if (autocomplete === true) {
+		return false;
+	} else if (!autocomplete) {
+		return true; // dynamic value
 	}
-
-	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
-		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
+	const tokens = autocomplete.trim().toLowerCase().split(regex_whitespaces);
+	if (typeof tokens[0] === 'string' && tokens[0].startsWith('section-')) {
+		tokens.shift();
 	}
-
-	// element-specific checks
-	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
-
-	if (node.name === 'a' || node.name === 'button') {
-		const is_hidden = get_static_value(attribute_map.get('aria-hidden')) === 'true';
-
-		if (!has_spread && !is_hidden && !is_labelled && !has_content(node)) {
-			w.a11y_consider_explicit_label(node);
-		}
+	if (address_type_tokens.includes(tokens[0])) {
+		tokens.shift();
 	}
-
-	if (node.name === 'a') {
-		const href = attribute_map.get('href') || attribute_map.get('xlink:href');
-		if (href) {
-			const href_value = get_static_text_value(href);
-			if (href_value !== null) {
-				if (href_value === '' || href_value === '#' || regex_js_prefix.test(href_value)) {
-					w.a11y_invalid_attribute(href, href_value, href.name);
-				}
-			}
-		} else if (!has_spread) {
-			const id_attribute = get_static_value(attribute_map.get('id'));
-			const name_attribute = get_static_value(attribute_map.get('name'));
-			const aria_disabled_attribute = get_static_value(attribute_map.get('aria-disabled'));
-			if (!id_attribute && !name_attribute && aria_disabled_attribute !== 'true') {
-				warn_missing_attribute(node, ['href']);
-			}
+	if (autofill_field_name_tokens.includes(tokens[0])) {
+		tokens.shift();
+	} else {
+		if (contact_type_tokens.includes(tokens[0])) {
+			tokens.shift();
 		}
-	} else if (!has_spread) {
-		const required_attributes = a11y_required_attributes[node.name];
-		if (required_attributes) {
-			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
-			if (!has_attribute) {
-				warn_missing_attribute(node, required_attributes);
-			}
+		if (autofill_contact_field_name_tokens.includes(tokens[0])) {
+			tokens.shift();
+		} else {
+			return false;
 		}
 	}
-
-	if (node.name === 'input') {
-		const type = attribute_map.get('type');
-		const type_value = get_static_text_value(type);
-		if (type_value === 'image' && !has_spread) {
-			const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
-			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
-			if (!has_attribute) {
-				warn_missing_attribute(node, required_attributes, 'input type="image"');
-			}
-		}
-		// autocomplete-valid
-		const autocomplete = attribute_map.get('autocomplete');
-		if (type && autocomplete) {
-			const autocomplete_value = get_static_value(autocomplete);
-			if (!is_valid_autocomplete(autocomplete_value)) {
-				w.a11y_autocomplete_valid(
-					autocomplete,
-					/** @type {string} */ (autocomplete_value),
-					type_value ?? '...'
-				);
-			}
-		}
+	if (tokens[0] === 'webauthn') {
+		tokens.shift();
 	}
+	return tokens.length === 0;
+}
 
-	if (node.name === 'img') {
-		const alt_attribute = get_static_text_value(attribute_map.get('alt'));
-		const aria_hidden = get_static_value(attribute_map.get('aria-hidden'));
-		if (alt_attribute && !aria_hidden && !has_spread) {
-			if (regex_redundant_img_alt.test(alt_attribute)) {
-				w.a11y_img_redundant_alt(node);
-			}
-		}
+/** @param {Map<string, AST.Attribute>} attribute_map */
+function input_implicit_role(attribute_map) {
+	const type_attribute = attribute_map.get('type');
+	if (!type_attribute) return;
+	const type = get_static_text_value(type_attribute);
+	if (!type) return;
+	const list_attribute_exists = attribute_map.has('list');
+	if (list_attribute_exists && combobox_if_list.includes(type)) {
+		return 'combobox';
 	}
+	return input_type_to_implicit_role.get(type);
+}
 
-	if (node.name === 'label') {
-		/** @param {AST.TemplateNode} node */
-		const has_input_child = (node) => {
-			let has = false;
-			walk(
-				node,
-				{},
-				{
-					_(node, { next }) {
-						if (
-							node.type === 'SvelteElement' ||
-							node.type === 'SlotElement' ||
-							node.type === 'Component' ||
-							node.type === 'RenderTag' ||
-							(node.type === 'RegularElement' &&
-								(a11y_labelable.includes(node.name) || node.name === 'slot'))
-						) {
-							has = true;
-						} else {
-							next();
-						}
-					}
-				}
-			);
-			return has;
-		};
-		if (!has_spread && !attribute_map.has('for') && !has_input_child(node)) {
-			w.a11y_label_has_associated_control(node);
-		}
-	}
+/** @param {Map<string, AST.Attribute>} attribute_map */
+function menuitem_implicit_role(attribute_map) {
+	const type_attribute = attribute_map.get('type');
+	if (!type_attribute) return;
+	const type = get_static_text_value(type_attribute);
+	if (!type) return;
+	return menuitem_type_to_implicit_role.get(type);
+}
 
-	if (node.name === 'video') {
-		const aria_hidden_attribute = attribute_map.get('aria-hidden');
-		const aria_hidden_exist = aria_hidden_attribute && get_static_value(aria_hidden_attribute);
-		if (attribute_map.has('muted') || aria_hidden_exist === 'true' || has_spread) {
-			return;
-		}
-		let has_caption = false;
-		const track = /** @type {AST.RegularElement | undefined} */ (
-			node.fragment.nodes.find((i) => i.type === 'RegularElement' && i.name === 'track')
-		);
-		if (track) {
-			has_caption = track.attributes.some(
-				(a) =>
-					a.type === 'SpreadAttribute' ||
-					(a.type === 'Attribute' && a.name === 'kind' && get_static_value(a) === 'captions')
-			);
-		}
-		if (!has_caption) {
-			w.a11y_media_has_caption(node);
-		}
+/**
+ * @param {string} name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function get_implicit_role(name, attribute_map) {
+	if (name === 'menuitem') {
+		return menuitem_implicit_role(attribute_map);
+	} else if (name === 'input') {
+		return input_implicit_role(attribute_map);
+	} else {
+		return a11y_implicit_semantics.get(name);
 	}
+}
 
-	if (node.name === 'figcaption') {
-		if (!is_parent(context.path, ['figure'])) {
-			w.a11y_figcaption_parent(node);
-		}
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_non_interactive_roles(role) {
+	return non_interactive_roles.includes(role);
+}
 
-	if (node.name === 'figure') {
-		const children = node.fragment.nodes.filter((node) => {
-			if (node.type === 'Comment') return false;
-			if (node.type === 'Text') return regex_not_whitespace.test(node.data);
-			return true;
-		});
-		const index = children.findIndex(
-			(child) => child.type === 'RegularElement' && child.name === 'figcaption'
-		);
-		if (index !== -1 && index !== 0 && index !== children.length - 1) {
-			w.a11y_figcaption_index(children[index]);
-		}
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_interactive_roles(role) {
+	return interactive_roles.includes(role);
+}
 
-	if (a11y_distracting_elements.includes(node.name)) {
-		// no-distracting-elements
-		w.a11y_distracting_elements(node, node.name);
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_abstract_role(role) {
+	return abstract_roles.includes(role);
+}
 
-	// Check content
-	if (
-		!has_spread &&
-		!is_labelled &&
-		!has_contenteditable_binding &&
-		a11y_required_content.includes(node.name) &&
-		!has_content(node)
-	) {
-		w.a11y_missing_content(node, node.name);
-	}
+/**
+ * @param {AST.Attribute | undefined} attribute
+ */
+function get_static_text_value(attribute) {
+	const value = get_static_value(attribute);
+	if (value === true) return null;
+	return value;
+}
+
+/**
+ * @param {AST.Attribute | undefined} attribute
+ */
+function get_static_value(attribute) {
+	if (!attribute) return null;
+	if (attribute.value === true) return true;
+	if (is_text_attribute(attribute)) return attribute.value[0].data;
+	return null;
 }
 
 /**
@@ -1188,3 +827,133 @@ function has_content(element) {
 		return true;
 	}
 }
+
+/**
+ * @param {ARIARoleRelationConcept} schema
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function match_schema(schema, tag_name, attribute_map) {
+	if (schema.name !== tag_name) return false;
+	if (!schema.attributes) return true;
+	return schema.attributes.every((schema_attribute) => {
+		const attribute = attribute_map.get(schema_attribute.name);
+		if (!attribute) return false;
+		if (schema_attribute.value && schema_attribute.value !== get_static_text_value(attribute)) {
+			return false;
+		}
+		return true;
+	});
+}
+
+/**
+ * @param {AST.SvelteNode[]} path
+ * @param {string[]} elements
+ */
+function is_parent(path, elements) {
+	let i = path.length;
+	while (i--) {
+		const parent = path[i];
+		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
+		if (parent.type === 'RegularElement') {
+			return elements.includes(parent.name);
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {AST.Attribute} attribute
+ * @param {ARIAProperty} name
+ * @param {ARIAPropertyDefinition} schema
+ * @param {string | true | null} value
+ */
+function validate_aria_attribute_value(attribute, name, schema, value) {
+	const type = schema.type;
+
+	if (value === null) return;
+	if (value === true) value = '';
+
+	switch (type) {
+		case 'id':
+		case 'string': {
+			if (value === '') {
+				w.a11y_incorrect_aria_attribute_type(attribute, name, 'non-empty string');
+			}
+			break;
+		}
+		case 'number': {
+			if (value === '' || isNaN(+value)) {
+				w.a11y_incorrect_aria_attribute_type(attribute, name, 'number');
+			}
+			break;
+		}
+		case 'boolean': {
+			if (value !== 'true' && value !== 'false') {
+				w.a11y_incorrect_aria_attribute_type_boolean(attribute, name);
+			}
+			break;
+		}
+		case 'idlist': {
+			if (value === '') {
+				w.a11y_incorrect_aria_attribute_type_idlist(attribute, name);
+			}
+			break;
+		}
+		case 'integer': {
+			if (value === '' || !Number.isInteger(+value)) {
+				w.a11y_incorrect_aria_attribute_type_integer(attribute, name);
+			}
+			break;
+		}
+		case 'token': {
+			const values = (schema.values ?? []).map((value) => value.toString());
+			if (!values.includes(value.toLowerCase())) {
+				w.a11y_incorrect_aria_attribute_type_token(
+					attribute,
+					name,
+					list(values.map((v) => `"${v}"`))
+				);
+			}
+			break;
+		}
+		case 'tokenlist': {
+			const values = (schema.values ?? []).map((value) => value.toString());
+			if (
+				value
+					.toLowerCase()
+					.split(regex_whitespaces)
+					.some((value) => !values.includes(value))
+			) {
+				w.a11y_incorrect_aria_attribute_type_tokenlist(
+					attribute,
+					name,
+					list(values.map((v) => `"${v}"`))
+				);
+			}
+			break;
+		}
+		case 'tristate': {
+			if (value !== 'true' && value !== 'false' && value !== 'mixed') {
+				w.a11y_incorrect_aria_attribute_type_tristate(attribute, name);
+			}
+			break;
+		}
+	}
+}
+
+/**
+ * @param {AST.RegularElement |AST.SvelteElement} node
+ * @param {string[]} attributes
+ * @param {string} name
+ */
+function warn_missing_attribute(node, attributes, name = node.name) {
+	const article =
+		regex_starts_with_vowel.test(attributes[0]) || attributes[0] === 'href' ? 'an' : 'a';
+	const sequence =
+		attributes.length > 1
+			? attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}`
+			: attributes[0];
+
+	w.a11y_missing_attribute(node, name, article, sequence);
+}

From 0672e48223171f86b309e3de84c1c3846eee0bda Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 15:58:44 -0400
Subject: [PATCH 16/76] feat: allow `await` in components (#15844)

* tidy

* tidy

* yes it can, apparently

* tidy up

* unused

* complete merge

* WIP

* simplify

* debugging help

* WIP

* unused

* partial merge

* WIP

* fix

* add test

* rename

* fix

* unused

* oops

* chore: merge main into async branch (#16197)

* chore: merge main into async branch

* adjust test

* fix: make effects depend on state created inside them (#16198)

* make effects depend on state created inside them

* fix, add github action

* disable test in async mode

* make batch.#deferred private

* fix settled when awaits occur inside pending boundary

* tweak

* change behaviour of `tick()` to be requestAnimationFrame-based

* get rid of a bunch of Promise.resolve chains

* more

* more

* fix test

* disallow `flushSync()` inside effects

* regenerate

* handle errors in block expressions

* make validate_each_keys async-aware

* for unowned deriveds, throw errors lazily

* rename ASYNC_ERROR -> ERROR_VALUE, and avoid conflicts with other flags now that it's used with deriveds as well as sources

* invoke boundary directly

* local effect pending

* update test

* fix

* fix

* fix weird bug in tests

* delete old changeset that somehow got left over here

* Update .changeset/eleven-weeks-dance.md

* update error details

* unused

* simplify

* tweak

* tweak

* tweak

* tweak

* tidy up

* handle errors in async block expressions

* tweak

* groundwork for async attribute_effect

* dry out

* fix async directives

* tidy up

* initialize option values before initing select values

* simplify init_select

* simplify

* tweak

* tidy up

* tweak

* on second thoughts just simplify it here

* tidy

* handle awaits in `<slot>`

* unused

* tidy up

* tidy up

* dry out

* dry out

* Revert "dry out"

This reverts commit 25855163bf7d915492f62d3d0e5370ed74e65132.

* dry out

* dry out

* use let for block-scoped stuff

* dry out

* dry out

* tidy up

* only wrap awaits in `$.save` when necessary

* oops

* remove TODO comment (just checked)

* oops, leftover

* simplify

* unused

* remove logging

* tweak

* unused

* unused

* remove logging

* partial fix

* fix

* remove unused EFFECT_HAS_DERIVED

* Update packages/svelte/src/reactivity/create-subscriber.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* Update packages/svelte/src/index-client.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* Update packages/svelte/src/internal/client/runtime.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* unused

* Update packages/svelte/src/internal/client/reactivity/sources.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* Update packages/svelte/src/internal/client/reactivity/deriveds.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* Update packages/svelte/src/internal/client/reactivity/deriveds.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* prettier

* unused

* fix flags

* tweak

* tweak

* unused

* fix

* no idea what a 'boundary micro task' is or why it was deemed necessary but evidently it isn't

* remove queue_boundary_micro_task

* oops

* note

* tidy up

* remove TODO

* make method private

* simplify

* flesh out await_reactivity_loss warning

* tweak

* update test

* fix

* null out from_async_derived in more places

* tidy up test

* failing test

* unused

* fix test

* fix

* simplify. no idea what the async_mode_flag stuff is about, but it appears unnecessary

* add async_derived_orphan error

* regenerate

* flesh out await_outside_boundary message

* add some JSDoc

* only update `$effect.pending()` if someone is listening, since it causes a double flush and makes debugging harder

* tweak logic to make it clearer why and when we commit a batch

* add a couple of comments

* false -> 0

* add comment

* unused

* silence warning

* add effect_pending_outside_reaction error

* Update packages/svelte/src/compiler/types/index.d.ts

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* suspend batch, not boundary

* rename from_async_derived -> current_async_derived

* tweak

* remove TODO - this method is only called when pending snippet exists

* use error boundary for test - vitest does some weird error swallowing afaict

* flush less often

* restore -> activate

* remove TODO

* move batch-related code into batch.js

* make flush_queued_root_effects a method of batch

* make process_effects a method of batch

* make stuff private

* unused

* regenerate

* update test

* more JSDoc

* add more JSDoc

* branch and block effects do not also need to be render effects

* tidy up

* simplify

* unused

* move code where it belongs

* remove, for now

* fix

* only apply error adjustments when error escapes boundaries

* remove EFFECT_IS_UPDATING

* is_dirty is a better name than check_dirtiness

* duplicates are rare and harmless

* apparently we no longer need the merging logic? we can simplify and fix stuff by removing it

* tidy

* don't commit stale batches

* add skipped failing test

* partial merge

* WIP

* WIP

* WIP

* tweak

* tidy up

* dont update derived status when time-travelling

* tidy up

* tidy up

* tag async deriveds

* tweak

* bail out of secondary flushes

* re-run blocks on subsequent flushes

* add test

* fix

* add tests, one failing

* fix

* flesh out await_waterfall message

* tidy up

* dry out

* unused

* tweak

* tidy up

* TODO

* tweak

* tidy up

* remove TODO

* unused export

* add optimisation back

* revert unneeded changes

* revert

* update some tests

* more

* more

* move some code

* rename

* WIP

* unset context synchronously

* remove unused argument

* Apply suggestions from code review

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* add comment

* add comment

* use queue_micro_task in createSubscriber

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

* prettier

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>
---
 .changeset/eleven-weeks-dance.md              |   5 +
 .github/workflows/ci.yml                      |  17 +
 .../98-reference/.generated/client-errors.md  |  36 ++
 .../.generated/client-warnings.md             |  61 ++
 .../98-reference/.generated/compile-errors.md |  12 +
 .../98-reference/.generated/shared-errors.md  |  20 +
 eslint.config.js                              |   3 +-
 .../svelte/messages/client-errors/errors.md   |  28 +
 .../messages/client-warnings/warnings.md      |  57 ++
 .../svelte/messages/compile-errors/script.md  |   8 +
 .../svelte/messages/shared-errors/errors.md   |  18 +
 packages/svelte/package.json                  |   3 +
 packages/svelte/src/compiler/errors.js        |  18 +
 packages/svelte/src/compiler/migrate/index.js |   5 +-
 .../compiler/phases/1-parse/state/element.js  |   2 +
 .../src/compiler/phases/2-analyze/index.js    |  32 +-
 .../2-analyze/visitors/AwaitExpression.js     |  30 +
 .../2-analyze/visitors/CallExpression.js      |  22 +-
 .../2-analyze/visitors/StyleDirective.js      |   1 +
 .../2-analyze/visitors/SvelteBoundary.js      |   2 +-
 .../2-analyze/visitors/SvelteElement.js       |  14 +-
 .../3-transform/client/transform-client.js    |  70 +-
 .../phases/3-transform/client/types.d.ts      |   9 +-
 .../client/visitors/AwaitExpression.js        | 126 ++++
 .../client/visitors/CallExpression.js         |  10 +-
 .../3-transform/client/visitors/EachBlock.js  |  31 +-
 .../3-transform/client/visitors/Fragment.js   |   4 +-
 .../client/visitors/FunctionDeclaration.js    |   2 +-
 .../3-transform/client/visitors/HtmlTag.js    |  19 +-
 .../3-transform/client/visitors/IfBlock.js    |  42 +-
 .../3-transform/client/visitors/KeyBlock.js   |  28 +-
 .../client/visitors/RegularElement.js         |  21 +-
 .../3-transform/client/visitors/RenderTag.js  |  59 +-
 .../client/visitors/SlotElement.js            |  22 +-
 .../client/visitors/SvelteBoundary.js         |   4 +-
 .../client/visitors/SvelteElement.js          |  41 +-
 .../client/visitors/VariableDeclaration.js    |  44 +-
 .../client/visitors/shared/component.js       |  46 +-
 .../client/visitors/shared/element.js         |  25 +-
 .../client/visitors/shared/function.js        |   2 +-
 .../client/visitors/shared/utils.js           |  35 +-
 .../3-transform/server/transform-server.js    |   2 +
 .../server/visitors/AwaitExpression.js        |  25 +
 .../server/visitors/CallExpression.js         |   4 +
 .../3-transform/server/visitors/IfBlock.js    |  27 +-
 .../server/visitors/SvelteBoundary.js         |  29 +-
 packages/svelte/src/compiler/phases/nodes.js  |   3 +-
 packages/svelte/src/compiler/phases/scope.js  |  19 +
 .../svelte/src/compiler/phases/types.d.ts     |   9 +-
 packages/svelte/src/compiler/types/index.d.ts |   7 +
 .../svelte/src/compiler/types/template.d.ts   |   1 +
 .../svelte/src/compiler/utils/builders.js     |  36 +-
 .../svelte/src/compiler/validate-options.js   |   6 +-
 packages/svelte/src/constants.js              |   2 +
 packages/svelte/src/index-client.js           |   4 +-
 packages/svelte/src/index-server.js           |   2 +
 .../svelte/src/internal/client/constants.js   |   9 +-
 .../svelte/src/internal/client/context.js     |  28 +-
 .../svelte/src/internal/client/dev/debug.js   |   3 +
 .../svelte/src/internal/client/dev/tracing.js |   4 +-
 .../src/internal/client/dom/blocks/async.js   |  26 +
 .../src/internal/client/dom/blocks/await.js   |   3 +-
 .../internal/client/dom/blocks/boundary.js    | 207 +++++-
 .../src/internal/client/dom/blocks/each.js    | 202 ++++--
 .../src/internal/client/dom/blocks/if.js      | 119 ++--
 .../src/internal/client/dom/blocks/key.js     |  44 +-
 .../client/dom/blocks/svelte-component.js     |  43 +-
 .../client/dom/elements/attributes.js         |  81 +--
 .../client/dom/elements/bindings/input.js     |   9 +
 .../src/internal/client/dom/operations.js     |  19 +-
 .../src/internal/client/error-handling.js     |  21 +-
 packages/svelte/src/internal/client/errors.js |  64 ++
 packages/svelte/src/internal/client/index.js  |  15 +-
 .../src/internal/client/reactivity/async.js   | 127 ++++
 .../src/internal/client/reactivity/batch.js   | 603 ++++++++++++++++++
 .../internal/client/reactivity/deriveds.js    | 172 ++++-
 .../src/internal/client/reactivity/effects.js |  97 +--
 .../src/internal/client/reactivity/sources.js |  11 +-
 .../svelte/src/internal/client/runtime.js     | 462 +++++---------
 .../svelte/src/internal/client/types.d.ts     |   4 +-
 .../svelte/src/internal/client/warnings.js    |  25 +
 packages/svelte/src/internal/flags/async.js   |   3 +
 packages/svelte/src/internal/flags/index.js   |  10 +
 packages/svelte/src/internal/server/index.js  |   2 +
 packages/svelte/src/internal/shared/errors.js |  16 +
 packages/svelte/src/legacy/legacy-client.js   |   9 +-
 .../src/reactivity/create-subscriber.js       |   5 +-
 packages/svelte/src/utils.js                  |   1 +
 packages/svelte/tests/helpers.js              |   5 +-
 .../samples/transition-abort/_config.js       |   2 +
 .../svelte/tests/runtime-legacy/shared.ts     |  46 +-
 .../samples/async-abort-signal/_config.js     |  23 +
 .../samples/async-abort-signal/main.svelte    |  29 +
 .../async-attribute-without-state/_config.js  |  18 +
 .../async-attribute-without-state/main.svelte |   7 +
 .../samples/async-attribute/_config.js        |  29 +
 .../samples/async-attribute/main.svelte       |  15 +
 .../_config.js                                |  27 +
 .../main.svelte                               |  28 +
 .../async-block-reject-during-init/_config.js |  10 +
 .../main.svelte                               |   8 +
 .../_config.js                                |  28 +
 .../main.svelte                               |  29 +
 .../samples/async-block-rerun/_config.js      |  53 ++
 .../samples/async-block-rerun/main.svelte     |  45 ++
 .../samples/async-child-effect/_config.js     |  55 ++
 .../samples/async-child-effect/main.svelte    |  26 +
 .../samples/async-class-directive/_config.js  |  20 +
 .../samples/async-class-directive/main.svelte |  11 +
 .../samples/async-derived-in-if/Child.svelte  |   5 +
 .../samples/async-derived-in-if/_config.js    |  19 +
 .../samples/async-derived-in-if/main.svelte   |  17 +
 .../Child.svelte                              |   9 +
 .../_config.js                                |  33 +
 .../main.svelte                               |  20 +
 .../samples/async-derived-module/Child.svelte |  20 +
 .../samples/async-derived-module/_config.js   |  93 +++
 .../samples/async-derived-module/main.svelte  |  21 +
 .../async-derived-module/state.svelte.js      |   9 +
 .../async-derived-unchanging/Component.svelte |  29 +
 .../async-derived-unchanging/_config.js       |  33 +
 .../async-derived-unchanging/main.svelte      |  11 +
 .../samples/async-derived/Child.svelte        |  15 +
 .../samples/async-derived/_config.js          |  48 ++
 .../samples/async-derived/main.svelte         |  21 +
 .../samples/async-each-await-item/_config.js  |  31 +
 .../samples/async-each-await-item/main.svelte |  39 ++
 .../samples/async-each-keyed/_config.js       |  41 ++
 .../samples/async-each-keyed/main.svelte      |  24 +
 .../samples/async-each/_config.js             |  48 ++
 .../samples/async-each/main.svelte            |  17 +
 .../_config.js                                |  11 +
 .../main.svelte                               |   8 +
 .../samples/async-error-recovery/_config.js   |  87 +++
 .../samples/async-error-recovery/main.svelte  |  24 +
 .../samples/async-error/_config.js            |  34 +
 .../samples/async-error/main.svelte           |  20 +
 .../samples/async-expression/_config.js       |  56 ++
 .../samples/async-expression/main.svelte      |  19 +
 .../samples/async-html-tag/_config.js         |  51 ++
 .../samples/async-html-tag/main.svelte        |  15 +
 .../runtime-runes/samples/async-if/_config.js |  31 +
 .../samples/async-if/main.svelte              |  19 +
 .../samples/async-key/_config.js              |  46 ++
 .../samples/async-key/main.svelte             |  17 +
 .../_config.js                                |  35 +
 .../main.svelte                               |  17 +
 .../_config.js                                |  30 +
 .../main.svelte                               |  31 +
 .../samples/async-nested-derived/Child.svelte |  11 +
 .../samples/async-nested-derived/_config.js   |  14 +
 .../samples/async-nested-derived/main.svelte  |  15 +
 .../samples/async-prop/Child.svelte           |   5 +
 .../samples/async-prop/_config.js             |  51 ++
 .../samples/async-prop/main.svelte            |  17 +
 .../samples/async-reactivity-loss/_config.js  |  24 +
 .../samples/async-reactivity-loss/main.svelte |  20 +
 .../samples/async-redirect-initial/_config.js |  51 ++
 .../async-redirect-initial/main.svelte        |  43 ++
 .../samples/async-redirect/_config.js         |  52 ++
 .../samples/async-redirect/main.svelte        |  43 ++
 .../samples/async-render-tag/_config.js       |  51 ++
 .../samples/async-render-tag/main.svelte      |  19 +
 .../samples/async-slot/Child.svelte           |   1 +
 .../samples/async-slot/_config.js             |  13 +
 .../samples/async-slot/main.svelte            |  13 +
 .../samples/async-stale-derived-2/_config.js  |  58 ++
 .../samples/async-stale-derived-2/main.svelte |  34 +
 .../samples/async-stale-derived/_config.js    |  52 ++
 .../samples/async-stale-derived/main.svelte   |  26 +
 .../samples/async-svelte-element/_config.js   |  51 ++
 .../samples/async-svelte-element/main.svelte  |  15 +
 .../async-top-level-in-if/Child.svelte        |   7 +
 .../samples/async-top-level-in-if/_config.js  |  40 ++
 .../samples/async-top-level-in-if/main.svelte |  20 +
 .../samples/async-top-level/Child.svelte      |   7 +
 .../samples/async-top-level/_config.js        |  14 +
 .../samples/async-top-level/main.svelte       |  15 +
 .../async-unresolved-promise/_config.js       |  32 +
 .../async-unresolved-promise/main.svelte      |  19 +
 .../async-waterfall-on-init/_config.js        |  42 ++
 .../async-waterfall-on-init/main.svelte       |  22 +
 .../async-with-sync-derived/_config.js        |  53 ++
 .../async-with-sync-derived/main.svelte       |  19 +
 .../samples/effect-cleanup/_config.js         |   9 +-
 .../samples/effect-cleanup/main.svelte        |   2 +-
 .../samples/error-boundary-18/_config.js      |   2 +
 .../set-context-after-await/Child.svelte      |  11 +
 .../set-context-after-await/_config.js        |  12 +
 .../set-context-after-await/main.svelte       |  11 +
 .../set-context-after-mount/_config.js        |  16 +
 .../set-context-after-mount/main.svelte       |  20 +
 .../samples/tick-timing/_config.js            |   2 +
 .../samples/untrack-own-deriveds/_config.js   |   2 +
 packages/svelte/tests/signals/test.ts         |  76 ++-
 packages/svelte/tests/store/test.ts           |   9 +-
 packages/svelte/tests/suite.ts                |   6 +-
 packages/svelte/types/index.d.ts              |  61 +-
 playgrounds/sandbox/index.html                |   6 +
 playgrounds/sandbox/run.js                    |  15 +-
 playgrounds/sandbox/ssr-common.js             |  17 +
 playgrounds/sandbox/ssr-dev.js                |   1 +
 playgrounds/sandbox/ssr-prod.js               |   1 +
 playgrounds/sandbox/svelte.config.js          |   6 +-
 204 files changed, 5777 insertions(+), 799 deletions(-)
 create mode 100644 .changeset/eleven-weeks-dance.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
 create mode 100644 packages/svelte/src/internal/client/dom/blocks/async.js
 create mode 100644 packages/svelte/src/internal/client/reactivity/async.js
 create mode 100644 packages/svelte/src/internal/client/reactivity/batch.js
 create mode 100644 packages/svelte/src/internal/flags/async.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-each/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-expression/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-if/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-key/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-prop/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-slot/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte
 create mode 100644 playgrounds/sandbox/ssr-common.js

diff --git a/.changeset/eleven-weeks-dance.md b/.changeset/eleven-weeks-dance.md
new file mode 100644
index 0000000000..91245df0eb
--- /dev/null
+++ b/.changeset/eleven-weeks-dance.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: support `await` in components when using the `experimental.async` compiler option
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c0e1d36760..046ad335f3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -43,6 +43,23 @@ jobs:
       - run: pnpm test
         env:
           CI: true
+  TestNoAsync:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm playwright install chromium
+      - run: pnpm test runtime-runes
+        env:
+          CI: true
+          SVELTE_NO_ASYNC: true
   Lint:
     permissions: {}
     runs-on: ubuntu-latest
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 3f33e37d2e..c7d6ec8ac9 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -1,5 +1,17 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### async_derived_orphan
+
+```
+Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+```
+
+In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.
+
+Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.
+
+Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.
+
 ### bind_invalid_checkbox_value
 
 ```
@@ -68,12 +80,28 @@ Effect cannot be created inside a `$derived` value that was not itself created i
 `%rune%` can only be used inside an effect (e.g. during component initialisation)
 ```
 
+### effect_pending_outside_reaction
+
+```
+`$effect.pending()` can only be called inside an effect or derived
+```
+
 ### effect_update_depth_exceeded
 
 ```
 Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
 ```
 
+### flush_sync_in_effect
+
+```
+Cannot use `flushSync` inside an effect
+```
+
+The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ### get_abort_signal_outside_reaction
 
 ```
@@ -116,6 +144,14 @@ Rest element properties of `$props()` such as `%property%` are readonly
 The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 ```
 
+### set_context_after_init
+
+```
+`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+```
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ### state_descriptors_fixed
 
 ```
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index fe90b0db38..1c75faef53 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -34,6 +34,67 @@ function add() {
 }
 ```
 
+### await_reactivity_loss
+
+```
+Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+```
+
+Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
+
+```js
+let total = $derived(await a + b);
+```
+
+...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution.
+
+This does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...
+
+```js
+async function sum() {
+	return await a + b;
+}
+
+let total = $derived(await sum());
+```
+
+...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
+
+```js
+async function sum(a, b) {
+	return await a + b;
+}
+
+let total = $derived(await sum(a, b));
+```
+
+### await_waterfall
+
+```
+An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+```
+
+In a case like this...
+
+```js
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.
+
+(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)
+
+You can solve this by creating the promises first and _then_ awaiting them:
+
+```js
+let aPromise = $derived(one());
+let bPromise = $derived(two());
+
+let a = $derived(await aPromise);
+let b = $derived(await bPromise);
+```
+
 ### binding_property_non_reactive
 
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index db848a0299..20f57770d1 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -480,6 +480,12 @@ Expected token %token%
 Expected whitespace
 ```
 
+### experimental_async
+
+```
+Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+```
+
 ### export_undefined
 
 ```
@@ -534,6 +540,12 @@ The arguments keyword cannot be used within the template or at the top level of
 %message%
 ```
 
+### legacy_await_invalid
+
+```
+Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+```
+
 ### legacy_export_invalid
 
 ```
diff --git a/documentation/docs/98-reference/.generated/shared-errors.md b/documentation/docs/98-reference/.generated/shared-errors.md
index 6c31aaafd0..de34b3f5da 100644
--- a/documentation/docs/98-reference/.generated/shared-errors.md
+++ b/documentation/docs/98-reference/.generated/shared-errors.md
@@ -1,5 +1,25 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### await_outside_boundary
+
+```
+Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+```
+
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<p>{await getData()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction may be lifted in a future version of Svelte.
+
 ### invalid_default_snippet
 
 ```
diff --git a/eslint.config.js b/eslint.config.js
index d7044fc9f1..41d98fa428 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -49,12 +49,13 @@ export default [
 		},
 		rules: {
 			'@typescript-eslint/await-thenable': 'error',
-			'@typescript-eslint/prefer-promise-reject-errors': 'error',
 			'@typescript-eslint/require-await': 'error',
 			'no-console': 'error',
 			'lube/svelte-naming-convention': ['error', { fixSameNames: true }],
 			// eslint isn't that well-versed with JSDoc to know that `foo: /** @type{..} */ (foo)` isn't a violation of this rule, so turn it off
 			'object-shorthand': 'off',
+			// eslint is being a dummy here too
+			'@typescript-eslint/prefer-promise-reject-errors': 'off',
 			'no-var': 'off',
 
 			// TODO: enable these rules and run `pnpm lint:fix`
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 47c2038d70..2ce25dbd53 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -1,3 +1,13 @@
+## async_derived_orphan
+
+> Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+
+In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.
+
+Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.
+
+Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.
+
 ## bind_invalid_checkbox_value
 
 > Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
@@ -44,10 +54,22 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 > `%rune%` can only be used inside an effect (e.g. during component initialisation)
 
+## effect_pending_outside_reaction
+
+> `$effect.pending()` can only be called inside an effect or derived
+
 ## effect_update_depth_exceeded
 
 > Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
 
+## flush_sync_in_effect
+
+> Cannot use `flushSync` inside an effect
+
+The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ## get_abort_signal_outside_reaction
 
 > `getAbortSignal()` can only be called inside an effect or derived
@@ -76,6 +98,12 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
+## set_context_after_init
+
+> `setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ## state_descriptors_fixed
 
 > Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index f1901271d1..498c19a547 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -30,6 +30,63 @@ function add() {
 }
 ```
 
+## await_reactivity_loss
+
+> Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+
+Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
+
+```js
+let total = $derived(await a + b);
+```
+
+...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution.
+
+This does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...
+
+```js
+async function sum() {
+	return await a + b;
+}
+
+let total = $derived(await sum());
+```
+
+...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
+
+```js
+async function sum(a, b) {
+	return await a + b;
+}
+
+let total = $derived(await sum(a, b));
+```
+
+## await_waterfall
+
+> An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+
+In a case like this...
+
+```js
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.
+
+(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)
+
+You can solve this by creating the promises first and _then_ awaiting them:
+
+```js
+let aPromise = $derived(one());
+let bPromise = $derived(two());
+
+let a = $derived(await aPromise);
+let b = $derived(await bPromise);
+```
+
 ## binding_property_non_reactive
 
 > `%binding%` is binding to a non-reactive property
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index e11975aef2..2b0c5eafdf 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -70,6 +70,10 @@ This turned out to be buggy and unpredictable, particularly when working with de
 
 > `$effect()` can only be used as an expression statement
 
+## experimental_async
+
+> Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+
 ## export_undefined
 
 > `%name%` is not defined
@@ -98,6 +102,10 @@ This turned out to be buggy and unpredictable, particularly when working with de
 
 > The arguments keyword cannot be used within the template or at the top level of a component
 
+## legacy_await_invalid
+
+> Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+
 ## legacy_export_invalid
 
 > Cannot use `export let` in runes mode — use `$props()` instead
diff --git a/packages/svelte/messages/shared-errors/errors.md b/packages/svelte/messages/shared-errors/errors.md
index 4b4d332202..f9160671d3 100644
--- a/packages/svelte/messages/shared-errors/errors.md
+++ b/packages/svelte/messages/shared-errors/errors.md
@@ -1,3 +1,21 @@
+## await_outside_boundary
+
+> Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<p>{await getData()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction may be lifted in a future version of Svelte.
+
 ## invalid_default_snippet
 
 > Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 44957964b7..0dc8b20f98 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -59,6 +59,9 @@
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },
+    "./internal/flags/async": {
+      "default": "./src/internal/flags/async.js"
+    },
     "./internal/flags/legacy": {
       "default": "./src/internal/flags/legacy.js"
     },
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index e9fa33b054..599d3e8248 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -170,6 +170,15 @@ export function effect_invalid_placement(node) {
 	e(node, 'effect_invalid_placement', `\`$effect()\` can only be used as an expression statement\nhttps://svelte.dev/e/effect_invalid_placement`);
 }
 
+/**
+ * Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function experimental_async(node) {
+	e(node, 'experimental_async', `Cannot use \`await\` in deriveds and template expressions, or at the top level of a component, unless the \`experimental.async\` compiler option is \`true\`\nhttps://svelte.dev/e/experimental_async`);
+}
+
 /**
  * `%name%` is not defined
  * @param {null | number | NodeLike} node
@@ -235,6 +244,15 @@ export function invalid_arguments_usage(node) {
 	e(node, 'invalid_arguments_usage', `The arguments keyword cannot be used within the template or at the top level of a component\nhttps://svelte.dev/e/invalid_arguments_usage`);
 }
 
+/**
+ * Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function legacy_await_invalid(node) {
+	e(node, 'legacy_await_invalid', `Cannot use \`await\` in deriveds and template expressions, or at the top level of a component, unless in runes mode\nhttps://svelte.dev/e/legacy_await_invalid`);
+}
+
 /**
  * Cannot use `export let` in runes mode — use `$props()` instead
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index fdc9734f85..0e2fe019ed 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -145,7 +145,10 @@ export function migrate(source, { filename, use_ts } = {}) {
 			...validate_component_options({}, ''),
 			...parsed_options,
 			customElementOptions,
-			filename: filename ?? '(unknown)'
+			filename: filename ?? '(unknown)',
+			experimental: {
+				async: true
+			}
 		};
 
 		const str = new MagicString(source);
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 6b6c9160d8..87332f647d 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -295,6 +295,8 @@ export default function element(parser) {
 		} else {
 			element.tag = get_attribute_expression(definition);
 		}
+
+		element.metadata.expression = create_expression_metadata();
 	}
 
 	if (is_top_level_script_or_style) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index d73e273ec2..258b59018a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,4 +1,4 @@
-/** @import { Comment, Expression, Node, Program } from 'estree' */
+/** @import { Expression, Node, Program } from 'estree' */
 /** @import { Binding, AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
@@ -22,6 +22,7 @@ import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AttachTag } from './visitors/AttachTag.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { BindDirective } from './visitors/BindDirective.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
@@ -140,6 +141,7 @@ const visitors = {
 	AttachTag,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BindDirective,
 	CallExpression,
 	ClassBody,
@@ -211,9 +213,14 @@ function js(script, root, allow_reactive_declarations, parent) {
 		body: []
 	};
 
-	const { scope, scopes } = create_scopes(ast, root, allow_reactive_declarations, parent);
+	const { scope, scopes, has_await } = create_scopes(
+		ast,
+		root,
+		allow_reactive_declarations,
+		parent
+	);
 
-	return { ast, scope, scopes };
+	return { ast, scope, scopes, has_await };
 }
 
 /**
@@ -244,7 +251,7 @@ export function analyze_module(source, options) {
 	state.set_source(source);
 	const ast = parse(source, comments, false, false);
 
-	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
+	const { scope, scopes, has_await } = create_scopes(ast, new ScopeRoot(), false, null);
 
 	for (const [name, references] of scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -261,12 +268,13 @@ export function analyze_module(source, options) {
 
 	/** @type {Analysis} */
 	const analysis = {
-		module: { ast, scope, scopes },
+		module: { ast, scope, scopes, has_await },
 		name: options.filename,
 		accessors: false,
 		runes: true,
 		immutable: true,
 		tracing: false,
+		async_deriveds: new Set(),
 		comments,
 		classes: new Map()
 	};
@@ -314,7 +322,12 @@ export function analyze_component(root, source, options) {
 	const module = js(root.module, scope_root, false, null);
 	const instance = js(root.instance, scope_root, true, module.scope);
 
-	const { scope, scopes } = create_scopes(root.fragment, scope_root, false, instance.scope);
+	const { scope, scopes, has_await } = create_scopes(
+		root.fragment,
+		scope_root,
+		false,
+		instance.scope
+	);
 
 	/** @type {Template} */
 	const template = { ast: root.fragment, scope, scopes };
@@ -422,7 +435,9 @@ export function analyze_component(root, source, options) {
 
 	const component_name = get_component_name(options.filename);
 
-	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
+	const runes =
+		options.runes ??
+		(has_await || instance.has_await || Array.from(module.scope.references.keys()).some(is_rune));
 
 	if (!runes) {
 		for (let check of synthetic_stores_legacy_check) {
@@ -512,7 +527,8 @@ export function analyze_component(root, source, options) {
 		source,
 		undefined_exports: new Map(),
 		snippet_renderers: new Map(),
-		snippets: new Set()
+		snippets: new Set(),
+		async_deriveds: new Set()
 	};
 
 	state.reset({
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..af7d0307e9
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
@@ -0,0 +1,30 @@
+/** @import { AwaitExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	let suspend = context.state.ast_type === 'instance' && context.state.function_depth === 1;
+
+	if (context.state.expression) {
+		context.state.expression.has_await = true;
+		suspend = true;
+	}
+
+	// disallow top-level `await` or `await` in template expressions
+	// unless a) in runes mode and b) opted into `experimental.async`
+	if (suspend) {
+		if (!context.state.options.experimental.async) {
+			e.experimental_async(node);
+		}
+
+		if (!context.state.analysis.runes) {
+			e.legacy_await_invalid(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 33abb52cac..9b6337b9ed 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -7,6 +7,7 @@ import { get_parent } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
 import { dev, locate_node, source } from '../../../state.js';
 import * as b from '#compiler/builders';
+import { create_expression_metadata } from '../../nodes.js';
 
 /**
  * @param {CallExpression} node
@@ -163,6 +164,13 @@ export function CallExpression(node, context) {
 
 			break;
 
+		case '$effect.pending':
+			if (context.state.expression) {
+				context.state.expression.has_state = true;
+			}
+
+			break;
+
 		case '$inspect':
 			if (node.arguments.length < 1) {
 				e.rune_invalid_arguments_length(node, rune, 'one or more arguments');
@@ -227,7 +235,19 @@ export function CallExpression(node, context) {
 	}
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived') {
+	if (rune === '$derived') {
+		const expression = create_expression_metadata();
+
+		context.next({
+			...context.state,
+			function_depth: context.state.function_depth + 1,
+			expression
+		});
+
+		if (expression.has_await) {
+			context.state.analysis.async_deriveds.add(node);
+		}
+	} else if (rune === '$inspect') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
index 7d6eb5be99..9699d3c03b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -32,6 +32,7 @@ export function StyleDirective(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+			node.metadata.expression.has_await ||= chunk.metadata.expression.has_await;
 		}
 	}
 }
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 d50cb80cb8..35af96ba12 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 
-const valid = ['onerror', 'failed'];
+const valid = ['onerror', 'failed', 'pending'];
 
 /**
  * @param {AST.SvelteBoundary} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index f2e298f7ea..3f7b0ec6b8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -62,5 +62,17 @@ export function SvelteElement(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next({ ...context.state, parent_element: null });
+	context.visit(node.tag, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	for (const attribute of node.attributes) {
+		context.visit(attribute);
+	}
+
+	context.visit(node.fragment, {
+		...context.state,
+		parent_element: null
+	});
 }
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 a9c0651e0f..c42d1b95d8 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
@@ -12,6 +12,7 @@ import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { BinaryExpression } from './visitors/BinaryExpression.js';
 import { BindDirective } from './visitors/BindDirective.js';
 import { BlockStatement } from './visitors/BlockStatement.js';
@@ -88,6 +89,7 @@ const visitors = {
 	AssignmentExpression,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BinaryExpression,
 	BindDirective,
 	BlockStatement,
@@ -162,6 +164,7 @@ export function client_component(analysis, options) {
 		state_fields: new Map(),
 		transform: {},
 		in_constructor: false,
+		in_derived: false,
 		instance_level_snippets: [],
 		module_level_snippets: [],
 
@@ -350,7 +353,7 @@ export function client_component(analysis, options) {
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];
 	if (dev) push_args.push(b.id(analysis.name));
 
-	const component_block = b.block([
+	let component_block = b.block([
 		...store_setup,
 		...legacy_reactive_declarations,
 		...group_binding_declarations,
@@ -358,10 +361,49 @@ export function client_component(analysis, options) {
 		.../** @type {ESTree.Statement[]} */ (instance.body),
 		analysis.runes || !analysis.needs_context
 			? b.empty
-			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)),
-		.../** @type {ESTree.Statement[]} */ (template.body)
+			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined))
 	]);
 
+	const should_inject_context =
+		dev ||
+		analysis.needs_context ||
+		analysis.reactive_statements.size > 0 ||
+		component_returned_object.length > 0;
+
+	let should_inject_props =
+		should_inject_context ||
+		analysis.needs_props ||
+		analysis.uses_props ||
+		analysis.uses_rest_props ||
+		analysis.uses_slots ||
+		analysis.slot_names.size > 0;
+
+	if (analysis.instance.has_await) {
+		const body = b.function_declaration(
+			b.id('$$body'),
+			should_inject_props ? [b.id('$$anchor'), b.id('$$props')] : [b.id('$$anchor')],
+			b.block([
+				b.var('$$unsuspend', b.call('$.suspend')),
+				...component_block.body,
+				b.if(b.call('$.aborted'), b.return()),
+				.../** @type {ESTree.Statement[]} */ (template.body),
+				b.stmt(b.call('$$unsuspend'))
+			]),
+			true
+		);
+
+		state.hoisted.push(body);
+
+		component_block = b.block([
+			b.var('fragment', b.call('$.comment')),
+			b.var('node', b.call('$.first_child', b.id('fragment'))),
+			b.stmt(b.call(body.id, b.id('node'), should_inject_props && b.id('$$props'))),
+			b.stmt(b.call('$.append', b.id('$$anchor'), b.id('fragment')))
+		]);
+	} else {
+		component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
+	}
+
 	// trick esrap into including comments
 	component_block.loc = instance.loc;
 
@@ -398,12 +440,6 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	const should_inject_context =
-		dev ||
-		analysis.needs_context ||
-		analysis.reactive_statements.size > 0 ||
-		component_returned_object.length > 0;
-
 	// we want the cleanup function for the stores to run as the very last thing
 	// so that it can effectively clean up the store subscription even after the user effects runs
 	if (should_inject_context) {
@@ -469,14 +505,6 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.const('$$slots', b.call('$.sanitize_slots', b.id('$$props'))));
 	}
 
-	let should_inject_props =
-		should_inject_context ||
-		analysis.needs_props ||
-		analysis.uses_props ||
-		analysis.uses_rest_props ||
-		analysis.uses_slots ||
-		analysis.slot_names.size > 0;
-
 	// Merge hoisted statements into module body.
 	// Ensure imports are on top, with the order preserved, then module body, then hoisted statements
 	/** @type {ESTree.ImportDeclaration[]} */
@@ -537,6 +565,10 @@ export function client_component(analysis, options) {
 		);
 	}
 
+	if (options.experimental.async) {
+		body.unshift(b.imports([], 'svelte/internal/flags/async'));
+	}
+
 	if (!analysis.runes) {
 		body.unshift(b.imports([], 'svelte/internal/flags/legacy'));
 	}
@@ -670,7 +702,9 @@ export function client_module(analysis, options) {
 		scopes: analysis.module.scopes,
 		state_fields: new Map(),
 		transform: {},
-		in_constructor: false
+		in_constructor: false,
+		in_derived: false,
+		is_instance: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (
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 cf5c942268..e691be169b 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
@@ -21,6 +21,14 @@ export interface ClientTransformState extends TransformState {
 	 */
 	readonly in_constructor: boolean;
 
+	/**
+	 * True if we're directly inside a `$derived(...)` expression (but not `$derived.by(...)`)
+	 */
+	readonly in_derived: boolean;
+
+	/** `true` if we're transforming the contents of `<script>` */
+	readonly is_instance: boolean;
+
 	readonly transform: Record<
 		string,
 		{
@@ -41,7 +49,6 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly options: ValidatedCompileOptions;
 	readonly hoisted: Array<Statement | ModuleDeclaration>;
 	readonly events: Set<string>;
-	readonly is_instance: boolean;
 	readonly store_to_invalidate?: string;
 
 	/** Stuff that happens before the render effect(s) */
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..803d317ad4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
@@ -0,0 +1,126 @@
+/** @import { AwaitExpression, Expression, Property, SpreadElement } from 'estree' */
+/** @import { Context } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	const argument = /** @type {Expression} */ (context.visit(node.argument));
+
+	const tla = context.state.is_instance && context.state.scope.function_depth === 1;
+
+	// preserve context for
+	//   a) top-level await and
+	//   b) awaits that precede other expressions in template or `$derived(...)`
+	if (tla || (is_reactive_expression(context) && !is_last_evaluated_expression(context, node))) {
+		return b.call(b.await(b.call('$.save', argument)));
+	}
+
+	// in dev, note which values are read inside a reactive expression,
+	// but don't track them
+	else if (dev && !is_ignored(node, 'await_reactivity_loss')) {
+		return b.call(b.await(b.call('$.track_reactivity_loss', argument)));
+	}
+
+	return argument === node.argument ? node : { ...node, argument };
+}
+
+/**
+ * @param {Context} context
+ */
+function is_reactive_expression(context) {
+	if (context.state.in_derived) {
+		return true;
+	}
+
+	let i = context.path.length;
+
+	while (i--) {
+		const parent = context.path[i];
+
+		if (
+			parent.type === 'ArrowFunctionExpression' ||
+			parent.type === 'FunctionExpression' ||
+			parent.type === 'FunctionDeclaration'
+		) {
+			return false;
+		}
+
+		// @ts-expect-error we could probably use a neater/more robust mechanism
+		if (parent.metadata) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {Context} context
+ * @param {Expression | SpreadElement | Property} node
+ */
+function is_last_evaluated_expression(context, node) {
+	let i = context.path.length;
+
+	while (i--) {
+		const parent = /** @type {Expression | Property | SpreadElement} */ (context.path[i]);
+
+		// @ts-expect-error we could probably use a neater/more robust mechanism
+		if (parent.metadata) {
+			return true;
+		}
+
+		switch (parent.type) {
+			case 'ArrayExpression':
+				if (node !== parent.elements.at(-1)) return false;
+				break;
+
+			case 'AssignmentExpression':
+			case 'BinaryExpression':
+			case 'LogicalExpression':
+				if (node === parent.left) return false;
+				break;
+
+			case 'CallExpression':
+			case 'NewExpression':
+				if (node !== parent.arguments.at(-1)) return false;
+				break;
+
+			case 'ConditionalExpression':
+				if (node === parent.test) return false;
+				break;
+
+			case 'MemberExpression':
+				if (parent.computed && node === parent.object) return false;
+				break;
+
+			case 'ObjectExpression':
+				if (node !== parent.properties.at(-1)) return false;
+				break;
+
+			case 'Property':
+				if (node === parent.key) return false;
+				break;
+
+			case 'SequenceExpression':
+				if (node !== parent.expressions.at(-1)) return false;
+				break;
+
+			case 'TaggedTemplateExpression':
+				if (node !== parent.quasi.expressions.at(-1)) return false;
+				break;
+
+			case 'TemplateLiteral':
+				if (node !== parent.expressions.at(-1)) return false;
+				break;
+
+			default:
+				return false;
+		}
+
+		node = parent;
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
index 665be9e23b..3e2f1414e6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -44,10 +44,11 @@ export function CallExpression(node, context) {
 
 		case '$derived':
 		case '$derived.by': {
-			let fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
-			if (rune === '$derived') fn = b.thunk(fn);
+			let fn = /** @type {Expression} */ (
+				context.visit(node.arguments[0], { ...context.state, in_derived: rune === '$derived' })
+			);
 
-			return b.call('$.derived', fn);
+			return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
 		}
 
 		case '$state.snapshot':
@@ -63,6 +64,9 @@ export function CallExpression(node, context) {
 				.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
 			);
 
+		case '$effect.pending':
+			return b.call('$.pending');
+
 		case '$inspect':
 		case '$inspect().with':
 			return transform_inspect_rune(node, context);
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 353927b865..225a4f617c 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
@@ -312,11 +312,9 @@ export function EachBlock(node, context) {
 		declarations.push(b.let(node.index, index));
 	}
 
-	if (dev && node.metadata.keyed) {
-		context.state.init.push(
-			b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
-		);
-	}
+	const { has_await } = node.metadata.expression;
+	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);
@@ -326,7 +324,7 @@ export function EachBlock(node, context) {
 	const args = [
 		context.state.node,
 		b.literal(flags),
-		b.thunk(collection),
+		thunk,
 		key_function,
 		b.arrow(render_args, b.block(declarations.concat(block.body)))
 	];
@@ -337,7 +335,26 @@ export function EachBlock(node, context) {
 		);
 	}
 
-	context.state.init.push(add_svelte_meta(b.call('$.each', ...args), node, 'each'));
+	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 (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([get_collection]),
+					b.arrow([context.state.node, b.id('$$collection')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(...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 7cd2bd90ed..0b10c02ffb 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
@@ -47,9 +47,7 @@ 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 === 'IfBlock' && trimmed[0].elseif));
+		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
 
 	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
index 5dc8fa5cf9..cd299a710b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
@@ -8,7 +8,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function FunctionDeclaration(node, context) {
-	const state = { ...context.state, in_constructor: false };
+	const state = { ...context.state, in_constructor: false, in_derived: false };
 
 	if (node.metadata?.hoisted === true) {
 		const params = build_hoisted_params(node, context);
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 fb59967996..64e84ef2ff 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,7 +11,9 @@ import { build_expression } from './shared/utils.js';
 export function HtmlTag(node, context) {
 	context.state.template.push_comment();
 
+	const { has_await } = node.metadata.expression;
 	const expression = build_expression(context, node.expression, node.metadata.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';
@@ -20,7 +22,7 @@ export function HtmlTag(node, context) {
 		b.call(
 			'$.html',
 			context.state.node,
-			b.thunk(expression),
+			b.thunk(html),
 			is_svg && b.true,
 			is_mathml && b.true,
 			is_ignored(node, 'hydration_html_changed') && b.true
@@ -28,5 +30,18 @@ export function HtmlTag(node, context) {
 	);
 
 	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
-	context.state.init.push(statement);
+	if (node.metadata.expression.has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$html')], b.block([statement]))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(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 cfd2bb7b09..3dd36b180b 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
@@ -13,37 +13,32 @@ export function IfBlock(node, context) {
 	const statements = [];
 
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	const consequent_id = context.state.scope.generate('consequent');
+	const consequent_id = b.id(context.state.scope.generate('consequent'));
 
-	statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent)));
+	statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
 
 	let alternate_id;
 
 	if (node.alternate) {
-		alternate_id = context.state.scope.generate('alternate');
 		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
-		const nodes = node.alternate.nodes;
-
-		let alternate_args = [b.id('$$anchor')];
-		if (nodes.length === 1 && nodes[0].type === 'IfBlock' && nodes[0].elseif) {
-			alternate_args.push(b.id('$$elseif'));
-		}
-
-		statements.push(b.var(b.id(alternate_id), b.arrow(alternate_args, alternate)));
+		alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
 	}
 
-	const test = build_expression(context, node.test, node.metadata.expression);
+	const { has_await } = node.metadata.expression;
+	const expression = build_expression(context, node.test, node.metadata.expression);
+	const test = has_await ? b.call('$.get', b.id('$$condition')) : expression;
 
 	/** @type {Expression[]} */
 	const args = [
-		node.elseif ? b.id('$$anchor') : context.state.node,
+		context.state.node,
 		b.arrow(
 			[b.id('$$render')],
 			b.block([
 				b.if(
 					test,
-					b.stmt(b.call(b.id('$$render'), b.id(consequent_id))),
-					alternate_id ? b.stmt(b.call(b.id('$$render'), b.id(alternate_id), b.false)) : undefined
+					b.stmt(b.call('$$render', consequent_id)),
+					alternate_id && b.stmt(b.call('$$render', alternate_id, b.literal(false)))
 				)
 			])
 		)
@@ -71,10 +66,23 @@ 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'
-		args.push(b.id('$$elseif'));
+		args.push(b.true);
 	}
 
 	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
 
-	context.state.init.push(b.block(statements));
+	if (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$condition')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(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 3add1fbe93..52850090e3 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,14 +11,28 @@ import { build_expression, add_svelte_meta } from './shared/utils.js';
 export function KeyBlock(node, context) {
 	context.state.template.push_comment();
 
-	const key = build_expression(context, node.expression, node.metadata.expression);
+	const { has_await } = node.metadata.expression;
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression);
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
-	context.state.init.push(
-		add_svelte_meta(
-			b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)),
-			node,
-			'key'
-		)
+	let statement = add_svelte_meta(
+		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
+		node,
+		'key'
 	);
+
+	if (has_await) {
+		statement = b.stmt(
+			b.call(
+				'$.async',
+				context.state.node,
+				b.array([b.thunk(expression, true)]),
+				b.arrow([context.state.node, b.id('$$key')], b.block([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 eed2a75506..4296aa959e 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
@@ -253,7 +253,10 @@ export function RegularElement(node, context) {
 				const { value, has_state } = build_attribute_value(
 					attribute.value,
 					context,
-					(value, metadata) => (metadata.has_call ? context.state.memoizer.add(value) : value)
+					(value, metadata) =>
+						metadata.has_call || metadata.has_await
+							? context.state.memoizer.add(value, metadata.has_await)
+							: value
 				);
 
 				const update = build_element_attribute_update(node, node_id, name, value, attributes);
@@ -319,7 +322,11 @@ export function RegularElement(node, context) {
 	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
 	const use_text_content =
 		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
+		trimmed.every(
+			(node) =>
+				node.type === 'Text' ||
+				(!node.metadata.expression.has_state && !node.metadata.expression.has_await)
+		) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
@@ -465,16 +472,18 @@ export function build_class_directives_object(
 ) {
 	let properties = [];
 	let has_call_or_state = false;
+	let has_await = false;
 
 	for (const d of class_directives) {
 		const expression = /** @type Expression */ (context.visit(d.expression));
 		properties.push(b.init(d.name, expression));
 		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
+		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = b.object(properties);
 
-	return has_call_or_state ? memoizer.add(directives) : directives;
+	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
 }
 
 /**
@@ -492,6 +501,7 @@ export function build_style_directives_object(
 	const important = b.object([]);
 
 	let has_call_or_state = false;
+	let has_await = false;
 
 	for (const d of style_directives) {
 		const expression =
@@ -503,11 +513,12 @@ export function build_style_directives_object(
 		object.properties.push(b.init(d.name, expression));
 
 		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
+		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = important.properties.length ? b.array([normal, important]) : normal;
 
-	return has_call_or_state ? memoizer.add(directives) : directives;
+	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
 }
 
 /**
@@ -629,7 +640,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
 
 	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call ? state.memoizer.add(value) : value
+		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
 	);
 
 	const evaluated = context.state.scope.evaluate(value);
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 7f1a4ae7ba..b7a6e65557 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
@@ -1,9 +1,9 @@
-/** @import { Expression } from 'estree' */
+/** @import { Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { add_svelte_meta, build_expression } from './shared/utils.js';
+import { add_svelte_meta, build_expression, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -12,32 +12,34 @@ import { add_svelte_meta, build_expression } from './shared/utils.js';
 export function RenderTag(node, context) {
 	context.state.template.push_comment();
 
-	const expression = unwrap_optional(node.expression);
-
-	const callee = expression.callee;
-	const raw_args = expression.arguments;
+	const call = unwrap_optional(node.expression);
 
 	/** @type {Expression[]} */
 	let args = [];
-	for (let i = 0; i < raw_args.length; i++) {
-		let thunk = b.thunk(
-			build_expression(context, /** @type {Expression} */ (raw_args[i]), node.metadata.arguments[i])
-		);
 
-		const { has_call } = node.metadata.arguments[i];
+	const memoizer = new Memoizer();
+
+	for (let i = 0; i < call.arguments.length; i++) {
+		const arg = /** @type {Expression} */ (call.arguments[i]);
+		const metadata = node.metadata.arguments[i];
 
-		if (has_call) {
-			const id = b.id(context.state.scope.generate('render_arg'));
-			context.state.init.push(b.var(id, b.call('$.derived_safe_equal', thunk)));
-			args.push(b.thunk(b.call('$.get', id)));
-		} else {
-			args.push(thunk);
+		let expression = build_expression(context, arg, metadata);
+
+		if (metadata.has_await || metadata.has_call) {
+			expression = b.call('$.get', memoizer.add(expression, metadata.has_await));
 		}
+
+		args.push(b.thunk(expression));
 	}
 
+	memoizer.apply();
+
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
 	let snippet_function = build_expression(
 		context,
-		/** @type {Expression} */ (callee),
+		/** @type {Expression} */ (call.callee),
 		node.metadata.expression
 	);
 
@@ -47,7 +49,7 @@ export function RenderTag(node, context) {
 			snippet_function = b.logical('??', snippet_function, b.id('$.noop'));
 		}
 
-		context.state.init.push(
+		statements.push(
 			add_svelte_meta(
 				b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args),
 				node,
@@ -55,7 +57,7 @@ export function RenderTag(node, context) {
 			)
 		);
 	} else {
-		context.state.init.push(
+		statements.push(
 			add_svelte_meta(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
 					snippet_function,
@@ -67,4 +69,21 @@ export function RenderTag(node, context) {
 			)
 		);
 	}
+
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					memoizer.async_values(),
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+	} 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/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index e37cdb2bea..a5c0974738 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -33,7 +33,10 @@ export function SlotElement(node, context) {
 			const { value, has_state } = build_attribute_value(
 				attribute.value,
 				context,
-				(value, metadata) => (metadata.has_call ? b.call('$.get', memoizer.add(value)) : value)
+				(value, metadata) =>
+					metadata.has_call || metadata.has_await
+						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						: value
 			);
 
 			if (attribute.name === 'name') {
@@ -70,5 +73,20 @@ export function SlotElement(node, context) {
 		b.stmt(b.call('$.slot', context.state.node, b.id('$$props'), name, props_expression, fallback))
 	);
 
-	context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					async_values,
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+	} 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/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
index 1480648ce5..d37b990440 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
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Statement, Expression, FunctionDeclaration, VariableDeclaration, ArrowFunctionExpression } from 'estree' */
+/** @import { BlockStatement, Statement, Expression, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -71,7 +71,7 @@ export function SvelteBoundary(node, context) {
 
 			hoisted.push(snippet);
 
-			if (child.expression.name === 'failed') {
+			if (['failed', 'pending'].includes(child.expression.name)) {
 				props.properties.push(b.prop('init', child.expression, child.expression));
 			}
 
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 6af5f5770e..2062519bb6 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
@@ -32,7 +32,7 @@ export function SvelteElement(node, context) {
 	const style_directives = [];
 
 	/** @type {ExpressionStatement[]} */
-	const lets = [];
+	const statements = [];
 
 	// Create a temporary context which picks up the init/update statements.
 	// They'll then be added to the function parameter of $.element
@@ -64,7 +64,7 @@ export function SvelteElement(node, context) {
 		} else if (attribute.type === 'StyleDirective') {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			statements.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		} else if (attribute.type === 'OnDirective') {
 			const handler = /** @type {Expression} */ (context.visit(attribute, inner_context.state));
 			inner_context.state.after_update.push(b.stmt(handler));
@@ -73,9 +73,6 @@ export function SvelteElement(node, context) {
 		}
 	}
 
-	// Let bindings first, they can be used on attributes
-	context.state.init.push(...lets); // create computeds in the outer context; the dynamic element is the single child of this slot
-
 	if (
 		attributes.length === 1 &&
 		attributes[0].type === 'Attribute' &&
@@ -96,14 +93,10 @@ export function SvelteElement(node, context) {
 		);
 	}
 
-	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
+	const { has_await } = node.metadata.expression;
 
-	if (dev) {
-		if (node.fragment.nodes.length > 0) {
-			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
-		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
-	}
+	const expression = /** @type {Expression} */ (context.visit(node.tag));
+	const get_tag = b.thunk(has_await ? b.call('$.get', b.id('$$tag')) : expression);
 
 	/** @type {Statement[]} */
 	const inner = inner_context.state.init;
@@ -123,9 +116,16 @@ export function SvelteElement(node, context) {
 		).body
 	);
 
+	if (dev) {
+		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);
 
-	context.state.init.push(
+	statements.push(
 		b.stmt(
 			b.call(
 				'$.element',
@@ -138,4 +138,19 @@ export function SvelteElement(node, context) {
 			)
 		)
 	);
+
+	if (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$tag')], b.block(statements))
+				)
+			)
+		);
+	} 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/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 53f18d42e4..19a7de5715 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
@@ -1,7 +1,7 @@
 /** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { dev } from '../../../../state.js';
+/** @import { ComponentContext } from '../types' */
+import { dev, is_ignored, locate_node } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
@@ -20,7 +20,7 @@ export function VariableDeclaration(node, context) {
 
 	if (context.state.analysis.runes) {
 		for (const declarator of node.declarations) {
-			const init = declarator.init;
+			const init = /** @type {Expression} */ (declarator.init);
 			const rune = get_rune(init, context.state.scope);
 
 			if (
@@ -194,16 +194,38 @@ export function VariableDeclaration(node, context) {
 			}
 
 			if (rune === '$derived' || rune === '$derived.by') {
+				const is_async = context.state.analysis.async_deriveds.has(
+					/** @type {CallExpression} */ (init)
+				);
+
 				if (declarator.id.type === 'Identifier') {
-					let expression = /** @type {Expression} */ (context.visit(value));
-					if (rune === '$derived') expression = b.thunk(expression);
-					const call = b.call('$.derived', expression);
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							dev ? b.call('$.tag', call, b.literal(declarator.id.name)) : call
-						)
+					let expression = /** @type {Expression} */ (
+						context.visit(value, {
+							...context.state,
+							in_derived: rune === '$derived'
+						})
 					);
+
+					if (is_async) {
+						const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+						let call = b.call(
+							'$.async_derived',
+							b.thunk(expression, true),
+							location ? b.literal(location) : undefined
+						);
+
+						call = b.call(b.await(b.call('$.save', call)));
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
+					} else {
+						if (rune === '$derived') expression = b.thunk(expression);
+
+						let call = b.call('$.derived', expression);
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
+					}
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
 
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 6b52db55ba..7feeebdbbc 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
@@ -129,11 +129,12 @@ export function build_component(node, component_name, context) {
 			(events[attribute.name] ||= []).push(handler);
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
+
 			if (attribute.metadata.expression.has_state) {
 				props_and_spreads.push(
 					b.thunk(
-						attribute.metadata.expression.has_call
-							? b.call('$.get', memoizer.add(expression))
+						attribute.metadata.expression.has_await || attribute.metadata.expression.has_call
+							? b.call('$.get', memoizer.add(expression, attribute.metadata.expression.has_await))
 							: expression
 					)
 				);
@@ -147,7 +148,9 @@ export function build_component(node, component_name, context) {
 						attribute.name,
 						build_attribute_value(attribute.value, context, (value, metadata) => {
 							// TODO put the derived in the local block
-							return metadata.has_call ? b.call('$.get', memoizer.add(value)) : value;
+							return metadata.has_call || metadata.has_await
+								? b.call('$.get', memoizer.add(value, metadata.has_await))
+								: value;
 						}).value
 					)
 				);
@@ -166,20 +169,24 @@ export function build_component(node, component_name, context) {
 				attribute.value,
 				context,
 				(value, metadata) => {
-					if (!metadata.has_state) return value;
+					if (!metadata.has_state && !metadata.has_await) return value;
 
 					// When we have a non-simple computation, anything other than an Identifier or Member expression,
 					// then there's a good chance it needs to be memoized to avoid over-firing when read within the
 					// child component (e.g. `active={i === index}`)
-					const should_wrap_in_derived = get_attribute_chunks(attribute.value).some((n) => {
-						return (
-							n.type === 'ExpressionTag' &&
-							n.expression.type !== 'Identifier' &&
-							n.expression.type !== 'MemberExpression'
-						);
-					});
-
-					return should_wrap_in_derived ? b.call('$.get', memoizer.add(value)) : value;
+					const should_wrap_in_derived =
+						metadata.has_await ||
+						get_attribute_chunks(attribute.value).some((n) => {
+							return (
+								n.type === 'ExpressionTag' &&
+								n.expression.type !== 'Identifier' &&
+								n.expression.type !== 'MemberExpression'
+							);
+						});
+
+					return should_wrap_in_derived
+						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						: value;
 				}
 			);
 
@@ -489,5 +496,18 @@ export function build_component(node, component_name, context) {
 
 	memoizer.apply();
 
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		return b.stmt(
+			b.call(
+				'$.async',
+				anchor,
+				async_values,
+				b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
+			)
+		);
+	}
+
 	return statements.length > 1 ? b.block(statements) : statements[0];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index d119b0457b..9143a57025 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -1,4 +1,4 @@
-/** @import { ArrayExpression, Expression, Identifier, ObjectExpression } from 'estree' */
+/** @import { Expression, Identifier, ObjectExpression } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
@@ -33,7 +33,7 @@ export function build_attribute_effect(
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
 			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
-				metadata.has_call ? memoizer.add(value) : value
+				metadata.has_call || metadata.has_await ? memoizer.add(value, metadata.has_await) : value
 			);
 
 			if (
@@ -50,8 +50,8 @@ export function build_attribute_effect(
 		} else {
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
-			if (attribute.metadata.expression.has_call) {
-				value = memoizer.add(value);
+			if (attribute.metadata.expression.has_call || attribute.metadata.expression.has_await) {
+				value = memoizer.add(value, attribute.metadata.expression.has_await);
 			}
 
 			values.push(b.spread(value));
@@ -87,6 +87,7 @@ export function build_attribute_effect(
 				element_id,
 				b.arrow(ids, b.object(values)),
 				memoizer.sync_values(),
+				memoizer.async_values(),
 				element.metadata.scoped &&
 					context.state.analysis.css.hash !== '' &&
 					b.literal(context.state.analysis.css.hash),
@@ -118,7 +119,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 
 		return {
 			value: memoize(expression, chunk.metadata.expression),
-			has_state: chunk.metadata.expression.has_state
+			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.has_await
 		};
 	}
 
@@ -151,7 +152,9 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 			value = b.call('$.clsx', value);
 		}
 
-		return metadata.has_call ? context.state.memoizer.add(value) : value;
+		return metadata.has_call || metadata.has_await
+			? context.state.memoizer.add(value, metadata.has_await)
+			: value;
 	});
 
 	/** @type {Identifier | undefined} */
@@ -165,7 +168,9 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 
 	if (class_directives.length) {
 		next = build_class_directives_object(class_directives, context);
-		has_state ||= class_directives.some((d) => d.metadata.expression.has_state);
+		has_state ||= class_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+		);
 
 		if (has_state) {
 			previous_id = b.id(context.state.scope.generate('classes'));
@@ -219,7 +224,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
  */
 export function build_set_style(node_id, attribute, style_directives, context) {
 	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call ? context.state.memoizer.add(value) : value
+		metadata.has_call ? context.state.memoizer.add(value, metadata.has_await) : value
 	);
 
 	/** @type {Identifier | undefined} */
@@ -233,7 +238,9 @@ export function build_set_style(node_id, attribute, style_directives, context) {
 
 	if (style_directives.length) {
 		next = build_style_directives_object(style_directives, context);
-		has_state ||= style_directives.some((d) => d.metadata.expression.has_state);
+		has_state ||= style_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+		);
 
 		if (has_state) {
 			previous_id = b.id(context.state.scope.generate('styles'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
index a0e9d0bf5e..691ac0b01e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -9,7 +9,7 @@ import { build_hoisted_params } from '../../utils.js';
 export const visit_function = (node, context) => {
 	const metadata = node.metadata;
 
-	let state = { ...context.state, in_constructor: false };
+	let state = { ...context.state, in_constructor: false, in_derived: false };
 
 	if (node.type === 'FunctionExpression') {
 		const parent = /** @type {Node} */ (context.path.at(-1));
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 eed806339d..014547cf2d 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
@@ -18,19 +18,23 @@ export class Memoizer {
 	/** @type {Array<{ id: Identifier, expression: Expression }>} */
 	#sync = [];
 
+	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	#async = [];
+
 	/**
 	 * @param {Expression} expression
+	 * @param {boolean} has_await
 	 */
-	add(expression) {
+	add(expression, has_await) {
 		const id = b.id('#'); // filled in later
 
-		this.#sync.push({ id, expression });
+		(has_await ? this.#async : this.#sync).push({ id, expression });
 
 		return id;
 	}
 
 	apply() {
-		return this.#sync.map((memo, i) => {
+		return [...this.#async, ...this.#sync].map((memo, i) => {
 			memo.id.name = `$${i}`;
 			return memo.id;
 		});
@@ -42,6 +46,15 @@ export class Memoizer {
 		);
 	}
 
+	async_ids() {
+		return this.#async.map((memo) => memo.id);
+	}
+
+	async_values() {
+		if (this.#async.length === 0) return;
+		return b.array(this.#async.map((memo) => b.thunk(memo.expression, true)));
+	}
+
 	sync_values() {
 		if (this.#sync.length === 0) return;
 		return b.array(this.#sync.map((memo) => b.thunk(memo.expression)));
@@ -59,7 +72,8 @@ export function build_template_chunk(
 	values,
 	context,
 	state = context.state,
-	memoize = (value, metadata) => (metadata.has_call ? state.memoizer.add(value) : value)
+	memoize = (value, metadata) =>
+		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
 ) {
 	/** @type {Expression[]} */
 	const expressions = [];
@@ -68,6 +82,7 @@ export function build_template_chunk(
 	const quasis = [quasi];
 
 	let has_state = false;
+	let has_await = false;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
@@ -90,7 +105,8 @@ export function build_template_chunk(
 
 			const evaluated = state.scope.evaluate(value);
 
-			has_state ||= node.metadata.expression.has_state && !evaluated.is_known;
+			has_await ||= node.metadata.expression.has_await;
+			has_state ||= has_await || (node.metadata.expression.has_state && !evaluated.is_known);
 
 			if (values.length === 1) {
 				// If we have a single expression, then pass that in directly to possibly avoid doing
@@ -146,8 +162,9 @@ export function build_template_chunk(
  * @param {ComponentClientTransformState} state
  */
 export function build_render_statement(state) {
-	const ids = state.memoizer.apply();
-	const values = state.memoizer.sync_values();
+	const { memoizer } = state;
+
+	const ids = memoizer.apply();
 
 	return b.stmt(
 		b.call(
@@ -158,8 +175,8 @@ export function build_render_statement(state) {
 					? state.update[0].expression
 					: b.block(state.update)
 			),
-			values,
-			values && !state.analysis.runes && b.id('$.derived_safe_equal')
+			memoizer.sync_values(),
+			memoizer.async_values()
 		)
 	);
 }
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 86346b864c..10c92242d4 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
@@ -10,6 +10,7 @@ import { dev, filename } from '../../../state.js';
 import { render_stylesheet } from '../css/index.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
 import { Component } from './visitors/Component.js';
@@ -44,6 +45,7 @@ import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 const global_visitors = {
 	_: set_scope,
 	AssignmentExpression,
+	AwaitExpression,
 	CallExpression,
 	ClassBody,
 	ExpressionStatement,
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..9135892dbd
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
@@ -0,0 +1,25 @@
+/** @import { AwaitExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	// if `await` is inside a function, or inside `<script module>`,
+	// allow it, otherwise error
+	if (
+		context.state.scope.function_depth === 0 ||
+		context.path.some(
+			(node) =>
+				node.type === 'ArrowFunctionExpression' ||
+				node.type === 'FunctionDeclaration' ||
+				node.type === 'FunctionExpression'
+		)
+	) {
+		return context.next();
+	}
+
+	return b.call('$.await_outside_boundary');
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
index 35c79988b0..41d3202ce9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -25,6 +25,10 @@ export function CallExpression(node, context) {
 		return b.arrow([], b.block([]));
 	}
 
+	if (rune === '$effect.pending') {
+		return b.literal(0);
+	}
+
 	if (rune === '$state' || rune === '$state.raw') {
 		return node.arguments[0] ? context.visit(node.arguments[0]) : b.void0;
 	}
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 eb51c941f5..508dcc0fdd 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
@@ -10,29 +10,18 @@ import { block_close, block_open } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
+	const test = /** @type {Expression} */ (context.visit(node.test));
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
-	let if_statement = b.if(/** @type {Expression} */ (context.visit(node.test)), consequent);
 
-	context.state.template.push(if_statement, block_close);
+	const alternate = node.alternate
+		? /** @type {BlockStatement} */ (context.visit(node.alternate))
+		: b.block([]);
 
-	let index = 1;
-	let alt = node.alternate;
-	while (alt && alt.nodes.length === 1 && alt.nodes[0].type === 'IfBlock' && alt.nodes[0].elseif) {
-		const elseif = alt.nodes[0];
-		const alternate = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
-		alternate.body.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(`<!--[${index++}-->`)))
-		);
-		if_statement = if_statement.alternate = b.if(
-			/** @type {Expression} */ (context.visit(elseif.test)),
-			alternate
-		);
-		alt = elseif.alternate;
-	}
+	consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
 
-	if_statement.alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
-	if_statement.alternate.body.unshift(
+	alternate.body.unshift(
 		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
 	);
+
+	context.state.template.push(b.if(test, consequent, alternate), block_close);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
index 734740c1b1..6e814d6384 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
@@ -3,15 +3,36 @@
 /** @import { ComponentContext } from '../types' */
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
 import * as b from '#compiler/builders';
+import { build_attribute_value } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteBoundary} node
  * @param {ComponentContext} context
  */
 export function SvelteBoundary(node, context) {
-	context.state.template.push(
-		b.literal(BLOCK_OPEN),
-		/** @type {BlockStatement} */ (context.visit(node.fragment)),
-		b.literal(BLOCK_CLOSE)
+	context.state.template.push(b.literal(BLOCK_OPEN));
+
+	// if this has a `pending` snippet, render it
+	const pending_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'pending')
+	);
+
+	const pending_snippet = /** @type {AST.SnippetBlock} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+		)
 	);
+
+	if (pending_attribute) {
+		const value = build_attribute_value(pending_attribute.value, context, false, true);
+		context.state.template.push(b.call(value, b.id('$$payload')));
+	} else if (pending_snippet) {
+		context.state.template.push(
+			/** @type {BlockStatement} */ (context.visit(pending_snippet.body))
+		);
+	} else {
+		context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+	}
+
+	context.state.template.push(b.literal(BLOCK_CLOSE));
 }
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index c35f194b75..4874554ff0 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -66,7 +66,8 @@ export function create_expression_metadata() {
 		has_state: false,
 		has_call: false,
 		has_member_expression: false,
-		has_assignment: false
+		has_assignment: false,
+		has_await: false
 	};
 }
 
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 662924b52c..700e098e45 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -933,7 +933,25 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		}
 	};
 
+	let has_await = false;
+
 	walk(ast, state, {
+		AwaitExpression(node, context) {
+			// this doesn't _really_ belong here, but it allows us to
+			// automatically opt into runes mode on encountering
+			// blocking awaits, without doing an additional walk
+			// before the analysis occurs
+			// TODO remove this in Svelte 7.0 or whenever we get rid of legacy support
+			has_await ||= context.path.every(
+				({ type }) =>
+					type !== 'ArrowFunctionExpression' &&
+					type !== 'FunctionExpression' &&
+					type !== 'FunctionDeclaration'
+			);
+
+			context.next();
+		},
+
 		// references
 		Identifier(node, { path, state }) {
 			const parent = path.at(-1);
@@ -1290,6 +1308,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	}
 
 	return {
+		has_await,
 		scope,
 		scopes
 	};
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index dba2559a17..4cbbc362c7 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,21 +1,19 @@
 import type { AST, Binding, StateField } from '#compiler';
 import type {
-	AssignmentExpression,
+	CallExpression,
 	ClassBody,
-	Comment,
 	Identifier,
 	LabeledStatement,
 	Node,
 	Program
 } from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
-import type { StateCreationRuneName } from '../../utils.js';
-import type { AnalysisState } from './2-analyze/types.js';
 
 export interface Js {
 	ast: Program;
 	scope: Scope;
 	scopes: Map<AST.SvelteNode, Scope>;
+	has_await: boolean;
 }
 
 export interface Template {
@@ -46,6 +44,9 @@ export interface Analysis {
 
 	// TODO figure out if we can move this to ComponentAnalysis
 	accessors: boolean;
+
+	/** A set of deriveds that contain `await` expressions */
+	async_deriveds: Set<CallExpression>;
 }
 
 export interface ComponentAnalysis extends Analysis {
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 558ee558f7..c4f41b724a 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -224,6 +224,11 @@ export interface ModuleCompileOptions {
 	 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 	 */
 	warningFilter?: (warning: Warning) => boolean;
+	/** Experimental options */
+	experimental?: {
+		/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+		async?: boolean;
+	};
 }
 
 // The following two somewhat scary looking types ensure that certain types are required but can be undefined still
@@ -287,6 +292,8 @@ export interface ExpressionMetadata {
 	has_state: boolean;
 	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
 	has_call: boolean;
+	/** True if the expression contains `await` */
+	has_await: boolean;
 	/** True if the expression includes a member expression */
 	has_member_expression: boolean;
 	/** True if the expression includes an assignment or an update */
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index c9841e9d4e..de06a41469 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -366,6 +366,7 @@ export namespace AST {
 		tag: Expression;
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			/**
 			 * `true` if this is an svg element. The boolean may not be accurate because
 			 * the tag is dynamic, but we do our best to infer it from the template.
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index 736738d19f..c241cdb445 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -1,4 +1,5 @@
 /** @import * as ESTree from 'estree' */
+import { walk } from 'zimmerframe';
 import { regex_is_valid_identifier } from '../phases/patterns.js';
 import { sanitize_template_string } from './sanitize_template_string.js';
 
@@ -30,16 +31,17 @@ export function assignment_pattern(left, right) {
 /**
  * @param {Array<ESTree.Pattern>} params
  * @param {ESTree.BlockStatement | ESTree.Expression} body
+ * @param {boolean} async
  * @returns {ESTree.ArrowFunctionExpression}
  */
-export function arrow(params, body) {
+export function arrow(params, body, async = false) {
 	return {
 		type: 'ArrowFunctionExpression',
 		params,
 		body,
 		expression: body.type !== 'BlockStatement',
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null) // should not be used by codegen
 	};
 }
@@ -100,7 +102,7 @@ export function labeled(name, body) {
 
 /**
  * @param {string | ESTree.Expression} callee
- * @param {...(ESTree.Expression | ESTree.SpreadElement | false | undefined)} args
+ * @param {...(ESTree.Expression | ESTree.SpreadElement | false | undefined | null)} args
  * @returns {ESTree.CallExpression}
  */
 export function call(callee, ...args) {
@@ -216,16 +218,17 @@ export function export_default(declaration) {
  * @param {ESTree.Identifier} id
  * @param {ESTree.Pattern[]} params
  * @param {ESTree.BlockStatement} body
+ * @param {boolean} async
  * @returns {ESTree.FunctionDeclaration}
  */
-export function function_declaration(id, params, body) {
+export function function_declaration(id, params, body, async = false) {
 	return {
 		type: 'FunctionDeclaration',
 		id,
 		params,
 		body,
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null) // should not be used by codegen
 	};
 }
@@ -421,19 +424,32 @@ export function template(elements, expressions) {
  * @returns {ESTree.Expression}
  */
 export function thunk(expression, async = false) {
-	const fn = arrow([], expression);
-	if (async) fn.async = true;
-	return unthunk(fn);
+	return unthunk(arrow([], expression, async));
 }
 
 /**
  * Replace "(arg) => func(arg)" to "func"
- * @param {ESTree.Expression} expression
+ * @param {ESTree.ArrowFunctionExpression} expression
  * @returns {ESTree.Expression}
  */
 export function unthunk(expression) {
+	// optimize `async () => await x()`, but not `async () => await x(await y)`
+	if (expression.async && expression.body.type === 'AwaitExpression') {
+		let has_await = false;
+
+		walk(expression.body.argument, null, {
+			AwaitExpression(_node, context) {
+				has_await = true;
+				context.stop();
+			}
+		});
+
+		if (!has_await) {
+			return unthunk(arrow(expression.params, expression.body.argument));
+		}
+	}
+
 	if (
-		expression.type === 'ArrowFunctionExpression' &&
 		expression.async === false &&
 		expression.body.type === 'CallExpression' &&
 		expression.body.callee.type === 'Identifier' &&
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 1fd89139d5..ed83375d22 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -41,7 +41,11 @@ const common = {
 		return input;
 	}),
 
-	warningFilter: fun(() => true)
+	warningFilter: fun(() => true),
+
+	experimental: object({
+		async: boolean(false)
+	})
 };
 
 export const validate_module_options =
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 4e1785723c..69cd213940 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -42,6 +42,8 @@ export const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML';
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
 export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
+	'await_waterfall',
+	'await_reactivity_loss',
 	'state_snapshot_uncloneable',
 	'binding_property_non_reactive',
 	'hydration_attribute_changed',
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index ae1caf16d9..397a81c319 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -237,8 +237,8 @@ function init_update_callbacks(context) {
 	return (l.u ??= { a: [], b: [], m: [] });
 }
 
-export { flushSync } from './internal/client/runtime.js';
+export { flushSync } from './internal/client/reactivity/batch.js';
 export { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
-export { tick, untrack } from './internal/client/runtime.js';
+export { tick, untrack, settled } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';
diff --git a/packages/svelte/src/index-server.js b/packages/svelte/src/index-server.js
index e5039cf150..1342e502d7 100644
--- a/packages/svelte/src/index-server.js
+++ b/packages/svelte/src/index-server.js
@@ -35,6 +35,8 @@ export function unmount() {
 
 export async function tick() {}
 
+export async function settled() {}
+
 export { getAbortSignal } from './internal/server/abort-signal.js';
 
 export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index a5a8b42972..50a7a21ae8 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -18,8 +18,13 @@ export const EFFECT_TRANSPARENT = 1 << 16;
 export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 export const EFFECT_PRESERVED = 1 << 19;
-export const EFFECT_IS_UPDATING = 1 << 20;
-export const USER_EFFECT = 1 << 21;
+export const USER_EFFECT = 1 << 20;
+
+// Flags used for async
+export const REACTION_IS_UPDATING = 1 << 21;
+export const ASYNC = 1 << 22;
+
+export const ERROR_VALUE = 1 << 23;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index a9ceafcd11..cad75546d4 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -1,10 +1,11 @@
-/** @import { ComponentContext, DevStackEntry } from '#client' */
+/** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
 import { DEV } from 'esm-env';
 import * as e from './errors.js';
-import { source } from './reactivity/sources.js';
+import { active_effect, active_reaction } from './runtime.js';
 import { create_user_effect } from './reactivity/effects.js';
-import { legacy_mode_flag } from '../flags/index.js';
+import { async_mode_flag, legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
+import { BRANCH_EFFECT, EFFECT_RAN } from './constants.js';
 
 /** @type {ComponentContext | null} */
 export let component_context = null;
@@ -96,6 +97,16 @@ export function getContext(key) {
  */
 export function setContext(key, context) {
 	const context_map = get_or_init_context_map('setContext');
+
+	if (async_mode_flag) {
+		var flags = /** @type {Effect} */ (active_effect).f;
+		var valid = !active_reaction && (flags & BRANCH_EFFECT) !== 0 && (flags & EFFECT_RAN) === 0;
+
+		if (!valid) {
+			e.set_context_after_init();
+		}
+	}
+
 	context_map.set(key, context);
 	return context;
 }
@@ -138,18 +149,9 @@ export function push(props, runes = false, fn) {
 		e: null,
 		s: props,
 		x: null,
-		l: null
+		l: legacy_mode_flag && !runes ? { s: null, u: null, $: [] } : null
 	};
 
-	if (legacy_mode_flag && !runes) {
-		component_context.l = {
-			s: null,
-			u: null,
-			r1: [],
-			r2: source(false)
-		};
-	}
-
 	if (DEV) {
 		// component function
 		component_context.function = fn;
diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js
index fbde87a2d7..c47080ed2f 100644
--- a/packages/svelte/src/internal/client/dev/debug.js
+++ b/packages/svelte/src/internal/client/dev/debug.js
@@ -7,6 +7,7 @@ import {
 	CLEAN,
 	DERIVED,
 	EFFECT,
+	ASYNC,
 	MAYBE_DIRTY,
 	RENDER_EFFECT,
 	ROOT_EFFECT
@@ -39,6 +40,8 @@ export function log_effect_tree(effect, depth = 0) {
 		label = 'boundary';
 	} else if ((flags & BLOCK_EFFECT) !== 0) {
 		label = 'block';
+	} else if ((flags & ASYNC) !== 0) {
+		label = 'async';
 	} else if ((flags & BRANCH_EFFECT) !== 0) {
 		label = 'branch';
 	} else if ((flags & RENDER_EFFECT) !== 0) {
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 5834f5bffd..128942ceb2 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -2,7 +2,7 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { define_property } from '../../shared/utils.js';
-import { DERIVED, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
+import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
 import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
 
@@ -26,7 +26,7 @@ function log_entry(signal, entry) {
 		return;
 	}
 
-	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
+	const type = (signal.f & (DERIVED | ASYNC)) !== 0 ? '$derived' : '$state';
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
 	const style = dirty
diff --git a/packages/svelte/src/internal/client/dom/blocks/async.js b/packages/svelte/src/internal/client/dom/blocks/async.js
new file mode 100644
index 0000000000..82f107ab29
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/async.js
@@ -0,0 +1,26 @@
+/** @import { TemplateNode, Value } from '#client' */
+import { flatten } from '../../reactivity/async.js';
+import { get } from '../../runtime.js';
+import { get_pending_boundary } from './boundary.js';
+
+/**
+ * @param {TemplateNode} node
+ * @param {Array<() => Promise<any>>} expressions
+ * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
+ */
+export function async(node, expressions, fn) {
+	var boundary = get_pending_boundary();
+
+	boundary.update_pending_count(1);
+
+	flatten([], expressions, (values) => {
+		try {
+			// get values eagerly to avoid creating blocks if they reject
+			for (const d of values) get(d);
+
+			fn(node, ...values);
+		} finally {
+			boundary.update_pending_count(-1);
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 325224fff2..4f68db57b1 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -3,7 +3,7 @@ import { DEV } from 'esm-env';
 import { is_promise } from '../../../shared/utils.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
 import { internal_set, mutable_source, source } from '../../reactivity/sources.js';
-import { flushSync, set_active_effect, set_active_reaction } from '../../runtime.js';
+import { set_active_effect, set_active_reaction } from '../../runtime.js';
 import {
 	hydrate_next,
 	hydrate_node,
@@ -22,6 +22,7 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from '../../context.js';
+import { flushSync } from '../../reactivity/batch.js';
 
 const PENDING = 0;
 const THEN = 1;
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 03cec4fd2f..5ed0515210 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,4 +1,4 @@
-/** @import { Effect, TemplateNode, } from '#client' */
+/** @import { Effect, Source, TemplateNode, } from '#client' */
 import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
 import { component_context, set_component_context } from '../../context.js';
 import { invoke_error_boundary } from '../../error-handling.js';
@@ -6,6 +6,7 @@ import { block, branch, destroy_effect, pause_effect } from '../../reactivity/ef
 import {
 	active_effect,
 	active_reaction,
+	get,
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
@@ -17,12 +18,20 @@ import {
 	remove_nodes,
 	set_hydrate_node
 } from '../hydration.js';
+import { get_next_sibling } from '../operations.js';
 import { queue_micro_task } from '../task.js';
+import * as e from '../../errors.js';
+import { DEV } from 'esm-env';
+import { Batch } 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';
 
 /**
  * @typedef {{
  * 	 onerror?: (error: unknown, reset: () => void) => void;
  *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
+ *   pending?: (anchor: Node) => void;
  * }} BoundaryProps
  */
 
@@ -39,6 +48,11 @@ export function boundary(node, props, children) {
 }
 
 export class Boundary {
+	pending = false;
+
+	/** @type {Boundary | null} */
+	parent;
+
 	/** @type {TemplateNode} */
 	#anchor;
 
@@ -57,11 +71,39 @@ export class Boundary {
 	/** @type {Effect | null} */
 	#main_effect = null;
 
+	/** @type {Effect | null} */
+	#pending_effect = null;
+
 	/** @type {Effect | null} */
 	#failed_effect = null;
 
+	/** @type {DocumentFragment | null} */
+	#offscreen_fragment = null;
+
+	#pending_count = 0;
 	#is_creating_fallback = false;
 
+	/**
+	 * A source containing the number of pending async deriveds/expressions.
+	 * Only created if `$effect.pending()` is used inside the boundary,
+	 * otherwise updating the source results in needless `Batch.ensure()`
+	 * calls followed by no-op flushes
+	 * @type {Source<number> | null}
+	 */
+	#effect_pending = null;
+
+	#effect_pending_subscriber = createSubscriber(() => {
+		this.#effect_pending = source(this.#pending_count);
+
+		if (DEV) {
+			tag(this.#effect_pending, '$effect.pending()');
+		}
+
+		return () => {
+			this.#effect_pending = null;
+		};
+	});
+
 	/**
 	 * @param {TemplateNode} node
 	 * @param {BoundaryProps} props
@@ -74,6 +116,10 @@ export class Boundary {
 
 		this.#hydrate_open = hydrate_node;
 
+		this.parent = /** @type {Effect} */ (active_effect).b;
+
+		this.pending = !!this.#props.pending;
+
 		this.#effect = block(() => {
 			/** @type {Effect} */ (active_effect).b = this;
 
@@ -81,10 +127,43 @@ export class Boundary {
 				hydrate_next();
 			}
 
-			try {
-				this.#main_effect = branch(() => children(this.#anchor));
-			} catch (error) {
-				this.error(error);
+			const pending = this.#props.pending;
+
+			if (hydrating && pending) {
+				this.#pending_effect = branch(() => pending(this.#anchor));
+
+				// future work: when we have some form of async SSR, we will
+				// need to use hydration boundary comments to report whether
+				// the pending or main block was rendered for a given
+				// boundary, and hydrate accordingly
+				queueMicrotask(() => {
+					this.#main_effect = this.#run(() => {
+						Batch.ensure();
+						return branch(() => this.#children(this.#anchor));
+					});
+
+					if (this.#pending_count > 0) {
+						this.#show_pending_snippet();
+					} else {
+						pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
+							this.#pending_effect = null;
+						});
+
+						this.pending = false;
+					}
+				});
+			} else {
+				try {
+					this.#main_effect = branch(() => children(this.#anchor));
+				} catch (error) {
+					this.error(error);
+				}
+
+				if (this.#pending_count > 0) {
+					this.#show_pending_snippet();
+				} else {
+					this.pending = false;
+				}
 			}
 		}, flags);
 
@@ -93,6 +172,10 @@ export class Boundary {
 		}
 	}
 
+	has_pending_snippet() {
+		return !!this.#props.pending;
+	}
+
 	/**
 	 * @param {() => Effect | null} fn
 	 */
@@ -114,22 +197,85 @@ export class Boundary {
 		}
 	}
 
+	#show_pending_snippet() {
+		const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
+
+		if (this.#main_effect !== null) {
+			this.#offscreen_fragment = document.createDocumentFragment();
+			move_effect(this.#main_effect, this.#offscreen_fragment);
+		}
+
+		if (this.#pending_effect === null) {
+			this.#pending_effect = branch(() => pending(this.#anchor));
+		}
+	}
+
+	/** @param {1 | -1} d */
+	#update_pending_count(d) {
+		this.#pending_count += d;
+
+		if (this.#pending_count === 0) {
+			this.pending = false;
+
+			if (this.#pending_effect) {
+				pause_effect(this.#pending_effect, () => {
+					this.#pending_effect = null;
+				});
+			}
+
+			if (this.#offscreen_fragment) {
+				this.#anchor.before(this.#offscreen_fragment);
+				this.#offscreen_fragment = null;
+			}
+		}
+	}
+
+	/** @param {1 | -1} d */
+	update_pending_count(d) {
+		if (this.has_pending_snippet()) {
+			this.#update_pending_count(d);
+		} else if (this.parent) {
+			this.parent.#update_pending_count(d);
+		}
+
+		queueMicrotask(() => {
+			if (this.#effect_pending) {
+				internal_set(this.#effect_pending, this.#pending_count);
+			}
+		});
+	}
+
+	get_effect_pending() {
+		this.#effect_pending_subscriber();
+		return get(/** @type {Source<number>} */ (this.#effect_pending));
+	}
+
 	/** @param {unknown} error */
 	error(error) {
 		var onerror = this.#props.onerror;
 		let failed = this.#props.failed;
 
 		const reset = () => {
+			this.#pending_count = 0;
+
 			if (this.#failed_effect !== null) {
 				pause_effect(this.#failed_effect, () => {
 					this.#failed_effect = null;
 				});
 			}
 
+			this.pending = true;
+
 			this.#main_effect = this.#run(() => {
 				this.#is_creating_fallback = false;
 				return branch(() => this.#children(this.#anchor));
 			});
+
+			if (this.#pending_count > 0) {
+				this.#show_pending_snippet();
+			} else {
+				this.pending = false;
+			}
 		};
 
 		// If we have nothing to capture the error, or if we hit an error while
@@ -152,6 +298,11 @@ export class Boundary {
 			this.#main_effect = null;
 		}
 
+		if (this.#pending_effect) {
+			destroy_effect(this.#pending_effect);
+			this.#pending_effect = null;
+		}
+
 		if (this.#failed_effect) {
 			destroy_effect(this.#failed_effect);
 			this.#failed_effect = null;
@@ -187,3 +338,49 @@ export class Boundary {
 		}
 	}
 }
+
+/**
+ *
+ * @param {Effect} effect
+ * @param {DocumentFragment} fragment
+ */
+function move_effect(effect, fragment) {
+	var node = effect.nodes_start;
+	var end = effect.nodes_end;
+
+	while (node !== null) {
+		/** @type {TemplateNode | null} */
+		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
+
+		fragment.append(node);
+		node = next;
+	}
+}
+
+export function get_pending_boundary() {
+	var boundary = /** @type {Effect} */ (active_effect).b;
+
+	while (boundary !== null && !boundary.has_pending_snippet()) {
+		boundary = boundary.parent;
+	}
+
+	if (boundary === null) {
+		e.await_outside_boundary();
+	}
+
+	return boundary;
+}
+
+export function pending() {
+	if (active_effect === null) {
+		e.effect_pending_outside_reaction();
+	}
+
+	var boundary = active_effect.b;
+
+	if (boundary === null) {
+		return 0; // TODO eventually we will need this to be global
+	}
+
+	return boundary.get_effect_pending();
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 7b12be58e8..43c75e2a37 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -1,4 +1,5 @@
 /** @import { EachItem, EachState, Effect, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -21,7 +22,8 @@ import {
 	clear_text_content,
 	create_text,
 	get_first_child,
-	get_next_sibling
+	get_next_sibling,
+	should_defer_append
 } from '../operations.js';
 import {
 	block,
@@ -39,6 +41,7 @@ import { queue_micro_task } from '../task.js';
 import { active_effect, get } from '../../runtime.js';
 import { DEV } from 'esm-env';
 import { derived_safe_equal } from '../../reactivity/deriveds.js';
+import { current_batch } from '../../reactivity/batch.js';
 
 /**
  * The row of a keyed each block that is currently updating. We track this
@@ -66,9 +69,10 @@ export function index(_, i) {
  * @param {EachState} state
  * @param {EachItem[]} items
  * @param {null | Node} controlled_anchor
- * @param {Map<any, EachItem>} items_map
  */
-function pause_effects(state, items, controlled_anchor, items_map) {
+function pause_effects(state, items, controlled_anchor) {
+	var items_map = state.items;
+
 	/** @type {TransitionManager[]} */
 	var transitions = [];
 	var length = items.length;
@@ -137,6 +141,9 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 	var was_empty = false;
 
+	/** @type {Map<any, EachItem>} */
+	var offscreen_items = new Map();
+
 	// TODO: ideally we could use derived for runes mode but because of the ability
 	// to use a store which can be mutated, we can't do that here as mutating a store
 	// will still result in the collection array being the same from the store
@@ -146,8 +153,45 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
 	});
 
+	/** @type {V[]} */
+	var array;
+
+	/** @type {Effect} */
+	var each_effect;
+
+	function commit() {
+		reconcile(
+			each_effect,
+			array,
+			state,
+			offscreen_items,
+			anchor,
+			render_fn,
+			flags,
+			get_key,
+			get_collection
+		);
+
+		if (fallback_fn !== null) {
+			if (array.length === 0) {
+				if (fallback) {
+					resume_effect(fallback);
+				} else {
+					fallback = branch(() => fallback_fn(anchor));
+				}
+			} else if (fallback !== null) {
+				pause_effect(fallback, () => {
+					fallback = null;
+				});
+			}
+		}
+	}
+
 	block(() => {
-		var array = get(each_array);
+		// store a reference to the effect so that we can update the start/end nodes in reconciliation
+		each_effect ??= /** @type {Effect} */ (active_effect);
+
+		array = get(each_array);
 		var length = array.length;
 
 		if (was_empty && length === 0) {
@@ -219,21 +263,56 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			}
 		}
 
-		if (!hydrating) {
-			reconcile(array, state, anchor, render_fn, flags, get_key, get_collection);
-		}
+		if (hydrating) {
+			if (length === 0 && fallback_fn) {
+				fallback = branch(() => fallback_fn(anchor));
+			}
+		} else {
+			if (should_defer_append()) {
+				var keys = new Set();
+				var batch = /** @type {Batch} */ (current_batch);
+
+				for (i = 0; i < length; i += 1) {
+					value = array[i];
+					key = get_key(value, i);
+
+					var existing = state.items.get(key) ?? offscreen_items.get(key);
+
+					if (existing) {
+						// update before reconciliation, to trigger any async updates
+						if ((flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0) {
+							update_item(existing, value, i, flags);
+						}
+					} else {
+						item = create_item(
+							null,
+							state,
+							null,
+							null,
+							value,
+							key,
+							i,
+							render_fn,
+							flags,
+							get_collection,
+							true
+						);
+
+						offscreen_items.set(key, item);
+					}
 
-		if (fallback_fn !== null) {
-			if (length === 0) {
-				if (fallback) {
-					resume_effect(fallback);
-				} else {
-					fallback = branch(() => fallback_fn(anchor));
+					keys.add(key);
 				}
-			} else if (fallback !== null) {
-				pause_effect(fallback, () => {
-					fallback = null;
-				});
+
+				for (const [key, item] of state.items) {
+					if (!keys.has(key)) {
+						batch.skipped_effects.add(item.e);
+					}
+				}
+
+				batch.add_callback(commit);
+			} else {
+				commit();
 			}
 		}
 
@@ -259,8 +338,10 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 /**
  * Add, remove, or reorder items output by an each block as its input changes
  * @template V
+ * @param {Effect} each_effect
  * @param {Array<V>} array
  * @param {EachState} state
+ * @param {Map<any, EachItem>} offscreen_items
  * @param {Element | Comment | Text} anchor
  * @param {(anchor: Node, item: MaybeSource<V>, index: number | Source<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
@@ -268,7 +349,17 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
  * @param {() => V[]} get_collection
  * @returns {void}
  */
-function reconcile(array, state, anchor, render_fn, flags, get_key, get_collection) {
+function reconcile(
+	each_effect,
+	array,
+	state,
+	offscreen_items,
+	anchor,
+	render_fn,
+	flags,
+	get_key,
+	get_collection
+) {
 	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
 	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
 
@@ -320,23 +411,39 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 	for (i = 0; i < length; i += 1) {
 		value = array[i];
 		key = get_key(value, i);
+
 		item = items.get(key);
 
 		if (item === undefined) {
-			var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
-
-			prev = create_item(
-				child_anchor,
-				state,
-				prev,
-				prev === null ? state.first : prev.next,
-				value,
-				key,
-				i,
-				render_fn,
-				flags,
-				get_collection
-			);
+			var pending = offscreen_items.get(key);
+
+			if (pending !== undefined) {
+				offscreen_items.delete(key);
+				items.set(key, pending);
+
+				var next = prev ? prev.next : current;
+
+				link(state, prev, pending);
+				link(state, pending, next);
+
+				move(pending, next, anchor);
+				prev = pending;
+			} else {
+				var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
+
+				prev = create_item(
+					child_anchor,
+					state,
+					prev,
+					prev === null ? state.first : prev.next,
+					value,
+					key,
+					i,
+					render_fn,
+					flags,
+					get_collection
+				);
+			}
 
 			items.set(key, prev);
 
@@ -455,7 +562,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 				}
 			}
 
-			pause_effects(state, to_destroy, controlled_anchor, items);
+			pause_effects(state, to_destroy, controlled_anchor);
 		}
 	}
 
@@ -468,8 +575,14 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 		});
 	}
 
-	/** @type {Effect} */ (active_effect).first = state.first && state.first.e;
-	/** @type {Effect} */ (active_effect).last = prev && prev.e;
+	each_effect.first = state.first && state.first.e;
+	each_effect.last = prev && prev.e;
+
+	for (var unused of offscreen_items.values()) {
+		destroy_effect(unused.e);
+	}
+
+	offscreen_items.clear();
 }
 
 /**
@@ -493,7 +606,7 @@ function update_item(item, value, index, type) {
 
 /**
  * @template V
- * @param {Node} anchor
+ * @param {Node | null} anchor
  * @param {EachState} state
  * @param {EachItem | null} prev
  * @param {EachItem | null} next
@@ -503,6 +616,7 @@ function update_item(item, value, index, type) {
  * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
  * @param {() => V[]} get_collection
+ * @param {boolean} [deferred]
  * @returns {EachItem}
  */
 function create_item(
@@ -515,7 +629,8 @@ function create_item(
 	index,
 	render_fn,
 	flags,
-	get_collection
+	get_collection,
+	deferred
 ) {
 	var previous_each_item = current_each_item;
 	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
@@ -549,13 +664,20 @@ function create_item(
 	current_each_item = item;
 
 	try {
-		item.e = branch(() => render_fn(anchor, v, i, get_collection), hydrating);
+		if (anchor === null) {
+			var fragment = document.createDocumentFragment();
+			fragment.append((anchor = create_text()));
+		}
+
+		item.e = branch(() => render_fn(/** @type {Node} */ (anchor), v, i, get_collection), hydrating);
 
 		item.e.prev = prev && prev.e;
 		item.e.next = next && next.e;
 
 		if (prev === null) {
-			state.first = item;
+			if (!deferred) {
+				state.first = item;
+			}
 		} else {
 			prev.next = item;
 			prev.e.next = item.e;
@@ -583,7 +705,7 @@ function move(item, next, anchor) {
 	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
 	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
 
-	while (node !== end) {
+	while (node !== null && node !== end) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
 		dest.before(node);
 		node = next_node;
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index bf1098c3f4..6ba9ad4936 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -1,4 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import {
 	hydrate_next,
@@ -10,16 +11,20 @@ import {
 	set_hydrating
 } from '../hydration.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
-import { HYDRATION_START, HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { create_text, should_defer_append } from '../operations.js';
+import { current_batch } from '../../reactivity/batch.js';
+
+// TODO reinstate https://github.com/sveltejs/svelte/pull/15250
 
 /**
  * @param {TemplateNode} node
- * @param {(branch: (fn: (anchor: Node, elseif?: [number,number]) => void, flag?: boolean) => void) => void} fn
- * @param {[number,number]} [elseif]
+ * @param {(branch: (fn: (anchor: Node) => void, flag?: boolean) => 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}
  */
-export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
-	if (hydrating && root_index === 0) {
+export function if_block(node, fn, elseif = false) {
+	if (hydrating) {
 		hydrate_next();
 	}
 
@@ -34,45 +39,56 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
 	/** @type {UNINITIALIZED | boolean | null} */
 	var condition = UNINITIALIZED;
 
-	var flags = root_index > 0 ? EFFECT_TRANSPARENT : 0;
+	var flags = elseif ? EFFECT_TRANSPARENT : 0;
 
 	var has_branch = false;
 
-	const set_branch = (
-		/** @type {(anchor: Node, elseif?: [number,number]) => void} */ fn,
-		flag = true
-	) => {
+	const set_branch = (/** @type {(anchor: Node) => void} */ fn, flag = true) => {
 		has_branch = true;
 		update_branch(flag, fn);
 	};
 
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
+
+	function commit() {
+		if (offscreen_fragment !== null) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		var active = condition ? consequent_effect : alternate_effect;
+		var inactive = condition ? alternate_effect : consequent_effect;
+
+		if (active) {
+			resume_effect(active);
+		}
+
+		if (inactive) {
+			pause_effect(inactive, () => {
+				if (condition) {
+					alternate_effect = null;
+				} else {
+					consequent_effect = null;
+				}
+			});
+		}
+	}
+
 	const update_branch = (
 		/** @type {boolean | null} */ new_condition,
-		/** @type {null | ((anchor: Node, elseif?: [number,number]) => void)} */ fn
+		/** @type {null | ((anchor: Node) => void)} */ fn
 	) => {
 		if (condition === (condition = new_condition)) return;
 
 		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		let mismatch = false;
 
-		if (hydrating && hydrate_index !== -1) {
-			if (root_index === 0) {
-				const data = read_hydration_instruction(anchor);
-
-				if (data === HYDRATION_START) {
-					hydrate_index = 0;
-				} else if (data === HYDRATION_START_ELSE) {
-					hydrate_index = Infinity;
-				} else {
-					hydrate_index = parseInt(data.substring(1));
-					if (hydrate_index !== hydrate_index) {
-						// if hydrate_index is NaN
-						// we set an invalid index to force mismatch
-						hydrate_index = condition ? Infinity : -1;
-					}
-				}
-			}
-			const is_else = hydrate_index > root_index;
+		if (hydrating) {
+			const is_else = read_hydration_instruction(anchor) === HYDRATION_START_ELSE;
 
 			if (!!condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
@@ -82,34 +98,35 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
 				set_hydrate_node(anchor);
 				set_hydrating(false);
 				mismatch = true;
-				hydrate_index = -1; // ignore hydration in next else if
 			}
 		}
 
-		if (condition) {
-			if (consequent_effect) {
-				resume_effect(consequent_effect);
-			} else if (fn) {
-				consequent_effect = branch(() => fn(anchor));
-			}
+		var defer = should_defer_append();
+		var target = anchor;
 
-			if (alternate_effect) {
-				pause_effect(alternate_effect, () => {
-					alternate_effect = null;
-				});
-			}
+		if (defer) {
+			offscreen_fragment = document.createDocumentFragment();
+			offscreen_fragment.append((target = create_text()));
+		}
+
+		if (condition) {
+			consequent_effect ??= fn && branch(() => fn(target));
 		} else {
-			if (alternate_effect) {
-				resume_effect(alternate_effect);
-			} else if (fn) {
-				alternate_effect = branch(() => fn(anchor, [root_index + 1, hydrate_index]));
-			}
+			alternate_effect ??= fn && branch(() => fn(target));
+		}
 
-			if (consequent_effect) {
-				pause_effect(consequent_effect, () => {
-					consequent_effect = null;
-				});
-			}
+		if (defer) {
+			var batch = /** @type {Batch} */ (current_batch);
+
+			var active = condition ? consequent_effect : alternate_effect;
+			var inactive = condition ? alternate_effect : consequent_effect;
+
+			if (active) batch.skipped_effects.delete(active);
+			if (inactive) batch.skipped_effects.add(inactive);
+
+			batch.add_callback(commit);
+		} else {
+			commit();
 		}
 
 		if (mismatch) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index a697163548..5e3c42019f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,9 +1,12 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { UNINITIALIZED } from '../../../../constants.js';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
 import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
 import { is_runes } from '../../context.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_text, should_defer_append } from '../operations.js';
+import { current_batch } from '../../reactivity/batch.js';
 
 /**
  * @template V
@@ -12,7 +15,7 @@ import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
  * @param {(anchor: Node) => TemplateNode | void} render_fn
  * @returns {void}
  */
-export function key_block(node, get_key, render_fn) {
+export function key(node, get_key, render_fn) {
 	if (hydrating) {
 		hydrate_next();
 	}
@@ -25,15 +28,48 @@ export function key_block(node, get_key, render_fn) {
 	/** @type {Effect} */
 	var effect;
 
+	/** @type {Effect} */
+	var pending_effect;
+
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
+
 	var changed = is_runes() ? not_equal : safe_not_equal;
 
+	function commit() {
+		if (effect) {
+			pause_effect(effect);
+		}
+
+		if (offscreen_fragment !== null) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		effect = pending_effect;
+	}
+
 	block(() => {
 		if (changed(key, (key = get_key()))) {
-			if (effect) {
-				pause_effect(effect);
+			var target = anchor;
+
+			var defer = should_defer_append();
+
+			if (defer) {
+				offscreen_fragment = document.createDocumentFragment();
+				offscreen_fragment.append((target = create_text()));
 			}
 
-			effect = branch(() => render_fn(anchor));
+			pending_effect = branch(() => render_fn(target));
+
+			if (defer) {
+				/** @type {Batch} */ (current_batch).add_callback(commit);
+			} else {
+				commit();
+			}
 		}
 	});
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index ad21436505..f16da9c427 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
@@ -1,7 +1,10 @@
 /** @import { TemplateNode, Dom, Effect } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
+import { current_batch } from '../../reactivity/batch.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_text, should_defer_append } from '../operations.js';
 
 /**
  * @template P
@@ -24,16 +27,50 @@ export function component(node, get_component, render_fn) {
 	/** @type {Effect | null} */
 	var effect;
 
-	block(() => {
-		if (component === (component = get_component())) return;
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
 
+	/** @type {Effect | null} */
+	var pending_effect = null;
+
+	function commit() {
 		if (effect) {
 			pause_effect(effect);
 			effect = null;
 		}
 
+		if (offscreen_fragment) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		effect = pending_effect;
+		pending_effect = null;
+	}
+
+	block(() => {
+		if (component === (component = get_component())) return;
+
+		var defer = should_defer_append();
+
 		if (component) {
-			effect = branch(() => render_fn(anchor, component));
+			var target = anchor;
+
+			if (defer) {
+				offscreen_fragment = document.createDocumentFragment();
+				offscreen_fragment.append((target = create_text()));
+			}
+
+			pending_effect = branch(() => render_fn(target, component));
+		}
+
+		if (defer) {
+			/** @type {Batch} */ (current_batch).add_callback(commit);
+		} else {
+			commit();
 		}
 	}, EFFECT_TRANSPARENT);
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 66f484a59a..22e532f5e4 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -21,8 +21,8 @@ import { set_class } from './class.js';
 import { set_style } from './style.js';
 import { ATTACHMENT_KEY, NAMESPACE_HTML } from '../../../../constants.js';
 import { block, branch, destroy_effect, effect } from '../../reactivity/effects.js';
-import { derived } from '../../reactivity/deriveds.js';
 import { init_select, select_option } from './bindings/select.js';
+import { flatten } from '../../reactivity/async.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -462,66 +462,67 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
 /**
  * @param {Element & ElementCSSInlineStyle} element
  * @param {(...expressions: any) => Record<string | symbol, any>} fn
- * @param {Array<() => any>} thunks
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
  * @param {string} [css_hash]
  * @param {boolean} [skip_warning]
  */
 export function attribute_effect(
 	element,
 	fn,
-	thunks = [],
+	sync = [],
+	async = [],
 	css_hash,
-	skip_warning = false,
-	d = derived
+	skip_warning = false
 ) {
-	const deriveds = thunks.map(d);
+	flatten(sync, async, (values) => {
+		/** @type {Record<string | symbol, any> | undefined} */
+		var prev = undefined;
 
-	/** @type {Record<string | symbol, any> | undefined} */
-	var prev = undefined;
+		/** @type {Record<symbol, Effect>} */
+		var effects = {};
 
-	/** @type {Record<symbol, Effect>} */
-	var effects = {};
+		var is_select = element.nodeName === 'SELECT';
+		var inited = false;
 
-	var is_select = element.nodeName === 'SELECT';
-	var inited = false;
+		block(() => {
+			var next = fn(...values.map(get));
+			/** @type {Record<string | symbol, any>} */
+			var current = set_attributes(element, prev, next, css_hash, skip_warning);
 
-	block(() => {
-		var next = fn(...deriveds.map(get));
-		/** @type {Record<string | symbol, any>} */
-		var current = set_attributes(element, prev, next, css_hash, skip_warning);
+			if (inited && is_select && 'value' in next) {
+				select_option(/** @type {HTMLSelectElement} */ (element), next.value);
+			}
 
-		if (inited && is_select && 'value' in next) {
-			select_option(/** @type {HTMLSelectElement} */ (element), next.value);
-		}
+			for (let symbol of Object.getOwnPropertySymbols(effects)) {
+				if (!next[symbol]) destroy_effect(effects[symbol]);
+			}
 
-		for (let symbol of Object.getOwnPropertySymbols(effects)) {
-			if (!next[symbol]) destroy_effect(effects[symbol]);
-		}
+			for (let symbol of Object.getOwnPropertySymbols(next)) {
+				var n = next[symbol];
 
-		for (let symbol of Object.getOwnPropertySymbols(next)) {
-			var n = next[symbol];
+				if (symbol.description === ATTACHMENT_KEY && (!prev || n !== prev[symbol])) {
+					if (effects[symbol]) destroy_effect(effects[symbol]);
+					effects[symbol] = branch(() => attach(element, () => n));
+				}
 
-			if (symbol.description === ATTACHMENT_KEY && (!prev || n !== prev[symbol])) {
-				if (effects[symbol]) destroy_effect(effects[symbol]);
-				effects[symbol] = branch(() => attach(element, () => n));
+				current[symbol] = n;
 			}
 
-			current[symbol] = n;
-		}
-
-		prev = current;
-	});
+			prev = current;
+		});
 
-	if (is_select) {
-		var select = /** @type {HTMLSelectElement} */ (element);
+		if (is_select) {
+			var select = /** @type {HTMLSelectElement} */ (element);
 
-		effect(() => {
-			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
-			init_select(select);
-		});
-	}
+			effect(() => {
+				select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
+				init_select(select);
+			});
+		}
 
-	inited = true;
+		inited = true;
+	});
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index f1992007ed..569d1179e6 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -64,6 +64,15 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
+		if (input === document.activeElement) {
+			// Never rewrite the contents of a focused input. We can get here if, for example,
+			// an update is deferred because of async work depending on the input:
+			//
+			// <input bind:value={query}>
+			// <p>{await find(query)}</p>
+			return;
+		}
+
 		if (is_numberlike_input(input) && value === to_number(input.value)) {
 			// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
 			return;
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 4b35f0802f..fb269e47e0 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -1,9 +1,11 @@
-/** @import { TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
 import { get_descriptor, is_extensible } from '../../shared/utils.js';
-import { TEXT_NODE } from '#client/constants';
+import { active_effect } from '../runtime.js';
+import { async_mode_flag } from '../../flags/index.js';
+import { TEXT_NODE, EFFECT_RAN } from '#client/constants';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -204,6 +206,19 @@ export function clear_text_content(node) {
 	node.textContent = '';
 }
 
+/**
+ * Returns `true` if we're updating the current block, for example `condition` in
+ * an `{#if condition}` block just changed. In this case, the branch should be
+ * appended (or removed) at the same time as other updates within the
+ * current `<svelte:boundary>`
+ */
+export function should_defer_append() {
+	if (!async_mode_flag) return false;
+
+	var flags = /** @type {Effect} */ (active_effect).f;
+	return (flags & EFFECT_RAN) !== 0;
+}
+
 /**
  *
  * @param {string} tag
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index b12f21adfc..a512839181 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -1,11 +1,11 @@
-/** @import { Effect } from '#client' */
+/** @import { Derived, Effect } from '#client' */
 /** @import { Boundary } from './dom/blocks/boundary.js' */
 import { DEV } from 'esm-env';
 import { FILENAME } from '../../constants.js';
 import { is_firefox } from './dom/operations.js';
-import { BOUNDARY_EFFECT, EFFECT_RAN } from './constants.js';
+import { ERROR_VALUE, BOUNDARY_EFFECT, EFFECT_RAN } from './constants.js';
 import { define_property, get_descriptor } from '../shared/utils.js';
-import { active_effect } from './runtime.js';
+import { active_effect, active_reaction } from './runtime.js';
 
 const adjustments = new WeakMap();
 
@@ -13,7 +13,13 @@ const adjustments = new WeakMap();
  * @param {unknown} error
  */
 export function handle_error(error) {
-	var effect = /** @type {Effect} */ (active_effect);
+	var effect = active_effect;
+
+	// for unowned deriveds, don't throw until we read the value
+	if (effect === null) {
+		/** @type {Derived} */ (active_reaction).f |= ERROR_VALUE;
+		return error;
+	}
 
 	if (DEV && error instanceof Error && !adjustments.has(error)) {
 		adjustments.set(error, get_adjustments(error, effect));
@@ -23,11 +29,14 @@ export function handle_error(error) {
 		// if the error occurred while creating this subtree, we let it
 		// bubble up until it hits a boundary that can handle it
 		if ((effect.f & BOUNDARY_EFFECT) === 0) {
+			if (!effect.parent && error instanceof Error) {
+				apply_adjustments(error);
+			}
+
 			throw error;
 		}
 
-		// @ts-expect-error
-		effect.fn(error);
+		/** @type {Boundary} */ (effect.b).error(error);
 	} else {
 		// otherwise we bubble up the effect tree ourselves
 		invoke_error_boundary(error, effect);
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 64dc34e8d0..a491dc683d 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -4,6 +4,22 @@ import { DEV } from 'esm-env';
 
 export *  from '../shared/errors.js';
 
+/**
+ * Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+ * @returns {never}
+ */
+export function async_derived_orphan() {
+	if (DEV) {
+		const error = new Error(`async_derived_orphan\nCannot create a \`$derived(...)\` with an \`await\` expression outside of an effect tree\nhttps://svelte.dev/e/async_derived_orphan`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/async_derived_orphan`);
+	}
+}
+
 /**
  * Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
  * @returns {never}
@@ -181,6 +197,22 @@ export function effect_orphan(rune) {
 	}
 }
 
+/**
+ * `$effect.pending()` can only be called inside an effect or derived
+ * @returns {never}
+ */
+export function effect_pending_outside_reaction() {
+	if (DEV) {
+		const error = new Error(`effect_pending_outside_reaction\n\`$effect.pending()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/effect_pending_outside_reaction`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/effect_pending_outside_reaction`);
+	}
+}
+
 /**
  * Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
  * @returns {never}
@@ -197,6 +229,22 @@ export function effect_update_depth_exceeded() {
 	}
 }
 
+/**
+ * Cannot use `flushSync` inside an effect
+ * @returns {never}
+ */
+export function flush_sync_in_effect() {
+	if (DEV) {
+		const error = new Error(`flush_sync_in_effect\nCannot use \`flushSync\` inside an effect\nhttps://svelte.dev/e/flush_sync_in_effect`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/flush_sync_in_effect`);
+	}
+}
+
 /**
  * `getAbortSignal()` can only be called inside an effect or derived
  * @returns {never}
@@ -313,6 +361,22 @@ export function rune_outside_svelte(rune) {
 	}
 }
 
+/**
+ * `setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+ * @returns {never}
+ */
+export function set_context_after_init() {
+	if (DEV) {
+		const error = new Error(`set_context_after_init\n\`setContext\` must be called when a component first initializes, not in a subsequent effect or after an \`await\` expression\nhttps://svelte.dev/e/set_context_after_init`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/set_context_after_init`);
+	}
+}
+
 /**
  * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
  * @returns {never}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 576a30fa77..cddb432a98 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -9,10 +9,11 @@ export { create_ownership_validator } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
 export { trace, tag, tag_proxy } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
+export { async } from './dom/blocks/async.js';
 export { validate_snippet_args } from './dev/validation.js';
 export { await_block as await } from './dom/blocks/await.js';
 export { if_block as if } from './dom/blocks/if.js';
-export { key_block as key } from './dom/blocks/key.js';
+export { key } from './dom/blocks/key.js';
 export { css_props } from './dom/blocks/css-props.js';
 export { index, each } from './dom/blocks/each.js';
 export { html } from './dom/blocks/html.js';
@@ -97,8 +98,15 @@ export {
 	props_id,
 	with_script
 } from './dom/template.js';
-export { user_derived as derived, derived_safe_equal } from './reactivity/deriveds.js';
+export { save, track_reactivity_loss } from './reactivity/async.js';
+export { flushSync as flush, suspend } from './reactivity/batch.js';
 export {
+	async_derived,
+	user_derived as derived,
+	derived_safe_equal
+} from './reactivity/deriveds.js';
+export {
+	aborted,
 	effect_tracking,
 	effect_root,
 	legacy_pre_effect,
@@ -129,13 +137,12 @@ export {
 	update_store,
 	mark_store_binding
 } from './reactivity/store.js';
-export { boundary } from './dom/blocks/boundary.js';
+export { boundary, pending } from './dom/blocks/boundary.js';
 export { set_text } from './render.js';
 export {
 	get,
 	safe_get,
 	invalidate_inner_signals,
-	flushSync as flush,
 	tick,
 	untrack,
 	exclude_from_object,
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
new file mode 100644
index 0000000000..c200f10dba
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -0,0 +1,127 @@
+/** @import { Effect, Value } from '#client' */
+
+import { DESTROYED } from '#client/constants';
+import { DEV } from 'esm-env';
+import { component_context, is_runes, set_component_context } from '../context.js';
+import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import { invoke_error_boundary } from '../error-handling.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../runtime.js';
+import { current_batch } from './batch.js';
+import {
+	async_derived,
+	current_async_effect,
+	derived,
+	derived_safe_equal,
+	set_from_async_derived
+} from './deriveds.js';
+
+/**
+ *
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {(values: Value[]) => any} fn
+ */
+export function flatten(sync, async, fn) {
+	const d = is_runes() ? derived : derived_safe_equal;
+
+	if (async.length === 0) {
+		fn(sync.map(d));
+		return;
+	}
+
+	var batch = current_batch;
+	var parent = /** @type {Effect} */ (active_effect);
+
+	var restore = capture();
+	var boundary = get_pending_boundary();
+
+	Promise.all(async.map((expression) => async_derived(expression)))
+		.then((result) => {
+			batch?.activate();
+
+			restore();
+
+			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();
+		})
+		.catch((error) => {
+			boundary.error(error);
+		});
+}
+
+/**
+ * Captures the current effect context so that we can restore it after
+ * some asynchronous work has happened (so that e.g. `await a + b`
+ * causes `b` to be registered as a dependency).
+ */
+function capture() {
+	var previous_effect = active_effect;
+	var previous_reaction = active_reaction;
+	var previous_component_context = component_context;
+
+	return function restore() {
+		set_active_effect(previous_effect);
+		set_active_reaction(previous_reaction);
+		set_component_context(previous_component_context);
+
+		if (DEV) {
+			set_from_async_derived(null);
+		}
+	};
+}
+
+/**
+ * Wraps an `await` expression in such a way that the effect context that was
+ * active before the expression evaluated can be reapplied afterwards —
+ * `await a + b` becomes `(await $.save(a))() + b`
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
+export async function save(promise) {
+	var restore = capture();
+	var value = await promise;
+
+	return () => {
+		restore();
+		return value;
+	};
+}
+
+/**
+ * Reset `current_async_effect` after the `promise` resolves, so
+ * that we can emit `await_reactivity_loss` warnings
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
+export async function track_reactivity_loss(promise) {
+	var previous_async_effect = current_async_effect;
+	var value = await promise;
+
+	return () => {
+		set_from_async_derived(previous_async_effect);
+		return value;
+	};
+}
+
+export function unset_context() {
+	set_active_effect(null);
+	set_active_reaction(null);
+	set_component_context(null);
+	if (DEV) set_from_async_derived(null);
+}
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
new file mode 100644
index 0000000000..1126946ce9
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -0,0 +1,603 @@
+/** @import { Derived, Effect, Source } from '#client' */
+import {
+	BLOCK_EFFECT,
+	BRANCH_EFFECT,
+	CLEAN,
+	DESTROYED,
+	DIRTY,
+	EFFECT,
+	ASYNC,
+	INERT,
+	RENDER_EFFECT,
+	ROOT_EFFECT,
+	USER_EFFECT
+} from '#client/constants';
+import { async_mode_flag } from '../../flags/index.js';
+import { deferred, define_property } from '../../shared/utils.js';
+import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import {
+	active_effect,
+	is_dirty,
+	is_updating_effect,
+	set_is_updating_effect,
+	set_signal_status,
+	update_effect,
+	write_version
+} from '../runtime.js';
+import * as e from '../errors.js';
+import { flush_tasks } from '../dom/task.js';
+import { DEV } from 'esm-env';
+import { invoke_error_boundary } from '../error-handling.js';
+import { old_values } from './sources.js';
+import { unlink_effect } from './effects.js';
+import { unset_context } from './async.js';
+
+/** @type {Set<Batch>} */
+const batches = new Set();
+
+/** @type {Batch | null} */
+export let current_batch = null;
+
+/**
+ * When time travelling, we re-evaluate deriveds based on the temporary
+ * values of their dependencies rather than their actual values, and cache
+ * the results in this map rather than on the deriveds themselves
+ * @type {Map<Derived, any> | null}
+ */
+export let batch_deriveds = null;
+
+/** @type {Effect[]} Stack of effects, dev only */
+export let dev_effect_stack = [];
+
+/** @type {Effect[]} */
+let queued_root_effects = [];
+
+/** @type {Effect | null} */
+let last_scheduled_effect = null;
+
+let is_flushing = false;
+
+export class Batch {
+	/**
+	 * The current values of any sources that are updated in this batch
+	 * They keys of this map are identical to `this.#previous`
+	 * @type {Map<Source, any>}
+	 */
+	#current = new Map();
+
+	/**
+	 * The values of any sources that are updated in this batch _before_ those updates took place.
+	 * They keys of this map are identical to `this.#current`
+	 * @type {Map<Source, any>}
+	 */
+	#previous = new Map();
+
+	/**
+	 * When the batch is committed (and the DOM is updated), we need to remove old branches
+	 * and append new ones by calling the functions added inside (if/each/key/etc) blocks
+	 * @type {Set<() => void>}
+	 */
+	#callbacks = new Set();
+
+	/**
+	 * The number of async effects that are currently in flight
+	 */
+	#pending = 0;
+
+	/**
+	 * A deferred that resolves when the batch is committed, used with `settled()`
+	 * TODO replace with Promise.withResolvers once supported widely enough
+	 * @type {{ promise: Promise<void>, resolve: (value?: any) => void, reject: (reason: unknown) => void } | null}
+	 */
+	#deferred = null;
+
+	/**
+	 * True if an async effect inside this batch resolved and
+	 * its parent branch was already deleted
+	 */
+	#neutered = false;
+
+	/**
+	 * Async effects (created inside `async_derived`) encountered during processing.
+	 * These run after the rest of the batch has updated, since they should
+	 * always have the latest values
+	 * @type {Effect[]}
+	 */
+	#async_effects = [];
+
+	/**
+	 * The same as `#async_effects`, but for effects inside a newly-created
+	 * `<svelte:boundary>` — these do not prevent the batch from committing
+	 * @type {Effect[]}
+	 */
+	#boundary_async_effects = [];
+
+	/**
+	 * Template effects and `$effect.pre` effects, which run when
+	 * a batch is committed
+	 * @type {Effect[]}
+	 */
+	#render_effects = [];
+
+	/**
+	 * The same as `#render_effects`, but for `$effect` (which runs after)
+	 * @type {Effect[]}
+	 */
+	#effects = [];
+
+	/**
+	 * Block effects, which may need to re-run on subsequent flushes
+	 * in order to update internal sources (e.g. each block items)
+	 * @type {Effect[]}
+	 */
+	#block_effects = [];
+
+	/**
+	 * 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>}
+	 */
+	skipped_effects = new Set();
+
+	/**
+	 *
+	 * @param {Effect[]} root_effects
+	 */
+	#process(root_effects) {
+		queued_root_effects = [];
+
+		/** @type {Map<Source, { v: unknown, wv: number }> | null} */
+		var current_values = null;
+
+		// if there are multiple batches, we are 'time travelling' —
+		// we need to undo the changes belonging to any batch
+		// other than the current one
+		if (batches.size > 1) {
+			current_values = new Map();
+			batch_deriveds = new Map();
+
+			for (const [source, current] of this.#current) {
+				current_values.set(source, { v: source.v, wv: source.wv });
+				source.v = current;
+			}
+
+			for (const batch of batches) {
+				if (batch === this) continue;
+
+				for (const [source, previous] of batch.#previous) {
+					if (!current_values.has(source)) {
+						current_values.set(source, { v: source.v, wv: source.wv });
+						source.v = previous;
+					}
+				}
+			}
+		}
+
+		for (const root of root_effects) {
+			this.#traverse_effect_tree(root);
+		}
+
+		// if we didn't start any new async work, and no async work
+		// is outstanding from a previous flush, commit
+		if (this.#async_effects.length === 0 && this.#pending === 0) {
+			var render_effects = this.#render_effects;
+			var effects = this.#effects;
+
+			this.#render_effects = [];
+			this.#effects = [];
+			this.#block_effects = [];
+
+			this.#commit();
+
+			flush_queued_effects(render_effects);
+			flush_queued_effects(effects);
+
+			this.#deferred?.resolve();
+		} else {
+			// otherwise mark effects clean so they get scheduled on the next run
+			for (const e of this.#render_effects) set_signal_status(e, CLEAN);
+			for (const e of this.#effects) set_signal_status(e, CLEAN);
+			for (const e of this.#block_effects) set_signal_status(e, CLEAN);
+		}
+
+		if (current_values) {
+			for (const [source, { v, wv }] of current_values) {
+				// reset the source to the current value (unless
+				// it got a newer value as a result of effects running)
+				if (source.wv <= wv) {
+					source.v = v;
+				}
+			}
+
+			batch_deriveds = null;
+		}
+
+		for (const effect of this.#async_effects) {
+			update_effect(effect);
+		}
+
+		for (const effect of this.#boundary_async_effects) {
+			update_effect(effect);
+		}
+
+		this.#async_effects = [];
+		this.#boundary_async_effects = [];
+	}
+
+	/**
+	 * Traverse the effect tree, executing effects or stashing
+	 * them for later execution as appropriate
+	 * @param {Effect} root
+	 */
+	#traverse_effect_tree(root) {
+		root.f ^= CLEAN;
+
+		var effect = root.first;
+
+		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);
+
+			if (!skip && effect.fn !== null) {
+				if (is_branch) {
+					effect.f ^= CLEAN;
+				} else if ((flags & EFFECT) !== 0) {
+					this.#effects.push(effect);
+				} else if (async_mode_flag && (flags & RENDER_EFFECT) !== 0) {
+					this.#render_effects.push(effect);
+				} else if (is_dirty(effect)) {
+					if ((flags & ASYNC) !== 0) {
+						var effects = effect.b?.pending ? this.#boundary_async_effects : this.#async_effects;
+						effects.push(effect);
+					} else {
+						if ((effect.f & BLOCK_EFFECT) !== 0) this.#block_effects.push(effect);
+						update_effect(effect);
+					}
+				}
+
+				var child = effect.first;
+
+				if (child !== null) {
+					effect = child;
+					continue;
+				}
+			}
+
+			var parent = effect.parent;
+			effect = effect.next;
+
+			while (effect === null && parent !== null) {
+				effect = parent.next;
+				parent = parent.parent;
+			}
+		}
+	}
+
+	/**
+	 * Associate a change to a given source with the current
+	 * batch, noting its previous and current values
+	 * @param {Source} source
+	 * @param {any} value
+	 */
+	capture(source, value) {
+		if (!this.#previous.has(source)) {
+			this.#previous.set(source, value);
+		}
+
+		this.#current.set(source, source.v);
+	}
+
+	activate() {
+		current_batch = this;
+	}
+
+	deactivate() {
+		current_batch = null;
+	}
+
+	neuter() {
+		this.#neutered = true;
+	}
+
+	flush() {
+		if (queued_root_effects.length > 0) {
+			this.flush_effects();
+		} else {
+			this.#commit();
+		}
+
+		if (current_batch !== this) {
+			// this can happen if a `flushSync` occurred during `this.flush_effects()`,
+			// which is permitted in legacy mode despite being a terrible idea
+			return;
+		}
+
+		if (this.#pending === 0) {
+			batches.delete(this);
+		}
+
+		current_batch = null;
+	}
+
+	flush_effects() {
+		var was_updating_effect = is_updating_effect;
+		is_flushing = true;
+
+		try {
+			var flush_count = 0;
+			set_is_updating_effect(true);
+
+			while (queued_root_effects.length > 0) {
+				if (flush_count++ > 1000) {
+					infinite_loop_guard();
+				}
+
+				this.#process(queued_root_effects);
+				old_values.clear();
+			}
+		} finally {
+			is_flushing = false;
+			set_is_updating_effect(was_updating_effect);
+
+			last_scheduled_effect = null;
+			if (DEV) {
+				dev_effect_stack = [];
+			}
+		}
+	}
+
+	/**
+	 * Append and remove branches to/from the DOM
+	 */
+	#commit() {
+		if (!this.#neutered) {
+			for (const fn of this.#callbacks) {
+				fn();
+			}
+		}
+
+		this.#callbacks.clear();
+	}
+
+	increment() {
+		this.#pending += 1;
+	}
+
+	decrement() {
+		this.#pending -= 1;
+
+		if (this.#pending === 0) {
+			for (const e of this.#render_effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (const e of this.#effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (const e of this.#block_effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			this.#render_effects = [];
+			this.#effects = [];
+
+			this.flush();
+		}
+	}
+
+	/** @param {() => void} fn */
+	add_callback(fn) {
+		this.#callbacks.add(fn);
+	}
+
+	settled() {
+		return (this.#deferred ??= deferred()).promise;
+	}
+
+	static ensure() {
+		if (current_batch === null) {
+			const batch = (current_batch = new Batch());
+			batches.add(current_batch);
+
+			queueMicrotask(() => {
+				if (current_batch !== batch) {
+					// a flushSync happened in the meantime
+					return;
+				}
+
+				batch.flush();
+			});
+		}
+
+		return current_batch;
+	}
+}
+
+/**
+ * Synchronously flush any pending updates.
+ * Returns void if no callback is provided, otherwise returns the result of calling the callback.
+ * @template [T=void]
+ * @param {(() => T) | undefined} [fn]
+ * @returns {T}
+ */
+export function flushSync(fn) {
+	if (async_mode_flag && active_effect !== null) {
+		e.flush_sync_in_effect();
+	}
+
+	var result;
+
+	const batch = Batch.ensure();
+
+	if (fn) {
+		batch.flush_effects();
+
+		result = fn();
+	}
+
+	while (true) {
+		flush_tasks();
+
+		if (queued_root_effects.length === 0) {
+			if (batch === current_batch) {
+				batch.flush();
+			}
+
+			// this would be reset in `batch.flush_effects()` but since we are early returning here,
+			// we need to reset it here as well in case the first time there's 0 queued root effects
+			last_scheduled_effect = null;
+
+			if (DEV) {
+				dev_effect_stack = [];
+			}
+
+			return /** @type {T} */ (result);
+		}
+
+		batch.flush_effects();
+	}
+}
+
+function log_effect_stack() {
+	// eslint-disable-next-line no-console
+	console.error(
+		'Last ten effects were: ',
+		dev_effect_stack.slice(-10).map((d) => d.fn)
+	);
+	dev_effect_stack = [];
+}
+
+function infinite_loop_guard() {
+	try {
+		e.effect_update_depth_exceeded();
+	} catch (error) {
+		if (DEV) {
+			// stack is garbage, ignore. Instead add a console.error message.
+			define_property(error, 'stack', {
+				value: ''
+			});
+		}
+		// Try and handle the error so it can be caught at a boundary, that's
+		// if there's an effect available from when it was last scheduled
+		if (last_scheduled_effect !== null) {
+			if (DEV) {
+				try {
+					invoke_error_boundary(error, last_scheduled_effect);
+				} catch (e) {
+					// Only log the effect stack if the error is re-thrown
+					log_effect_stack();
+					throw e;
+				}
+			} else {
+				invoke_error_boundary(error, last_scheduled_effect);
+			}
+		} else {
+			if (DEV) {
+				log_effect_stack();
+			}
+			throw error;
+		}
+	}
+}
+
+/**
+ * @param {Array<Effect>} effects
+ * @returns {void}
+ */
+function flush_queued_effects(effects) {
+	var length = effects.length;
+	if (length === 0) return;
+
+	for (var i = 0; i < length; i++) {
+		var effect = effects[i];
+
+		if ((effect.f & (DESTROYED | INERT)) === 0) {
+			if (is_dirty(effect)) {
+				var wv = write_version;
+
+				update_effect(effect);
+
+				// Effects with no dependencies or teardown do not get added to the effect tree.
+				// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
+				// don't know if we need to keep them until they are executed. Doing the check
+				// here (rather than in `update_effect`) allows us to skip the work for
+				// immediate effects.
+				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
+					if (effect.teardown === null) {
+						// remove this effect from the graph
+						unlink_effect(effect);
+					} else {
+						// keep the effect in the graph, but free up some memory
+						effect.fn = null;
+					}
+				}
+
+				// if state is written in a user effect, abort and re-schedule, lest we run
+				// effects that should be removed as a result of the state change
+				if (write_version > wv && (effect.f & USER_EFFECT) !== 0) {
+					break;
+				}
+			}
+		}
+	}
+
+	for (; i < length; i += 1) {
+		schedule_effect(effects[i]);
+	}
+}
+
+/**
+ * @param {Effect} signal
+ * @returns {void}
+ */
+export function schedule_effect(signal) {
+	var effect = (last_scheduled_effect = signal);
+
+	while (effect.parent !== null) {
+		effect = effect.parent;
+		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
+		if (is_flushing && effect === active_effect && (flags & BLOCK_EFFECT) !== 0) {
+			return;
+		}
+
+		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+			if ((flags & CLEAN) === 0) return;
+			effect.f ^= CLEAN;
+		}
+	}
+
+	queued_root_effects.push(effect);
+}
+
+export function suspend() {
+	var boundary = get_pending_boundary();
+	var batch = /** @type {Batch} */ (current_batch);
+	var pending = boundary.pending;
+
+	boundary.update_pending_count(1);
+	if (!pending) batch.increment();
+
+	return function unsuspend() {
+		boundary.update_pending_count(-1);
+		if (!pending) batch.decrement();
+
+		unset_context();
+	};
+}
+
+/**
+ * Forcibly remove all current batches, to prevent cross-talk between tests
+ */
+export function clear() {
+	batches.clear();
+}
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index e563c77534..fa6a9e02a1 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -1,6 +1,17 @@
-/** @import { Derived, Effect } from '#client' */
+/** @import { Derived, Effect, Source } from '#client' */
+/** @import { Batch } from './batch.js'; */
 import { DEV } from 'esm-env';
-import { CLEAN, DERIVED, DIRTY, EFFECT_PRESERVED, MAYBE_DIRTY, UNOWNED } from '#client/constants';
+import {
+	ERROR_VALUE,
+	CLEAN,
+	DERIVED,
+	DIRTY,
+	EFFECT_PRESERVED,
+	MAYBE_DIRTY,
+	STALE_REACTION,
+	UNOWNED,
+	ASYNC
+} from '#client/constants';
 import {
 	active_reaction,
 	active_effect,
@@ -14,12 +25,26 @@ import {
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
-import { destroy_effect } from './effects.js';
-import { inspect_effects, set_inspect_effects } from './sources.js';
+import * as w from '../warnings.js';
+import { async_effect, destroy_effect } from './effects.js';
+import { inspect_effects, internal_set, set_inspect_effects, source } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
 import { tracing_mode_flag } from '../../flags/index.js';
+import { Boundary } from '../dom/blocks/boundary.js';
 import { component_context } from '../context.js';
 import { UNINITIALIZED } from '../../../constants.js';
+import { batch_deriveds, current_batch } from './batch.js';
+import { unset_context } from './async.js';
+
+/** @type {Effect | null} */
+export let current_async_effect = null;
+
+/** @param {Effect | null} v */
+export function set_from_async_derived(v) {
+	current_async_effect = v;
+}
+
+export const recent_async_deriveds = new Set();
 
 /**
  * @template V
@@ -65,6 +90,135 @@ export function derived(fn) {
 	return signal;
 }
 
+/**
+ * @template V
+ * @param {() => V | Promise<V>} fn
+ * @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) {
+	let parent = /** @type {Effect | null} */ (active_effect);
+
+	if (parent === null) {
+		e.async_derived_orphan();
+	}
+
+	var boundary = /** @type {Boundary} */ (parent.b);
+
+	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
+	var signal = source(/** @type {V} */ (UNINITIALIZED));
+
+	/** @type {Promise<V> | null} */
+	var prev = null;
+
+	// only suspend in async deriveds created on initialisation
+	var should_suspend = !active_reaction;
+
+	async_effect(() => {
+		if (DEV) current_async_effect = active_effect;
+
+		try {
+			var p = fn();
+		} catch (error) {
+			p = Promise.reject(error);
+		}
+
+		if (DEV) current_async_effect = null;
+
+		var r = () => p;
+		promise = prev?.then(r, r) ?? Promise.resolve(p);
+
+		prev = promise;
+
+		var batch = /** @type {Batch} */ (current_batch);
+		var pending = boundary.pending;
+
+		if (should_suspend) {
+			boundary.update_pending_count(1);
+			if (!pending) batch.increment();
+		}
+
+		/**
+		 * @param {any} value
+		 * @param {unknown} error
+		 */
+		const handler = (value, error = undefined) => {
+			prev = null;
+
+			current_async_effect = null;
+
+			if (!pending) batch.activate();
+
+			if (error) {
+				if (error !== STALE_REACTION) {
+					signal.f |= ERROR_VALUE;
+
+					// @ts-expect-error the error is the wrong type, but we don't care
+					internal_set(signal, error);
+				}
+			} else {
+				if ((signal.f & ERROR_VALUE) !== 0) {
+					signal.f ^= ERROR_VALUE;
+				}
+
+				internal_set(signal, value);
+
+				if (DEV && location !== undefined) {
+					recent_async_deriveds.add(signal);
+
+					setTimeout(() => {
+						if (recent_async_deriveds.has(signal)) {
+							w.await_waterfall(/** @type {string} */ (signal.label), location);
+							recent_async_deriveds.delete(signal);
+						}
+					});
+				}
+			}
+
+			if (should_suspend) {
+				boundary.update_pending_count(-1);
+				if (!pending) batch.decrement();
+			}
+
+			unset_context();
+		};
+
+		promise.then(handler, (e) => handler(null, e || 'unknown'));
+
+		if (batch) {
+			return () => {
+				queueMicrotask(() => batch.neuter());
+			};
+		}
+	});
+
+	if (DEV) {
+		// add a flag that lets this be printed as a derived
+		// when using `$inspect.trace()`
+		signal.f |= ASYNC;
+	}
+
+	return new Promise((fulfil) => {
+		/** @param {Promise<V>} p */
+		function next(p) {
+			function go() {
+				if (p === promise) {
+					fulfil(signal);
+				} else {
+					// if the effect re-runs before the initial promise
+					// resolves, delay resolution until we have a value
+					next(promise);
+				}
+			}
+
+			p.then(go, go);
+		}
+
+		next(promise);
+	});
+}
+
 /**
  * @template V
  * @param {() => V} fn
@@ -185,8 +339,12 @@ export function update_derived(derived) {
 	// cleanup function, or it will cache a stale value
 	if (is_destroying_effect) return;
 
-	var status =
-		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
+	if (batch_deriveds !== null) {
+		batch_deriveds.set(derived, derived.v);
+	} else {
+		var status =
+			(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
 
-	set_signal_status(derived, status);
+		set_signal_status(derived, status);
+	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index b6a40a68be..c4edd2bf8d 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -7,7 +7,6 @@ import {
 	get,
 	is_destroying_effect,
 	remove_reactions,
-	schedule_effect,
 	set_active_reaction,
 	set_is_destroying_effect,
 	set_signal_status,
@@ -32,17 +31,17 @@ import {
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_PRESERVED,
-	BOUNDARY_EFFECT,
 	STALE_REACTION,
-	USER_EFFECT
+	USER_EFFECT,
+	ASYNC
 } from '#client/constants';
-import { set } from './sources.js';
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
 import { get_next_sibling } from '../dom/operations.js';
-import { derived } from './deriveds.js';
 import { component_context, dev_current_component_function, dev_stack } from '../context.js';
+import { Batch, schedule_effect } from './batch.js';
+import { flatten } from './async.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -93,6 +92,10 @@ function create_effect(type, fn, sync, push = true) {
 		}
 	}
 
+	if (parent !== null && (parent.f & INERT) !== 0) {
+		type |= INERT;
+	}
+
 	/** @type {Effect} */
 	var effect = {
 		ctx: component_context,
@@ -137,7 +140,7 @@ function create_effect(type, fn, sync, push = true) {
 		effect.first === null &&
 		effect.nodes_start === null &&
 		effect.teardown === null &&
-		(effect.f & (EFFECT_PRESERVED | BOUNDARY_EFFECT)) === 0;
+		(effect.f & EFFECT_PRESERVED) === 0;
 
 	if (!inert && push) {
 		if (parent !== null) {
@@ -185,8 +188,13 @@ export function user_effect(fn) {
 		});
 	}
 
-	if (!active_reaction && active_effect && (active_effect.f & BRANCH_EFFECT) !== 0) {
-		// Top-level `$effect(...)` in a component — defer until mount
+	// Non-nested `$effect(...)` in a component should be deferred
+	// until the component is mounted
+	var flags = /** @type {Effect} */ (active_effect).f;
+	var defer = !active_reaction && (flags & BRANCH_EFFECT) !== 0 && (flags & EFFECT_RAN) === 0;
+
+	if (defer) {
+		// Top-level `$effect(...)` in an unmounted component — defer until mount
 		var context = /** @type {ComponentContext} */ (component_context);
 		(context.e ??= []).push(fn);
 	} else {
@@ -228,6 +236,7 @@ export function inspect_effect(fn) {
  * @returns {() => void}
  */
 export function effect_root(fn) {
+	Batch.ensure();
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
 	return () => {
@@ -241,6 +250,7 @@ export function effect_root(fn) {
  * @returns {(options?: { outro?: boolean }) => Promise<void>}
  */
 export function component_root(fn) {
+	Batch.ensure();
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
 	return (options = {}) => {
@@ -274,9 +284,10 @@ export function effect(fn) {
 export function legacy_pre_effect(deps, fn) {
 	var context = /** @type {ComponentContextLegacy} */ (component_context);
 
-	/** @type {{ effect: null | Effect, ran: boolean }} */
-	var token = { effect: null, ran: false };
-	context.l.r1.push(token);
+	/** @type {{ effect: null | Effect, ran: boolean, deps: () => any }} */
+	var token = { effect: null, ran: false, deps };
+
+	context.l.$.push(token);
 
 	token.effect = render_effect(() => {
 		deps();
@@ -286,7 +297,6 @@ export function legacy_pre_effect(deps, fn) {
 		if (token.ran) return;
 
 		token.ran = true;
-		set(context.l.r2, true);
 		untrack(fn);
 	});
 }
@@ -295,10 +305,10 @@ export function legacy_pre_effect_reset() {
 	var context = /** @type {ComponentContextLegacy} */ (component_context);
 
 	render_effect(() => {
-		if (!get(context.l.r2)) return;
-
 		// Run dirty `$:` statements
-		for (var token of context.l.r1) {
+		for (var token of context.l.$) {
+			token.deps();
+
 			var effect = token.effect;
 
 			// If the effect is CLEAN, then make it MAYBE_DIRTY. This ensures we traverse through
@@ -313,8 +323,6 @@ export function legacy_pre_effect_reset() {
 
 			token.ran = false;
 		}
-
-		context.l.r2.v = false; // set directly to avoid rerunning this effect
 	});
 }
 
@@ -322,34 +330,27 @@ export function legacy_pre_effect_reset() {
  * @param {() => void | (() => void)} fn
  * @returns {Effect}
  */
-export function render_effect(fn) {
-	return create_effect(RENDER_EFFECT, fn, true);
+export function async_effect(fn) {
+	return create_effect(ASYNC | EFFECT_PRESERVED, fn, true);
 }
 
 /**
- * @param {(...expressions: any) => void | (() => void)} fn
- * @param {Array<() => any>} thunks
- * @param {<T>(fn: () => T) => Derived<T>} d
+ * @param {() => void | (() => void)} fn
  * @returns {Effect}
  */
-export function template_effect(fn, thunks = [], d = derived) {
-	if (DEV) {
-		// wrap the effect so that we can decorate stack trace with `in {expression}`
-		// (TODO maybe there's a better approach?)
-		return render_effect(() => {
-			var outer = /** @type {Effect} */ (active_effect);
-			var inner = () => fn(...deriveds.map(get));
-
-			define_property(outer.fn, 'name', { value: '{expression}' });
-			define_property(inner, 'name', { value: '{expression}' });
-
-			const deriveds = thunks.map(d);
-			block(inner);
-		});
-	}
+export function render_effect(fn, flags = 0) {
+	return create_effect(RENDER_EFFECT | flags, fn, true);
+}
 
-	const deriveds = thunks.map(d);
-	return block(() => fn(...deriveds.map(get)));
+/**
+ * @param {(...expressions: any) => void | (() => void)} fn
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ */
+export function template_effect(fn, sync = [], async = []) {
+	flatten(sync, async, (values) => {
+		create_effect(RENDER_EFFECT, () => fn(...values.map(get)), true);
+	});
 }
 
 /**
@@ -357,7 +358,7 @@ export function template_effect(fn, thunks = [], d = derived) {
  * @param {number} flags
  */
 export function block(fn, flags = 0) {
-	var effect = create_effect(RENDER_EFFECT | BLOCK_EFFECT | flags, fn, true);
+	var effect = create_effect(BLOCK_EFFECT | flags, fn, true);
 	if (DEV) {
 		effect.dev_stack = dev_stack;
 	}
@@ -369,7 +370,7 @@ export function block(fn, flags = 0) {
  * @param {boolean} [push]
  */
 export function branch(fn, push = true) {
-	return create_effect(RENDER_EFFECT | BRANCH_EFFECT, fn, true, push);
+	return create_effect(BRANCH_EFFECT, fn, true, push);
 }
 
 /**
@@ -606,6 +607,15 @@ function resume_children(effect, local) {
 	if ((effect.f & INERT) === 0) return;
 	effect.f ^= INERT;
 
+	// If a dependency of this effect changed while it was paused,
+	// schedule the effect to update. we don't use `is_dirty`
+	// here because we don't want to eagerly recompute a derived like
+	// `{#if foo}{foo.bar()}{/if}` if `foo` is now `undefined
+	if ((effect.f & CLEAN) === 0) {
+		set_signal_status(effect, DIRTY);
+		schedule_effect(effect);
+	}
+
 	var child = effect.first;
 
 	while (child !== null) {
@@ -626,3 +636,8 @@ function resume_children(effect, local) {
 		}
 	}
 }
+
+export function aborted() {
+	var effect = /** @type {Effect} */ (active_effect);
+	return (effect.f & DESTROYED) !== 0;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index c04443c93e..29c657bdd0 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -5,7 +5,6 @@ import {
 	active_effect,
 	untracked_writes,
 	get,
-	schedule_effect,
 	set_untracked_writes,
 	set_signal_status,
 	untrack,
@@ -27,12 +26,14 @@ import {
 	UNOWNED,
 	MAYBE_DIRTY,
 	BLOCK_EFFECT,
-	ROOT_EFFECT
+	ROOT_EFFECT,
+	ASYNC
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { get_stack, tag_proxy } from '../dev/tracing.js';
 import { component_context, is_runes } from '../context.js';
+import { Batch, schedule_effect } from './batch.js';
 import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
 
@@ -139,7 +140,7 @@ export function set(source, value, should_proxy = false) {
 		// to ensure we error if state is set inside an inspect effect
 		(!untracking || (active_reaction.f & INSPECT_EFFECT) !== 0) &&
 		is_runes() &&
-		(active_reaction.f & (DERIVED | BLOCK_EFFECT | INSPECT_EFFECT)) !== 0 &&
+		(active_reaction.f & (DERIVED | BLOCK_EFFECT | ASYNC | INSPECT_EFFECT)) !== 0 &&
 		!current_sources?.includes(source)
 	) {
 		e.state_unsafe_mutation();
@@ -172,6 +173,9 @@ export function internal_set(source, value) {
 
 		source.v = value;
 
+		const batch = Batch.ensure();
+		batch.capture(source, old_value);
+
 		if (DEV && tracing_mode_flag) {
 			source.updated = get_stack('UpdatedAt');
 
@@ -218,6 +222,7 @@ export function internal_set(source, value) {
 				if ((effect.f & CLEAN) !== 0) {
 					set_signal_status(effect, MAYBE_DIRTY);
 				}
+
 				if (is_dirty(effect)) {
 					update_effect(effect);
 				}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 5eca31e8cf..b5f6822207 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1,36 +1,36 @@
 /** @import { Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
-import { define_property, get_descriptors, get_prototype_of, index_of } from '../shared/utils.js';
+import { get_descriptors, get_prototype_of, index_of } from '../shared/utils.js';
 import {
 	destroy_block_effect_children,
 	destroy_effect_children,
-	execute_effect_teardown,
-	unlink_effect
+	execute_effect_teardown
 } from './reactivity/effects.js';
 import {
-	EFFECT,
 	DIRTY,
 	MAYBE_DIRTY,
 	CLEAN,
 	DERIVED,
 	UNOWNED,
 	DESTROYED,
-	INERT,
 	BRANCH_EFFECT,
 	STATE_SYMBOL,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	DISCONNECTED,
-	EFFECT_IS_UPDATING,
+	REACTION_IS_UPDATING,
 	STALE_REACTION,
-	USER_EFFECT
+	ERROR_VALUE
 } from './constants.js';
-import { flush_tasks } from './dom/task.js';
 import { internal_set, old_values } from './reactivity/sources.js';
-import { destroy_derived_effects, execute_derived, update_derived } from './reactivity/deriveds.js';
-import * as e from './errors.js';
-
-import { tracing_mode_flag } from '../flags/index.js';
+import {
+	destroy_derived_effects,
+	execute_derived,
+	current_async_effect,
+	recent_async_deriveds,
+	update_derived
+} from './reactivity/deriveds.js';
+import { async_mode_flag, tracing_mode_flag } from '../flags/index.js';
 import { tracing_expressions, get_stack } from './dev/tracing.js';
 import {
 	component_context,
@@ -41,15 +41,23 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from './context.js';
-import { handle_error, invoke_error_boundary } from './error-handling.js';
+import * as w from './warnings.js';
+import {
+	Batch,
+	batch_deriveds,
+	dev_effect_stack,
+	flushSync,
+	schedule_effect
+} from './reactivity/batch.js';
+import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
 
-let is_flushing = false;
+export let is_updating_effect = false;
 
-/** @type {Effect | null} */
-let last_scheduled_effect = null;
-
-let is_updating_effect = false;
+/** @param {boolean} value */
+export function set_is_updating_effect(value) {
+	is_updating_effect = value;
+}
 
 export let is_destroying_effect = false;
 
@@ -58,15 +66,6 @@ export function set_is_destroying_effect(value) {
 	is_destroying_effect = value;
 }
 
-// Handle effect queues
-
-/** @type {Effect[]} */
-let queued_root_effects = [];
-
-/** @type {Effect[]} Stack of effects, dev only */
-let dev_effect_stack = [];
-// Handle signal reactivity tree dependencies and reactions
-
 /** @type {null | Reaction} */
 export let active_reaction = null;
 
@@ -94,7 +93,7 @@ export let current_sources = null;
 
 /** @param {Value} value */
 export function push_reaction_value(value) {
-	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
+	if (active_reaction !== null && (!async_mode_flag || (active_reaction.f & DERIVED) !== 0)) {
 		if (current_sources === null) {
 			current_sources = [value];
 		} else {
@@ -129,7 +128,7 @@ export function set_untracked_writes(value) {
  * @type {number} Used by sources and deriveds for handling updates.
  * Version starts from 1 so that unowned deriveds differentiate between a created effect and a run one for tracing
  **/
-let write_version = 1;
+export let write_version = 1;
 
 /** @type {number} Used to version each read of a source of derived to avoid duplicating depedencies inside a reaction */
 let read_version = 0;
@@ -182,8 +181,12 @@ export function is_dirty(reaction) {
 			var length = dependencies.length;
 
 			// If we are working with a disconnected or an unowned signal that is now connected (due to an active effect)
-			// then we need to re-connect the reaction to the dependency
-			if (is_disconnected || is_unowned_connected) {
+			// then we need to re-connect the reaction to the dependency, unless the effect has already been destroyed
+			// (which can happen if the derived is read by an async derived)
+			if (
+				(is_disconnected || is_unowned_connected) &&
+				(active_effect === null || (active_effect.f & DESTROYED) === 0)
+			) {
 				var derived = /** @type {Derived} */ (reaction);
 				var parent = derived.parent;
 
@@ -241,7 +244,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 
-	if (current_sources?.includes(signal)) {
+	if (!async_mode_flag && current_sources?.includes(signal)) {
 		return;
 	}
 
@@ -287,14 +290,13 @@ export function update_reaction(reaction) {
 	untracking = false;
 	update_version = ++read_version;
 
-	reaction.f |= EFFECT_IS_UPDATING;
-
 	if (reaction.ac !== null) {
 		reaction.ac.abort(STALE_REACTION);
 		reaction.ac = null;
 	}
 
 	try {
+		reaction.f |= REACTION_IS_UPDATING;
 		var result = /** @type {Function} */ (0, reaction.fn)();
 		var deps = reaction.deps;
 
@@ -361,10 +363,15 @@ export function update_reaction(reaction) {
 			}
 		}
 
+		if ((reaction.f & ERROR_VALUE) !== 0) {
+			reaction.f ^= ERROR_VALUE;
+		}
+
 		return result;
 	} catch (error) {
-		handle_error(error);
+		return handle_error(error);
 	} finally {
+		reaction.f ^= REACTION_IS_UPDATING;
 		new_deps = previous_deps;
 		skipped_deps = previous_skipped_deps;
 		untracked_writes = previous_untracked_writes;
@@ -374,8 +381,6 @@ export function update_reaction(reaction) {
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
 		update_version = previous_update_version;
-
-		reaction.f ^= EFFECT_IS_UPDATING;
 	}
 }
 
@@ -400,6 +405,7 @@ function remove_reaction(signal, dependency) {
 			}
 		}
 	}
+
 	// If the derived has no reactions, then we can disconnect it from the graph,
 	// allowing it to either reconnect in the future, or be GC'd by the VM.
 	if (
@@ -500,253 +506,29 @@ export function update_effect(effect) {
 	}
 }
 
-function log_effect_stack() {
-	// eslint-disable-next-line no-console
-	console.error(
-		'Last ten effects were: ',
-		dev_effect_stack.slice(-10).map((d) => d.fn)
-	);
-	dev_effect_stack = [];
-}
-
-function infinite_loop_guard() {
-	try {
-		e.effect_update_depth_exceeded();
-	} catch (error) {
-		if (DEV) {
-			// stack is garbage, ignore. Instead add a console.error message.
-			define_property(error, 'stack', {
-				value: ''
-			});
-		}
-		// Try and handle the error so it can be caught at a boundary, that's
-		// if there's an effect available from when it was last scheduled
-		if (last_scheduled_effect !== null) {
-			if (DEV) {
-				try {
-					invoke_error_boundary(error, last_scheduled_effect);
-				} catch (e) {
-					// Only log the effect stack if the error is re-thrown
-					log_effect_stack();
-					throw e;
-				}
-			} else {
-				invoke_error_boundary(error, last_scheduled_effect);
-			}
-		} else {
-			if (DEV) {
-				log_effect_stack();
-			}
-			throw error;
-		}
-	}
-}
-
-function flush_queued_root_effects() {
-	var was_updating_effect = is_updating_effect;
-
-	try {
-		var flush_count = 0;
-		is_updating_effect = true;
-
-		while (queued_root_effects.length > 0) {
-			if (flush_count++ > 1000) {
-				infinite_loop_guard();
-			}
-
-			var root_effects = queued_root_effects;
-			var length = root_effects.length;
-
-			queued_root_effects = [];
-
-			for (var i = 0; i < length; i++) {
-				var collected_effects = process_effects(root_effects[i]);
-				flush_queued_effects(collected_effects);
-			}
-			old_values.clear();
-		}
-	} finally {
-		is_flushing = false;
-		is_updating_effect = was_updating_effect;
-
-		last_scheduled_effect = null;
-		if (DEV) {
-			dev_effect_stack = [];
-		}
-	}
-}
-
 /**
- * @param {Array<Effect>} effects
- * @returns {void}
- */
-function flush_queued_effects(effects) {
-	var length = effects.length;
-	if (length === 0) return;
-
-	for (var i = 0; i < length; i++) {
-		var effect = effects[i];
-
-		if ((effect.f & (DESTROYED | INERT)) === 0) {
-			if (is_dirty(effect)) {
-				var wv = write_version;
-
-				update_effect(effect);
-
-				// Effects with no dependencies or teardown do not get added to the effect tree.
-				// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
-				// don't know if we need to keep them until they are executed. Doing the check
-				// here (rather than in `update_effect`) allows us to skip the work for
-				// immediate effects.
-				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-					if (effect.teardown === null) {
-						// remove this effect from the graph
-						unlink_effect(effect);
-					} else {
-						// keep the effect in the graph, but free up some memory
-						effect.fn = null;
-					}
-				}
-
-				// if state is written in a user effect, abort and re-schedule, lest we run
-				// effects that should be removed as a result of the state change
-				if (write_version > wv && (effect.f & USER_EFFECT) !== 0) {
-					break;
-				}
-			}
-		}
-	}
-
-	for (; i < length; i += 1) {
-		schedule_effect(effects[i]);
-	}
-}
-
-/**
- * @param {Effect} signal
- * @returns {void}
- */
-export function schedule_effect(signal) {
-	if (!is_flushing) {
-		is_flushing = true;
-		queueMicrotask(flush_queued_root_effects);
-	}
-
-	var effect = (last_scheduled_effect = signal);
-
-	while (effect.parent !== null) {
-		effect = effect.parent;
-		var flags = effect.f;
-
-		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-			if ((flags & CLEAN) === 0) return;
-			effect.f ^= CLEAN;
-		}
-	}
-
-	queued_root_effects.push(effect);
-}
-
-/**
- *
- * This function both runs render effects and collects user effects in topological order
- * from the starting effect passed in. Effects will be collected when they match the filtered
- * bitwise flag passed in only. The collected effects array will be populated with all the user
- * effects to be flushed.
- *
- * @param {Effect} root
- * @returns {Effect[]}
- */
-function process_effects(root) {
-	/** @type {Effect[]} */
-	var effects = [];
-
-	/** @type {Effect | null} */
-	var effect = root;
-
-	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;
-
-		if (!is_skippable_branch && (flags & INERT) === 0) {
-			if ((flags & EFFECT) !== 0) {
-				effects.push(effect);
-			} else if (is_branch) {
-				effect.f ^= CLEAN;
-			} else {
-				if (is_dirty(effect)) {
-					update_effect(effect);
-				}
-			}
-
-			/** @type {Effect | null} */
-			var child = effect.first;
-
-			if (child !== null) {
-				effect = child;
-				continue;
-			}
-		}
-
-		var parent = effect.parent;
-		effect = effect.next;
-
-		while (effect === null && parent !== null) {
-			effect = parent.next;
-			parent = parent.parent;
-		}
-	}
-
-	return effects;
-}
-
-/**
- * Synchronously flush any pending updates.
- * Returns void if no callback is provided, otherwise returns the result of calling the callback.
- * @template [T=void]
- * @param {(() => T) | undefined} [fn]
- * @returns {T}
+ * Returns a promise that resolves once any pending state changes have been applied.
+ * @returns {Promise<void>}
  */
-export function flushSync(fn) {
-	var result;
-
-	if (fn) {
-		is_flushing = true;
-		flush_queued_root_effects();
-
-		is_flushing = true;
-		result = fn();
+export async function tick() {
+	if (async_mode_flag) {
+		return new Promise((f) => requestAnimationFrame(() => f()));
 	}
 
-	while (true) {
-		flush_tasks();
-
-		if (queued_root_effects.length === 0) {
-			// this would be reset in `flush_queued_root_effects` but since we are early returning here,
-			// we need to reset it here as well in case the first time there's 0 queued root effects
-			is_flushing = false;
-			last_scheduled_effect = null;
-			if (DEV) {
-				dev_effect_stack = [];
-			}
-			return /** @type {T} */ (result);
-		}
+	await Promise.resolve();
 
-		is_flushing = true;
-		flush_queued_root_effects();
-	}
+	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
+	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
+	flushSync();
 }
 
 /**
- * Returns a promise that resolves once any pending state changes have been applied.
+ * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
+ * have resolved and the DOM has been updated
  * @returns {Promise<void>}
  */
-export async function tick() {
-	await Promise.resolve();
-	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
-	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
-	flushSync();
+export function settled() {
+	return Batch.ensure().settled();
 }
 
 /**
@@ -764,22 +546,44 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (!current_sources?.includes(signal)) {
+		// if we're in a derived that is being read inside an _async_ derived,
+		// it's possible that the effect was already destroyed. In this case,
+		// 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)) {
 			var deps = active_reaction.deps;
-			if (signal.rv < read_version) {
-				signal.rv = read_version;
-				// If the signal is accessing the same dependencies in the same
-				// order as it did last time, increment `skipped_deps`
-				// rather than updating `new_deps`, which creates GC cost
-				if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
-					skipped_deps++;
-				} else if (new_deps === null) {
-					new_deps = [signal];
-				} else if (!skip_reaction || !new_deps.includes(signal)) {
-					// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
-					// an unowned derived because skip_reaction is true, then we need to ensure that
-					// we don't have duplicates
-					new_deps.push(signal);
+
+			if ((active_reaction.f & REACTION_IS_UPDATING) !== 0) {
+				// we're in the effect init/update cycle
+				if (signal.rv < read_version) {
+					signal.rv = read_version;
+
+					// If the signal is accessing the same dependencies in the same
+					// order as it did last time, increment `skipped_deps`
+					// rather than updating `new_deps`, which creates GC cost
+					if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
+						skipped_deps++;
+					} else if (new_deps === null) {
+						new_deps = [signal];
+					} else if (!skip_reaction || !new_deps.includes(signal)) {
+						// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
+						// an unowned derived because skip_reaction is true, then we need to ensure that
+						// we don't have duplicates
+						new_deps.push(signal);
+					}
+				}
+			} else {
+				// we're adding a dependency outside the init/update cycle
+				// (i.e. after an `await`)
+				(active_reaction.deps ??= []).push(signal);
+
+				var reactions = signal.reactions;
+
+				if (reactions === null) {
+					signal.reactions = [active_reaction];
+				} else if (!reactions.includes(active_reaction)) {
+					reactions.push(active_reaction);
 				}
 			}
 		}
@@ -799,42 +603,50 @@ export function get(signal) {
 		}
 	}
 
-	if (is_derived && !is_destroying_effect) {
-		derived = /** @type {Derived} */ (signal);
+	if (DEV) {
+		if (current_async_effect) {
+			var tracking = (current_async_effect.f & REACTION_IS_UPDATING) !== 0;
+			var was_read = current_async_effect.deps?.includes(signal);
 
-		if (is_dirty(derived)) {
-			update_derived(derived);
+			if (!tracking && !was_read) {
+				w.await_reactivity_loss(/** @type {string} */ (signal.label));
+
+				var trace = get_stack('TracedAt');
+				// eslint-disable-next-line no-console
+				if (trace) console.warn(trace);
+			}
 		}
-	}
 
-	if (
-		DEV &&
-		tracing_mode_flag &&
-		!untracking &&
-		tracing_expressions !== null &&
-		active_reaction !== null &&
-		tracing_expressions.reaction === active_reaction
-	) {
-		// Used when mapping state between special blocks like `each`
-		if (signal.trace) {
-			signal.trace();
-		} else {
-			var trace = get_stack('TracedAt');
+		recent_async_deriveds.delete(signal);
 
-			if (trace) {
-				var entry = tracing_expressions.entries.get(signal);
+		if (
+			tracing_mode_flag &&
+			!untracking &&
+			tracing_expressions !== null &&
+			active_reaction !== null &&
+			tracing_expressions.reaction === active_reaction
+		) {
+			// Used when mapping state between special blocks like `each`
+			if (signal.trace) {
+				signal.trace();
+			} else {
+				trace = get_stack('TracedAt');
 
-				if (entry === undefined) {
-					entry = { traces: [] };
-					tracing_expressions.entries.set(signal, entry);
-				}
+				if (trace) {
+					var entry = tracing_expressions.entries.get(signal);
+
+					if (entry === undefined) {
+						entry = { traces: [] };
+						tracing_expressions.entries.set(signal, entry);
+					}
 
-				var last = entry.traces[entry.traces.length - 1];
+					var last = entry.traces[entry.traces.length - 1];
 
-				// traces can be duplicated, e.g. by `snapshot` invoking both
-				// both `getOwnPropertyDescriptor` and `get` traps at once
-				if (trace.stack !== last?.stack) {
-					entry.traces.push(trace);
+					// traces can be duplicated, e.g. by `snapshot` invoking both
+					// both `getOwnPropertyDescriptor` and `get` traps at once
+					if (trace.stack !== last?.stack) {
+						entry.traces.push(trace);
+					}
 				}
 			}
 		}
@@ -859,6 +671,20 @@ export function get(signal) {
 
 			return value;
 		}
+	} else if (is_derived) {
+		derived = /** @type {Derived} */ (signal);
+
+		if (batch_deriveds?.has(derived)) {
+			return batch_deriveds.get(derived);
+		}
+
+		if (is_dirty(derived)) {
+			update_derived(derived);
+		}
+	}
+
+	if ((signal.f & ERROR_VALUE) !== 0) {
+		throw signal.v;
 	}
 
 	return signal.v;
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index a42f91343c..d24218c4d3 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -43,9 +43,7 @@ export type ComponentContext = {
 			m: Array<() => any>;
 		};
 		/** `$:` statements */
-		r1: any[];
-		/** This tracks whether `$:` statements have run in the current cycle, to ensure they only run once */
-		r2: Source<boolean>;
+		$: any[];
 	};
 	/**
 	 * dev mode only: the component function
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 74f9041b91..dfd50a8722 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -18,6 +18,31 @@ export function assignment_value_stale(property, location) {
 	}
 }
 
+/**
+ * Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+ * @param {string} name
+ */
+export function await_reactivity_loss(name) {
+	if (DEV) {
+		console.warn(`%c[svelte] await_reactivity_loss\n%cDetected reactivity loss when reading \`${name}\`. This happens when state is read in an async function after an earlier \`await\`\nhttps://svelte.dev/e/await_reactivity_loss`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/await_reactivity_loss`);
+	}
+}
+
+/**
+ * An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+ * @param {string} name
+ * @param {string} location
+ */
+export function await_waterfall(name, location) {
+	if (DEV) {
+		console.warn(`%c[svelte] await_waterfall\n%cAn async derived, \`${name}\` (${location}) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\nhttps://svelte.dev/e/await_waterfall`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/await_waterfall`);
+	}
+}
+
 /**
  * `%binding%` (%location%) is binding to a non-reactive property
  * @param {string} binding
diff --git a/packages/svelte/src/internal/flags/async.js b/packages/svelte/src/internal/flags/async.js
new file mode 100644
index 0000000000..ca4ff9286a
--- /dev/null
+++ b/packages/svelte/src/internal/flags/async.js
@@ -0,0 +1,3 @@
+import { enable_async_mode_flag } from './index.js';
+
+enable_async_mode_flag();
diff --git a/packages/svelte/src/internal/flags/index.js b/packages/svelte/src/internal/flags/index.js
index 017840f2d9..ce7bba604b 100644
--- a/packages/svelte/src/internal/flags/index.js
+++ b/packages/svelte/src/internal/flags/index.js
@@ -1,6 +1,16 @@
+export let async_mode_flag = false;
 export let legacy_mode_flag = false;
 export let tracing_mode_flag = false;
 
+export function enable_async_mode_flag() {
+	async_mode_flag = true;
+}
+
+/** ONLY USE THIS DURING TESTING */
+export function disable_async_mode_flag() {
+	async_mode_flag = false;
+}
+
 export function enable_legacy_mode_flag() {
 	legacy_mode_flag = true;
 }
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index ceb516ebb0..9942882d26 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -520,6 +520,8 @@ export {
 
 export { escape_html as escape };
 
+export { await_outside_boundary } from '../shared/errors.js';
+
 /**
  * @template T
  * @param {()=>T} fn
diff --git a/packages/svelte/src/internal/shared/errors.js b/packages/svelte/src/internal/shared/errors.js
index 6bcc35016a..66685cb00b 100644
--- a/packages/svelte/src/internal/shared/errors.js
+++ b/packages/svelte/src/internal/shared/errors.js
@@ -2,6 +2,22 @@
 
 import { DEV } from 'esm-env';
 
+/**
+ * Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+ * @returns {never}
+ */
+export function await_outside_boundary() {
+	if (DEV) {
+		const error = new Error(`await_outside_boundary\nCannot await outside a \`<svelte:boundary>\` with a \`pending\` snippet\nhttps://svelte.dev/e/await_outside_boundary`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/await_outside_boundary`);
+	}
+}
+
 /**
  * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
  * @returns {never}
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 61acbeaa28..d4a053d1aa 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -3,13 +3,15 @@ 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, flushSync, get, set_signal_status } from '../internal/client/runtime.js';
+import { active_effect, get, set_signal_status } 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';
 import * as w from '../internal/client/warnings.js';
 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';
 
 /**
  * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@@ -119,8 +121,9 @@ class Svelte4Component {
 			recover: options.recover
 		});
 
-		// We don't flushSync for custom element wrappers or if the user doesn't want it
-		if (!options?.props?.$$host || options.sync === false) {
+		// We don't flushSync for custom element wrappers or if the user doesn't want it,
+		// or if we're in async mode since `flushSync()` will fail
+		if (!async_mode_flag && (!options?.props?.$$host || options.sync === false)) {
 			flushSync();
 		}
 
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 67a92ceb7b..afcea9c5b4 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -3,6 +3,7 @@ import { effect_tracking, render_effect } from '../internal/client/reactivity/ef
 import { source, increment } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { DEV } from 'esm-env';
+import { queue_micro_task } from '../internal/client/dom/task.js';
 
 /**
  * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
@@ -68,8 +69,8 @@ export function createSubscriber(start) {
 				subscribers += 1;
 
 				return () => {
-					tick().then(() => {
-						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
+					queue_micro_task(() => {
+						// Only count down after a microtask, else we would reach 0 before our own render effect reruns,
 						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
 						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
 						subscribers -= 1;
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 2fc21220f0..cd79cfc274 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -445,6 +445,7 @@ const RUNES = /** @type {const} */ ([
 	'$effect.pre',
 	'$effect.tracking',
 	'$effect.root',
+	'$effect.pending',
 	'$inspect',
 	'$inspect().with',
 	'$inspect.trace',
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index 2d825dbb7c..410838829e 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -86,7 +86,8 @@ export async function compile_directory(
 				const compiled = compileModule(text, {
 					filename: opts.filename,
 					generate: opts.generate,
-					dev: opts.dev
+					dev: opts.dev,
+					experimental: opts.experimental
 				});
 				write(out, compiled.js.code.replace(`v${VERSION}`, 'VERSION'));
 			} else {
@@ -193,6 +194,8 @@ if (typeof window !== 'undefined') {
 
 export const fragments = /** @type {'html' | 'tree'} */ (process.env.FRAGMENTS) ?? 'html';
 
+export const async_mode = process.env.SVELTE_NO_ASYNC !== 'true';
+
 /**
  * @param {any[]} logs
  */
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
index e35b08f2a8..dccf5ca669 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
@@ -27,6 +27,8 @@ export default test({
 			array: ['a', 'b', 'c']
 		});
 
+		raf.tick(25);
+
 		raf.tick(50);
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 126992a0c0..8d7b3544bc 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -3,14 +3,15 @@ import { setImmediate } from 'node:timers/promises';
 import { globSync } from 'tinyglobby';
 import { createClassComponent } from 'svelte/legacy';
 import { proxy } from 'svelte/internal/client';
-import { flushSync, hydrate, mount, unmount, untrack } from 'svelte';
+import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
-import { compile_directory, fragments } from '../helpers.js';
+import { async_mode, compile_directory, fragments } from '../helpers.js';
 import { assert_html_equal, assert_html_equal_with_options } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
 import { suite_with_variants, type BaseTest } from '../suite.js';
+import { clear } from '../../src/internal/client/reactivity/batch.js';
 
 type Assert = typeof import('vitest').assert & {
 	htmlEqual(a: string, b: string, description?: string): void;
@@ -25,12 +26,30 @@ type Assert = typeof import('vitest').assert & {
 	): void;
 };
 
+// TODO remove this shim when we can
+// @ts-expect-error
+Promise.withResolvers = () => {
+	let resolve;
+	let reject;
+
+	const promise = new Promise((f, r) => {
+		resolve = f;
+		reject = r;
+	});
+
+	return { promise, resolve, reject };
+};
+
 export interface RuntimeTest<Props extends Record<string, any> = Record<string, any>>
 	extends BaseTest {
 	/** Use e.g. `mode: ['client']` to indicate that this test should never run in server/hydrate modes */
 	mode?: Array<'server' | 'client' | 'hydrate'>;
 	/** Temporarily skip specific modes, without skipping the entire test */
 	skip_mode?: Array<'server' | 'client' | 'hydrate'>;
+	/** Skip if running with process.env.NO_ASYNC */
+	skip_no_async?: boolean;
+	/** Skip if running without process.env.NO_ASYNC */
+	skip_async?: boolean;
 	html?: string;
 	ssrHtml?: string;
 	compileOptions?: Partial<CompileOptions>;
@@ -107,7 +126,15 @@ let console_error = console.error;
 export function runtime_suite(runes: boolean) {
 	return suite_with_variants<RuntimeTest, 'hydrate' | 'ssr' | 'dom', CompileOptions>(
 		['dom', 'hydrate', 'ssr'],
-		(variant, config) => {
+		(variant, config, test_name) => {
+			if (!async_mode && (config.skip_no_async || test_name.startsWith('async-'))) {
+				return true;
+			}
+
+			if (async_mode && config.skip_async) {
+				return true;
+			}
+
 			if (variant === 'hydrate') {
 				if (config.mode && !config.mode.includes('hydrate')) return 'no-test';
 				if (config.skip_mode?.includes('hydrate')) return true;
@@ -154,6 +181,9 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		rootDir: cwd,
 		dev: force_hmr ? true : undefined,
 		hmr: force_hmr ? true : undefined,
+		experimental: {
+			async: runes && async_mode
+		},
 		fragments,
 		...config.compileOptions,
 		immutable: config.immutable,
@@ -215,7 +245,7 @@ async function run_test_variant(
 		if (str.slice(0, i).includes('warnings') || config.warnings) {
 			// eslint-disable-next-line no-console
 			console.warn = (...args) => {
-				if (args[0].startsWith('%c[svelte]')) {
+				if (typeof args[0] === 'string' && args[0].startsWith('%c[svelte]')) {
 					// TODO convert this to structured data, for more robust comparison?
 
 					let message = args[0];
@@ -397,6 +427,12 @@ async function run_test_variant(
 			try {
 				if (config.test) {
 					flushSync();
+
+					if (variant === 'hydrate' && cwd.includes('async-')) {
+						// wait for pending boundaries to render
+						await Promise.resolve();
+					}
+
 					await config.test({
 						// @ts-expect-error TS doesn't get it
 						assert: {
@@ -486,6 +522,8 @@ async function run_test_variant(
 		console.log = console_log;
 		console.warn = console_warn;
 		console.error = console_error;
+
+		clear();
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js
new file mode 100644
index 0000000000..a947a91ab8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js
@@ -0,0 +1,23 @@
+import { settled, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [reset, resolve] = target.querySelectorAll('button');
+
+		reset.click();
+		await settled();
+		assert.deepEqual(logs, ['aborted']);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>resolve</button>
+				<h1>hello</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte
new file mode 100644
index 0000000000..d8d77bf0e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	let deferred = $state(Promise.withResolvers());
+
+	function load(deferred) {
+		const signal = getAbortSignal();
+
+		return new Promise((fulfil, reject) => {
+			signal.onabort = (e) => {
+				console.log('aborted');
+				reject(e.currentTarget.reason);
+			};
+
+			deferred.promise.then(fulfil, reject);
+		});
+	}
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>resolve</button>
+
+<svelte:boundary>
+	<h1>{await load(deferred)}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
new file mode 100644
index 0000000000..3de81a507b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
@@ -0,0 +1,18 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p data-foo="bar">hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte
new file mode 100644
index 0000000000..00a11cac43
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	<p data-foo={await 'bar'}>hello</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js
new file mode 100644
index 0000000000..0a64738409
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js
@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<button>cool</button>
+		<button>neat</button>
+		<button>reset</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [cool, neat, reset] = target.querySelectorAll('button');
+
+		cool.click();
+		await tick();
+
+		const p = target.querySelector('p');
+		ok(p);
+		assert.htmlEqual(p.outerHTML, '<p class="cool">hello</p>');
+
+		reset.click();
+		assert.htmlEqual(p.outerHTML, '<p class="cool">hello</p>');
+
+		neat.click();
+		await tick();
+		assert.htmlEqual(p.outerHTML, '<p class="neat">hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte
new file mode 100644
index 0000000000..6332a9802d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.resolve('cool')}>cool</button>
+<button onclick={() => deferred.resolve('neat')}>neat</button>
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+
+<svelte:boundary>
+	<p class={await deferred.promise}>hello</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js
new file mode 100644
index 0000000000..a29c99860d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>false</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte
new file mode 100644
index 0000000000..a93eb7dc25
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve(count)}>shift</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>true</p>
+		<p>{await push()}</p>
+	{:else}
+		<p>false</p>
+		<p>{await push()}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js
new file mode 100644
index 0000000000..e2718a35d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'loading');
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'nope');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte
new file mode 100644
index 0000000000..412da7268e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte
@@ -0,0 +1,8 @@
+<svelte:boundary>
+	{#if await Promise.reject(new Error('nope'))}
+		hi
+	{/if}
+
+	{#snippet pending()}loading{/snippet}
+	{#snippet failed(e)}{e.message}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
new file mode 100644
index 0000000000..c5dae7fee2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, resolve, reject] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		reject.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>resolve</button>
+				<button>reject</button>
+				<p>false</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte
new file mode 100644
index 0000000000..1ad6cb84de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve([count])}>resolve</button>
+<button onclick={() => deferreds.shift()?.reject(new Error('oops'))}>reject</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>true</p>
+		{#each await push() as count}<p>{count}</p>{/each}
+	{:else}
+		<p>false</p>
+		{#each await push() as count}<p>{count}</p>{/each}
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js
new file mode 100644
index 0000000000..18175de4dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js
@@ -0,0 +1,53 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [override, release, resolve] = target.querySelectorAll('button');
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>before</p>
+				<p>before</p>
+			`
+		);
+
+		override.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>during</p>
+				<p>during</p>
+			`
+		);
+
+		release.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>after</p>
+				<p>after</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte
new file mode 100644
index 0000000000..256ad68f4a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte
@@ -0,0 +1,45 @@
+<script lang=ts>
+	let deferred = Promise.withResolvers();
+	let value = $state();
+	let override = $state();
+	let current = $derived(override ?? value);
+	let promise = $state(update(['before']));
+
+	async function update (v) {
+		deferred = Promise.withResolvers();
+		await deferred.promise;
+		value = v;
+	};
+
+	function indirect() {
+		override;
+		return promise.then(() => current);
+	}
+</script>
+
+<button onclick={() => {
+	override = ['during'];
+}}>override</button>
+
+<button onclick={() => {
+	override = null;
+	promise = update(['after']);
+}}>release</button>
+
+<button onclick={() => {
+	deferred.resolve(null);
+}}>resolve</button>
+
+<svelte:boundary>
+	{#each await indirect() as entry}
+		<p>{entry}</p>
+	{/each}
+
+	{#each current as entry}
+		<p>{entry}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js
new file mode 100644
index 0000000000..325cb1dcd6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js
@@ -0,0 +1,55 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>shift</button>
+		<p>loading</p>
+	`,
+
+	async test({ assert, target }) {
+		target.querySelector('button')?.click();
+		await tick();
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>A</p>
+				<p>a</p>
+			`
+		);
+
+		flushSync(() => button2.click());
+		flushSync(() => button2.click());
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>AA</p>
+				<p>aa</p>
+			`
+		);
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>AAA</p>
+				<p>aaa</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte
new file mode 100644
index 0000000000..edb0eaea44
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let input = $state('a');
+
+	let queue = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		queue.push(() => deferred.resolve(value));
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => queue.shift()()}>shift</button>
+
+<svelte:boundary>
+	<button onclick={() => input += 'a'}>+</button>
+	<p>{await push(input.toUpperCase())}</p>
+
+	{#if true}
+		<p>{input}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js b/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js
new file mode 100644
index 0000000000..3186ed2069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `loading`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div class="one">one</div>
+				<div class="two">two</div>
+				<div style="color: red;">red</div>
+				<div style="color: blue;">blue</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte
new file mode 100644
index 0000000000..f0f27e4830
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte
@@ -0,0 +1,11 @@
+<svelte:boundary>
+	<div class:one={await true} {...{}}>one</div>
+	<div class:two={await true}>two</div>
+
+	<div style:color={await 'red'} {...{}}>red</div>
+	<div style:color={await 'blue'}>blue</div>
+
+	{#snippet pending()}
+		loading
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte
new file mode 100644
index 0000000000..fb47377513
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let n = $derived(await 1);
+</script>
+
+<p>{n}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js
new file mode 100644
index 0000000000..914b311c97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte
new file mode 100644
index 0000000000..a53381c2d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>show</button>
+
+<svelte:boundary>
+	{#if show}
+		<Child />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte
new file mode 100644
index 0000000000..ffcd8b46b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { promise } = $props();
+
+	let d = $derived({
+		value: await promise
+	});
+</script>
+
+<p>{(await d).value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js
new file mode 100644
index 0000000000..fee8e2e6bf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>switch to d2</button>
+		<button>resolve d1</button>
+		<button>resolve d2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, errors }) {
+		const [toggle, resolve1, resolve2] = target.querySelectorAll('button');
+
+		toggle.click();
+		resolve1.click();
+		resolve2.click();
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>switch to d2</button>
+				<button>resolve d1</button>
+				<button>resolve d2</button>
+				<p>two</p>
+			`
+		);
+
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte
new file mode 100644
index 0000000000..9babdb2fe2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+
+	let d1 = $state(Promise.withResolvers());
+	let d2 = $state(Promise.withResolvers());
+
+	let deferred = $state.raw(d1);
+</script>
+
+<button onclick={() => deferred = d2}>switch to d2</button>
+<button onclick={() => d1.resolve('one')}>resolve d1</button>
+<button onclick={() => d2.resolve('two')}>resolve d2</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte
new file mode 100644
index 0000000000..f803a30c37
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { create_derived } from './state.svelte.js';
+
+	let { promise, num } = $props();
+
+	let derived = await create_derived(
+		() => promise,
+		() => num
+	);
+
+	$effect(() => {
+		console.log(`$effect ${derived.value} ${num}`);
+	});
+
+	$effect.pre(() => {
+		console.log(`$effect.pre ${derived.value} ${num}`);
+	});
+</script>
+
+<p>{derived.value}{console.log(`template ${derived.value} ${num}`)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
new file mode 100644
index 0000000000..f7d1d28fde
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
@@ -0,0 +1,93 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>a</button>
+		<button>b</button>
+		<button>increment</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, logs }) {
+		const [reset, a, b, increment] = target.querySelectorAll('button');
+
+		a.click();
+
+		// TODO why is this necessary? why isn't `await tick()` enough?
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>42</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>84</p>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>84</p>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>86</p>
+			`
+		);
+
+		assert.deepEqual(logs, [
+			'outside boundary 1',
+			'$effect.pre 42 1',
+			'template 42 1',
+			'$effect 42 1',
+			'$effect.pre 84 2',
+			'template 84 2',
+			'outside boundary 2',
+			'$effect 84 2',
+			'$effect.pre 86 2',
+			'template 86 2',
+			'$effect 86 2'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte
new file mode 100644
index 0000000000..2c83e1d23d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './Child.svelte';
+
+	let num = $state(1);
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(42)}>a</button>
+<button onclick={() => deferred.resolve(43)}>b</button>
+<button onclick={() => num += 1}>increment</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} {num} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+{console.log(`outside boundary ${num}`)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js
new file mode 100644
index 0000000000..a53fbb8c6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js
@@ -0,0 +1,9 @@
+export async function create_derived(get_promise, get_num) {
+	let value = $derived((await get_promise()) * get_num());
+
+	return {
+		get value() {
+			return value;
+		}
+	};
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte
new file mode 100644
index 0000000000..a90a9dedf7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	let queue: Array<{ deferred: PromiseWithResolvers<number>; value: number }> = [];
+	let inited = false;
+
+	function push(value: number) {
+		const deferred = Promise.withResolvers<number>();
+		queue.push({ deferred, value });
+
+		if (!inited) {
+			inited = true;
+			shift();
+		}
+
+		return deferred.promise;
+	}
+
+	function shift() {
+		const next = queue.shift();
+		next?.deferred.resolve(next.value);
+	}
+
+	let n = $state(0);
+	let current = $derived(await push(n));
+</script>
+
+<button onclick={shift}>shift</button>
+<button onclick={() => n += 1}>increment</button>
+
+<p>{n}: {Math.min(current, 3)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js
new file mode 100644
index 0000000000..016c311f98
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js
@@ -0,0 +1,33 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>pending...</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<p>0: 0</p>
+			`
+		);
+
+		const [shift, increment] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		for (let i = 1; i < 5; i += 1) {
+			flushSync(() => increment.click());
+		}
+
+		for (let i = 1; i < 5; i += 1) {
+			shift.click();
+			await tick();
+
+			assert.equal(p.innerHTML, `${i}: ${Math.min(i, 3)}`);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte
new file mode 100644
index 0000000000..2d5ddca4db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<svelte:boundary>
+	<Component />
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte
new file mode 100644
index 0000000000..b59fd7c08f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { promise, num } = $props();
+
+	let value = $derived(num + (await promise));
+
+	$effect(() => {
+		console.log(`$effect ${value} ${num}`);
+	});
+
+	$effect.pre(() => {
+		console.log(`$effect.pre ${value} ${num}`);
+	});
+</script>
+
+<p>{value}{console.log(`template ${value} ${num}`)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js
new file mode 100644
index 0000000000..7239643464
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js
@@ -0,0 +1,48 @@
+import { flushSync, settled, tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<button>resolve a</button>
+		<button>resolve b</button>
+		<button>reset</button>
+		<button>increment</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, logs }) {
+		const [resolve_a, resolve_b, reset, increment] = target.querySelectorAll('button');
+
+		flushSync(() => resolve_a.click());
+		await tick();
+
+		const p = target.querySelector('p');
+		ok(p);
+		assert.htmlEqual(p.innerHTML, '1a');
+
+		flushSync(() => increment.click());
+		await tick();
+		assert.htmlEqual(p.innerHTML, '2a');
+
+		reset.click();
+		assert.htmlEqual(p.innerHTML, '2a');
+
+		resolve_b.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, '2b');
+
+		assert.deepEqual(logs, [
+			'outside boundary 1',
+			'$effect.pre 1a 1',
+			'template 1a 1',
+			'$effect 1a 1',
+			'$effect.pre 2a 2',
+			'template 2a 2',
+			'outside boundary 2',
+			'$effect 2a 2',
+			'$effect.pre 2b 2',
+			'template 2b 2',
+			'$effect 2b 2'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte
new file mode 100644
index 0000000000..1404ae0299
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+	let num = $state(1);
+</script>
+
+<button onclick={() => deferred.resolve('a')}>resolve a</button>
+<button onclick={() => deferred.resolve('b')}>resolve b</button>
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => num += 1}>increment</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} {num} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+{console.log(`outside boundary ${num}`)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js
new file mode 100644
index 0000000000..54aa68eeb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [button1, button2, button3] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
+
+		button2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
+
+		button3.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>b</p><p>c</p><p>d</p><p>e</p>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte
new file mode 100644
index 0000000000..eddcf2b749
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte
@@ -0,0 +1,39 @@
+<script>
+	let items = $state([
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]);
+</script>
+
+<button onclick={() => {
+	items[0].resolve('a');
+	items[1].resolve('b');
+	items[2].resolve('c');
+}}>step 1</button>
+
+<button onclick={() => {
+	items = [
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]
+}}>step 2</button>
+
+<button onclick={() => {
+	items[0].resolve('b');
+	items[1].resolve('c');
+	items[2].resolve('d');
+	items[3].resolve('e');
+}}>step 3</button>
+
+<svelte:boundary>
+	{#each items as deferred}
+		<p>{await deferred.promise}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js
new file mode 100644
index 0000000000..43d3a0f876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js
@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<button>reset</button>
+		<button>one</button>
+		<button>two</button>
+		<button>three</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, one, two, three] = target.querySelectorAll('button');
+
+		one.click();
+		await tick();
+
+		const [div] = target.querySelectorAll('div');
+		assert.htmlEqual(div.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+
+		two.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '<p>d</p><p>e</p><p>f</p><p>g</p>');
+
+		reset.click();
+		await tick();
+		three.click();
+		await tick();
+
+		assert.include(target.innerHTML, '<p>each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte
new file mode 100644
index 0000000000..e2f8263780
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(['a', 'b', 'c'])}>one</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'g'])}>two</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'd'])}>three</button>
+
+<svelte:boundary>
+	<div>
+		{#each await deferred.promise as item (item)}
+			<p>{item}</p>
+		{/each}
+	</div>
+
+	{#snippet failed(e)}
+		<p>{e.message}</p>
+	{/snippet}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each/_config.js
new file mode 100644
index 0000000000..50aa055130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each/_config.js
@@ -0,0 +1,48 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>abc</button>
+		<button>defg</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, abc, defg] = target.querySelectorAll('button');
+
+		abc.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>a</p><p>b</p><p>c</p>`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>a</p><p>b</p><p>c</p>`
+		);
+
+		defg.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>d</p><p>e</p><p>f</p><p>g</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte
new file mode 100644
index 0000000000..8e4412811a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(['a', 'b', 'c'])}>abc</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'g'])}>defg</button>
+
+<svelte:boundary>
+	{#each await deferred.promise as item}
+		<p>{item}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js
new file mode 100644
index 0000000000..2679785cff
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `loading`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'oops');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte
new file mode 100644
index 0000000000..a49a5c9540
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte
@@ -0,0 +1,8 @@
+<svelte:boundary>
+	{#each (await Promise.reject(new Error('oops'))) as x}
+		hi
+	{/each}
+
+	{#snippet pending()}loading{/snippet}
+	{#snippet failed()}oops{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js
new file mode 100644
index 0000000000..1613bf9c61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js
@@ -0,0 +1,87 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>clicks: 0</button>
+		<p>pending...</p>
+	`,
+
+	compileOptions: {
+		// this tests some behaviour that was broken in dev
+		dev: true
+	},
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		let [button] = target.querySelectorAll('button');
+		let [p] = target.querySelectorAll('p');
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 1</button>
+				<p>1</p>
+			`
+		);
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 2</button>
+				<p>2</p>
+			`
+		);
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 3</button>
+				<button>retry</button>
+			`
+		);
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		button2.click();
+		await tick();
+
+		[p] = target.querySelectorAll('p');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 4</button>
+				<p>4</p>
+			`
+		);
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 5</button>
+				<p>5</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte
new file mode 100644
index 0000000000..d5246d330e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte
@@ -0,0 +1,24 @@
+<script lang=ts>
+	let count = $state(0);
+
+	function process(count) {
+		if (count === 3) throw new Error('kaboom');
+		return count;
+	}
+</script>
+
+<button onclick={() => count++}>
+	clicks: {count}
+</button>
+
+<svelte:boundary>
+	<p>{await process(count)}</p>
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
new file mode 100644
index 0000000000..dfbd238eeb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		let [button1, button2, button3] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>oops!</p><button data-id="reset">reset</button>'
+		);
+
+		button2.click();
+
+		const reset = /** @type {HTMLButtonElement} */ (target.querySelector('[data-id="reset"]'));
+		reset.click();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>'
+		);
+
+		button3.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><h1>wheee</h1>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
new file mode 100644
index 0000000000..9af5bbaa16
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.reject(new Error('oops!'))}>step 1</button>
+<button onclick={() => deferred = Promise.withResolvers()}>step 2</button>
+<button onclick={() => deferred.resolve('wheee')}>step 3</button>
+
+<svelte:boundary>
+	<h1>{await deferred.promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<p>{error.message}</p>
+		<button data-id="reset" onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js
new file mode 100644
index 0000000000..3a66ea709f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js
@@ -0,0 +1,56 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>goodbye</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, raf }) {
+		const [reset, hello, goodbye] = target.querySelectorAll('button');
+
+		hello.click();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+				<p>updating...</p>
+			`
+		);
+
+		goodbye.click();
+		await Promise.resolve();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>goodbye</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte
new file mode 100644
index 0000000000..42536ab02a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('goodbye')}>goodbye</button>
+
+<svelte:boundary>
+	<h1>{await deferred.promise}</h1>
+
+	{#if $effect.pending()}
+		<p>updating...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js
new file mode 100644
index 0000000000..f5b1f3d2c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>goodbye</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, goodbye] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		goodbye.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>goodbye</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte
new file mode 100644
index 0000000000..980bb16d5c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('goodbye')}>goodbye</button>
+
+<svelte:boundary>
+	<h1>{@html await deferred.promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if/_config.js
new file mode 100644
index 0000000000..3cd67952c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>reset</button><button>true</button><button>false</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [reset, t, f] = target.querySelectorAll('button');
+
+		t.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		f.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>no</h1>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
new file mode 100644
index 0000000000..21a4cbef97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(true)}>true</button>
+<button onclick={() => deferred.resolve(false)}>false</button>
+
+<svelte:boundary>
+	{#if await deferred.promise}
+		<h1>yes</h1>
+	{:else}
+		<h1>no</h1>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/_config.js b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
new file mode 100644
index 0000000000..e7e5db3dd8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
@@ -0,0 +1,46 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>1</button>
+		<button>2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, one, two] = target.querySelectorAll('button');
+
+		const html = `
+			<button>reset</button>
+			<button>1</button>
+			<button>2</button>
+			<h1>hello</h1>
+		`;
+
+		one.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		const h1 = target.querySelector('h1');
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		one.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+		assert.equal(target.querySelector('h1'), h1);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		two.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+		assert.notEqual(target.querySelector('h1'), h1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
new file mode 100644
index 0000000000..5fbdbd47d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(1)}>1</button>
+<button onclick={() => deferred.resolve(2)}>2</button>
+
+<svelte:boundary>
+	{#key await deferred.promise}
+		<h1>hello</h1>
+	{/key}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js
new file mode 100644
index 0000000000..cb8e0cfca9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js
@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>both</button><button>a</button><button>b</button><p>loading...</p>`,
+
+	async test({ assert, target }) {
+		const [both, a, b] = target.querySelectorAll('button');
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>both</button><button>a</button><button>b</button>
+				<p>1 * 2 = 2</p>
+				<p>2 * 2 = 4</p>
+			`
+		);
+
+		both.click();
+		b.click();
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>both</button><button>a</button><button>b</button>
+				<p>2 * 2 = 4</p>
+				<p>4 * 2 = 8</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte
new file mode 100644
index 0000000000..432eed976c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let a = $state(1);
+	let b = $state(2);
+</script>
+
+<button onclick={() => {a += 1; b += 1;}}>both</button>
+<button onclick={() => {a += 1;}}>a</button>
+<button onclick={() => {b += 1;}}>b</button>
+
+<svelte:boundary>
+	<p>{a} * 2 = {await (a * 2)}</p>
+	<p>{b} * 2 = {b * 2}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
new file mode 100644
index 0000000000..5e522ebdb5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
@@ -0,0 +1,30 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, reset1, reset2, resolve1, resolve2] = target.querySelectorAll('button');
+
+		resolve1.click();
+		await tick();
+
+		const p = /** @type {HTMLElement} */ (target.querySelector('#test'));
+
+		assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
+
+		flushSync(() => reset1.click());
+		flushSync(() => a.click());
+		flushSync(() => reset2.click());
+		flushSync(() => b.click());
+
+		resolve2.click();
+		await tick();
+
+		assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
+
+		resolve1.click();
+		await tick();
+
+		assert.htmlEqual(p.innerHTML, '2 + 3 = 5');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
new file mode 100644
index 0000000000..cc82db0d75
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let delay = 1000;
+	let a = $state(1);
+	let b = $state(2);
+
+	let d1 = Promise.withResolvers();
+	let d2 = Promise.withResolvers();
+	let deferred = d1;
+
+	async function add(a, b) {
+		await deferred.promise;
+		return a + b;
+	}
+</script>
+
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<button onclick={() => deferred = d1 = Promise.withResolvers()}>reset 1</button>
+<button onclick={() => deferred = d2 = Promise.withResolvers()}>reset 2</button>
+
+<button onclick={() => d1.resolve()}>resolve 1</button>
+<button onclick={() => d2.resolve()}>resolve 2</button>
+
+<svelte:boundary>
+	<p id="test">{a} + {b} = {await add(a, b)}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte
new file mode 100644
index 0000000000..546494f4c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { count } = $props();
+
+	async function x() {
+		let d = $derived(await new Promise((f) => {}));
+	}
+
+	let indirect = $derived(x() && count);
+</script>
+
+<p>{indirect}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js
new file mode 100644
index 0000000000..172b44e6e3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js
@@ -0,0 +1,14 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>0</button><p>0</p>');
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<button>1</button><p>1</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte
new file mode 100644
index 0000000000..f6b0afe98c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>{count}</button>
+
+<svelte:boundary>
+	<Child {count} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte
new file mode 100644
index 0000000000..85d212b1a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value } = $props();
+</script>
+
+<h1>{value}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js b/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js
new file mode 100644
index 0000000000..66690c120c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>again</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, again] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
+
+		again.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello again</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte
new file mode 100644
index 0000000000..38388607ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('hello again')}>again</button>
+
+<svelte:boundary>
+	<Child value={await deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
new file mode 100644
index 0000000000..f8a7cfd479
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `<button>a</button><button>b</button><p>pending</p>`,
+
+	async test({ assert, target, warnings }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>a</button><button>b</button><h1>3</h1><p>3</p>');
+
+		assert.equal(
+			warnings[0],
+			'Detected reactivity loss when reading `b`. This happens when state is read in an async function after an earlier `await`'
+		);
+
+		assert.equal(warnings[1].name, 'TracedAtError');
+
+		assert.equal(warnings.length, 2);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
new file mode 100644
index 0000000000..bdb1b095c9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function a_plus_b() {
+		return await a + await b;
+	}
+</script>
+
+<button onclick={() => a++}>a</button>
+<button onclick={() => b++}>b</button>
+
+<svelte:boundary>
+	<h1>{await a_plus_b()}</h1>
+	<p>{await a + await b}</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js
new file mode 100644
index 0000000000..17bb79af08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, c, ok] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>pending...</p>
+			`
+		);
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>c</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>c</p>
+			`
+		);
+
+		ok.click();
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>b</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte
new file mode 100644
index 0000000000..b1bb291e2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte
@@ -0,0 +1,43 @@
+<script lang=ts>
+	let route = $state('b');
+	let ok = $state(false);
+
+	function goto(r) {
+		return Promise.resolve().then(() => {
+			route = r;
+			throw new Error('nope');
+		});
+	}
+</script>
+
+<h1>{route}</h1>
+<button onclick={() => route = 'a'}>a</button>
+<button onclick={() => route = 'b'}>b</button>
+<button onclick={() => route = 'c'}>c</button>
+<button onclick={() => ok = true}>ok</button>
+
+<svelte:boundary>
+	{#if route === 'a'}
+		<p>a</p>
+	{/if}
+
+	{#if route === 'b'}
+		{#if ok}
+			<p>b</p>
+		{:else}
+			{await goto('c')}
+		{/if}
+	{/if}
+
+	{#if route === 'c'}
+		<p>c</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
new file mode 100644
index 0000000000..ebbe642860
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
@@ -0,0 +1,52 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>a</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>a</p>
+			`
+		);
+
+		const [a, b, c, ok] = target.querySelectorAll('button');
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>c</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>c</p>
+			`
+		);
+
+		ok.click();
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>b</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
new file mode 100644
index 0000000000..bf5fdf9ed3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
@@ -0,0 +1,43 @@
+<script lang=ts>
+	let route = $state('a');
+	let ok = $state(false);
+
+	function goto(r) {
+		return Promise.resolve().then(() => {
+			route = r;
+			throw new Error('nope');
+		});
+	}
+</script>
+
+<h1>{route}</h1>
+<button onclick={() => route = 'a'}>a</button>
+<button onclick={() => route = 'b'}>b</button>
+<button onclick={() => route = 'c'}>c</button>
+<button onclick={() => ok = true}>ok</button>
+
+<svelte:boundary>
+	{#if route === 'a'}
+		<p>a</p>
+	{/if}
+
+	{#if route === 'b'}
+		{#if ok}
+			<p>b</p>
+		{:else}
+			{await goto('c')}
+		{/if}
+	{/if}
+
+	{#if route === 'c'}
+		<p>c</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js
new file mode 100644
index 0000000000..6f3473f592
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>wheee</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, wheee] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
+
+		wheee.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>wheee</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte
new file mode 100644
index 0000000000..b59bc319d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('wheee')}>wheee</button>
+
+{#snippet hello(message)}
+	<h1>{message}</h1>
+{/snippet}
+
+<svelte:boundary>
+	{@render hello(await deferred.promise)}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte
new file mode 100644
index 0000000000..c32f869f63
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte
@@ -0,0 +1 @@
+<slot message={await 'hello'}></slot>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js b/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js
new file mode 100644
index 0000000000..3d54d24259
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<p>loading...</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte
new file mode 100644
index 0000000000..badd60746d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child let:message>
+		<p>{message}</p>
+	</Child>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js
new file mode 100644
index 0000000000..8276c5be41
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js
@@ -0,0 +1,58 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO this one is tricky
+
+	async test({ assert, target }) {
+		const [increment, a, b] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>a: 0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		a.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>a: 0</p>
+			`
+		);
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>b: 0</p
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte
new file mode 100644
index 0000000000..c9d4f2b096
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let a = [];
+	let b = [];
+
+	function push(deferreds, value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ deferred, value });
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => {
+	const d = a.shift();
+	d?.deferred.resolve(d.value);
+}}>shift a</button>
+<button onclick={() => {
+	const d = b.shift();
+	d?.deferred.resolve(d.value);
+}}>shift b</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>a: {await push(a, count)}</p>
+	{:else}
+		<p>b: {await push(b, count)}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js
new file mode 100644
index 0000000000..884b27d865
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js
@@ -0,0 +1,52 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>2</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>delayed: 3</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte
new file mode 100644
index 0000000000..eeefffbee6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve(count)}>shift</button>
+
+<svelte:boundary>
+	{#if count % 2}
+		<p>delayed: {await push()}</p>
+	{:else}
+		<p>{await count}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js
new file mode 100644
index 0000000000..dc25be10c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>h1</button>
+		<button>h2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, h1, h2] = target.querySelectorAll('button');
+
+		h1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
+
+		h2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h2>hello</h2>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte
new file mode 100644
index 0000000000..f8165784dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('h1')}>h1</button>
+<button onclick={() => deferred.resolve('h2')}>h2</button>
+
+<svelte:boundary>
+	<svelte:element this={await deferred.promise}>hello</svelte:element>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
new file mode 100644
index 0000000000..73c9b50a69
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
@@ -0,0 +1,40 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, hello] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		hello.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+			<p>condition is true</p>
+			<p>hello</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
new file mode 100644
index 0000000000..d111ce6fe3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+
+	let condition = $state(false);
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => condition = !condition}>toggle</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	{#if condition}
+		<p>condition is {condition}</p>
+		<Child promise={deferred.promise} />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
new file mode 100644
index 0000000000..b2200201c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>hello</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [hello] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>hello</button><p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
new file mode 100644
index 0000000000..78ad3ba04a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
new file mode 100644
index 0000000000..e9ccbba2b6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte
new file mode 100644
index 0000000000..e0619a1fe4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>
+	increment
+</button>
+
+<svelte:boundary>
+	{#if count % 2}
+		<p>{await new Promise(() => {})}</p>
+	{:else}
+		<p>{await count}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js
new file mode 100644
index 0000000000..e2c8b851c1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js
@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>resolve 1</button>
+		<button>resolve 2</button>
+		<hr>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve 1</button>
+				<button>resolve 2</button>
+				<hr>
+				<p>pending</p>
+			`
+		);
+
+		button2.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve 1</button>
+				<button>resolve 2</button>
+				<hr>
+				<button>0</button>
+				<p>true</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte
new file mode 100644
index 0000000000..86af9bb07e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let d1 = Promise.withResolvers();
+	let d2 = Promise.withResolvers();
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => d1.resolve(true)}>resolve 1</button>
+<button onclick={() => d2.resolve(true)}>resolve 2</button>
+
+<hr>
+
+<svelte:boundary>
+	{#if await d1.promise}
+		<button onclick={() => count += 1}>{count}</button>
+		<p>{await d2.promise}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js
new file mode 100644
index 0000000000..837dd976e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js
@@ -0,0 +1,53 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>loading...</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 1</button>
+				<button>other 1</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		const [log, x, other] = target.querySelectorAll('button');
+
+		flushSync(() => x.click());
+		flushSync(() => other.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 1</button>
+				<button>other 2</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 2</button>
+				<button>other 2</button>
+				<p>2</p>
+				<p>2</p>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte
new file mode 100644
index 0000000000..764007e082
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let x = $state(1);
+	let y = $derived(x);
+	let other = $state(1);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => console.log({ x, y })}>log</button>
+	<button onclick={() => x += 1}>x {x}</button>
+	<button onclick={() => other += 1}>other {other}</button>
+
+	<p>{x}</p>
+	<p>{await x}</p>
+	<p>{y}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
index e55733c148..416f61d23a 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
@@ -1,3 +1,4 @@
+import { async_mode } from '../../../helpers';
 import { test } from '../../test';
 import { flushSync } from 'svelte';
 
@@ -10,6 +11,12 @@ export default test({
 		flushSync(() => {
 			b1.click();
 		});
-		assert.deepEqual(logs, ['init 0']);
+
+		// With async mode (which is on by default for runtime-runes) this works as expected, without it
+		// it works differently: https://github.com/sveltejs/svelte/pull/15564
+		assert.deepEqual(
+			logs,
+			async_mode ? ['init 0', 'cleanup 0', null, 'init 2', 'cleanup 2', null, 'init 4'] : ['init 0']
+		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
index 2cdcfdfb58..da38374f82 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
@@ -14,4 +14,4 @@
 	})
 </script>
 
-<button on:click={() => count++ }>Click</button>
+<button onclick={() => count++ }>Click</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
index e092d0e7c7..f34668ec45 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
@@ -2,6 +2,8 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	skip: true, // TODO unskip once tagged values are in and we can fix this properly
+
 	test({ assert, target }) {
 		let btn = target.querySelector('button');
 
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte
new file mode 100644
index 0000000000..122a316726
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { setContext } from 'svelte';
+
+	await Promise.resolve();
+
+	try {
+		setContext('potato', {});
+	} catch (e) {
+		console.log(e.message);
+	}
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js
new file mode 100644
index 0000000000..1bf7e71176
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, logs }) {
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+
+		assert.ok(logs[0].startsWith('set_context_after_init'));
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte
new file mode 100644
index 0000000000..65d0e623cf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		...
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js
new file mode 100644
index 0000000000..4569f42a73
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { async_mode } from '../../../helpers';
+
+export default test({
+	async test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.ok(
+			async_mode
+				? logs[0].startsWith('set_context_after_init')
+				: logs[0] === 'works without experimental async but really shouldnt'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte
new file mode 100644
index 0000000000..0c3b6c3a0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { setContext } from 'svelte';
+
+	let condition = $state(false);
+
+	$effect(() => {
+		if (condition) {
+			try {
+				setContext('potato', {});
+				console.log('works without experimental async but really shouldnt')
+			} catch (e) {
+				console.log(e.message);
+			}
+		}
+	});
+</script>
+
+<button onclick={() => condition = !condition}>
+	{condition}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
index 339cec55c5..25414d4b47 100644
--- a/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
@@ -3,6 +3,8 @@ import { test, ok } from '../../test';
 
 // Tests that tick only resolves after all pending effects have been cleared
 export default test({
+	skip: true, // weirdly, this works if you run it by itself
+
 	async test({ assert, target }) {
 		const btn = target.querySelector('button');
 		ok(btn);
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
index 18062b86fb..b728c3c0be 100644
--- a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
@@ -2,6 +2,8 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	// In async mode we _do_ want to run effects that react to their own state changing
+	skip_async: true,
 	test({ assert, target, logs }) {
 		const button = target.querySelector('button');
 
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 719c936df0..937324727b 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -6,16 +6,18 @@ import {
 	effect,
 	effect_root,
 	render_effect,
-	user_effect
+	user_effect,
+	user_pre_effect
 } from '../../src/internal/client/reactivity/effects';
 import { state, set, update, update_pre } from '../../src/internal/client/reactivity/sources';
-import type { Derived, Effect, Value } from '../../src/internal/client/types';
+import type { Derived, Effect, Source, Value } from '../../src/internal/client/types';
 import { proxy } from '../../src/internal/client/proxy';
 import { derived } from '../../src/internal/client/reactivity/deriveds';
 import { snapshot } from '../../src/internal/shared/clone.js';
 import { SvelteSet } from '../../src/reactivity/set';
 import { DESTROYED } from '../../src/internal/client/constants';
 import { noop } from 'svelte/internal/client';
+import { disable_async_mode_flag, enable_async_mode_flag } from '../../src/internal/flags';
 
 /**
  * @param runes runes mode
@@ -557,7 +559,7 @@ describe('signals', () => {
 		};
 	});
 
-	test('schedules rerun when writing to signal before reading it', (runes) => {
+	test.skip('schedules rerun when writing to signal before reading it', (runes) => {
 		if (!runes) return () => {};
 
 		const error = console.error;
@@ -1049,31 +1051,85 @@ describe('signals', () => {
 		};
 	});
 
-	test('effects do not depend on state they own', () => {
+	test('effects do depend on state they own', (runes) => {
+		// This behavior is important for use cases like a Resource class
+		// which shares its instance between multiple effects and triggers
+		// rerenders by self-invalidating its state.
+		const log: number[] = [];
+
+		let count: any;
+
+		if (runes) {
+			// We will make this the new default behavior once it's stable but until then
+			// we need to keep the old behavior to not break existing code.
+			enable_async_mode_flag();
+		}
+
+		effect(() => {
+			if (!count || $.get<number>(count) < 2) {
+				count ||= state(0);
+				log.push($.get(count));
+				set(count, $.get<number>(count) + 1);
+			}
+		});
+
+		return () => {
+			try {
+				flushSync();
+				if (runes) {
+					assert.deepEqual(log, [0, 1]);
+				} else {
+					assert.deepEqual(log, [0]);
+				}
+			} finally {
+				disable_async_mode_flag();
+			}
+		};
+	});
+
+	test('nested effects depend on state of upper effects', () => {
+		const logs: number[] = [];
+		let raw: Source<number>;
+		let proxied: { current: number };
+
 		user_effect(() => {
-			const value = state(0);
-			set(value, $.get(value) + 1);
+			raw = state(0);
+			proxied = proxy({ current: 0 });
+
+			// We need those separate, else one working and rerunning the effect
+			// could mask the other one not rerunning
+			user_effect(() => {
+				logs.push($.get(raw));
+			});
+
+			user_effect(() => {
+				logs.push(proxied.current);
+			});
 		});
 
 		return () => {
 			flushSync();
+			set(raw, $.get(raw) + 1);
+			proxied.current += 1;
+			flushSync();
+			assert.deepEqual(logs, [0, 0, 1, 1]);
 		};
 	});
 
 	test('nested effects depend on state of upper effects', () => {
 		const logs: number[] = [];
 
-		user_effect(() => {
+		user_pre_effect(() => {
 			const raw = state(0);
 			const proxied = proxy({ current: 0 });
 
 			// We need those separate, else one working and rerunning the effect
 			// could mask the other one not rerunning
-			user_effect(() => {
+			user_pre_effect(() => {
 				logs.push($.get(raw));
 			});
 
-			user_effect(() => {
+			user_pre_effect(() => {
 				logs.push(proxied.current);
 			});
 
@@ -1081,7 +1137,7 @@ describe('signals', () => {
 			// together with the reading effects
 			flushSync();
 
-			user_effect(() => {
+			user_pre_effect(() => {
 				$.untrack(() => {
 					set(raw, $.get(raw) + 1);
 					proxied.current += 1;
diff --git a/packages/svelte/tests/store/test.ts b/packages/svelte/tests/store/test.ts
index 77cecca7e5..ecb22c1be6 100644
--- a/packages/svelte/tests/store/test.ts
+++ b/packages/svelte/tests/store/test.ts
@@ -11,6 +11,7 @@ import {
 } from 'svelte/store';
 import { source, set } from '../../src/internal/client/reactivity/sources';
 import * as $ from '../../src/internal/client/runtime';
+import { flushSync } from '../../src/internal/client/reactivity/batch';
 import { effect_root, render_effect } from 'svelte/internal/client';
 
 describe('writable', () => {
@@ -602,7 +603,7 @@ describe('toStore', () => {
 		assert.deepEqual(log, [0]);
 
 		set(count, 1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		unsubscribe();
@@ -625,7 +626,7 @@ describe('toStore', () => {
 		assert.deepEqual(log, [0]);
 
 		set(count, 1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		store.set(2);
@@ -654,11 +655,11 @@ describe('fromStore', () => {
 		assert.deepEqual(log, [0]);
 
 		store.set(1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		count.current = 2;
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1, 2]);
 
 		assert.equal(get(store), 2);
diff --git a/packages/svelte/tests/suite.ts b/packages/svelte/tests/suite.ts
index 0ae06e727f..6954b8b683 100644
--- a/packages/svelte/tests/suite.ts
+++ b/packages/svelte/tests/suite.ts
@@ -35,7 +35,7 @@ export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string
 
 export function suite_with_variants<Test extends BaseTest, Variants extends string, Common>(
 	variants: Variants[],
-	should_skip_variant: (variant: Variants, config: Test) => boolean | 'no-test',
+	should_skip_variant: (variant: Variants, config: Test, test_name: string) => boolean | 'no-test',
 	common_setup: (config: Test, test_dir: string) => Promise<Common> | Common,
 	fn: (config: Test, test_dir: string, variant: Variants, common: Common) => void
 ) {
@@ -46,11 +46,11 @@ export function suite_with_variants<Test extends BaseTest, Variants extends stri
 				let called_common = false;
 				let common: any = undefined;
 				for (const variant of variants) {
-					if (should_skip_variant(variant, config) === 'no-test') {
+					if (should_skip_variant(variant, config, dir) === 'no-test') {
 						continue;
 					}
 					// TODO unify test interfaces
-					const skip = config.skip || should_skip_variant(variant, config);
+					const skip = config.skip || should_skip_variant(variant, config, dir);
 					const solo = config.solo;
 					let it_fn = skip ? it.skip : solo ? it.only : it;
 
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 432171ae0d..72eb871db6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -434,6 +434,11 @@ declare module 'svelte' {
 	 * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
 	 * */
 	export function afterUpdate(fn: () => void): void;
+	/**
+	 * Synchronously flush any pending updates.
+	 * Returns void if no callback is provided, otherwise returns the result of calling the callback.
+	 * */
+	export function flushSync<T = void>(fn?: (() => T) | undefined): T;
 	/**
 	 * Create a snippet programmatically
 	 * */
@@ -443,29 +448,6 @@ declare module 'svelte' {
 	}): Snippet<Params>;
 	/** Anything except a function */
 	type NotFunction<T> = T extends Function ? never : T;
-	/**
-	 * Synchronously flush any pending updates.
-	 * Returns void if no callback is provided, otherwise returns the result of calling the callback.
-	 * */
-	export function flushSync<T = void>(fn?: (() => T) | undefined): T;
-	/**
-	 * Returns a promise that resolves once any pending state changes have been applied.
-	 * */
-	export function tick(): Promise<void>;
-	/**
-	 * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
-	 * any state read inside `fn` will not be treated as a dependency.
-	 *
-	 * ```ts
-	 * $effect(() => {
-	 *   // this will run when `data` changes, but not when `time` changes
-	 *   save(data, {
-	 *     timestamp: untrack(() => time)
-	 *   });
-	 * });
-	 * ```
-	 * */
-	export function untrack<T>(fn: () => T): T;
 	/**
 	 * Retrieves the context that belongs to the closest parent component with the specified `key`.
 	 * Must be called during component initialisation.
@@ -539,6 +521,29 @@ declare module 'svelte' {
 	export function unmount(component: Record<string, any>, options?: {
 		outro?: boolean;
 	} | undefined): Promise<void>;
+	/**
+	 * Returns a promise that resolves once any pending state changes have been applied.
+	 * */
+	export function tick(): Promise<void>;
+	/**
+	 * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
+	 * have resolved and the DOM has been updated
+	 * */
+	export function settled(): Promise<void>;
+	/**
+	 * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
+	 * any state read inside `fn` will not be treated as a dependency.
+	 *
+	 * ```ts
+	 * $effect(() => {
+	 *   // this will run when `data` changes, but not when `time` changes
+	 *   save(data, {
+	 *     timestamp: untrack(() => time)
+	 *   });
+	 * });
+	 * ```
+	 * */
+	export function untrack<T>(fn: () => T): T;
 	type Getters<T> = {
 		[K in keyof T]: () => T[K];
 	};
@@ -1111,6 +1116,11 @@ declare module 'svelte/compiler' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning) => boolean;
+		/** Experimental options */
+		experimental?: {
+			/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+			async?: boolean;
+		};
 	}
 	/**
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
@@ -3021,6 +3031,11 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning_1) => boolean;
+		/** Experimental options */
+		experimental?: {
+			/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+			async?: boolean;
+		};
 	}
 	/**
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
diff --git a/playgrounds/sandbox/index.html b/playgrounds/sandbox/index.html
index 845538abf0..d70409ffb6 100644
--- a/playgrounds/sandbox/index.html
+++ b/playgrounds/sandbox/index.html
@@ -14,6 +14,12 @@
 			import { mount, hydrate, unmount } from 'svelte';
 			import App from '/src/App.svelte';
 
+			globalThis.delayed = (v, ms = 1000) => {
+				return new Promise((f) => {
+					setTimeout(() => f(v), ms);
+				});
+			};
+
 			const root = document.getElementById('root');
 			const render = root.firstChild?.nextSibling ? hydrate : mount;
 
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 2029937f52..639b755020 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -76,7 +76,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 			dev: false,
 			filename: input,
 			generate,
-			runes: argv.values.runes
+			runes: argv.values.runes,
+			experimental: {
+				async: true
+			}
 		});
 
 		for (const warning of compiled.warnings) {
@@ -94,7 +97,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 				filename: input,
 				generate,
 				runes: argv.values.runes,
-				fragments: 'tree'
+				fragments: 'tree',
+				experimental: {
+					async: true
+				}
 			});
 
 			const output_js = `${cwd}/output/${generate}/${file}.tree.js`;
@@ -116,7 +122,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		const compiled = compileModule(source, {
 			dev: false,
 			filename: input,
-			generate
+			generate,
+			experimental: {
+				async: true
+			}
 		});
 
 		const output_js = `${cwd}/output/${generate}/${file}`;
diff --git a/playgrounds/sandbox/ssr-common.js b/playgrounds/sandbox/ssr-common.js
new file mode 100644
index 0000000000..db3e085508
--- /dev/null
+++ b/playgrounds/sandbox/ssr-common.js
@@ -0,0 +1,17 @@
+Promise.withResolvers ??= () => {
+	let resolve;
+	let reject;
+
+	const promise = new Promise((f, r) => {
+		resolve = f;
+		reject = r;
+	});
+
+	return { promise, resolve, reject };
+};
+
+globalThis.delayed = (v, ms = 1000) => {
+	return new Promise((f) => {
+		setTimeout(() => f(v), ms);
+	});
+};
diff --git a/playgrounds/sandbox/ssr-dev.js b/playgrounds/sandbox/ssr-dev.js
index 01ce14e266..e019b234a6 100644
--- a/playgrounds/sandbox/ssr-dev.js
+++ b/playgrounds/sandbox/ssr-dev.js
@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import polka from 'polka';
 import { createServer as createViteServer } from 'vite';
 import { render } from 'svelte/server';
+import './ssr-common.js';
 
 const PORT = process.env.PORT || '5173';
 
diff --git a/playgrounds/sandbox/ssr-prod.js b/playgrounds/sandbox/ssr-prod.js
index 1ed9435249..e8f74ee93a 100644
--- a/playgrounds/sandbox/ssr-prod.js
+++ b/playgrounds/sandbox/ssr-prod.js
@@ -3,6 +3,7 @@ import path from 'node:path';
 import polka from 'polka';
 import { render } from 'svelte/server';
 import App from './src/App.svelte';
+import './ssr-common.js';
 
 const { head, body } = render(App);
 
diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js
index 65f739bdb6..68ac605385 100644
--- a/playgrounds/sandbox/svelte.config.js
+++ b/playgrounds/sandbox/svelte.config.js
@@ -1,5 +1,9 @@
 export default {
 	compilerOptions: {
-		hmr: true
+		hmr: false,
+
+		experimental: {
+			async: true
+		}
 	}
 };

From 63b5ebf36eea3fb1fab138068f3731b122228edb Mon Sep 17 00:00:00 2001
From: "Ahmad S." <navorite@gmail.com>
Date: Mon, 14 Jul 2025 23:02:25 +0300
Subject: [PATCH 17/76] fix: silence a11y warning for inert elements (#16339)

* fix: silence a11y warning for inert elements

* changeset

* handle `inert=""`

* oops

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/tall-avocados-repair.md                           | 5 +++++
 .../compiler/phases/2-analyze/visitors/shared/a11y/index.js  | 5 ++++-
 .../samples/a11y-consider-explicit-label/input.svelte        | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-avocados-repair.md

diff --git a/.changeset/tall-avocados-repair.md b/.changeset/tall-avocados-repair.md
new file mode 100644
index 0000000000..cf11fc9610
--- /dev/null
+++ b/.changeset/tall-avocados-repair.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: silence a11y warning for inert elements
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 5db31314d4..f45a6c9a80 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
@@ -387,7 +387,10 @@ export function check_element(node, context) {
 	switch (node.name) {
 		case 'a':
 		case 'button': {
-			const is_hidden = get_static_value(attribute_map.get('aria-hidden')) === 'true';
+			const is_hidden =
+				get_static_value(attribute_map.get('aria-hidden')) === 'true' ||
+				get_static_value(attribute_map.get('inert')) !== null;
+
 			if (!has_spread && !is_hidden && !is_labelled && !has_content(node)) {
 				w.a11y_consider_explicit_label(node);
 			}
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 11dc007352..e97951065d 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
@@ -5,6 +5,7 @@
 <a href="/#" aria-label="Valid empty link"></a>
 
 <button aria-hidden='true'></button>
+<button inert></button>
 <a href="/#" aria-hidden='true'><b></b></a>
 
 <button>Click me</button>

From 616d29f5cd439b0854280927e3ce5b91753c3fa1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 16:05:11 -0400
Subject: [PATCH 18/76] Version Packages (#16364)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/eleven-weeks-dance.md   |  5 -----
 .changeset/tall-avocados-repair.md |  5 -----
 .changeset/warm-olives-applaud.md  |  5 -----
 packages/svelte/CHANGELOG.md       | 12 ++++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 6 files changed, 14 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/eleven-weeks-dance.md
 delete mode 100644 .changeset/tall-avocados-repair.md
 delete mode 100644 .changeset/warm-olives-applaud.md

diff --git a/.changeset/eleven-weeks-dance.md b/.changeset/eleven-weeks-dance.md
deleted file mode 100644
index 91245df0eb..0000000000
--- a/.changeset/eleven-weeks-dance.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: support `await` in components when using the `experimental.async` compiler option
diff --git a/.changeset/tall-avocados-repair.md b/.changeset/tall-avocados-repair.md
deleted file mode 100644
index cf11fc9610..0000000000
--- a/.changeset/tall-avocados-repair.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: silence a11y warning for inert elements
diff --git a/.changeset/warm-olives-applaud.md b/.changeset/warm-olives-applaud.md
deleted file mode 100644
index 63a7803b99..0000000000
--- a/.changeset/warm-olives-applaud.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: clean up a11y analysis code
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7b822ee9b1..dfa3376e25 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.36.0
+
+### Minor Changes
+
+- feat: support `await` in components when using the `experimental.async` compiler option ([#15844](https://github.com/sveltejs/svelte/pull/15844))
+
+### Patch Changes
+
+- fix: silence a11y warning for inert elements ([#16339](https://github.com/sveltejs/svelte/pull/16339))
+
+- chore: clean up a11y analysis code ([#16345](https://github.com/sveltejs/svelte/pull/16345))
+
 ## 5.35.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0dc8b20f98..a9fead571d 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.35.7",
+  "version": "5.36.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 0674d46652..248b1a3f11 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.35.7';
+export const VERSION = '5.36.0';
 export const PUBLIC_VERSION = '5';

From be0818552de9d282f5033bf8d1be3de34ce01794 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 16:20:14 -0400
Subject: [PATCH 19/76] chore: squelch hydration warning in test suite (#16336)

---
 .../runtime-runes/samples/error-boundary-9/_config.js     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
index 9664c233b7..9bb12e768d 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
@@ -1,7 +1,13 @@
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target, logs }) {
+	test({ assert, target, logs, warnings, variant }) {
+		if (variant === 'hydrate') {
+			assert.deepEqual(warnings, [
+				'Hydration failed because the initial UI does not match what was rendered on the server'
+			]);
+		}
+
 		assert.deepEqual(logs, ['error caught']);
 		assert.htmlEqual(target.innerHTML, `<div>Error!</div><button>Retry</button>`);
 	}

From 96ff125fcfa8d60af978e01e300224386d86ef01 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 21:38:53 -0400
Subject: [PATCH 20/76] chore: fix error boundary test (#16368)

---
 .../runtime-runes/samples/error-boundary-9/_config.js     | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
index 9bb12e768d..9664c233b7 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
@@ -1,13 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target, logs, warnings, variant }) {
-		if (variant === 'hydrate') {
-			assert.deepEqual(warnings, [
-				'Hydration failed because the initial UI does not match what was rendered on the server'
-			]);
-		}
-
+	test({ assert, target, logs }) {
 		assert.deepEqual(logs, ['error caught']);
 		assert.htmlEqual(target.innerHTML, `<div>Error!</div><button>Retry</button>`);
 	}

From 2e49783afa5185dc8ccdfede9feee3fe15248294 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 21:45:30 -0400
Subject: [PATCH 21/76] docs: fix code snippets (#16367)

---
 .../.generated/client-warnings.md             | 19 +++++++++++++++++++
 .../messages/client-warnings/warnings.md      | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 1c75faef53..7548428e97 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -43,6 +43,9 @@ Detected reactivity loss when reading `%name%`. This happens when state is read
 Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
 let total = $derived(await a + b);
 ```
 
@@ -51,6 +54,9 @@ let total = $derived(await a + b);
 This does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
 async function sum() {
 	return await a + b;
 }
@@ -61,6 +67,13 @@ let total = $derived(await sum());
 ...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+/**
+ * @param {Promise<number>} a
+ * @param {number} b
+ */
 async function sum(a, b) {
 	return await a + b;
 }
@@ -77,6 +90,9 @@ An async derived, `%name%` (%location%) was not read immediately after it resolv
 In a case like this...
 
 ```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
 let a = $derived(await one());
 let b = $derived(await two());
 ```
@@ -88,6 +104,9 @@ let b = $derived(await two());
 You can solve this by creating the promises first and _then_ awaiting them:
 
 ```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
 let aPromise = $derived(one());
 let bPromise = $derived(two());
 
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 498c19a547..13d9bfcd3b 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -37,6 +37,9 @@ function add() {
 Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
 let total = $derived(await a + b);
 ```
 
@@ -45,6 +48,9 @@ let total = $derived(await a + b);
 This does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
 async function sum() {
 	return await a + b;
 }
@@ -55,6 +61,13 @@ let total = $derived(await sum());
 ...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
 
 ```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+/**
+ * @param {Promise<number>} a
+ * @param {number} b
+ */
 async function sum(a, b) {
 	return await a + b;
 }
@@ -69,6 +82,9 @@ let total = $derived(await sum(a, b));
 In a case like this...
 
 ```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
 let a = $derived(await one());
 let b = $derived(await two());
 ```
@@ -80,6 +96,9 @@ let b = $derived(await two());
 You can solve this by creating the promises first and _then_ awaiting them:
 
 ```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
 let aPromise = $derived(one());
 let bPromise = $derived(two());
 

From 79904b711329db9ad1927df2d5bde7eeb2909815 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 22:08:08 -0400
Subject: [PATCH 22/76] docs: tweak (#16369)

---
 documentation/docs/02-runes/02-$state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 7c4571e575..8d3510e50c 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -50,7 +50,7 @@ todos.push({
 });
 ```
 
-> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you desire to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
 
 Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
 

From 1e4547b005d875aa1da0fa4f2f367a949700d93e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Jul 2025 22:24:39 -0400
Subject: [PATCH 23/76] chore: add `@since` tags for `settled` and
 `experimental.async` (#16371)

* chore: add `@since` tag for `settled`

* same for compiler options

* regenerate
---
 packages/svelte/src/compiler/types/index.d.ts | 10 ++++++--
 .../svelte/src/internal/client/runtime.js     |  1 +
 packages/svelte/types/index.d.ts              | 23 +++++++++++++++----
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index c4f41b724a..6211e69bd3 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -224,9 +224,15 @@ export interface ModuleCompileOptions {
 	 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 	 */
 	warningFilter?: (warning: Warning) => boolean;
-	/** Experimental options */
+	/**
+	 * Experimental options
+	 * @since 5.36
+	 */
 	experimental?: {
-		/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+		/**
+		 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+		 * @since 5.36
+		 */
 		async?: boolean;
 	};
 }
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index b5f6822207..9fdb87239b 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -526,6 +526,7 @@ export async function tick() {
  * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
  * have resolved and the DOM has been updated
  * @returns {Promise<void>}
+ * @since 5.36
  */
 export function settled() {
 	return Batch.ensure().settled();
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 72eb871db6..60795e6681 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -528,7 +528,8 @@ declare module 'svelte' {
 	/**
 	 * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
 	 * have resolved and the DOM has been updated
-	 * */
+	 * @since 5.36
+	 */
 	export function settled(): Promise<void>;
 	/**
 	 * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
@@ -1116,9 +1117,15 @@ declare module 'svelte/compiler' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning) => boolean;
-		/** Experimental options */
+		/**
+		 * Experimental options
+		 * @since 5.36
+		 */
 		experimental?: {
-			/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+			/**
+			 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+			 * @since 5.36
+			 */
 			async?: boolean;
 		};
 	}
@@ -3031,9 +3038,15 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning_1) => boolean;
-		/** Experimental options */
+		/**
+		 * Experimental options
+		 * @since 5.36
+		 */
 		experimental?: {
-			/** Allow `await` keyword in deriveds, template expressions, and the top level of components */
+			/**
+			 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+			 * @since 5.36
+			 */
 			async?: boolean;
 		};
 	}

From 9134caca242f29170125e1c9fcb71bd8e2473ae1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Jul 2025 11:55:30 -0400
Subject: [PATCH 24/76] fix: only skip updating bound `<input>` if the input
 was the source of the change (#16373)

* fix: only skip updating bound `<input>` if the input was the source of the change

* import Batch as type, not value
---
 .changeset/healthy-garlics-do.md              |  5 +++
 .../client/dom/elements/bindings/input.js     | 14 ++++++-
 .../binding-update-while-focused/_config.js   | 40 +++++++++++++++++++
 .../binding-update-while-focused/main.svelte  | 16 ++++++++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/healthy-garlics-do.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte

diff --git a/.changeset/healthy-garlics-do.md b/.changeset/healthy-garlics-do.md
new file mode 100644
index 0000000000..c27ace34de
--- /dev/null
+++ b/.changeset/healthy-garlics-do.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only skip updating bound `<input>` if the input was the source of the change
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index 569d1179e6..7c1fccea0f 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,3 +1,4 @@
+/** @import { Batch } from '../../../reactivity/batch.js' */
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
@@ -7,6 +8,7 @@ import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
 import { untrack } from '../../../runtime.js';
 import { is_runes } from '../../../context.js';
+import { current_batch } from '../../../reactivity/batch.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -17,6 +19,8 @@ import { is_runes } from '../../../context.js';
 export function bind_value(input, get, set = get) {
 	var runes = is_runes();
 
+	var batches = new WeakSet();
+
 	listen_to_event_and_reset_event(input, 'input', (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
@@ -28,6 +32,10 @@ export function bind_value(input, get, set = get) {
 		value = is_numberlike_input(input) ? to_number(value) : value;
 		set(value);
 
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
+
 		// In runes mode, respect any validation in accessors (doesn't apply in legacy mode,
 		// because we use mutable state which ensures the render effect always runs)
 		if (runes && value !== (value = get())) {
@@ -54,6 +62,10 @@ export function bind_value(input, get, set = get) {
 		(untrack(get) == null && input.value)
 	) {
 		set(is_numberlike_input(input) ? to_number(input.value) : input.value);
+
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
 	}
 
 	render_effect(() => {
@@ -64,7 +76,7 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
-		if (input === document.activeElement) {
+		if (input === document.activeElement && batches.has(/** @type {Batch} */ (current_batch))) {
 			// Never rewrite the contents of a focused input. We can get here if, for example,
 			// an update is deferred because of async work depending on the input:
 			//
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js
new file mode 100644
index 0000000000..1d2e6dd470
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		flushSync(() => {
+			input.focus();
+			input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+		});
+		assert.equal(input.value, '2');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<label>
+					<input /> arrow up/down
+				</label>
+				<p>value = 2</p>
+			`
+		);
+
+		flushSync(() => {
+			input.focus();
+			input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+		});
+		assert.equal(input.value, '1');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<label>
+					<input /> arrow up/down
+				</label>
+				<p>value = 1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte
new file mode 100644
index 0000000000..4cc174e404
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let value = $state('1');
+
+	function onkeydown (e) {
+		let _v = parseFloat(value);
+		if (e.key === 'ArrowUp') _v += 1;
+		else if (e.key === 'ArrowDown') _v -= 1;
+		value = _v.toString();
+	}
+</script>
+
+<label>
+	<input bind:value {onkeydown} /> arrow up/down
+</label>
+
+<p>value = {value}</p>

From b23f1e0a43a06263e52b07296de57a12e53da750 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 15 Jul 2025 11:57:52 -0400
Subject: [PATCH 25/76] Version Packages (#16374)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/healthy-garlics-do.md | 5 -----
 packages/svelte/CHANGELOG.md     | 6 ++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/healthy-garlics-do.md

diff --git a/.changeset/healthy-garlics-do.md b/.changeset/healthy-garlics-do.md
deleted file mode 100644
index c27ace34de..0000000000
--- a/.changeset/healthy-garlics-do.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: only skip updating bound `<input>` if the input was the source of the change
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index dfa3376e25..d9f1a2629c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.36.1
+
+### Patch Changes
+
+- fix: only skip updating bound `<input>` if the input was the source of the change ([#16373](https://github.com/sveltejs/svelte/pull/16373))
+
 ## 5.36.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index a9fead571d..aa76abaae4 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.36.0",
+  "version": "5.36.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 248b1a3f11..f50b7d23cc 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.36.0';
+export const VERSION = '5.36.1';
 export const PUBLIC_VERSION = '5';

From 9f591223b1ee79fb7ec83567e22077bde912bfe7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Jul 2025 15:21:06 -0400
Subject: [PATCH 26/76] docs: async stuff (#16376)

* WIP async docs

* WIP

* docs

* update $effect namespace

* changeset

* oops

* typo

* fixes

* tweak

* missing link

* fix

* tweak

* Update documentation/docs/03-template-syntax/19-await-expressions.md

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

---------

Co-authored-by: Conduitry <git@chor.date>
---
 .changeset/long-drinks-reply.md               |   5 +
 documentation/docs/02-runes/02-$state.md      |   2 +-
 documentation/docs/02-runes/04-$effect.md     |  15 ++
 .../19-await-expressions.md                   | 144 ++++++++++++++++++
 .../05-special-elements/01-svelte-boundary.md |  32 +++-
 packages/svelte/src/ambient.d.ts              |   7 +
 packages/svelte/types/index.d.ts              |   7 +
 7 files changed, 206 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/long-drinks-reply.md
 create mode 100644 documentation/docs/03-template-syntax/19-await-expressions.md

diff --git a/.changeset/long-drinks-reply.md b/.changeset/long-drinks-reply.md
new file mode 100644
index 0000000000..d46b22f493
--- /dev/null
+++ b/.changeset/long-drinks-reply.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `$effect.pending()` to types
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 8d3510e50c..aea427a8ec 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -119,7 +119,7 @@ class Todo {
 }
 ```
 
-> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+> [NOTE!] Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 ## `$state.raw`
 
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index 0e129973d5..5820e178a0 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -221,6 +221,21 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 
 It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
 
+## `$effect.pending`
+
+When using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries ([demo](/playground/untitled#H4sIAAAAAAAAE3WRMU_DMBCF_8rJdHDUqilILGkaiY2RgY0yOPYZWbiOFV8IleX_jpMUEAIWS_7u-d27c2ROnJBV7B6t7WDsequAozKEqmAbpo3FwKqnyOjsJ90EMr-8uvN-G97Q0sRaEfAvLjtH6CjbsDrI3nhqju5IFgkEHGAVSBDy62L_SdtvejPTzEU4Owl6cJJM50AoxcUG2gLiVM31URgChyM89N3JBORcF3BoICA9mhN2A3G9gdvdrij2UJYgejLaSCMsKLTivNj0SEOf7WEN7ZwnHV1dfqd2dTsQ5QCdk9bI10PkcxexXqcmH3W51Jt_le2kbH8os9Y3UaTcNLYpDx-Xab6GTHXpZ128MhpWqDVK2np0yrgXXqQpaLa4APDLBkIF8bd2sYql0Sn_DeE7sYr6AdNzvgljR-MUq7SwAdMHeUtgHR4CAAA=)):
+
+```svelte
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+
+{#if $effect.pending()}
+	<p>pending promises: {$effect.pending()}</p>
+{/if}
+```
+
 ## `$effect.root`
 
 The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
diff --git a/documentation/docs/03-template-syntax/19-await-expressions.md b/documentation/docs/03-template-syntax/19-await-expressions.md
new file mode 100644
index 0000000000..4e5ec28b26
--- /dev/null
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -0,0 +1,144 @@
+---
+title: await
+---
+
+As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:
+
+- at the top level of your component's `<script>`
+- inside `$derived(...)` declarations
+- inside your markup
+
+This feature is currently experimental, and you must opt in by adding the `experimental.async` option wherever you [configure](/docs/kit/configuration) Svelte, usually `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
+```
+
+The experimental flag will be removed in Svelte 6.
+
+## Boundaries
+
+Currently, you can only use `await` inside a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<MyApp />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction will be lifted once Svelte supports asynchronous server-side rendering (see [caveats](#Caveats)).
+
+> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
+
+## Synchronized updates
+
+When an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...
+
+```svelte
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function add(a, b) {
+		await new Promise((f) => setTimeout(f, 500)); // artificial delay
+		return a + b;
+	}
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+```
+
+...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —
+
+```html
+<p>2 + 2 = 3</p>
+```
+
+— instead, the text will update to `2 + 2 = 4` when `add(a, b)` resolves.
+
+Updates can overlap — a fast update will be reflected in the UI while an earlier slow update is still ongoing.
+
+## Concurrency
+
+Svelte will do as much asynchronous work as it can in parallel. For example if you have two `await` expressions in your markup...
+
+```svelte
+<p>{await one()}</p>
+<p>{await two()}</p>
+```
+
+...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.
+
+This does not apply to sequential `await` expressions inside your `<script>` or inside async functions — these run like any other asynchronous JavaScript. An exception is that independent `$derived` expressions will update independently, even though they will run sequentially when they are first created:
+
+```js
+async function one() { return 1; }
+async function two() { return 2; }
+// ---cut---
+// these will run sequentially the first time,
+// but will update independently
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning
+
+## Indicating loading states
+
+In addition to the nearest boundary's [`pending`](svelte-boundary#Properties-pending) snippet, you can indicate that asynchronous work is ongoing with [`$effect.pending()`]($effect#$effect.pending).
+
+You can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:
+
+```js
+let color = 'red';
+let answer = -1;
+let updating = false;
+// ---cut---
+import { tick, settled } from 'svelte';
+
+async function onclick() {
+	updating = true;
+
+	// without this, the change to `updating` will be
+	// grouped with the other changes, meaning it
+	// won't be reflected in the UI
+	await tick();
+
+	color = 'octarine';
+	answer = 42;
+
+	await settled();
+
+	// any updates affected by `color` or `answer`
+	// have now been applied
+	updating = false;
+}
+```
+
+## Error handling
+
+Errors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).
+
+## Caveats
+
+As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.
+
+Currently, server-side rendering is synchronous. If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, only the `pending` snippet will be rendered.
+
+## Breaking changes
+
+Effects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in [very rare situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=) it is possible to update a block that should no longer exist, but only if you update state inside an effect, [which you should avoid]($effect#When-not-to-use-$effect).
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index f5439b4b83..3e91af5d83 100644
--- a/documentation/docs/05-special-elements/01-svelte-boundary.md
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -9,19 +9,41 @@ title: <svelte:boundary>
 > [!NOTE]
 > This feature was added in 5.3.0
 
-Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+Boundaries allow you to 'wall off' parts of your app, so that you can:
 
-If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+- provide UI that should be shown when [`await`](await-expressions) expressions are first resolving
+- handle errors that occur during rendering or while running effects, and provide UI that should be rendered when an error happens
 
-Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
+If a boundary handles an error (with a `failed` snippet or `onerror` handler, or both) its existing content will be removed.
+
+> [!NOTE] Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
 
 ## Properties
 
-For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+For the boundary to do anything, one or more of the following must be provided.
+
+### `pending`
+
+As of Svelte 5.36, boundaries with a `pending` snippet can contain [`await`](await-expressions) expressions. This snippet will be shown when the boundary is first created, and will remain visible until all the `await` expressions inside the boundary have resolved ([demo](/playground/untitled#H4sIAAAAAAAAE21QQW6DQAz8ytY9BKQVpFdKkPqDHnorPWzAaSwt3tWugUaIv1eE0KpKD5as8YxnNBOw6RAKKOOAVrA4up5bEy6VGknOyiO3xJ8qMnmPAhpOZDFC8T6BXPyiXADQ258X77P1FWg4moj_4Y1jQZZ49W0CealqruXUcyPkWLVozQXbZDC2R606spYiNo7bqA7qab_fp2paFLUElD6wYhzVa3AdRUySgNHZAVN1qDZaLRHljTp0vSTJ9XJjrSbpX5f0eZXN6zLXXOa_QfmurIVU-moyoyH5ib87o7XuYZfOZe6vnGWmx1uZW7lJOq9upa-sMwuUZdkmmfIbfQ1xZwwaBL8ECgk9zh8axJAdiVsoTsZGnL8Bg4tX_OMBAAA=)):
+
+```svelte
+<svelte:boundary>
+	<p>{await delayed('hello!')}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+The `pending` snippet will _not_ be shown for subsequent async updates — for these, you can use [`$effect.pending()`]($effect#$effect.pending).
+
+> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
+
 
 ### `failed`
 
-If a `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+If a `failed` snippet is provided, it will be rendered when an error is thrown inside the boundary, with the `error` and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
 
 ```svelte
 <svelte:boundary>
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index a1484718cc..7c3b941ed1 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -255,6 +255,13 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 */
+	export function pending(): number;
+
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.
 	 *
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 60795e6681..d356762a3f 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -3325,6 +3325,13 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 */
+	export function pending(): number;
+
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.
 	 *

From 886d566b93f4360fb927236fa41d941a16417ab6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Jul 2025 16:51:27 -0400
Subject: [PATCH 27/76] add async wrapper to sandbox (#16378)

* add async wrapper to sandbox

* bump pps
---
 package.json                       |  2 +-
 playgrounds/sandbox/Wrapper.svelte |  9 +++++++++
 playgrounds/sandbox/index.html     |  2 +-
 pnpm-lock.yaml                     | 10 +++++-----
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 playgrounds/sandbox/Wrapper.svelte

diff --git a/package.json b/package.json
index 62581782d7..3e609db87f 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "jsdom": "25.0.1",
     "playwright": "^1.46.1",
     "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.4.0",
     "svelte": "workspace:^",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.24.0",
diff --git a/playgrounds/sandbox/Wrapper.svelte b/playgrounds/sandbox/Wrapper.svelte
new file mode 100644
index 0000000000..1fe82c1716
--- /dev/null
+++ b/playgrounds/sandbox/Wrapper.svelte
@@ -0,0 +1,9 @@
+<script>
+	import App from './src/App.svelte';
+</script>
+
+<svelte:boundary>
+	<App />
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/playgrounds/sandbox/index.html b/playgrounds/sandbox/index.html
index d70409ffb6..639409b877 100644
--- a/playgrounds/sandbox/index.html
+++ b/playgrounds/sandbox/index.html
@@ -12,7 +12,7 @@
 
 		<script type="module">
 			import { mount, hydrate, unmount } from 'svelte';
-			import App from '/src/App.svelte';
+			import App from '/Wrapper.svelte';
 
 			globalThis.delayed = (v, ms = 1000) => {
 				return new Promise((f) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87fb2b2667..d0982dc791 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4
       prettier-plugin-svelte:
-        specifier: ^3.1.2
-        version: 3.1.2(prettier@3.2.4)(svelte@packages+svelte)
+        specifier: ^3.4.0
+        version: 3.4.0(prettier@3.2.4)(svelte@packages+svelte)
       svelte:
         specifier: workspace:^
         version: link:packages/svelte
@@ -1906,8 +1906,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-svelte@3.1.2:
-    resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==}
+  prettier-plugin-svelte@3.4.0:
+    resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
@@ -4226,7 +4226,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@packages+svelte):
+  prettier-plugin-svelte@3.4.0(prettier@3.2.4)(svelte@packages+svelte):
     dependencies:
       prettier: 3.2.4
       svelte: link:packages/svelte

From eb23028d8f8b188ca8a963b27d05815977acd2af Mon Sep 17 00:00:00 2001
From: jjones315 <39281771+jjones315@users.noreply.github.com>
Date: Tue, 15 Jul 2025 16:49:06 -0500
Subject: [PATCH 28/76] fix: add pending snippet to  <svelte:boundary> types
 (#16379)

* add pending snippet to  <svelte:boundary> types

* Update .changeset/many-bats-juggle.md

---------

Co-authored-by: jayce jones <jayce.jones@trinityonline.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/many-bats-juggle.md | 5 +++++
 packages/svelte/elements.d.ts  | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/many-bats-juggle.md

diff --git a/.changeset/many-bats-juggle.md b/.changeset/many-bats-juggle.md
new file mode 100644
index 0000000000..e914c49087
--- /dev/null
+++ b/.changeset/many-bats-juggle.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `pending` snippet to `<svelte:boundary>` types
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index fe4078f56a..1492f77792 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -2080,6 +2080,7 @@ export interface SvelteHTMLElements {
 	'svelte:boundary': {
 		onerror?: (error: unknown, reset: () => void) => void;
 		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+		pending?: import('svelte').Snippet;
 	};
 
 	[name: string]: { [name: string]: any };

From 3fa3dd78a1cbaa88a1571977b76bf6f02ed4231d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 15 Jul 2025 17:55:37 -0400
Subject: [PATCH 29/76] Version Packages (#16377)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/long-drinks-reply.md | 5 -----
 .changeset/many-bats-juggle.md  | 5 -----
 packages/svelte/CHANGELOG.md    | 8 ++++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/long-drinks-reply.md
 delete mode 100644 .changeset/many-bats-juggle.md

diff --git a/.changeset/long-drinks-reply.md b/.changeset/long-drinks-reply.md
deleted file mode 100644
index d46b22f493..0000000000
--- a/.changeset/long-drinks-reply.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add `$effect.pending()` to types
diff --git a/.changeset/many-bats-juggle.md b/.changeset/many-bats-juggle.md
deleted file mode 100644
index e914c49087..0000000000
--- a/.changeset/many-bats-juggle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add `pending` snippet to `<svelte:boundary>` types
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index d9f1a2629c..8c0b21364d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.36.2
+
+### Patch Changes
+
+- fix: add `$effect.pending()` to types ([#16376](https://github.com/sveltejs/svelte/pull/16376))
+
+- fix: add `pending` snippet to `<svelte:boundary>` types ([#16379](https://github.com/sveltejs/svelte/pull/16379))
+
 ## 5.36.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index aa76abaae4..6e000e2bbf 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.36.1",
+  "version": "5.36.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index f50b7d23cc..9ccd2ff0ce 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.36.1';
+export const VERSION = '5.36.2';
 export const PUBLIC_VERSION = '5';

From e01bd97befd8181b0c1050b156062abc5b98eeaa Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Jul 2025 19:58:39 -0400
Subject: [PATCH 30/76] fix: update `$effect.pending()` immediately after a
 batch is removed (#16382)

* WIP sync effect pending updates

* fix

* changeset

* fix

* add test

* inline

* unused
---
 .changeset/popular-tips-lie.md                |  5 ++
 .../internal/client/dom/blocks/boundary.js    | 14 ++--
 .../src/internal/client/reactivity/batch.js   | 17 +++-
 .../samples/async-effect-pending/_config.js   | 81 +++++++++++++++++++
 .../samples/async-effect-pending/main.svelte  | 32 ++++++++
 5 files changed, 142 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/popular-tips-lie.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte

diff --git a/.changeset/popular-tips-lie.md b/.changeset/popular-tips-lie.md
new file mode 100644
index 0000000000..45bd3e23f3
--- /dev/null
+++ b/.changeset/popular-tips-lie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: update `$effect.pending()` immediately after a batch is removed
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 5ed0515210..5e678ab113 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -22,7 +22,7 @@ import { get_next_sibling } from '../operations.js';
 import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import { DEV } from 'esm-env';
-import { Batch } from '../../reactivity/batch.js';
+import { Batch, effect_pending_updates } 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';
@@ -92,6 +92,12 @@ export class Boundary {
 	 */
 	#effect_pending = null;
 
+	#effect_pending_update = () => {
+		if (this.#effect_pending) {
+			internal_set(this.#effect_pending, this.#pending_count);
+		}
+	};
+
 	#effect_pending_subscriber = createSubscriber(() => {
 		this.#effect_pending = source(this.#pending_count);
 
@@ -238,11 +244,7 @@ export class Boundary {
 			this.parent.#update_pending_count(d);
 		}
 
-		queueMicrotask(() => {
-			if (this.#effect_pending) {
-				internal_set(this.#effect_pending, this.#pending_count);
-			}
-		});
+		effect_pending_updates.add(this.#effect_pending_update);
 	}
 
 	get_effect_pending() {
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index 1126946ce9..f881330e90 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -49,6 +49,9 @@ export let batch_deriveds = null;
 /** @type {Effect[]} Stack of effects, dev only */
 export let dev_effect_stack = [];
 
+/** @type {Set<() => void>} */
+export let effect_pending_updates = new Set();
+
 /** @type {Effect[]} */
 let queued_root_effects = [];
 
@@ -296,6 +299,16 @@ export class Batch {
 
 	deactivate() {
 		current_batch = null;
+
+		for (const update of effect_pending_updates) {
+			effect_pending_updates.delete(update);
+			update();
+
+			if (current_batch !== null) {
+				// only do one at a time
+				break;
+			}
+		}
 	}
 
 	neuter() {
@@ -319,7 +332,7 @@ export class Batch {
 			batches.delete(this);
 		}
 
-		current_batch = null;
+		this.deactivate();
 	}
 
 	flush_effects() {
@@ -389,6 +402,8 @@ export class Batch {
 			this.#effects = [];
 
 			this.flush();
+		} else {
+			this.deactivate();
 		}
 	}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js
new file mode 100644
index 0000000000..9df3620798
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js
@@ -0,0 +1,81 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		shift.click();
+		shift.click();
+		shift.click();
+
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 3</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 2</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+				<p>pending: 0</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte
new file mode 100644
index 0000000000..89cead2cc6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	let value = $state(0);
+	let deferreds = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ value, deferred });
+		return deferred.promise;
+	}
+
+	function shift() {
+		const d = deferreds.shift();
+		d?.deferred.resolve(d.value);
+	}
+</script>
+
+<button onclick={() => value++}>increment</button>
+<button onclick={() => shift()}>shift</button>
+
+<svelte:boundary>
+	<p>{await push(value)}</p>
+	<p>{await push(value)}</p>
+	<p>{await push(value)}</p>
+
+	<p>pending: {$effect.pending()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+
+

From 8e73fd4b0343cae992429b7e75812acf0ec6cb6c Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:14:19 -0700
Subject: [PATCH 31/76] fix: don't log `await_reactivity_loss` warning when
 signal is read in `untrack` (#16385)

* fix: don't log `await_reactivity_loss` warning when signal is read in `untrack`

* add test

* fix
---
 .changeset/big-readers-lie.md                         |  5 +++++
 packages/svelte/src/internal/client/runtime.js        |  2 +-
 .../samples/async-reactivity-loss/_config.js          |  7 +++++--
 .../samples/async-reactivity-loss/main.svelte         | 11 +++++++----
 4 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/big-readers-lie.md

diff --git a/.changeset/big-readers-lie.md b/.changeset/big-readers-lie.md
new file mode 100644
index 0000000000..9f5dd166c1
--- /dev/null
+++ b/.changeset/big-readers-lie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't log `await_reactivity_loss` warning when signal is read in `untrack`
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 9fdb87239b..6c4d92bbad 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -609,7 +609,7 @@ export function get(signal) {
 			var tracking = (current_async_effect.f & REACTION_IS_UPDATING) !== 0;
 			var was_read = current_async_effect.deps?.includes(signal);
 
-			if (!tracking && !was_read) {
+			if (!tracking && !untracking && !was_read) {
 				w.await_reactivity_loss(/** @type {string} */ (signal.label));
 
 				var trace = get_stack('TracedAt');
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
index f8a7cfd479..16318a3b44 100644
--- a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
@@ -6,11 +6,14 @@ export default test({
 		dev: true
 	},
 
-	html: `<button>a</button><button>b</button><p>pending</p>`,
+	html: `<button>a</button><button>b</button><button>c</button><p>pending</p>`,
 
 	async test({ assert, target, warnings }) {
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<button>a</button><button>b</button><h1>3</h1><p>3</p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>a</button><button>b</button><button>c</button><h1>6</h1><p>6</p>'
+		);
 
 		assert.equal(
 			warnings[0],
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
index bdb1b095c9..03596ce051 100644
--- a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
@@ -1,18 +1,21 @@
 <script>
+	import { untrack } from 'svelte';
 	let a = $state(1);
 	let b = $state(2);
+	let c = $state(3);
 
-	async function a_plus_b() {
-		return await a + await b;
+	async function a_plus_b_plus_c() {
+		return await a + await b + await untrack(() => c);
 	}
 </script>
 
 <button onclick={() => a++}>a</button>
 <button onclick={() => b++}>b</button>
+<button onclick={() => c++}>c</button>
 
 <svelte:boundary>
-	<h1>{await a_plus_b()}</h1>
-	<p>{await a + await b}</p>
+	<h1>{await a_plus_b_plus_c()}</h1>
+	<p>{await a + await b + await c}</p>
 
 	{#snippet pending()}
 		<p>pending</p>

From 6cf3a193428f08a1c15b403dad681627425c0f1d Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Wed, 16 Jul 2025 16:55:15 +0300
Subject: [PATCH 32/76] fix: better handle $inspect on array mutations (#16389)

* fix: better handle $inspect on array mutations

* increase stack trace limit, revert test change

* second changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/curvy-houses-jog.md                |  5 ++
 .changeset/metal-coats-thank.md               |  5 ++
 packages/svelte/src/internal/client/proxy.js  | 60 +++++++++++++++----
 .../src/internal/client/reactivity/sources.js | 40 ++++++++-----
 .../samples/array-delete-item/_config.js      | 13 ++++
 .../samples/array-delete-item/main.svelte     |  8 +++
 .../samples/inspect-deep-array/_config.js     | 13 +---
 packages/svelte/tests/suite.ts                |  3 +
 8 files changed, 110 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/curvy-houses-jog.md
 create mode 100644 .changeset/metal-coats-thank.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte

diff --git a/.changeset/curvy-houses-jog.md b/.changeset/curvy-houses-jog.md
new file mode 100644
index 0000000000..0a2323d8e4
--- /dev/null
+++ b/.changeset/curvy-houses-jog.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better handle $inspect on array mutations
diff --git a/.changeset/metal-coats-thank.md b/.changeset/metal-coats-thank.md
new file mode 100644
index 0000000000..b307fd3d45
--- /dev/null
+++ b/.changeset/metal-coats-thank.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: leave proxied array `length` untouched when deleting properties
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 5da1b7e188..3ae4b87ed5 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -15,7 +15,13 @@ import {
 	is_array,
 	object_prototype
 } from '../shared/utils.js';
-import { state as source, set, increment } from './reactivity/sources.js';
+import {
+	state as source,
+	set,
+	increment,
+	flush_inspect_effects,
+	set_inspect_effects_deferred
+} from './reactivity/sources.js';
 import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
@@ -80,6 +86,9 @@ export function proxy(value) {
 		// We need to create the length source eagerly to ensure that
 		// mutations to the array are properly synced with our proxy
 		sources.set('length', source(/** @type {any[]} */ (value).length, stack));
+		if (DEV) {
+			value = /** @type {any} */ (inspectable_array(/** @type {any[]} */ (value)));
+		}
 	}
 
 	/** Used in dev for $inspect.trace() */
@@ -142,16 +151,6 @@ export function proxy(value) {
 					}
 				}
 			} else {
-				// When working with arrays, we need to also ensure we update the length when removing
-				// an indexed property
-				if (is_proxied_array && typeof prop === 'string') {
-					var ls = /** @type {Source<number>} */ (sources.get('length'));
-					var n = Number(prop);
-
-					if (Number.isInteger(n) && n < ls.v) {
-						set(ls, n);
-					}
-				}
 				set(s, UNINITIALIZED);
 				increment(version);
 			}
@@ -388,3 +387,42 @@ export function get_proxied_value(value) {
 export function is(a, b) {
 	return Object.is(get_proxied_value(a), get_proxied_value(b));
 }
+
+const ARRAY_MUTATING_METHODS = new Set([
+	'copyWithin',
+	'fill',
+	'pop',
+	'push',
+	'reverse',
+	'shift',
+	'sort',
+	'splice',
+	'unshift'
+]);
+
+/**
+ * Wrap array mutating methods so $inspect is triggered only once and
+ * to prevent logging an array in intermediate state (e.g. with an empty slot)
+ * @param {any[]} array
+ */
+function inspectable_array(array) {
+	return new Proxy(array, {
+		get(target, prop, receiver) {
+			var value = Reflect.get(target, prop, receiver);
+			if (!ARRAY_MUTATING_METHODS.has(/** @type {string} */ (prop))) {
+				return value;
+			}
+
+			/**
+			 * @this {any[]}
+			 * @param {any[]} args
+			 */
+			return function (...args) {
+				set_inspect_effects_deferred();
+				var result = value.apply(this, args);
+				flush_inspect_effects();
+				return result;
+			};
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 29c657bdd0..bd55b9d935 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -49,6 +49,12 @@ export function set_inspect_effects(v) {
 	inspect_effects = v;
 }
 
+let inspect_effects_deferred = false;
+
+export function set_inspect_effects_deferred() {
+	inspect_effects_deferred = true;
+}
+
 /**
  * @template V
  * @param {V} v
@@ -213,26 +219,32 @@ export function internal_set(source, value) {
 			}
 		}
 
-		if (DEV && inspect_effects.size > 0) {
-			const inspects = Array.from(inspect_effects);
+		if (DEV && inspect_effects.size > 0 && !inspect_effects_deferred) {
+			flush_inspect_effects();
+		}
+	}
+
+	return value;
+}
 
-			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);
-				}
+export function flush_inspect_effects() {
+	inspect_effects_deferred = false;
 
-				if (is_dirty(effect)) {
-					update_effect(effect);
-				}
-			}
+	const inspects = Array.from(inspect_effects);
 
-			inspect_effects.clear();
+	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);
+		}
+
+		if (is_dirty(effect)) {
+			update_effect(effect);
 		}
 	}
 
-	return value;
+	inspect_effects.clear();
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js b/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js
new file mode 100644
index 0000000000..7134117067
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js
@@ -0,0 +1,13 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+
+		assert.deepEqual(logs[0], [0, , 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte b/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte
new file mode 100644
index 0000000000..ca00a85491
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	const arr = [0, 1, 2];
+</script>
+
+<button onclick={() => {
+	delete arr[1];
+	console.log(arr);
+}}>del</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
index 0e6b12508b..49f1b5de41 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
@@ -13,17 +13,6 @@ export default test({
 			button?.click();
 		});
 
-		assert.deepEqual(logs, [
-			'init',
-			[1, 2, 3, 7],
-			'update',
-			[2, 2, 3, 7],
-			'update',
-			[2, 3, 3, 7],
-			'update',
-			[2, 3, 7, 7],
-			'update',
-			[2, 3, 7]
-		]);
+		assert.deepEqual(logs, ['init', [1, 2, 3, 7], 'update', [2, 3, 7]]);
 	}
 });
diff --git a/packages/svelte/tests/suite.ts b/packages/svelte/tests/suite.ts
index 6954b8b683..bbd252b8e1 100644
--- a/packages/svelte/tests/suite.ts
+++ b/packages/svelte/tests/suite.ts
@@ -20,6 +20,9 @@ const filter = process.env.FILTER
 		)
 	: /./;
 
+// this defaults to 10, which is too low for some of our tests
+Error.stackTraceLimit = 100;
+
 export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string) => void) {
 	return {
 		test: (config: Test) => config,

From be44f8b23ecf14bb5945c06dd775000bcc483eaf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:45:47 -0400
Subject: [PATCH 33/76] Version Packages (#16384)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/big-readers-lie.md   |  5 -----
 .changeset/curvy-houses-jog.md  |  5 -----
 .changeset/metal-coats-thank.md |  5 -----
 .changeset/popular-tips-lie.md  |  5 -----
 packages/svelte/CHANGELOG.md    | 12 ++++++++++++
 packages/svelte/package.json    |  2 +-
 packages/svelte/src/version.js  |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/big-readers-lie.md
 delete mode 100644 .changeset/curvy-houses-jog.md
 delete mode 100644 .changeset/metal-coats-thank.md
 delete mode 100644 .changeset/popular-tips-lie.md

diff --git a/.changeset/big-readers-lie.md b/.changeset/big-readers-lie.md
deleted file mode 100644
index 9f5dd166c1..0000000000
--- a/.changeset/big-readers-lie.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't log `await_reactivity_loss` warning when signal is read in `untrack`
diff --git a/.changeset/curvy-houses-jog.md b/.changeset/curvy-houses-jog.md
deleted file mode 100644
index 0a2323d8e4..0000000000
--- a/.changeset/curvy-houses-jog.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: better handle $inspect on array mutations
diff --git a/.changeset/metal-coats-thank.md b/.changeset/metal-coats-thank.md
deleted file mode 100644
index b307fd3d45..0000000000
--- a/.changeset/metal-coats-thank.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"svelte": patch
----
-
-fix: leave proxied array `length` untouched when deleting properties
diff --git a/.changeset/popular-tips-lie.md b/.changeset/popular-tips-lie.md
deleted file mode 100644
index 45bd3e23f3..0000000000
--- a/.changeset/popular-tips-lie.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: update `$effect.pending()` immediately after a batch is removed
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8c0b21364d..2ea2f58de8 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.36.3
+
+### Patch Changes
+
+- fix: don't log `await_reactivity_loss` warning when signal is read in `untrack` ([#16385](https://github.com/sveltejs/svelte/pull/16385))
+
+- fix: better handle $inspect on array mutations ([#16389](https://github.com/sveltejs/svelte/pull/16389))
+
+- fix: leave proxied array `length` untouched when deleting properties ([#16389](https://github.com/sveltejs/svelte/pull/16389))
+
+- fix: update `$effect.pending()` immediately after a batch is removed ([#16382](https://github.com/sveltejs/svelte/pull/16382))
+
 ## 5.36.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6e000e2bbf..119c4142cf 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.36.2",
+  "version": "5.36.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 9ccd2ff0ce..e8b0e6f1ee 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.36.2';
+export const VERSION = '5.36.3';
 export const PUBLIC_VERSION = '5';

From 4947283fa5547691adcb129e145eed77c38f39fc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 12:08:45 -0400
Subject: [PATCH 34/76] fix: avoid microtask in flushSync (#16394)

* fix: avoid microtask in flushSync

* fix/simplify

* on second thoughts

* changeset
---
 .changeset/soft-moles-work.md                 |  5 +++++
 .../src/internal/client/reactivity/batch.js   | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/soft-moles-work.md

diff --git a/.changeset/soft-moles-work.md b/.changeset/soft-moles-work.md
new file mode 100644
index 0000000000..c3573e4bc5
--- /dev/null
+++ b/.changeset/soft-moles-work.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid microtask in flushSync
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index f881330e90..1d08b5c3d8 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -416,19 +416,21 @@ export class Batch {
 		return (this.#deferred ??= deferred()).promise;
 	}
 
-	static ensure() {
+	static ensure(autoflush = true) {
 		if (current_batch === null) {
 			const batch = (current_batch = new Batch());
 			batches.add(current_batch);
 
-			queueMicrotask(() => {
-				if (current_batch !== batch) {
-					// a flushSync happened in the meantime
-					return;
-				}
+			if (autoflush) {
+				queueMicrotask(() => {
+					if (current_batch !== batch) {
+						// a flushSync happened in the meantime
+						return;
+					}
 
-				batch.flush();
-			});
+					batch.flush();
+				});
+			}
 		}
 
 		return current_batch;
@@ -449,7 +451,7 @@ export function flushSync(fn) {
 
 	var result;
 
-	const batch = Batch.ensure();
+	const batch = Batch.ensure(false);
 
 	if (fn) {
 		batch.flush_effects();

From ee1ef6083ad9fad44c677192d3dafefb4d731f1e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 16 Jul 2025 18:20:44 +0200
Subject: [PATCH 35/76] fix: ensure compiler state is reset before compilation
 (#16396)

#16268 introduced a slight regression where the state is not reset completely upon compilation. It did reset warnings but not other state, which meant if file A succeeds but file B fails in the parsing state (before the state was reset for real) it would get wrong filename info. This fixes it by setting the filename at the very beginning.
---
 .changeset/two-terms-draw.md                  |  5 +++
 packages/svelte/src/compiler/index.js         |  6 +--
 packages/svelte/src/compiler/migrate/index.js |  6 +--
 .../src/compiler/phases/2-analyze/index.js    |  8 ++--
 .../phases/2-analyze/visitors/SvelteSelf.js   |  6 +--
 packages/svelte/src/compiler/state.js         | 37 ++++++++++++-------
 .../src/compiler/utils/compile_diagnostic.js  |  2 +-
 packages/svelte/tests/compiler-errors/test.ts | 14 ++++++-
 8 files changed, 55 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/two-terms-draw.md

diff --git a/.changeset/two-terms-draw.md b/.changeset/two-terms-draw.md
new file mode 100644
index 0000000000..88ef4be86e
--- /dev/null
+++ b/.changeset/two-terms-draw.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure compiler state is reset before compilation
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 9ba23c1485..a378af34ee 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -20,7 +20,7 @@ export { default as preprocess } from './preprocess/index.js';
  */
 export function compile(source, options) {
 	source = remove_bom(source);
-	state.reset_warnings(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
 	const validated = validate_component_options(options, '');
 
 	let parsed = _parse(source);
@@ -63,7 +63,7 @@ export function compile(source, options) {
  */
 export function compileModule(source, options) {
 	source = remove_bom(source);
-	state.reset_warnings(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
 	const validated = validate_module_options(options, '');
 
 	const analysis = analyze_module(source, validated);
@@ -111,7 +111,7 @@ export function compileModule(source, options) {
  */
 export function parse(source, { modern, loose } = {}) {
 	source = remove_bom(source);
-	state.reset_warnings(() => false);
+	state.reset({ warning: () => false, filename: undefined });
 
 	const ast = _parse(source, loose);
 	return to_public_ast(source, ast, modern);
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 0e2fe019ed..6b2e6cda70 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -9,7 +9,7 @@ import { parse } from '../phases/1-parse/index.js';
 import { regex_valid_component_name } from '../phases/1-parse/state/element.js';
 import { analyze_component } from '../phases/2-analyze/index.js';
 import { get_rune } from '../phases/scope.js';
-import { reset, reset_warnings } from '../state.js';
+import { reset, UNKNOWN_FILENAME } from '../state.js';
 import {
 	extract_identifiers,
 	extract_all_identifiers_from_expression,
@@ -134,7 +134,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			return start + style_placeholder + end;
 		});
 
-		reset_warnings(() => false);
+		reset({ warning: () => false, filename });
 
 		let parsed = parse(source);
 
@@ -145,7 +145,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			...validate_component_options({}, ''),
 			...parsed_options,
 			customElementOptions,
-			filename: filename ?? '(unknown)',
+			filename: filename ?? UNKNOWN_FILENAME,
 			experimental: {
 				async: true
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 258b59018a..d407b44556 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -279,9 +279,8 @@ export function analyze_module(source, options) {
 		classes: new Map()
 	};
 
-	state.reset({
+	state.adjust({
 		dev: options.dev,
-		filename: options.filename,
 		rootDir: options.rootDir,
 		runes: true
 	});
@@ -531,12 +530,11 @@ export function analyze_component(root, source, options) {
 		async_deriveds: new Set()
 	};
 
-	state.reset({
+	state.adjust({
 		component_name: analysis.name,
 		dev: options.dev,
-		filename: options.filename,
 		rootDir: options.rootDir,
-		runes: true
+		runes
 	});
 
 	if (!runes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
index b87f082de0..652a447165 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
@@ -3,7 +3,7 @@
 import { visit_component } from './shared/component.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { filename } from '../../../state.js';
+import { filename, UNKNOWN_FILENAME } from '../../../state.js';
 
 /**
  * @param {AST.SvelteSelf} node
@@ -23,9 +23,9 @@ export function SvelteSelf(node, context) {
 	}
 
 	if (context.state.analysis.runes) {
-		const name = filename === '(unknown)' ? 'Self' : context.state.analysis.name;
+		const name = filename === UNKNOWN_FILENAME ? 'Self' : context.state.analysis.name;
 		const basename =
-			filename === '(unknown)'
+			filename === UNKNOWN_FILENAME
 				? 'Self.svelte'
 				: /** @type {string} */ (filename.split(/[/\\]/).pop());
 
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 5eb25dd6bb..725d03b802 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -16,6 +16,11 @@ export let warnings = [];
  */
 export let filename;
 
+/**
+ * This is the fallback used when no filename is specified.
+ */
+export const UNKNOWN_FILENAME = '(unknown)';
+
 /**
  * The name of the component that is used in the `export default function ...` statement.
  */
@@ -80,15 +85,6 @@ export function pop_ignore() {
 	ignore_stack.pop();
 }
 
-/**
- *
- * @param {(warning: Warning) => boolean} fn
- */
-export function reset_warnings(fn = () => true) {
-	warning_filter = fn;
-	warnings = [];
-}
-
 /**
  * @param {AST.SvelteNode | NodeLike} node
  * @param {import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
@@ -99,21 +95,36 @@ export function is_ignored(node, code) {
 }
 
 /**
+ * Call this to reset the compiler state. Should be called before each compilation.
+ * @param {{ warning?: (warning: Warning) => boolean; filename: string | undefined }} state
+ */
+export function reset(state) {
+	dev = false;
+	runes = false;
+	component_name = UNKNOWN_FILENAME;
+	source = '';
+	locator = () => undefined;
+	filename = (state.filename ?? UNKNOWN_FILENAME).replace(/\\/g, '/');
+	warning_filter = state.warning ?? (() => true);
+	warnings = [];
+}
+
+/**
+ * Adjust the compiler state based on the provided state object.
+ * Call this after parsing and basic analysis happened.
  * @param {{
  *   dev: boolean;
- *   filename: string;
  *   component_name?: string;
  *   rootDir?: string;
  *   runes: boolean;
  * }} state
  */
-export function reset(state) {
+export function adjust(state) {
 	const root_dir = state.rootDir?.replace(/\\/g, '/');
-	filename = state.filename.replace(/\\/g, '/');
 
 	dev = state.dev;
 	runes = state.runes;
-	component_name = state.component_name ?? '(unknown)';
+	component_name = state.component_name ?? UNKNOWN_FILENAME;
 
 	if (typeof root_dir === 'string' && filename.startsWith(root_dir)) {
 		// make filename relative to rootDir
diff --git a/packages/svelte/src/compiler/utils/compile_diagnostic.js b/packages/svelte/src/compiler/utils/compile_diagnostic.js
index db938cf2bd..c5df49e01c 100644
--- a/packages/svelte/src/compiler/utils/compile_diagnostic.js
+++ b/packages/svelte/src/compiler/utils/compile_diagnostic.js
@@ -61,7 +61,7 @@ export class CompileDiagnostic {
 		this.code = code;
 		this.message = message;
 
-		if (state.filename) {
+		if (state.filename !== state.UNKNOWN_FILENAME) {
 			this.filename = state.filename;
 		}
 
diff --git a/packages/svelte/tests/compiler-errors/test.ts b/packages/svelte/tests/compiler-errors/test.ts
index 5e57a3a032..13b9280dde 100644
--- a/packages/svelte/tests/compiler-errors/test.ts
+++ b/packages/svelte/tests/compiler-errors/test.ts
@@ -1,5 +1,5 @@
 import * as fs from 'node:fs';
-import { assert, expect } from 'vitest';
+import { assert, expect, it } from 'vitest';
 import { compile, compileModule, type CompileError } from 'svelte/compiler';
 import { suite, type BaseTest } from '../suite';
 import { read_file } from '../helpers.js';
@@ -78,3 +78,15 @@ const { test, run } = suite<CompilerErrorTest>((config, cwd) => {
 export { test };
 
 await run(__dirname);
+
+it('resets the compiler state including filename', () => {
+	// start with something that succeeds
+	compile('<div>hello</div>', { filename: 'foo.svelte' });
+	// then try something that fails in the parsing stage
+	try {
+		compile('<p>hello<div>invalid</p>', { filename: 'bar.svelte' });
+		expect.fail('Expected an error');
+	} catch (e: any) {
+		expect(e.toString()).toContain('bar.svelte');
+	}
+});

From 58788db27b33f2c86a649d603bc328fa330e8f6b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 16 Jul 2025 12:42:25 -0400
Subject: [PATCH 36/76] Version Packages (#16397)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/soft-moles-work.md  | 5 -----
 .changeset/two-terms-draw.md   | 5 -----
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/soft-moles-work.md
 delete mode 100644 .changeset/two-terms-draw.md

diff --git a/.changeset/soft-moles-work.md b/.changeset/soft-moles-work.md
deleted file mode 100644
index c3573e4bc5..0000000000
--- a/.changeset/soft-moles-work.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid microtask in flushSync
diff --git a/.changeset/two-terms-draw.md b/.changeset/two-terms-draw.md
deleted file mode 100644
index 88ef4be86e..0000000000
--- a/.changeset/two-terms-draw.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure compiler state is reset before compilation
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 2ea2f58de8..6d4f31480d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.36.4
+
+### Patch Changes
+
+- fix: avoid microtask in flushSync ([#16394](https://github.com/sveltejs/svelte/pull/16394))
+
+- fix: ensure compiler state is reset before compilation ([#16396](https://github.com/sveltejs/svelte/pull/16396))
+
 ## 5.36.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 119c4142cf..3e9022a091 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.36.3",
+  "version": "5.36.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e8b0e6f1ee..f8d23b44b1 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.36.3';
+export const VERSION = '5.36.4';
 export const PUBLIC_VERSION = '5';

From c11c5ec0e381fc45f9f6ead1bce42f219eb8de61 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 14:41:16 -0400
Subject: [PATCH 37/76] docs: tweak createSubscriber explanation (#16398)

* docs: tweak createSubscriber explanation

* regenerate
---
 packages/svelte/src/reactivity/create-subscriber.js | 10 +++++++---
 packages/svelte/types/index.d.ts                    | 10 +++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index afcea9c5b4..4dcac4e6f6 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -6,10 +6,13 @@ import { DEV } from 'esm-env';
 import { queue_micro_task } from '../internal/client/dom/task.js';
 
 /**
- * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
- * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+ * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+ * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
  *
- * If `start` returns a function, it will be called when the effect is destroyed.
+ * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+ * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+ *
+ * If `start` returns a cleanup function, it will be called when the effect is destroyed.
  *
  * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
  * are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -37,6 +40,7 @@ import { queue_micro_task } from '../internal/client/dom/task.js';
  * 	}
  *
  * 	get current() {
+ * 		// This makes the getter reactive, if read in an effect
  * 		this.#subscribe();
  *
  * 		// Return the current state of the query, whether or not we're in an effect
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index d356762a3f..a8b769d6d4 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2335,10 +2335,13 @@ declare module 'svelte/reactivity' {
 		constructor(query: string, fallback?: boolean | undefined);
 	}
 	/**
-	 * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
-	 * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+	 * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+	 * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
 	 *
-	 * If `start` returns a function, it will be called when the effect is destroyed.
+	 * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+	 * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+	 *
+	 * If `start` returns a cleanup function, it will be called when the effect is destroyed.
 	 *
 	 * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
 	 * are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -2366,6 +2369,7 @@ declare module 'svelte/reactivity' {
 	 * 	}
 	 *
 	 * 	get current() {
+	 * 		// This makes the getter reactive, if read in an effect
 	 * 		this.#subscribe();
 	 *
 	 * 		// Return the current state of the query, whether or not we're in an effect

From 45cd000890202aff68e4c8aeeead1203ee369c7b Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 16 Jul 2025 14:44:03 -0700
Subject: [PATCH 38/76] chore: fix peer dependency warning (#16401)

---
 package.json   |  2 +-
 pnpm-lock.yaml | 26 +++++++++++++++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 3e609db87f..458bf34084 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@sveltejs/eslint-config": "^8.1.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^9.9.1",
     "eslint-plugin-lube": "^0.4.3",
     "jsdom": "25.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d0982dc791..5f902186ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^20.11.5
         version: 20.12.7
       '@vitest/coverage-v8':
-        specifier: ^2.0.5
-        version: 2.0.5(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^2.1.9
+        version: 2.1.9(vitest@2.1.9(@types/node@20.12.7)(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
@@ -869,10 +869,14 @@ packages:
     resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitest/coverage-v8@2.0.5':
-    resolution: {integrity: sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==}
+  '@vitest/coverage-v8@2.1.9':
+    resolution: {integrity: sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ==}
     peerDependencies:
-      vitest: 2.0.5
+      '@vitest/browser': 2.1.9
+      vitest: 2.1.9
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -1683,8 +1687,8 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  magicast@0.3.4:
-    resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
@@ -3173,7 +3177,7 @@ snapshots:
       '@typescript-eslint/types': 8.32.1
       eslint-visitor-keys: 4.2.0
 
-  '@vitest/coverage-v8@2.0.5(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -3183,7 +3187,7 @@ snapshots:
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.1.7
       magic-string: 0.30.17
-      magicast: 0.3.4
+      magicast: 0.3.5
       std-env: 3.8.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
@@ -4045,7 +4049,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  magicast@0.3.4:
+  magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.25.4
       '@babel/types': 7.25.4
@@ -4053,7 +4057,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   merge2@1.4.1: {}
 

From ead409120229a3c8677d357823b86242fa196dda Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 18:54:45 -0400
Subject: [PATCH 39/76] docs: diligently describe destructured derived
 declarations (#16400)

---
 documentation/docs/02-runes/03-$derived.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 2464aa9295..5f253cf6d1 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -94,6 +94,23 @@ let selected = $derived(items[index]);
 
 ...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
 
+## Destructuring
+
+If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
+
+```js
+let { a, b, c } = $derived(stuff());
+```
+
+...is roughly equivalent to this:
+
+```js
+let _stuff = $derived(stuff());
+let a = $derived(_stuff.a);
+let b = $derived(_stuff.b);
+let c = $derived(_stuff.c);
+```
+
 ## Update propagation
 
 Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').

From 3edebd51035404c30c6c9f694c79037e2f93d433 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 18:54:56 -0400
Subject: [PATCH 40/76] chore: update to new pnpm syntax (#16399)

---
 CONTRIBUTING.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0e2628f84f..c2d3e45049 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -105,10 +105,10 @@ Test samples are kept in `/test/xxx/samples` folder.
    pnpm test validator
    ```
 
-1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
+1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -t <test-name>`, for example:
 
    ```bash
-   pnpm test validator -- -t a11y-alt-text
+   pnpm test validator -t a11y-alt-text
    ```
 
    (You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)

From 09c9a3c16533d2223e17700684718b4829cda9c6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 18:55:24 -0400
Subject: [PATCH 41/76] fix: silence `$inspect` errors when the effect is about
 to be destroyed (#16391)

* fix: silence `$inspect` errors when the effect is about to be destroyed

* changeset
---
 .changeset/six-swans-rush.md                  |  5 ++
 .../svelte/src/internal/client/dev/inspect.js | 51 ++++++++++++-------
 .../samples/inspect-exception/_config.js      |  2 +-
 3 files changed, 39 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/six-swans-rush.md

diff --git a/.changeset/six-swans-rush.md b/.changeset/six-swans-rush.md
new file mode 100644
index 0000000000..cfb5b97400
--- /dev/null
+++ b/.changeset/six-swans-rush.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: silence `$inspect` errors when the effect is about to be destroyed
diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js
index e15c66901c..c593f2622c 100644
--- a/packages/svelte/src/internal/client/dev/inspect.js
+++ b/packages/svelte/src/internal/client/dev/inspect.js
@@ -1,6 +1,6 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
-import { inspect_effect, validate_effect } from '../reactivity/effects.js';
+import { inspect_effect, render_effect, validate_effect } from '../reactivity/effects.js';
 import { untrack } from '../runtime.js';
 
 /**
@@ -12,29 +12,44 @@ export function inspect(get_value, inspector = console.log) {
 	validate_effect('$inspect');
 
 	let initial = true;
+	let error = /** @type {any} */ (UNINITIALIZED);
 
+	// Inspect effects runs synchronously so that we can capture useful
+	// stack traces. As a consequence, reading the value might result
+	// in an error (an `$inspect(object.property)` will run before the
+	// `{#if object}...{/if}` that contains it)
 	inspect_effect(() => {
-		/** @type {any} */
-		var value = UNINITIALIZED;
-
-		// Capturing the value might result in an exception due to the inspect effect being
-		// sync and thus operating on stale data. In the case we encounter an exception we
-		// can bail-out of reporting the value. Instead we simply console.error the error
-		// so at least it's known that an error occured, but we don't stop execution
 		try {
-			value = get_value();
-		} catch (error) {
-			// eslint-disable-next-line no-console
-			console.error(error);
+			var value = get_value();
+		} catch (e) {
+			error = e;
+			return;
 		}
 
-		if (value !== UNINITIALIZED) {
-			var snap = snapshot(value, true);
-			untrack(() => {
-				inspector(initial ? 'init' : 'update', ...snap);
-			});
-		}
+		var snap = snapshot(value, true);
+		untrack(() => {
+			inspector(initial ? 'init' : 'update', ...snap);
+		});
 
 		initial = false;
 	});
+
+	// If an error occurs, we store it (along with its stack trace).
+	// If the render effect subsequently runs, we log the error,
+	// but if it doesn't run it's because the `$inspect` was
+	// destroyed, meaning we don't need to bother
+	render_effect(() => {
+		try {
+			// call `get_value` so that this runs alongside the inspect effect
+			get_value();
+		} catch {
+			// ignore
+		}
+
+		if (error !== UNINITIALIZED) {
+			// eslint-disable-next-line no-console
+			console.error(error);
+			error = UNINITIALIZED;
+		}
+	});
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
index e155ff236a..83e0eb9443 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
@@ -11,7 +11,7 @@ export default test({
 		b1?.click();
 		flushSync();
 
-		assert.ok(errors.length > 0);
+		assert.equal(errors.length, 0);
 		assert.deepEqual(logs, ['init', 'a', 'init', 'b']);
 	}
 });

From a67b5862f15ce763c0d3a038f88abbb4b08d2d80 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 19:24:57 -0400
Subject: [PATCH 42/76] fix: more informative error when effects run in an
 infinite loop (#16405)

* update effect_update_depth_exceeded docs

* log update locations

* remove dev_effect_stack stuff, it's not very helpful

* tidy up

* test

* fix test

* changeset

* fix
---
 .changeset/slimy-doors-fetch.md               |  5 ++
 .../98-reference/.generated/client-errors.md  | 40 ++++++++++-
 .../svelte/messages/client-errors/errors.md   | 40 ++++++++++-
 .../svelte/src/internal/client/dev/tracing.js | 64 +++++++++--------
 packages/svelte/src/internal/client/errors.js |  4 +-
 .../src/internal/client/reactivity/batch.js   | 71 ++++++++-----------
 .../src/internal/client/reactivity/sources.js | 18 ++++-
 .../src/internal/client/reactivity/types.d.ts |  4 +-
 .../svelte/src/internal/client/runtime.js     | 12 +---
 .../samples/effect-loop-infinite/_config.js   | 21 ++++++
 .../samples/effect-loop-infinite/main.svelte  | 12 ++++
 .../samples/error-boundary-20/_config.js      |  4 +-
 12 files changed, 202 insertions(+), 93 deletions(-)
 create mode 100644 .changeset/slimy-doors-fetch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte

diff --git a/.changeset/slimy-doors-fetch.md b/.changeset/slimy-doors-fetch.md
new file mode 100644
index 0000000000..8dec24a98d
--- /dev/null
+++ b/.changeset/slimy-doors-fetch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: more informative error when effects run in an infinite loop
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index c7d6ec8ac9..3b17ef9f9b 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -89,9 +89,47 @@ Effect cannot be created inside a `$derived` value that was not itself created i
 ### effect_update_depth_exceeded
 
 ```
-Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
 ```
 
+If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
+
+```js
+let count = $state(0);
+
+$effect(() => {
+	// this both reads and writes `count`,
+	// so will run in an infinite loop
+	count += 1;
+});
+```
+
+(Svelte intervenes before this can crash your browser tab.)
+
+The same applies to array mutations, since these both read and write to the array:
+
+```js
+let array = $state([]);
+
+$effect(() => {
+	array.push('hello');
+});
+```
+
+Note that it's fine for an effect to re-run itself as long as it 'settles':
+
+```js
+let array = ['a', 'b', 'c'];
+// ---cut---
+$effect(() => {
+	// this is okay, because sorting an already-sorted array
+	// won't result in a mutation
+	array.sort();
+});
+```
+
+Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
+
 ### flush_sync_in_effect
 
 ```
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 2ce25dbd53..d6af859881 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -60,7 +60,45 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 ## effect_update_depth_exceeded
 
-> Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+> Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
+
+If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
+
+```js
+let count = $state(0);
+
+$effect(() => {
+	// this both reads and writes `count`,
+	// so will run in an infinite loop
+	count += 1;
+});
+```
+
+(Svelte intervenes before this can crash your browser tab.)
+
+The same applies to array mutations, since these both read and write to the array:
+
+```js
+let array = $state([]);
+
+$effect(() => {
+	array.push('hello');
+});
+```
+
+Note that it's fine for an effect to re-run itself as long as it 'settles':
+
+```js
+let array = ['a', 'b', 'c'];
+// ---cut---
+$effect(() => {
+	// this is okay, because sorting an already-sorted array
+	// won't result in a mutation
+	array.sort();
+});
+```
+
+Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
 
 ## flush_sync_in_effect
 
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 128942ceb2..b7a6a38548 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -56,8 +56,10 @@ function log_entry(signal, entry) {
 	}
 
 	if (dirty && signal.updated) {
-		// eslint-disable-next-line no-console
-		console.log(signal.updated);
+		for (const updated of signal.updated.values()) {
+			// eslint-disable-next-line no-console
+			console.log(updated.error);
+		}
 	}
 
 	if (entry) {
@@ -120,44 +122,46 @@ export function trace(label, fn) {
 
 /**
  * @param {string} label
+ * @returns {Error & { stack: string } | null}
  */
 export function get_stack(label) {
 	let error = Error();
 	const stack = error.stack;
 
-	if (stack) {
-		const lines = stack.split('\n');
-		const new_lines = ['\n'];
-
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-
-			if (line === 'Error') {
-				continue;
-			}
-			if (line.includes('validate_each_keys')) {
-				return null;
-			}
-			if (line.includes('svelte/src/internal')) {
-				continue;
-			}
-			new_lines.push(line);
-		}
+	if (!stack) return null;
 
-		if (new_lines.length === 1) {
+	const lines = stack.split('\n');
+	const new_lines = ['\n'];
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+
+		if (line === 'Error') {
+			continue;
+		}
+		if (line.includes('validate_each_keys')) {
 			return null;
 		}
+		if (line.includes('svelte/src/internal')) {
+			continue;
+		}
+		new_lines.push(line);
+	}
 
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
-
-		define_property(error, 'name', {
-			// 'Error' suffix is required for stack traces to be rendered properly
-			value: `${label}Error`
-		});
+	if (new_lines.length === 1) {
+		return null;
 	}
-	return error;
+
+	define_property(error, 'stack', {
+		value: new_lines.join('\n')
+	});
+
+	define_property(error, 'name', {
+		// 'Error' suffix is required for stack traces to be rendered properly
+		value: `${label}Error`
+	});
+
+	return /** @type {Error & { stack: string }} */ (error);
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index a491dc683d..edd66a7400 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -214,12 +214,12 @@ export function effect_pending_outside_reaction() {
 }
 
 /**
- * Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+ * Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
  * @returns {never}
  */
 export function effect_update_depth_exceeded() {
 	if (DEV) {
-		const error = new Error(`effect_update_depth_exceeded\nMaximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops\nhttps://svelte.dev/e/effect_update_depth_exceeded`);
+		const error = new Error(`effect_update_depth_exceeded\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\nhttps://svelte.dev/e/effect_update_depth_exceeded`);
 
 		error.name = 'Svelte error';
 
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index 1d08b5c3d8..cdce971b18 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -46,9 +46,6 @@ export let current_batch = null;
  */
 export let batch_deriveds = null;
 
-/** @type {Effect[]} Stack of effects, dev only */
-export let dev_effect_stack = [];
-
 /** @type {Set<() => void>} */
 export let effect_pending_updates = new Set();
 
@@ -345,6 +342,28 @@ export class Batch {
 
 			while (queued_root_effects.length > 0) {
 				if (flush_count++ > 1000) {
+					if (DEV) {
+						var updates = new Map();
+
+						for (const source of this.#current.keys()) {
+							for (const [stack, update] of source.updated ?? []) {
+								var entry = updates.get(stack);
+
+								if (!entry) {
+									entry = { error: update.error, count: 0 };
+									updates.set(stack, entry);
+								}
+
+								entry.count += update.count;
+							}
+						}
+
+						for (const update of updates.values()) {
+							// eslint-disable-next-line no-console
+							console.error(update.error);
+						}
+					}
+
 					infinite_loop_guard();
 				}
 
@@ -356,9 +375,6 @@ export class Batch {
 			set_is_updating_effect(was_updating_effect);
 
 			last_scheduled_effect = null;
-			if (DEV) {
-				dev_effect_stack = [];
-			}
 		}
 	}
 
@@ -471,10 +487,6 @@ export function flushSync(fn) {
 			// we need to reset it here as well in case the first time there's 0 queued root effects
 			last_scheduled_effect = null;
 
-			if (DEV) {
-				dev_effect_stack = [];
-			}
-
 			return /** @type {T} */ (result);
 		}
 
@@ -482,45 +494,18 @@ export function flushSync(fn) {
 	}
 }
 
-function log_effect_stack() {
-	// eslint-disable-next-line no-console
-	console.error(
-		'Last ten effects were: ',
-		dev_effect_stack.slice(-10).map((d) => d.fn)
-	);
-	dev_effect_stack = [];
-}
-
 function infinite_loop_guard() {
 	try {
 		e.effect_update_depth_exceeded();
 	} catch (error) {
 		if (DEV) {
-			// stack is garbage, ignore. Instead add a console.error message.
-			define_property(error, 'stack', {
-				value: ''
-			});
-		}
-		// Try and handle the error so it can be caught at a boundary, that's
-		// if there's an effect available from when it was last scheduled
-		if (last_scheduled_effect !== null) {
-			if (DEV) {
-				try {
-					invoke_error_boundary(error, last_scheduled_effect);
-				} catch (e) {
-					// Only log the effect stack if the error is re-thrown
-					log_effect_stack();
-					throw e;
-				}
-			} else {
-				invoke_error_boundary(error, last_scheduled_effect);
-			}
-		} else {
-			if (DEV) {
-				log_effect_stack();
-			}
-			throw error;
+			// stack contains no useful information, replace it
+			define_property(error, 'stack', { value: '' });
 		}
+
+		// Best effort: invoke the boundary nearest the most recent
+		// effect and hope that it's relevant to the infinite loop
+		invoke_error_boundary(error, last_scheduled_effect);
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index bd55b9d935..9b534d2d71 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -182,8 +182,22 @@ export function internal_set(source, value) {
 		const batch = Batch.ensure();
 		batch.capture(source, old_value);
 
-		if (DEV && tracing_mode_flag) {
-			source.updated = get_stack('UpdatedAt');
+		if (DEV) {
+			if (tracing_mode_flag || active_effect !== null) {
+				const error = get_stack('UpdatedAt');
+
+				if (error !== null) {
+					source.updated ??= new Map();
+					let entry = source.updated.get(error.stack);
+
+					if (!entry) {
+						entry = { error, count: 0 };
+						source.updated.set(error.stack, entry);
+					}
+
+					entry.count++;
+				}
+			}
 
 			if (active_effect !== null) {
 				source.set_during_effect = true;
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 90f922df68..72187e84a7 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -29,8 +29,8 @@ export interface Value<V = unknown> extends Signal {
 	label?: string;
 	/** An error with a stack trace showing when the source was created */
 	created?: Error | null;
-	/** An error with a stack trace showing when the source was last updated */
-	updated?: Error | null;
+	/** An map of errors with stack traces showing when the source was updated, keyed by the stack trace */
+	updated?: Map<string, { error: Error; count: number }> | null;
 	/**
 	 * Whether or not the source was set while running an effect — if so, we need to
 	 * increment the write version so that it shows up as dirty when the effect re-runs
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 6c4d92bbad..306b9b9dd9 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -42,13 +42,7 @@ import {
 	set_dev_stack
 } from './context.js';
 import * as w from './warnings.js';
-import {
-	Batch,
-	batch_deriveds,
-	dev_effect_stack,
-	flushSync,
-	schedule_effect
-} from './reactivity/batch.js';
+import { Batch, batch_deriveds, flushSync, schedule_effect } from './reactivity/batch.js';
 import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
 
@@ -491,10 +485,6 @@ export function update_effect(effect) {
 				}
 			}
 		}
-
-		if (DEV) {
-			dev_effect_stack.push(effect);
-		}
 	} finally {
 		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
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
new file mode 100644
index 0000000000..400495050c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, errors }) {
+		const [button] = document.querySelectorAll('button');
+
+		try {
+			flushSync(() => button.click());
+		} catch (e) {
+			assert.equal(errors.length, 1); // for whatever reason we can't get the name which should be UpdatedAtError
+			assert.ok(/** @type {Error} */ (e).message.startsWith('effect_update_depth_exceeded'));
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte
new file mode 100644
index 0000000000..ddb91a90ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let condition = $state(false);
+	let count = $state(0);
+
+	$effect(() => {
+		if (condition) {
+			count++;
+		}
+	});
+</script>
+
+<button onclick={() => condition = !condition}>toggle</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
index ccff614ade..e3a3b0c7d7 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
@@ -2,12 +2,14 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target }) {
+	test({ assert, target, errors }) {
 		let btn = target.querySelector('button');
 
 		btn?.click();
 		flushSync();
 
+		assert.equal(errors.length, 1);
+
 		assert.htmlEqual(target.innerHTML, `<div class="error">An error occurred!</div>`);
 	}
 });

From fcfbc9cca0720d2d57cf6a594f099f568dedfe88 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 16 Jul 2025 20:01:58 -0400
Subject: [PATCH 43/76] Version Packages (#16406)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/six-swans-rush.md    | 5 -----
 .changeset/slimy-doors-fetch.md | 5 -----
 packages/svelte/CHANGELOG.md    | 8 ++++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/six-swans-rush.md
 delete mode 100644 .changeset/slimy-doors-fetch.md

diff --git a/.changeset/six-swans-rush.md b/.changeset/six-swans-rush.md
deleted file mode 100644
index cfb5b97400..0000000000
--- a/.changeset/six-swans-rush.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: silence `$inspect` errors when the effect is about to be destroyed
diff --git a/.changeset/slimy-doors-fetch.md b/.changeset/slimy-doors-fetch.md
deleted file mode 100644
index 8dec24a98d..0000000000
--- a/.changeset/slimy-doors-fetch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: more informative error when effects run in an infinite loop
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 6d4f31480d..56f91c395f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.36.5
+
+### Patch Changes
+
+- fix: silence `$inspect` errors when the effect is about to be destroyed ([#16391](https://github.com/sveltejs/svelte/pull/16391))
+
+- fix: more informative error when effects run in an infinite loop ([#16405](https://github.com/sveltejs/svelte/pull/16405))
+
 ## 5.36.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3e9022a091..2a1b3cf9e5 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.36.4",
+  "version": "5.36.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index f8d23b44b1..4d6811c409 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.36.4';
+export const VERSION = '5.36.5';
 export const PUBLIC_VERSION = '5';

From c56914d739d70c1ba444c2a4ac9df37db7a033cf Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 16 Jul 2025 18:08:54 -0700
Subject: [PATCH 44/76] chore: upgrade to eslint-plugin-svelte 3 (#16407)

---
 eslint.config.js |   3 +-
 package.json     |   3 +-
 pnpm-lock.yaml   | 107 ++++++++++++++++++++++++-----------------------
 3 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 41d98fa428..b0f25bab03 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -80,7 +80,8 @@ export default [
 		files: ['packages/svelte/src/**/*'],
 		ignores: ['packages/svelte/src/compiler/**/*'],
 		rules: {
-			'custom/no_compiler_imports': 'error'
+			'custom/no_compiler_imports': 'error',
+			'svelte/no-svelte-internal': 'off'
 		}
 	},
 	{
diff --git a/package.json b/package.json
index 458bf34084..971bd020d1 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,13 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.8",
-    "@sveltejs/eslint-config": "^8.1.0",
+    "@sveltejs/eslint-config": "^8.3.3",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
     "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^9.9.1",
     "eslint-plugin-lube": "^0.4.3",
+    "eslint-plugin-svelte": "^3.11.0",
     "jsdom": "25.0.1",
     "playwright": "^1.46.1",
     "prettier": "^3.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f902186ef..315d699e25 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.27.8
         version: 2.27.8
       '@sveltejs/eslint-config':
-        specifier: ^8.1.0
-        version: 8.1.0(@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@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
+        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.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
@@ -29,6 +29,9 @@ importers:
       eslint-plugin-lube:
         specifier: ^0.4.3
         version: 0.4.3
+      eslint-plugin-svelte:
+        specifier: ^3.11.0
+        version: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
       jsdom:
         specifier: 25.0.1
         version: 25.0.1
@@ -737,16 +740,16 @@ packages:
     peerDependencies:
       acorn: ^8.9.0
 
-  '@sveltejs/eslint-config@8.1.0':
-    resolution: {integrity: sha512-cfgp4lPREYBjNd4ZzaP/jA85ufm7vfXiaV7h9vILXNogne80IbZRNhRCQ8XoOqTAOY/pChIzWTBuR8aDNMbAEA==}
+  '@sveltejs/eslint-config@8.3.3':
+    resolution: {integrity: sha512-vkrQgEmhokFEOpuTo7NlVXJJMJJGNzxjmkQCTkHSwIOdzQSUukDIJ4038IjdcnIERSIlo4OpLAydWLx52BVyQA==}
     peerDependencies:
       '@stylistic/eslint-plugin-js': '>= 1'
       eslint: '>= 9'
       eslint-config-prettier: '>= 9'
       eslint-plugin-n: '>= 17'
-      eslint-plugin-svelte: '>= 2.36'
+      eslint-plugin-svelte: '>= 3'
       typescript: '>= 5'
-      typescript-eslint: '>= 7.5'
+      typescript-eslint: '>= 8'
 
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2':
     resolution: {integrity: sha512-Yl9BWvEj+1j+8mICIAA04/Sx0wEHNL0n9pSIZFM8n4NWgLFmR3v41qX2k54J/r4LWE2YHTeNNH2WJqEUb3geEA==}
@@ -1209,24 +1212,24 @@ packages:
     peerDependencies:
       eslint: '>=8.23.0'
 
-  eslint-plugin-svelte@2.38.0:
-    resolution: {integrity: sha512-IwwxhHzitx3dr0/xo0z4jjDlb2AAHBPKt+juMyKKGTLlKi1rZfA4qixMwnveU20/JTHyipM6keX4Vr7LZFYc9g==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-svelte@3.11.0:
+    resolution: {integrity: sha512-KliWlkieHyEa65aQIkRwUFfHzT5Cn4u3BQQsu3KlkJOs7c1u7ryn84EWaOjEzilbKgttT4OfBURA8Uc4JBSQIw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.112
+      eslint: ^8.57.1 || ^9.0.0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
   eslint-scope@8.0.2:
     resolution: {integrity: sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   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}
@@ -1400,14 +1403,14 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.14.0:
-    resolution: {integrity: sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==}
-    engines: {node: '>=18'}
-
   globals@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
+  globals@16.3.0:
+    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
+    engines: {node: '>=18'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1589,8 +1592,8 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  known-css-properties@0.30.0:
-    resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==}
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -1886,11 +1889,11 @@ packages:
       ts-node:
         optional: true
 
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.31
 
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
@@ -1898,8 +1901,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
   postcss@8.5.3:
@@ -2121,9 +2124,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.3.0:
+    resolution: {integrity: sha512-VCgMHKV7UtOGcGLGNFSbmdm6kEKjtzo5nnpGU/mnx4OsFY6bZ7QwRF5DUx+Hokw5Lvdyo8dpk8B1m8mliomrNg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
@@ -2998,14 +3001,14 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  '@sveltejs/eslint-config@8.1.0(@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@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)':
+  '@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.26.0(eslint@9.9.1)(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: 2.38.0(eslint@9.9.1)(svelte@packages+svelte)
-      globals: 15.14.0
+      eslint-plugin-svelte: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
+      globals: 15.15.0
       typescript: 5.5.4
       typescript-eslint: 8.26.0(eslint@9.9.1)(typescript@5.5.4)
 
@@ -3125,7 +3128,7 @@ snapshots:
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-api-utils: 2.0.1(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
@@ -3532,33 +3535,30 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte):
+  eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte):
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.9.1)
       '@jridgewell/sourcemap-codec': 1.5.0
-      debug: 4.4.0
       eslint: 9.9.1
-      eslint-compat-utils: 0.5.1(eslint@9.9.1)
       esutils: 2.0.3
-      known-css-properties: 0.30.0
+      globals: 16.3.0
+      known-css-properties: 0.37.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
-      postcss-safe-parser: 6.0.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
+      postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.2
-      svelte-eslint-parser: 0.43.0(svelte@packages+svelte)
+      svelte-eslint-parser: 1.3.0(svelte@packages+svelte)
     optionalDependencies:
       svelte: link:packages/svelte
     transitivePeerDependencies:
-      - supports-color
       - ts-node
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.0.2:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.0.2:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -3769,10 +3769,10 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.14.0: {}
-
   globals@15.15.0: {}
 
+  globals@16.3.0: {}
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -3971,7 +3971,7 @@ snapshots:
 
   kleur@4.1.5: {}
 
-  known-css-properties@0.30.0: {}
+  known-css-properties@0.37.0: {}
 
   levn@0.4.1:
     dependencies:
@@ -4209,7 +4209,7 @@ snapshots:
     optionalDependencies:
       postcss: 8.5.3
 
-  postcss-safe-parser@6.0.0(postcss@8.5.3):
+  postcss-safe-parser@7.0.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
@@ -4217,7 +4217,7 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -4442,13 +4442,14 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-eslint-parser@0.43.0(svelte@packages+svelte):
+  svelte-eslint-parser@1.3.0(svelte@packages+svelte):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.1.0
       postcss: 8.5.3
       postcss-scss: 4.0.9(postcss@8.5.3)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
       svelte: link:packages/svelte
 

From b17557cd91a223a060041300a4761574d7f94e6e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 21:14:55 -0400
Subject: [PATCH 45/76] docs: fix typo (#16408)

---
 documentation/docs/02-runes/02-$state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index aea427a8ec..e67206b535 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -119,7 +119,7 @@ class Todo {
 }
 ```
 
-> [NOTE!] Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+> [!NOTE] Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 ## `$state.raw`
 

From e5e6c0cd129c30bd2f02dabf5c1ab3edaae9bb8f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 21:53:40 -0400
Subject: [PATCH 46/76] fix docs (#16409)

* fix docs

* oops

* another

* gah
---
 documentation/docs/02-runes/03-$derived.md                  | 4 ++++
 documentation/docs/98-reference/.generated/client-errors.md | 4 ++--
 packages/svelte/messages/client-errors/errors.md            | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 5f253cf6d1..0123868c4e 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -99,12 +99,16 @@ let selected = $derived(items[index]);
 If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
 
 ```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
 let { a, b, c } = $derived(stuff());
 ```
 
 ...is roughly equivalent to this:
 
 ```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
 let _stuff = $derived(stuff());
 let a = $derived(_stuff.a);
 let b = $derived(_stuff.b);
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 3b17ef9f9b..4d1de435fe 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -109,10 +109,10 @@ $effect(() => {
 The same applies to array mutations, since these both read and write to the array:
 
 ```js
-let array = $state([]);
+let array = $state(['hello']);
 
 $effect(() => {
-	array.push('hello');
+	array.push('goodbye');
 });
 ```
 
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index d6af859881..a30bdd7593 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -79,10 +79,10 @@ $effect(() => {
 The same applies to array mutations, since these both read and write to the array:
 
 ```js
-let array = $state([]);
+let array = $state(['hello']);
 
 $effect(() => {
-	array.push('hello');
+	array.push('goodbye');
 });
 ```
 

From b8b662a1ad74d54891fd854962e92d5aa3d72fe3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Jul 2025 22:02:02 -0400
Subject: [PATCH 47/76] docs: make link to svelte/reactivity more prominent
 (#16410)

---
 documentation/docs/02-runes/02-$state.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index e67206b535..741e24fde0 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -119,7 +119,9 @@ class Todo {
 }
 ```
 
-> [!NOTE] Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+### Built-in classes
+
+Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 ## `$state.raw`
 

From 9e1e7139fb406e6ac94cf5fda99d04e6642aa522 Mon Sep 17 00:00:00 2001
From: Ray Thurn Void <53383860+raythurnvoid@users.noreply.github.com>
Date: Thu, 17 Jul 2025 09:41:21 +0100
Subject: [PATCH 48/76] fix: robustify reset calls in error boundaries (#16171)

Fixes #16134

* Add a warning when the misuse of `reset` in an `error:boundary` causes an error to be thrown when flushing the boundary content

* Prevent uncaught errors to make test fails when they are expected and are fired during template effects flush

* reset should just be a noop after the first call

* correctly handle errors inside boundary during reset

* handle errors in the correct boundary

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/new-dogs-obey.md                   |  5 ++
 .changeset/polite-toys-report.md              |  5 ++
 .../98-reference/.generated/client-errors.md  | 20 +++++
 .../.generated/client-warnings.md             | 26 +++++++
 .../svelte/messages/client-errors/errors.md   | 18 +++++
 .../messages/client-warnings/warnings.md      | 24 ++++++
 .../internal/client/dom/blocks/boundary.js    | 73 +++++++++++++------
 .../src/internal/client/error-handling.js     |  4 +-
 packages/svelte/src/internal/client/errors.js | 16 ++++
 .../svelte/src/internal/client/warnings.js    | 11 +++
 .../svelte/tests/runtime-legacy/shared.ts     |  7 +-
 .../error-boundary-reset-onerror/_config.js   | 15 ++++
 .../error-boundary-reset-onerror/main.svelte  | 17 +++++
 .../error-boundary-reset-premature/_config.js | 28 +++++++
 .../main.svelte                               | 26 +++++++
 .../_config.js                                | 27 +++++++
 .../main.svelte                               | 20 +++++
 17 files changed, 315 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/new-dogs-obey.md
 create mode 100644 .changeset/polite-toys-report.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte

diff --git a/.changeset/new-dogs-obey.md b/.changeset/new-dogs-obey.md
new file mode 100644
index 0000000000..aa9a3d73b9
--- /dev/null
+++ b/.changeset/new-dogs-obey.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle error in correct boundary after reset
diff --git a/.changeset/polite-toys-report.md b/.changeset/polite-toys-report.md
new file mode 100644
index 0000000000..bf5386e069
--- /dev/null
+++ b/.changeset/polite-toys-report.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make `<svelte:boundary>` reset function a noop after the first call
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 4d1de435fe..8fdb7770aa 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -238,3 +238,23 @@ let odd = $derived(!even);
 ```
 
 If side-effects are unavoidable, use [`$effect`]($effect) instead.
+
+### svelte_boundary_reset_onerror
+
+```
+A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+```
+
+If a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.
+
+If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
+
+```svelte
+<svelte:boundary onerror={async (error, reset) => {
+	fixTheError();
+	+++await tick();+++
+	reset();
+}}>
+
+</svelte:boundary>
+```
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 7548428e97..6f1d677fe9 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -312,6 +312,32 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+### svelte_boundary_reset_noop
+
+```
+A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+```
+
+When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
+
+This `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
+
+```svelte
+<script>
+	let reset;
+</script>
+
+<button onclick={reset}>reset</button>
+
+<svelte:boundary onerror={(e, r) => (reset = r)}>
+	<!-- contents -->
+
+	{#snippet failed(e)}
+		<p>oops! {e.message}</p>
+	{/snippet}
+</svelte:boundary>
+```
+
 ### transition_slide_display
 
 ```
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index a30bdd7593..57ecca0489 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -184,3 +184,21 @@ let odd = $derived(!even);
 ```
 
 If side-effects are unavoidable, use [`$effect`]($effect) instead.
+
+## svelte_boundary_reset_onerror
+
+> A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+
+If a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.
+
+If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
+
+```svelte
+<svelte:boundary onerror={async (error, reset) => {
+	fixTheError();
+	+++await tick();+++
+	reset();
+}}>
+
+</svelte:boundary>
+```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 13d9bfcd3b..123c6833e6 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -272,6 +272,30 @@ To silence the warning, ensure that `value`:
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+## svelte_boundary_reset_noop
+
+> A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+
+When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
+
+This `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
+
+```svelte
+<script>
+	let reset;
+</script>
+
+<button onclick={reset}>reset</button>
+
+<svelte:boundary onerror={(e, r) => (reset = r)}>
+	<!-- contents -->
+
+	{#snippet failed(e)}
+		<p>oops! {e.message}</p>
+	{/snippet}
+</svelte:boundary>
+```
+
 ## transition_slide_display
 
 > The `slide` transition does not work correctly for elements with `display: %value%`
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 5e678ab113..4ea137bfa8 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,7 +1,12 @@
 /** @import { Effect, Source, TemplateNode, } from '#client' */
-import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
+import {
+	BOUNDARY_EFFECT,
+	EFFECT_PRESERVED,
+	EFFECT_RAN,
+	EFFECT_TRANSPARENT
+} from '#client/constants';
 import { component_context, set_component_context } from '../../context.js';
-import { invoke_error_boundary } from '../../error-handling.js';
+import { handle_error, invoke_error_boundary } from '../../error-handling.js';
 import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
 import {
 	active_effect,
@@ -21,6 +26,7 @@ import {
 import { get_next_sibling } from '../operations.js';
 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, effect_pending_updates } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
@@ -196,6 +202,9 @@ export class Boundary {
 
 		try {
 			return fn();
+		} catch (e) {
+			handle_error(e);
+			return null;
 		} finally {
 			set_active_effect(previous_effect);
 			set_active_reaction(previous_reaction);
@@ -257,7 +266,42 @@ export class Boundary {
 		var onerror = this.#props.onerror;
 		let failed = this.#props.failed;
 
+		if (this.#main_effect) {
+			destroy_effect(this.#main_effect);
+			this.#main_effect = null;
+		}
+
+		if (this.#pending_effect) {
+			destroy_effect(this.#pending_effect);
+			this.#pending_effect = null;
+		}
+
+		if (this.#failed_effect) {
+			destroy_effect(this.#failed_effect);
+			this.#failed_effect = null;
+		}
+
+		if (hydrating) {
+			set_hydrate_node(this.#hydrate_open);
+			next();
+			set_hydrate_node(remove_nodes());
+		}
+
+		var did_reset = false;
+		var calling_on_error = false;
+
 		const reset = () => {
+			if (did_reset) {
+				w.svelte_boundary_reset_noop();
+				return;
+			}
+
+			did_reset = true;
+
+			if (calling_on_error) {
+				e.svelte_boundary_reset_onerror();
+			}
+
 			this.#pending_count = 0;
 
 			if (this.#failed_effect !== null) {
@@ -290,32 +334,15 @@ export class Boundary {
 
 		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);
 		}
 
-		if (this.#main_effect) {
-			destroy_effect(this.#main_effect);
-			this.#main_effect = null;
-		}
-
-		if (this.#pending_effect) {
-			destroy_effect(this.#pending_effect);
-			this.#pending_effect = null;
-		}
-
-		if (this.#failed_effect) {
-			destroy_effect(this.#failed_effect);
-			this.#failed_effect = null;
-		}
-
-		if (hydrating) {
-			set_hydrate_node(this.#hydrate_open);
-			next();
-			set_hydrate_node(remove_nodes());
-		}
-
 		if (failed) {
 			queue_micro_task(() => {
 				this.#failed_effect = this.#run(() => {
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index a512839181..6c83a453d5 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -53,7 +53,9 @@ export function invoke_error_boundary(error, effect) {
 			try {
 				/** @type {Boundary} */ (effect.b).error(error);
 				return;
-			} catch {}
+			} catch (e) {
+				error = e;
+			}
 		}
 
 		effect = effect.parent;
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index edd66a7400..937971da5e 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -423,4 +423,20 @@ export function state_unsafe_mutation() {
 	} else {
 		throw new Error(`https://svelte.dev/e/state_unsafe_mutation`);
 	}
+}
+
+/**
+ * A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+ * @returns {never}
+ */
+export function svelte_boundary_reset_onerror() {
+	if (DEV) {
+		const error = new Error(`svelte_boundary_reset_onerror\nA \`<svelte:boundary>\` \`reset\` function cannot be called while an error is still being handled\nhttps://svelte.dev/e/svelte_boundary_reset_onerror`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`);
+	}
 }
\ No newline at end of file
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index dfd50a8722..dfa2a3752e 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -224,6 +224,17 @@ export function state_proxy_equality_mismatch(operator) {
 	}
 }
 
+/**
+ * A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+ */
+export function svelte_boundary_reset_noop() {
+	if (DEV) {
+		console.warn(`%c[svelte] svelte_boundary_reset_noop\n%cA \`<svelte:boundary>\` \`reset\` function only resets the boundary the first time it is called\nhttps://svelte.dev/e/svelte_boundary_reset_noop`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`);
+	}
+}
+
 /**
  * The `slide` transition does not work correctly for elements with `display: %value%`
  * @param {string} value
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 8d7b3544bc..05c1a982ec 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -489,10 +489,11 @@ async function run_test_variant(
 					'Expected component to unmount and leave nothing behind after it was destroyed'
 				);
 
-				// TODO: This seems useless, unhandledRejection is only triggered on the next task
-				// by which time the test has already finished and the next test resets it to null above
+				// uncaught errors like during template effects flush
 				if (unhandled_rejection) {
-					throw unhandled_rejection; // eslint-disable-line no-unsafe-finally
+					if (!config.expect_unhandled_rejections) {
+						throw unhandled_rejection; // eslint-disable-line no-unsafe-finally
+					}
 				}
 			}
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js
new file mode 100644
index 0000000000..092d7ad37d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+
+		assert.throws(flushSync, 'svelte_boundary_reset_onerror');
+
+		// boundary content empty; only button remains
+		assert.htmlEqual(target.innerHTML, `<button>trigger throw</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte
new file mode 100644
index 0000000000..f91048a9e7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let must_throw = $state(false);
+
+	function throw_error() {
+		throw new Error("error on template render");
+	}
+</script>
+
+<svelte:boundary onerror={(_, reset) => reset()}>
+	{must_throw ? throw_error() : 'normal content'}
+
+	{#snippet failed()}
+		<div>err</div>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={() => must_throw = true}>trigger throw</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js
new file mode 100644
index 0000000000..687961e721
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js
@@ -0,0 +1,28 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		normal content
+		<button>toggle</button>
+	`,
+
+	async test({ assert, target, warnings }) {
+		const [btn] = target.querySelectorAll('button');
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `<div>err</div><button>toggle</button>`);
+		assert.deepEqual(warnings, []);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `normal content <button>toggle</button>`);
+		assert.deepEqual(warnings, []);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `<div>err</div><button>toggle</button>`);
+
+		assert.deepEqual(warnings, [
+			'A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte
new file mode 100644
index 0000000000..c1462eaf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let must_throw = $state(false);
+	let reset = $state(null);
+
+	function throw_error() {
+		throw new Error("error on template render");
+	}
+</script>
+
+<svelte:boundary onerror={console.error}>
+	<svelte:boundary onerror={(_, fn) => (reset = fn)}>
+		{must_throw ? throw_error() : 'normal content'}
+
+		{#snippet failed()}
+			<div>err</div>
+		{/snippet}
+	</svelte:boundary>
+</svelte:boundary>
+
+<button
+	onclick={() => {
+		must_throw = !must_throw;
+		if (reset) reset();
+	}}>
+	toggle
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js
new file mode 100644
index 0000000000..844e6981bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, warnings }) {
+		const [toggle] = target.querySelectorAll('button');
+
+		flushSync(() => toggle.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>toggle</button><p>yikes!</p><button>reset</button>`
+		);
+
+		const [, reset] = target.querySelectorAll('button');
+		flushSync(() => reset.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>toggle</button><p>yikes!</p><button>reset</button>`
+		);
+
+		flushSync(() => toggle.click());
+
+		const [, reset2] = target.querySelectorAll('button');
+		flushSync(() => reset2.click());
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><p>hello!</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte
new file mode 100644
index 0000000000..91479a631a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let must_throw = $state(false);
+
+	function throw_error() {
+		throw new Error('yikes!');
+	}
+</script>
+
+<button onclick={() => must_throw = !must_throw}>toggle</button>
+
+<svelte:boundary>
+	<p>{must_throw ? throw_error() : 'hello!'}</p>
+
+	{#snippet failed(error, reset)}
+		<p>{error.message}</p>
+		<button onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>
+
+

From f3431709279df1311f591c1a6b47e4c0caa9b45e Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Thu, 17 Jul 2025 01:56:24 -0700
Subject: [PATCH 49/76] docs: fix `$effect.root` jsdoc formatting (#16411)

---
 packages/svelte/src/ambient.d.ts | 12 ++++++------
 packages/svelte/types/index.d.ts | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 7c3b941ed1..ad32eaa56f 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -295,13 +295,13 @@ declare namespace $effect {
 	 *   let count = $state(0);
 	 *
 	 *   const cleanup = $effect.root(() => {
-	 *	    $effect(() => {
-	 *				console.log(count);
-	 *			})
+	 *     $effect(() => {
+	 *       console.log(count);
+	 *     })
 	 *
-	 *      return () => {
-	 *        console.log('effect root cleanup');
-	 * 			}
+	 *     return () => {
+	 *       console.log('effect root cleanup');
+	 *     }
 	 *   });
 	 * </script>
 	 *
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index a8b769d6d4..9ea45af7e6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -3369,13 +3369,13 @@ declare namespace $effect {
 	 *   let count = $state(0);
 	 *
 	 *   const cleanup = $effect.root(() => {
-	 *	    $effect(() => {
-	 *				console.log(count);
-	 *			})
+	 *     $effect(() => {
+	 *       console.log(count);
+	 *     })
 	 *
-	 *      return () => {
-	 *        console.log('effect root cleanup');
-	 * 			}
+	 *     return () => {
+	 *       console.log('effect root cleanup');
+	 *     }
 	 *   });
 	 * </script>
 	 *

From bdf6adb411cd5fd4f227778d87c116dd16c533d2 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 17 Jul 2025 11:03:53 +0200
Subject: [PATCH 50/76] fix: delegate functions with shadowed variables if
 declared locally (#16417)

---
 .changeset/fast-parrots-draw.md               |  5 ++++
 .../phases/2-analyze/visitors/Attribute.js    |  9 ++++--
 .../_expected/client/index.svelte.js          | 28 +++++++++++++++++++
 .../_expected/server/index.svelte.js          | 13 +++++++++
 .../index.svelte                              | 12 ++++++++
 5 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fast-parrots-draw.md
 create mode 100644 packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte

diff --git a/.changeset/fast-parrots-draw.md b/.changeset/fast-parrots-draw.md
new file mode 100644
index 0000000000..e56a35ff9b
--- /dev/null
+++ b/.changeset/fast-parrots-draw.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: delegate functions with shadowed variables if declared locally
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 773aa59744..b13f3f89b6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -192,8 +192,13 @@ function get_delegated_event(event_name, handler, context) {
 			return unhoisted;
 		}
 
-		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+		// If we are referencing a binding that is shadowed in another scope then bail out (unless it's declared within the function).
+		if (
+			local_binding !== null &&
+			binding !== null &&
+			local_binding.node !== binding.node &&
+			scope.declarations.get(reference) !== binding
+		) {
 			return unhoisted;
 		}
 
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..0d95d8d335
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
@@ -0,0 +1,28 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var on_click = (e) => {
+	const index = Number(e.currentTarget.dataset.index);
+
+	console.log(index);
+};
+
+var root_1 = $.from_html(`<button type="button">B</button>`);
+
+export default function Delegated_locally_declared_shadowed($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.each(node, 0, () => ({ length: 1 }), $.index, ($$anchor, $$item, index) => {
+		var button = root_1();
+
+		$.set_attribute(button, 'data-index', index);
+		button.__click = [on_click];
+		$.append($$anchor, button);
+	});
+
+	$.append($$anchor, fragment);
+}
+
+$.delegate(['click']);
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..e465af6f8b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
@@ -0,0 +1,13 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Delegated_locally_declared_shadowed($$payload) {
+	const each_array = $.ensure_array_like({ length: 1 });
+
+	$$payload.out += `<!--[-->`;
+
+	for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+		$$payload.out += `<button type="button"${$.attr('data-index', index)}>B</button>`;
+	}
+
+	$$payload.out += `<!--]-->`;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte
new file mode 100644
index 0000000000..d870a6b270
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte
@@ -0,0 +1,12 @@
+<script lang="ts"></script>
+
+{#each { length: 1 }, index}
+	<button
+		type="button"
+		data-index={index}
+		onclick={(e) => {
+			const index = Number(e.currentTarget.dataset.index)!;
+			console.log(index);
+		}}>B</button
+	>
+{/each}

From 65e524929661fefcdeaadfa8aa79cc06b26d9a76 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 17 Jul 2025 13:24:21 +0200
Subject: [PATCH 51/76] docs: remove mention of deprecated way to enhance
 typings (#16416)

Since #9070 it's prefered to use the "enhance svelte elements" way of doing things. That's so long ago that we can now remove the other option from the docs, and eventually remove the backwards compatibility that still allows the old way of doing things.
---
 documentation/docs/07-misc/03-typescript.md | 33 +++++++--------------
 packages/svelte/svelte-html.d.ts            |  1 +
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index ff33885fb8..49ecd8adb5 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -254,39 +254,24 @@ To declare that a variable expects the constructor or instance type of a compone
 
 Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
 
-In case this is a custom or experimental attribute/event, you can enhance the typings like this:
-
-```ts
-/// file: additional-svelte-typings.d.ts
-declare namespace svelteHTML {
-	// enhance elements
-	interface IntrinsicElements {
-		'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
-	}
-	// enhance attributes
-	interface HTMLAttributes<T> {
-		// If you want to use the beforeinstallprompt event
-		onbeforeinstallprompt?: (event: any) => any;
-		// If you want to use myCustomAttribute={..} (note: all lowercase)
-		mycustomattribute?: any; // You can replace any with something more specific if you like
-	}
-}
-```
-
-Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
-
-You can also declare the typings by augmenting the `svelte/elements` module like this:
+In case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this:
 
 ```ts
 /// file: additional-svelte-typings.d.ts
 import { HTMLButtonAttributes } from 'svelte/elements';
 
 declare module 'svelte/elements' {
+	// add a new element
 	export interface SvelteHTMLElements {
 		'custom-button': HTMLButtonAttributes;
 	}
 
-	// allows for more granular control over what element to add the typings to
+	// add a new global attribute that is available on all html elements
+	export interface HTMLAttributes<T> {
+		globalattribute?: string;
+	}
+
+	// add a new attribute for button elements
 	export interface HTMLButtonAttributes {
 		veryexperimentalattribute?: string;
 	}
@@ -294,3 +279,5 @@ declare module 'svelte/elements' {
 
 export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented
 ```
+
+Then make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 5042eaa4b8..476b24e275 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -50,6 +50,7 @@ declare global {
 				? SVGElementTagNameMap[Key]
 				: any;
 
+		// TODO remove HTMLAttributes/SVGAttributes/IntrinsicElements in Svelte 6
 		// For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		interface HTMLAttributes<T extends EventTarget = any> {}

From 0ae1d5afffae954d6691b19b71531e0e287c5fa3 Mon Sep 17 00:00:00 2001
From: "Ahmad S." <navorite@gmail.com>
Date: Thu, 17 Jul 2025 14:25:01 +0300
Subject: [PATCH 52/76] chore: cleanup obselete stuff (#16412)

* Update vitest.config.js

* Update vitest.config.js

* cleanup

* woops

* Update eslint.config.js

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .prettierignore       | 9 ---------
 .prettierrc           | 6 ------
 .vscode/settings.json | 3 ---
 eslint.config.js      | 6 +-----
 vitest.config.js      | 2 +-
 5 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 72cd10aca8..5e1d9b1aa7 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -28,15 +28,6 @@ packages/svelte/types
 packages/svelte/compiler/index.js
 playgrounds/sandbox/src/*
 
-# sites/svelte.dev
-sites/svelte.dev/static/svelte-app.json
-sites/svelte.dev/scripts/svelte-app/
-sites/svelte.dev/src/routes/_components/Supporters/contributors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/contributors.js
-sites/svelte.dev/src/routes/_components/Supporters/donors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/donors.js
-sites/svelte.dev/src/lib/generated
-
 **/node_modules
 **/.svelte-kit
 **/.vercel
diff --git a/.prettierrc b/.prettierrc
index c4fd5d9f2f..c2d09a4289 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -17,12 +17,6 @@
 				"useTabs": false,
 				"tabWidth": 2
 			}
-		},
-		{
-			"files": ["sites/svelte-5-preview/src/routes/docs/content/**/*.md"],
-			"options": {
-				"printWidth": 60
-			}
 		}
 	]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 21a2a11c84..4d360cbc8a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,3 @@
 {
-	"search.exclude": {
-		"sites/svelte-5-preview/static/*": true
-	},
 	"typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/eslint.config.js b/eslint.config.js
index b0f25bab03..5241cb43a6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -103,11 +103,7 @@ export default [
 			'*.config.js',
 			// documentation can contain invalid examples
 			'documentation',
-			// contains a fork of the REPL which doesn't adhere to eslint rules
-			'sites/svelte-5-preview/**',
-			'tmp/**',
-			// wasn't checked previously, reenable at some point
-			'sites/svelte.dev/**'
+			'tmp/**'
 		]
 	}
 ];
diff --git a/vitest.config.js b/vitest.config.js
index caeda27e30..ba1edb355b 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -39,7 +39,7 @@ export default defineConfig({
 			provider: 'v8',
 			reporter: ['lcov', 'html'],
 			include: ['packages/svelte/src/**'],
-			reportsDirectory: 'sites/svelte-5-preview/static/coverage',
+			reportsDirectory: 'coverage',
 			reportOnFailure: true
 		}
 	}

From 6c9717a91f2f6ae10641d1cf502ba13d227fbe45 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Jul 2025 07:26:50 -0400
Subject: [PATCH 53/76] Version Packages (#16418)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fast-parrots-draw.md  |  5 -----
 .changeset/new-dogs-obey.md      |  5 -----
 .changeset/polite-toys-report.md |  5 -----
 packages/svelte/CHANGELOG.md     | 10 ++++++++++
 packages/svelte/package.json     |  2 +-
 packages/svelte/src/version.js   |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/fast-parrots-draw.md
 delete mode 100644 .changeset/new-dogs-obey.md
 delete mode 100644 .changeset/polite-toys-report.md

diff --git a/.changeset/fast-parrots-draw.md b/.changeset/fast-parrots-draw.md
deleted file mode 100644
index e56a35ff9b..0000000000
--- a/.changeset/fast-parrots-draw.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: delegate functions with shadowed variables if declared locally
diff --git a/.changeset/new-dogs-obey.md b/.changeset/new-dogs-obey.md
deleted file mode 100644
index aa9a3d73b9..0000000000
--- a/.changeset/new-dogs-obey.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: handle error in correct boundary after reset
diff --git a/.changeset/polite-toys-report.md b/.changeset/polite-toys-report.md
deleted file mode 100644
index bf5386e069..0000000000
--- a/.changeset/polite-toys-report.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: make `<svelte:boundary>` reset function a noop after the first call
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 56f91c395f..f78255e7fe 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.36.6
+
+### Patch Changes
+
+- fix: delegate functions with shadowed variables if declared locally ([#16417](https://github.com/sveltejs/svelte/pull/16417))
+
+- fix: handle error in correct boundary after reset ([#16171](https://github.com/sveltejs/svelte/pull/16171))
+
+- fix: make `<svelte:boundary>` reset function a noop after the first call ([#16171](https://github.com/sveltejs/svelte/pull/16171))
+
 ## 5.36.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2a1b3cf9e5..aec8a34478 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.36.5",
+  "version": "5.36.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4d6811c409..b0e4ebbab8 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.36.5';
+export const VERSION = '5.36.6';
 export const PUBLIC_VERSION = '5';

From 98fb1b1f8b95352c9882b653b45b230609fc95cf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 17 Jul 2025 12:14:03 -0400
Subject: [PATCH 54/76] fix: allow instrinsic `<svelte:...>` elements to
 inherit from `SvelteHTMLElements` (#16424)

---
 .changeset/funny-masks-build.md  |  5 +++++
 packages/svelte/svelte-html.d.ts | 12 ------------
 2 files changed, 5 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/funny-masks-build.md

diff --git a/.changeset/funny-masks-build.md b/.changeset/funny-masks-build.md
new file mode 100644
index 0000000000..07658e2540
--- /dev/null
+++ b/.changeset/funny-masks-build.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow instrinsic `<svelte:...>` elements to inherit from `SvelteHTMLElements`
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 476b24e275..ebd58c8cc0 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -239,18 +239,6 @@ declare global {
 			use: HTMLProps<'use', SVGAttributes>;
 			view: HTMLProps<'view', SVGAttributes>;
 
-			// Svelte specific
-			'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>;
-			'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>;
-			'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>;
-			'svelte:fragment': { slot?: string };
-			'svelte:head': { [name: string]: any };
-			'svelte:boundary': {
-				onerror?: (error: unknown, reset: () => void) => void;
-				failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
-			};
-			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
-
 			[name: string]: { [name: string]: any };
 		}
 	}

From 93a8a495d2365c28588f2858da6bc197f40c3d4a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Jul 2025 12:21:43 -0400
Subject: [PATCH 55/76] Version Packages (#16426)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/funny-masks-build.md | 5 -----
 packages/svelte/CHANGELOG.md    | 6 ++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/funny-masks-build.md

diff --git a/.changeset/funny-masks-build.md b/.changeset/funny-masks-build.md
deleted file mode 100644
index 07658e2540..0000000000
--- a/.changeset/funny-masks-build.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow instrinsic `<svelte:...>` elements to inherit from `SvelteHTMLElements`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f78255e7fe..a82d9ddefe 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.36.7
+
+### Patch Changes
+
+- fix: allow instrinsic `<svelte:...>` elements to inherit from `SvelteHTMLElements` ([#16424](https://github.com/sveltejs/svelte/pull/16424))
+
 ## 5.36.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index aec8a34478..83567a6123 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.36.6",
+  "version": "5.36.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b0e4ebbab8..88cdc069a0 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.36.6';
+export const VERSION = '5.36.7';
 export const PUBLIC_VERSION = '5';

From c2da1ebb85d65ef044766d3f920cb935df65e359 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 18 Jul 2025 18:07:06 +0200
Subject: [PATCH 56/76] fix: keep effect in the graph if it has an abort
 controller (#16430)

---
 .changeset/four-kings-drum.md                        |  5 +++++
 .../svelte/src/internal/client/reactivity/batch.js   |  4 +++-
 .../dependencyless-abort-signal/Component.svelte     |  8 ++++++++
 .../samples/dependencyless-abort-signal/_config.js   | 12 ++++++++++++
 .../samples/dependencyless-abort-signal/main.svelte  | 10 ++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/four-kings-drum.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte

diff --git a/.changeset/four-kings-drum.md b/.changeset/four-kings-drum.md
new file mode 100644
index 0000000000..8c7343145e
--- /dev/null
+++ b/.changeset/four-kings-drum.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: keep effect in the graph if it has an abort controller
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index cdce971b18..ed82af94ed 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -532,7 +532,9 @@ function flush_queued_effects(effects) {
 				// here (rather than in `update_effect`) allows us to skip the work for
 				// immediate effects.
 				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-					if (effect.teardown === null) {
+					// if there's no teardown or abort controller we completely unlink
+					// the effect from the graph
+					if (effect.teardown === null && effect.ac === null) {
 						// remove this effect from the graph
 						unlink_effect(effect);
 					} else {
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
new file mode 100644
index 0000000000..b184e0e9b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	$effect(() => {
+		const signal = getAbortSignal()
+		signal.addEventListener('abort', () => console.log('abort'))
+	})
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
new file mode 100644
index 0000000000..6eb4b06712
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, ['abort']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte
new file mode 100644
index 0000000000..99ea3fabb4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+
+	let show = $state(true)
+</script>
+
+<button onclick={() => (show = !show)}>click</button>
+{#if show}
+	<Component />
+{/if}

From f5db130e2d233564437d64430a9e54b8b8b6c52a Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Fri, 18 Jul 2025 10:09:10 -0600
Subject: [PATCH 57/76] chore: Switch `payload.out` to an array (#16428)

* chore: Switch `payload.out` to an array

* Apply suggestions from code review

* changeset
---
 .changeset/old-dots-sin.md                    |  5 ++
 .../3-transform/server/visitors/EachBlock.js  |  4 +-
 .../3-transform/server/visitors/IfBlock.js    |  6 ++-
 .../server/visitors/shared/utils.js           | 38 +++++++++-----
 .../src/internal/server/blocks/snippet.js     |  8 +--
 packages/svelte/src/internal/server/dev.js    |  2 +-
 packages/svelte/src/internal/server/index.js  | 51 ++++++++++---------
 .../svelte/src/internal/server/payload.js     | 14 ++---
 .../_expected/server/index.svelte.js          |  4 +-
 .../_expected/server/index.svelte.js          |  4 +-
 .../_expected/server/index.svelte.js          |  6 +--
 .../_expected/server/main.svelte.js           |  2 +-
 .../_expected/server/index.svelte.js          |  6 +--
 .../_expected/server/index.svelte.js          |  6 +--
 .../_expected/server/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../hmr/_expected/server/index.svelte.js      |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../purity/_expected/server/index.svelte.js   |  4 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 23 files changed, 103 insertions(+), 73 deletions(-)
 create mode 100644 .changeset/old-dots-sin.md

diff --git a/.changeset/old-dots-sin.md b/.changeset/old-dots-sin.md
new file mode 100644
index 0000000000..f7e2933897
--- /dev/null
+++ b/.changeset/old-dots-sin.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: Switch `payload.out` to an array
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 ac6c9891a7..ee0086de2e 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
@@ -44,12 +44,12 @@ export function EachBlock(node, context) {
 	);
 
 	if (node.fallback) {
-		const open = b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open));
+		const open = b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open));
 
 		const fallback = /** @type {BlockStatement} */ (context.visit(node.fallback));
 
 		fallback.body.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
+			b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 		);
 
 		state.template.push(
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 508dcc0fdd..8c082f38d5 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
@@ -17,10 +17,12 @@ export function IfBlock(node, context) {
 		? /** @type {BlockStatement} */ (context.visit(node.alternate))
 		: b.block([]);
 
-	consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
+	consequent.body.unshift(
+		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open))
+	);
 
 	alternate.body.unshift(
-		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
+		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 	);
 
 	context.state.template.push(b.if(test, consequent, alternate), block_close);
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 8fcf8efa68..8a8633dd1a 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
@@ -96,10 +96,10 @@ function is_statement(node) {
 /**
  * @param {Array<Statement | Expression>} template
  * @param {Identifier} out
- * @param {AssignmentOperator} operator
+ * @param {AssignmentOperator | 'push'} operator
  * @returns {Statement[]}
  */
-export function build_template(template, out = b.id('$$payload.out'), operator = '+=') {
+export function build_template(template, out = b.id('$$payload.out'), operator = 'push') {
 	/** @type {string[]} */
 	let strings = [];
 
@@ -110,18 +110,32 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
 	const statements = [];
 
 	const flush = () => {
-		statements.push(
-			b.stmt(
-				b.assignment(
-					operator,
-					out,
-					b.template(
-						strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
-						expressions
+		if (operator === 'push') {
+			statements.push(
+				b.stmt(
+					b.call(
+						b.member(out, b.id('push')),
+						b.template(
+							strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
+							expressions
+						)
 					)
 				)
-			)
-		);
+			);
+		} else {
+			statements.push(
+				b.stmt(
+					b.assignment(
+						operator,
+						out,
+						b.template(
+							strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
+							expressions
+						)
+					)
+				)
+			);
+		}
 		strings = [];
 		expressions = [];
 	};
diff --git a/packages/svelte/src/internal/server/blocks/snippet.js b/packages/svelte/src/internal/server/blocks/snippet.js
index 9e96ae3430..bb82ca97d0 100644
--- a/packages/svelte/src/internal/server/blocks/snippet.js
+++ b/packages/svelte/src/internal/server/blocks/snippet.js
@@ -15,8 +15,10 @@ export function createRawSnippet(fn) {
 	// @ts-expect-error the types are a lie
 	return (/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
 		var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
-		payload.out += fn(...getters)
-			.render()
-			.trim();
+		payload.out.push(
+			fn(...getters)
+				.render()
+				.trim()
+		);
 	};
 }
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index 3c320f9698..2a0cb057a3 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -40,7 +40,7 @@ function print_error(payload, message) {
 
 	// eslint-disable-next-line no-console
 	console.error(message);
-	payload.head.out += `<script>console.error(${JSON.stringify(message)})</script>`;
+	payload.head.out.push(`<script>console.error(${JSON.stringify(message)})</script>`);
 }
 
 export function reset_elements() {
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 9942882d26..62ee22d6fc 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -33,23 +33,23 @@ const INVALID_ATTR_NAME_CHAR_REGEX =
  * @returns {void}
  */
 export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
-	payload.out += '<!---->';
+	payload.out.push('<!---->');
 
 	if (tag) {
-		payload.out += `<${tag}`;
+		payload.out.push(`<${tag}`);
 		attributes_fn();
-		payload.out += `>`;
+		payload.out.push(`>`);
 
 		if (!is_void(tag)) {
 			children_fn();
 			if (!is_raw_text_element(tag)) {
-				payload.out += EMPTY_COMMENT;
+				payload.out.push(EMPTY_COMMENT);
 			}
-			payload.out += `</${tag}>`;
+			payload.out.push(`</${tag}>`);
 		}
 	}
 
-	payload.out += '<!---->';
+	payload.out.push('<!---->');
 }
 
 /**
@@ -72,7 +72,7 @@ export function render(component, options = {}) {
 
 		const prev_on_destroy = on_destroy;
 		on_destroy = [];
-		payload.out += BLOCK_OPEN;
+		payload.out.push(BLOCK_OPEN);
 
 		let reset_reset_element;
 
@@ -97,20 +97,22 @@ export function render(component, options = {}) {
 			reset_reset_element();
 		}
 
-		payload.out += BLOCK_CLOSE;
+		payload.out.push(BLOCK_CLOSE);
 		for (const cleanup of on_destroy) cleanup();
 		on_destroy = prev_on_destroy;
 
-		let head = payload.head.out + payload.head.title;
+		let head = payload.head.out.join('') + payload.head.title;
 
 		for (const { hash, code } of payload.css) {
 			head += `<style id="${hash}">${code}</style>`;
 		}
 
+		const body = payload.out.join('');
+
 		return {
 			head,
-			html: payload.out,
-			body: payload.out
+			html: body,
+			body: body
 		};
 	} finally {
 		abort();
@@ -124,9 +126,9 @@ export function render(component, options = {}) {
  */
 export function head(payload, fn) {
 	const head_payload = payload.head;
-	head_payload.out += BLOCK_OPEN;
+	head_payload.out.push(BLOCK_OPEN);
 	fn(head_payload);
-	head_payload.out += BLOCK_CLOSE;
+	head_payload.out.push(BLOCK_CLOSE);
 }
 
 /**
@@ -141,21 +143,21 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	const styles = style_object_to_string(props);
 
 	if (is_html) {
-		payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
+		payload.out.push(`<svelte-css-wrapper style="display: contents; ${styles}">`);
 	} else {
-		payload.out += `<g style="${styles}">`;
+		payload.out.push(`<g style="${styles}">`);
 	}
 
 	if (dynamic) {
-		payload.out += '<!---->';
+		payload.out.push('<!---->');
 	}
 
 	component();
 
 	if (is_html) {
-		payload.out += `<!----></svelte-css-wrapper>`;
+		payload.out.push(`<!----></svelte-css-wrapper>`);
 	} else {
-		payload.out += `<!----></g>`;
+		payload.out.push(`<!----></g>`);
 	}
 }
 
@@ -440,13 +442,13 @@ export function bind_props(props_parent, props_now) {
  */
 function await_block(payload, promise, pending_fn, then_fn) {
 	if (is_promise(promise)) {
-		payload.out += BLOCK_OPEN;
+		payload.out.push(BLOCK_OPEN);
 		promise.then(null, noop);
 		if (pending_fn !== null) {
 			pending_fn();
 		}
 	} else if (then_fn !== null) {
-		payload.out += BLOCK_OPEN_ELSE;
+		payload.out.push(BLOCK_OPEN_ELSE);
 		then_fn(promise);
 	}
 }
@@ -493,7 +495,7 @@ export function once(get_value) {
  */
 export function props_id(payload) {
 	const uid = payload.uid();
-	payload.out += '<!--#' + uid + '-->';
+	payload.out.push('<!--#' + uid + '-->');
 	return uid;
 }
 
@@ -562,10 +564,13 @@ export function valueless_option(payload, children) {
 
 	children();
 
-	var body = payload.out.slice(i);
+	var body = payload.out.slice(i).join('');
 
 	if (body.replace(/<!---->/g, '') === payload.select_value) {
 		// replace '>' with ' selected>' (closing tag will be added later)
-		payload.out = payload.out.slice(0, i - 1) + ' selected>' + body;
+		var last_item = payload.out[i - 1];
+		payload.out[i - 1] = last_item.slice(0, -1) + ' selected>';
+		// Remove the old items after position i and add the body as a single item
+		payload.out.splice(i, payload.out.length - i, body);
 	}
 }
diff --git a/packages/svelte/src/internal/server/payload.js b/packages/svelte/src/internal/server/payload.js
index a31120ae16..195488e061 100644
--- a/packages/svelte/src/internal/server/payload.js
+++ b/packages/svelte/src/internal/server/payload.js
@@ -1,11 +1,12 @@
 export class HeadPayload {
 	/** @type {Set<{ hash: string; code: string }>} */
 	css = new Set();
-	out = '';
+	/** @type {string[]} */
+	out = [];
 	uid = () => '';
 	title = '';
 
-	constructor(css = new Set(), out = '', title = '', uid = () => '') {
+	constructor(css = new Set(), /** @type {string[]} */ out = [], title = '', uid = () => '') {
 		this.css = css;
 		this.out = out;
 		this.title = title;
@@ -16,7 +17,8 @@ export class HeadPayload {
 export class Payload {
 	/** @type {Set<{ hash: string; code: string }>} */
 	css = new Set();
-	out = '';
+	/** @type {string[]} */
+	out = [];
 	uid = () => '';
 	select_value = undefined;
 
@@ -36,12 +38,12 @@ export class Payload {
 export function copy_payload({ out, css, head, uid }) {
 	const payload = new Payload();
 
-	payload.out = out;
+	payload.out = [...out];
 	payload.css = new Set(css);
 	payload.uid = uid;
 
 	payload.head = new HeadPayload();
-	payload.head.out = head.out;
+	payload.head.out = [...head.out];
 	payload.head.css = new Set(head.css);
 	payload.head.title = head.title;
 	payload.head.uid = head.uid;
@@ -56,7 +58,7 @@ export function copy_payload({ out, css, head, uid }) {
  * @returns {void}
  */
 export function assign_payload(p1, p2) {
-	p1.out = p2.out;
+	p1.out = [...p2.out];
 	p1.css = p2.css;
 	p1.head = p2.head;
 	p1.uid = p2.uid;
diff --git a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
index 4b6e32d58e..cc2628c852 100644
--- a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
@@ -8,7 +8,7 @@ export default function Await_block_scope($$payload) {
 		counter.count += 1;
 	}
 
-	$$payload.out += `<button>clicks: ${$.escape(counter.count)}</button> `;
+	$$payload.out.push(`<button>clicks: ${$.escape(counter.count)}</button> `);
 	$.await($$payload, promise, () => {}, (counter) => {});
-	$$payload.out += `<!--]--> ${$.escape(counter.count)}`;
+	$$payload.out.push(`<!--]--> ${$.escape(counter.count)}`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
index e2c0ee29a5..c0db7d2fd5 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
@@ -2,7 +2,7 @@ import * as $ from 'svelte/internal/server';
 import TextInput from './Child.svelte';
 
 function snippet($$payload) {
-	$$payload.out += `<!---->Something`;
+	$$payload.out.push(`<!---->Something`);
 }
 
 export default function Bind_component_snippet($$payload) {
@@ -23,7 +23,7 @@ export default function Bind_component_snippet($$payload) {
 			}
 		});
 
-		$$payload.out += `<!----> value: ${$.escape(value)}`;
+		$$payload.out.push(`<!----> value: ${$.escape(value)}`);
 	}
 
 	do {
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
index e465af6f8b..ac3dfcd2cb 100644
--- a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
@@ -3,11 +3,11 @@ import * as $ from 'svelte/internal/server';
 export default function Delegated_locally_declared_shadowed($$payload) {
 	const each_array = $.ensure_array_like({ length: 1 });
 
-	$$payload.out += `<!--[-->`;
+	$$payload.out.push(`<!--[-->`);
 
 	for (let index = 0, $$length = each_array.length; index < $$length; index++) {
-		$$payload.out += `<button type="button"${$.attr('data-index', index)}>B</button>`;
+		$$payload.out.push(`<button type="button"${$.attr('data-index', index)}>B</button>`);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$payload.out.push(`<!--]-->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
index cf731d8187..9c837d4e1d 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
@@ -6,5 +6,5 @@ export default function Main($$payload) {
 
 	let y = () => 'test';
 
-	$$payload.out += `<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`;
+	$$payload.out.push(`<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
index 3431e36833..8fa0c5f28c 100644
--- a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
@@ -3,11 +3,11 @@ import * as $ from 'svelte/internal/server';
 export default function Each_index_non_null($$payload) {
 	const each_array = $.ensure_array_like(Array(10));
 
-	$$payload.out += `<!--[-->`;
+	$$payload.out.push(`<!--[-->`);
 
 	for (let i = 0, $$length = each_array.length; i < $$length; i++) {
-		$$payload.out += `<p>index: ${$.escape(i)}</p>`;
+		$$payload.out.push(`<p>index: ${$.escape(i)}</p>`);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$payload.out.push(`<!--]-->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
index 4386c22ebe..6dbe8130da 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
@@ -3,13 +3,13 @@ import * as $ from 'svelte/internal/server';
 export default function Each_string_template($$payload) {
 	const each_array = $.ensure_array_like(['foo', 'bar', 'baz']);
 
-	$$payload.out += `<!--[-->`;
+	$$payload.out.push(`<!--[-->`);
 
 	for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 		let thing = each_array[$$index];
 
-		$$payload.out += `<!---->${$.escape(thing)}, `;
+		$$payload.out.push(`<!---->${$.escape(thing)}, `);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$payload.out.push(`<!--]-->`);
 }
\ 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 7d37abd97b..ce4f09ed1d 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
@@ -15,7 +15,7 @@ export default function Function_prop_no_getter($$payload) {
 		onmouseenter: () => count = plusOne(count),
 
 		children: ($$payload) => {
-			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
+			$$payload.out.push(`<!---->clicks: ${$.escape(count)}`);
 		},
 
 		$$slots: { default: true }
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
index dc49c0c213..b1a0a5f9e6 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Functional_templating($$payload) {
-	$$payload.out += `<h1>hello</h1> <div class="potato"><p>child element</p> <p>another child element</p></div>`;
+	$$payload.out.push(`<h1>hello</h1> <div class="potato"><p>child element</p> <p>another child element</p></div>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
index 8766fb1300..30f6d6b74a 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Hello_world($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+	$$payload.out.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
index 959e0a403e..ea1d12c83b 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Hmr($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+	$$payload.out.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
index 3b23befcd4..18e01b4f72 100644
--- a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
@@ -4,5 +4,5 @@ export default function Nullish_coallescence_omittance($$payload) {
 	let name = 'world';
 	let count = 0;
 
-	$$payload.out += `<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`;
+	$$payload.out.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
index 9457378c0d..29b0d0d594 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
@@ -1,7 +1,7 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Purity($$payload) {
-	$$payload.out += `<p>0</p> <p>${$.escape(location.href)}</p> `;
+	$$payload.out.push(`<p>0</p> <p>${$.escape(location.href)}</p> `);
 	Child($$payload, { prop: encodeURIComponent('hello') });
-	$$payload.out += `<!---->`;
+	$$payload.out.push(`<!---->`);
 }
\ No newline at end of file
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 0532ec5aa9..bad475ec86 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,5 +3,5 @@ import * as $ from 'svelte/internal/server';
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<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><option value="a"${$.maybe_selected($$payload, 'a')}>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`;
+	$$payload.out.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><option value="a"${$.maybe_selected($$payload, 'a')}>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
index f814dd4f84..c2736b0f43 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
@@ -11,5 +11,5 @@ export default function State_proxy_literal($$payload) {
 		tpl = ``;
 	}
 
-	$$payload.out += `<input${$.attr('value', str)}/> <input${$.attr('value', tpl)}/> <button>reset</button>`;
+	$$payload.out.push(`<input${$.attr('value', str)}/> <input${$.attr('value', tpl)}/> <button>reset</button>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
index 6f019647f5..f7dc586026 100644
--- a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
@@ -12,5 +12,5 @@ export default function Text_nodes_deriveds($$payload) {
 		return count2;
 	}
 
-	$$payload.out += `<p>${$.escape(text1())}${$.escape(text2())}</p>`;
+	$$payload.out.push(`<p>${$.escape(text1())}${$.escape(text2())}</p>`);
 }
\ No newline at end of file

From 05f6436445d54a689ca12cced4bd359d15fc2e4c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 18 Jul 2025 12:35:20 -0400
Subject: [PATCH 58/76] Version Packages (#16435)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/four-kings-drum.md  | 5 -----
 .changeset/old-dots-sin.md     | 5 -----
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/four-kings-drum.md
 delete mode 100644 .changeset/old-dots-sin.md

diff --git a/.changeset/four-kings-drum.md b/.changeset/four-kings-drum.md
deleted file mode 100644
index 8c7343145e..0000000000
--- a/.changeset/four-kings-drum.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: keep effect in the graph if it has an abort controller
diff --git a/.changeset/old-dots-sin.md b/.changeset/old-dots-sin.md
deleted file mode 100644
index f7e2933897..0000000000
--- a/.changeset/old-dots-sin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: Switch `payload.out` to an array
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a82d9ddefe..6f6b824174 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.36.8
+
+### Patch Changes
+
+- fix: keep effect in the graph if it has an abort controller ([#16430](https://github.com/sveltejs/svelte/pull/16430))
+
+- chore: Switch `payload.out` to an array ([#16428](https://github.com/sveltejs/svelte/pull/16428))
+
 ## 5.36.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 83567a6123..df53b69e93 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.36.7",
+  "version": "5.36.8",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 88cdc069a0..005a06dc19 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.36.7';
+export const VERSION = '5.36.8';
 export const PUBLIC_VERSION = '5';

From 27c90dfa8322c9f225e22a730a776c4f4cbd2c5e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 19 Jul 2025 08:23:27 +0200
Subject: [PATCH 59/76] fix: don't reexecute derived with no dependencies on
 teardown (#16438)

The prior logic was wrong because it reexecuted when something was clean, but we want to when it's not. The remaining fix was to also check the reactions: If an effect is destroyed and it was the last reaction of a derived then the derived is set to `MAYBE_DIRTY`. We therefore also need to check if the derived still has anyone listening to it, and only then reexecute it.

Fixes #16363
---
 .changeset/clever-toys-decide.md              |  5 ++++
 .../svelte/src/internal/client/runtime.js     |  8 +++--
 .../props-derived-teardown/Teardown.svelte    | 11 +++++++
 .../samples/props-derived-teardown/_config.js | 30 +++++++++++++++++++
 .../props-derived-teardown/main.svelte        | 25 ++++++++++++++++
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/clever-toys-decide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte

diff --git a/.changeset/clever-toys-decide.md b/.changeset/clever-toys-decide.md
new file mode 100644
index 0000000000..57eb2b0058
--- /dev/null
+++ b/.changeset/clever-toys-decide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't reexecute derived with no dependencies on teardown
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 306b9b9dd9..3d3c89975c 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -653,8 +653,12 @@ export function get(signal) {
 
 			var value = derived.v;
 
-			// if the derived is dirty, or depends on the values that just changed, re-execute
-			if ((derived.f & CLEAN) !== 0 || depends_on_old_values(derived)) {
+			// if the derived is dirty and has reactions, or depends on the values that just changed, re-execute
+			// (a derived can be maybe_dirty due to the effect destroy removing its last reaction)
+			if (
+				((derived.f & CLEAN) === 0 && derived.reactions !== null) ||
+				depends_on_old_values(derived)
+			) {
 				value = execute_derived(derived);
 			}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte
new file mode 100644
index 0000000000..f71890d31e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte'
+	
+	const { callback } = $props()
+	
+	onDestroy(() => {
+		callback()
+	})
+</script>
+
+<div>teardown</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js
new file mode 100644
index 0000000000..c4e7d1307b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>click</button>
+				<div>teardown</div>
+				<div>1</div>
+				<div>2</div>
+				<div>3</div>
+			`
+		);
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>click</button>
+				<div>1</div>
+				<div>3</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte
new file mode 100644
index 0000000000..ff9e19b2c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity'
+	import Teardown from './Teardown.svelte'
+
+	class Test {
+		originalIds = $state.raw([1, 2, 3])
+		ids = $derived(new SvelteSet(this.originalIds))
+	}
+
+	let show = $state(true)
+	const test = new Test()
+
+	function callback() {
+		test.ids.delete(2)
+	}
+</script>
+
+
+<button onclick={() => (show = !show)}>click</button>
+{#if show}
+	<Teardown {callback} />
+{/if}
+{#each test.ids as id}
+	<div>{id}</div>
+{/each}

From 63cbe2108ac35204ffc99d16e5a520502ec7ade7 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 19 Jul 2025 11:35:43 -0700
Subject: [PATCH 60/76] fix: disallow `export { foo as default }` in `<script
 module>` (#16447)

* fix: disallow `export { foo as default }` in `<script module>`

* add test

* fix test
---
 .changeset/curly-buttons-burn.md                   |  5 +++++
 .../2-analyze/visitors/ExportNamedDeclaration.js   | 11 +++++++++++
 .../samples/default-export-indirect/errors.json    | 14 ++++++++++++++
 .../samples/default-export-indirect/input.svelte   |  4 ++++
 4 files changed, 34 insertions(+)
 create mode 100644 .changeset/curly-buttons-burn.md
 create mode 100644 packages/svelte/tests/validator/samples/default-export-indirect/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/default-export-indirect/input.svelte

diff --git a/.changeset/curly-buttons-burn.md b/.changeset/curly-buttons-burn.md
new file mode 100644
index 0000000000..f5d45256fa
--- /dev/null
+++ b/.changeset/curly-buttons-burn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: disallow `export { foo as default }` in `<script module>`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index 4b85894e52..5b8d9ba053 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -11,6 +11,17 @@ export function ExportNamedDeclaration(node, context) {
 	// visit children, so bindings are correctly initialised
 	context.next();
 
+	if (
+		context.state.ast_type &&
+		node.specifiers.some((specifier) =>
+			specifier.exported.type === 'Identifier'
+				? specifier.exported.name === 'default'
+				: specifier.exported.value === 'default'
+		)
+	) {
+		e.module_illegal_default_export(node);
+	}
+
 	if (node.declaration?.type === 'VariableDeclaration') {
 		// in runes mode, forbid `export let`
 		if (
diff --git a/packages/svelte/tests/validator/samples/default-export-indirect/errors.json b/packages/svelte/tests/validator/samples/default-export-indirect/errors.json
new file mode 100644
index 0000000000..6a8b2b3c13
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-indirect/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "module_illegal_default_export",
+		"message": "A component cannot have a default export",
+		"start": {
+			"line": 3,
+			"column": 4
+		},
+		"end": {
+			"line": 3,
+			"column": 32
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte b/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte
new file mode 100644
index 0000000000..72150edab1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte
@@ -0,0 +1,4 @@
+<script module>
+    let answer = 42;
+    export { answer as default};
+</script>
\ No newline at end of file

From ad0b58ee9606dd89038b055536e09c2b01112a0a Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:21:25 -0700
Subject: [PATCH 61/76] fix: move ownership validation into async component
 body (#16449)

* fix: move ownership validation into async component body

* add test

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/healthy-carpets-deny.md            |  5 +++++
 .../3-transform/client/transform-client.js    | 12 +++++-----
 .../async-ownership-validation/Child.svelte   |  7 ++++++
 .../async-ownership-validation/_config.js     | 22 +++++++++++++++++++
 .../async-ownership-validation/main.svelte    | 13 +++++++++++
 5 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/healthy-carpets-deny.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte

diff --git a/.changeset/healthy-carpets-deny.md b/.changeset/healthy-carpets-deny.md
new file mode 100644
index 0000000000..94ee865fe7
--- /dev/null
+++ b/.changeset/healthy-carpets-deny.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: move ownership validation into async component body
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 c42d1b95d8..7f25e6c0d2 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
@@ -364,6 +364,12 @@ export function client_component(analysis, options) {
 			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined))
 	]);
 
+	if (analysis.needs_mutation_validation) {
+		component_block.body.unshift(
+			b.var('$$ownership_validator', b.call('$.create_ownership_validator', b.id('$$props')))
+		);
+	}
+
 	const should_inject_context =
 		dev ||
 		analysis.needs_context ||
@@ -434,12 +440,6 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (analysis.needs_mutation_validation) {
-		component_block.body.unshift(
-			b.var('$$ownership_validator', b.call('$.create_ownership_validator', b.id('$$props')))
-		);
-	}
-
 	// we want the cleanup function for the stores to run as the very last thing
 	// so that it can effectively clean up the store subscription even after the user effects runs
 	if (should_inject_context) {
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte
new file mode 100644
index 0000000000..d4d5cf7554
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { object } = $props();
+
+	await 1;
+</script>
+
+<button onclick={() => object.count++}>clicks: {object.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js
new file mode 100644
index 0000000000..167eee8488
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		const [button] = target.querySelectorAll('button');
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 1</button>');
+		assert.deepEqual(warnings, [
+			'Mutating unbound props (`object`, at Child.svelte:7:23) is strongly discouraged. Consider using `bind:object={...}` in main.svelte (or using a callback) instead'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte
new file mode 100644
index 0000000000..ae6b43cbb1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state({ count: 0 });
+</script>
+
+<svelte:boundary>
+	<Child {object} />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>

From 307ec228ffc70502b6c13c56c8e62f1abebeb73b Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:24:47 -0700
Subject: [PATCH 62/76] fix: move store setup/cleanup outside of async
 component body (#16443)

---
 .changeset/new-fireants-bake.md               |  5 +++++
 .../3-transform/client/transform-client.js    | 21 ++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/new-fireants-bake.md

diff --git a/.changeset/new-fireants-bake.md b/.changeset/new-fireants-bake.md
new file mode 100644
index 0000000000..81bd596e43
--- /dev/null
+++ b/.changeset/new-fireants-bake.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: move store setup/cleanup outside of async component body
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 7f25e6c0d2..124438a9da 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
@@ -209,7 +209,8 @@ export function client_component(analysis, options) {
 
 	/** @type {ESTree.Statement[]} */
 	const store_setup = [];
-
+	/** @type {ESTree.Statement} */
+	let store_init = b.empty;
 	/** @type {ESTree.VariableDeclaration[]} */
 	const legacy_reactive_declarations = [];
 
@@ -227,8 +228,9 @@ export function client_component(analysis, options) {
 		if (binding.kind === 'store_sub') {
 			if (store_setup.length === 0) {
 				needs_store_cleanup = true;
-				store_setup.push(
-					b.const(b.array_pattern([b.id('$$stores'), b.id('$$cleanup')]), b.call('$.setup_stores'))
+				store_init = b.const(
+					b.array_pattern([b.id('$$stores'), b.id('$$cleanup')]),
+					b.call('$.setup_stores')
 				);
 			}
 
@@ -385,9 +387,16 @@ export function client_component(analysis, options) {
 		analysis.slot_names.size > 0;
 
 	if (analysis.instance.has_await) {
+		const params = [b.id('$$anchor')];
+		if (should_inject_props) {
+			params.push(b.id('$$props'));
+		}
+		if (store_setup.length > 0) {
+			params.push(b.id('$$stores'));
+		}
 		const body = b.function_declaration(
 			b.id('$$body'),
-			should_inject_props ? [b.id('$$anchor'), b.id('$$props')] : [b.id('$$anchor')],
+			params,
 			b.block([
 				b.var('$$unsuspend', b.call('$.suspend')),
 				...component_block.body,
@@ -403,10 +412,12 @@ export function client_component(analysis, options) {
 		component_block = b.block([
 			b.var('fragment', b.call('$.comment')),
 			b.var('node', b.call('$.first_child', b.id('fragment'))),
-			b.stmt(b.call(body.id, b.id('node'), should_inject_props && b.id('$$props'))),
+			store_init,
+			b.stmt(b.call(body.id, b.id('node'), ...params.slice(1))),
 			b.stmt(b.call('$.append', b.id('$$anchor'), b.id('fragment')))
 		]);
 	} else {
+		component_block.body.unshift(store_init);
 		component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
 	}
 

From e1e7a75d719ab6826238ddaef4571ac6f6d22732 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:26:31 -0700
Subject: [PATCH 63/76] fix: allow async destructured deriveds (#16444)

* fix: allow async destructured deriveds

* add test

* tweak

* tweak

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/mighty-balloons-rush.md            |  5 ++
 .../client/visitors/VariableDeclaration.js    | 55 ++++++++++++++-----
 .../async-derived-destructured/Child.svelte   | 13 +++++
 .../async-derived-destructured/_config.js     | 31 +++++++++++
 .../async-derived-destructured/main.svelte    | 11 ++++
 svelte.config.js                              |  8 +++
 6 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/mighty-balloons-rush.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte
 create mode 100644 svelte.config.js

diff --git a/.changeset/mighty-balloons-rush.md b/.changeset/mighty-balloons-rush.md
new file mode 100644
index 0000000000..ce8c09ca55
--- /dev/null
+++ b/.changeset/mighty-balloons-rush.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow async destructured deriveds
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 19a7de5715..0998dc4778 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
@@ -171,11 +171,14 @@ export function VariableDeclaration(node, context) {
 							context.state.transform[id.name] = { read: get_value };
 
 							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-							const call = b.call('$.derived', expression);
-							return b.declarator(
-								id,
-								dev ? b.call('$.tag', call, b.literal('[$state iterable]')) : call
-							);
+							let call = b.call('$.derived', expression);
+
+							if (dev) {
+								const label = `[$state ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`;
+								call = b.call('$.tag', call, b.literal(label));
+							}
+
+							return b.declarator(id, call);
 						}),
 						...paths.map((path) => {
 							const value = /** @type {Expression} */ (context.visit(path.expression));
@@ -228,19 +231,37 @@ export function VariableDeclaration(node, context) {
 					}
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
+					let expression = /** @type {Expression} */ (
+						context.visit(value, {
+							...context.state,
+							in_derived: rune === '$derived'
+						})
+					);
 
 					let rhs = value;
 
 					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
 						const id = b.id(context.state.scope.generate('$$d'));
+						let call = b.call('$.derived', rune === '$derived' ? b.thunk(expression) : expression);
+
 						rhs = b.call('$.get', id);
 
-						let expression = /** @type {Expression} */ (context.visit(value));
-						if (rune === '$derived') expression = b.thunk(expression);
-						const call = b.call('$.derived', expression);
-						declarations.push(
-							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
-						);
+						if (is_async) {
+							const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+							call = b.call(
+								'$.async_derived',
+								b.thunk(expression, true),
+								location ? b.literal(location) : undefined
+							);
+							call = b.call(b.await(b.call('$.save', 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));
 					}
 
 					const { inserts, paths } = extract_paths(declarator.id, rhs);
@@ -250,10 +271,14 @@ export function VariableDeclaration(node, context) {
 						context.state.transform[id.name] = { read: get_value };
 
 						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-						const call = b.call('$.derived', expression);
-						declarations.push(
-							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
-						);
+						let call = b.call('$.derived', expression);
+
+						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));
 					}
 
 					for (const path of paths) {
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
new file mode 100644
index 0000000000..39112b12a7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(1);
+
+	let { squared, cubed } = $derived(await {
+		squared: count ** 2,
+		cubed: count ** 3
+	});
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+<p>{count} ** 2 = {squared}</p>
+<p>{count} ** 3 = {cubed}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
new file mode 100644
index 0000000000..d444e8e1d9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>1 ** 2 = 1</p>
+				<p>1 ** 3 = 1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2 ** 2 = 4</p>
+				<p>2 ** 3 = 8</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte
new file mode 100644
index 0000000000..c5d8a12a78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000000..442cd7892c
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,8 @@
+// we need this so the VS Code extension doesn't yell at us
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};

From cc05cbcf5ccd1b19a42417dd374471c4cecb7776 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:30:38 -0700
Subject: [PATCH 64/76] Version Packages (#16445)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/clever-toys-decide.md   |  5 -----
 .changeset/curly-buttons-burn.md   |  5 -----
 .changeset/healthy-carpets-deny.md |  5 -----
 .changeset/mighty-balloons-rush.md |  5 -----
 .changeset/new-fireants-bake.md    |  5 -----
 packages/svelte/CHANGELOG.md       | 14 ++++++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 8 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 .changeset/clever-toys-decide.md
 delete mode 100644 .changeset/curly-buttons-burn.md
 delete mode 100644 .changeset/healthy-carpets-deny.md
 delete mode 100644 .changeset/mighty-balloons-rush.md
 delete mode 100644 .changeset/new-fireants-bake.md

diff --git a/.changeset/clever-toys-decide.md b/.changeset/clever-toys-decide.md
deleted file mode 100644
index 57eb2b0058..0000000000
--- a/.changeset/clever-toys-decide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't reexecute derived with no dependencies on teardown
diff --git a/.changeset/curly-buttons-burn.md b/.changeset/curly-buttons-burn.md
deleted file mode 100644
index f5d45256fa..0000000000
--- a/.changeset/curly-buttons-burn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: disallow `export { foo as default }` in `<script module>`
diff --git a/.changeset/healthy-carpets-deny.md b/.changeset/healthy-carpets-deny.md
deleted file mode 100644
index 94ee865fe7..0000000000
--- a/.changeset/healthy-carpets-deny.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: move ownership validation into async component body
diff --git a/.changeset/mighty-balloons-rush.md b/.changeset/mighty-balloons-rush.md
deleted file mode 100644
index ce8c09ca55..0000000000
--- a/.changeset/mighty-balloons-rush.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow async destructured deriveds
diff --git a/.changeset/new-fireants-bake.md b/.changeset/new-fireants-bake.md
deleted file mode 100644
index 81bd596e43..0000000000
--- a/.changeset/new-fireants-bake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: move store setup/cleanup outside of async component body
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 6f6b824174..59d88437e4 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.36.9
+
+### Patch Changes
+
+- fix: don't reexecute derived with no dependencies on teardown ([#16438](https://github.com/sveltejs/svelte/pull/16438))
+
+- fix: disallow `export { foo as default }` in `<script module>` ([#16447](https://github.com/sveltejs/svelte/pull/16447))
+
+- fix: move ownership validation into async component body ([#16449](https://github.com/sveltejs/svelte/pull/16449))
+
+- fix: allow async destructured deriveds ([#16444](https://github.com/sveltejs/svelte/pull/16444))
+
+- fix: move store setup/cleanup outside of async component body ([#16443](https://github.com/sveltejs/svelte/pull/16443))
+
 ## 5.36.8
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index df53b69e93..3c6c419bdc 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.36.8",
+  "version": "5.36.9",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 005a06dc19..2df5873aa9 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.36.8';
+export const VERSION = '5.36.9';
 export const PUBLIC_VERSION = '5';

From 9a52007785dd44c978ea56e2766e207e138401d1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Jul 2025 17:37:53 -0400
Subject: [PATCH 65/76] fix: prevent batches from getting intertwined (#16446)

* ensure batches are kept separate

* changeset

* activate batch before decrementing
---
 .changeset/fresh-birds-jam.md                 |  5 ++++
 .../internal/client/dom/blocks/boundary.js    |  2 +-
 .../src/internal/client/reactivity/batch.js   | 30 +++++++++++++++++--
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fresh-birds-jam.md

diff --git a/.changeset/fresh-birds-jam.md b/.changeset/fresh-birds-jam.md
new file mode 100644
index 0000000000..41d62d5366
--- /dev/null
+++ b/.changeset/fresh-birds-jam.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent batches from getting intertwined
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 4ea137bfa8..1866931ef2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -148,7 +148,7 @@ export class Boundary {
 				// need to use hydration boundary comments to report whether
 				// the pending or main block was rendered for a given
 				// boundary, and hydrate accordingly
-				queueMicrotask(() => {
+				Batch.enqueue(() => {
 					this.#main_effect = this.#run(() => {
 						Batch.ensure();
 						return branch(() => this.#children(this.#anchor));
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index ed82af94ed..ec082bb595 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -49,6 +49,19 @@ export let batch_deriveds = null;
 /** @type {Set<() => void>} */
 export let effect_pending_updates = new Set();
 
+/** @type {Array<() => void>} */
+let tasks = [];
+
+function dequeue() {
+	const task = /** @type {() => void} */ (tasks.shift());
+
+	if (tasks.length > 0) {
+		queueMicrotask(dequeue);
+	}
+
+	task();
+}
+
 /** @type {Effect[]} */
 let queued_root_effects = [];
 
@@ -438,7 +451,7 @@ export class Batch {
 			batches.add(current_batch);
 
 			if (autoflush) {
-				queueMicrotask(() => {
+				Batch.enqueue(() => {
 					if (current_batch !== batch) {
 						// a flushSync happened in the meantime
 						return;
@@ -451,6 +464,15 @@ export class Batch {
 
 		return current_batch;
 	}
+
+	/** @param {() => void} task */
+	static enqueue(task) {
+		if (tasks.length === 0) {
+			queueMicrotask(dequeue);
+		}
+
+		tasks.unshift(task);
+	}
 }
 
 /**
@@ -593,7 +615,11 @@ export function suspend() {
 
 	return function unsuspend() {
 		boundary.update_pending_count(-1);
-		if (!pending) batch.decrement();
+
+		if (!pending) {
+			batch.activate();
+			batch.decrement();
+		}
 
 		unset_context();
 	};

From dd55de3b75e4448c7fd80bcae0fb4db442890daa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 18:05:29 -0400
Subject: [PATCH 66/76] Version Packages (#16450)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fresh-birds-jam.md  | 5 -----
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/fresh-birds-jam.md

diff --git a/.changeset/fresh-birds-jam.md b/.changeset/fresh-birds-jam.md
deleted file mode 100644
index 41d62d5366..0000000000
--- a/.changeset/fresh-birds-jam.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent batches from getting intertwined
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 59d88437e4..c20618af11 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.36.10
+
+### Patch Changes
+
+- fix: prevent batches from getting intertwined ([#16446](https://github.com/sveltejs/svelte/pull/16446))
+
 ## 5.36.9
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3c6c419bdc..28ccb2884a 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.36.9",
+  "version": "5.36.10",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2df5873aa9..8c59098e0c 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.36.9';
+export const VERSION = '5.36.10';
 export const PUBLIC_VERSION = '5';

From 5033c8e965c39b903b2b0858c591926c9026f3bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Jul 2025 20:35:28 -0400
Subject: [PATCH 67/76] fix: tag stores for `$inspect.trace()` (#16452)

---
 .changeset/silent-rockets-tease.md            |  5 ++++
 .../svelte/src/internal/client/dev/tracing.js | 11 ++++++-
 .../src/internal/client/reactivity/store.js   |  5 ++++
 .../samples/inspect-trace-store/_config.js    | 30 +++++++++++++++++++
 .../samples/inspect-trace-store/main.svelte   | 14 +++++++++
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silent-rockets-tease.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte

diff --git a/.changeset/silent-rockets-tease.md b/.changeset/silent-rockets-tease.md
new file mode 100644
index 0000000000..1a708c1d69
--- /dev/null
+++ b/.changeset/silent-rockets-tease.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: tag stores for `$inspect.trace()`
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index b7a6a38548..1b26c702fb 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -26,7 +26,7 @@ function log_entry(signal, entry) {
 		return;
 	}
 
-	const type = (signal.f & (DERIVED | ASYNC)) !== 0 ? '$derived' : '$state';
+	const type = get_type(signal);
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
 	const style = dirty
@@ -73,6 +73,15 @@ function log_entry(signal, entry) {
 	console.groupEnd();
 }
 
+/**
+ * @param {Value} signal
+ * @returns {'$state' | '$derived' | 'store'}
+ */
+function get_type(signal) {
+	if ((signal.f & (DERIVED | ASYNC)) !== 0) return '$derived';
+	return signal.label?.startsWith('$') ? 'store' : '$state';
+}
+
 /**
  * @template T
  * @param {() => string} label
diff --git a/packages/svelte/src/internal/client/reactivity/store.js b/packages/svelte/src/internal/client/reactivity/store.js
index e7a92ee052..ce082866ce 100644
--- a/packages/svelte/src/internal/client/reactivity/store.js
+++ b/packages/svelte/src/internal/client/reactivity/store.js
@@ -6,6 +6,7 @@ import { define_property, noop } from '../../shared/utils.js';
 import { get } from '../runtime.js';
 import { teardown } from './effects.js';
 import { mutable_source, set } from './sources.js';
+import { DEV } from 'esm-env';
 
 /**
  * Whether or not the prop currently being read is a store binding, as in
@@ -33,6 +34,10 @@ export function store_get(store, store_name, stores) {
 		unsubscribe: noop
 	});
 
+	if (DEV) {
+		entry.source.label = store_name;
+	}
+
 	// if the component that setup this is already unmounted we don't want to register a subscription
 	if (entry.store !== store && !(IS_UNMOUNTED in stores)) {
 		entry.unsubscribe();
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js
new file mode 100644
index 0000000000..4e16c0cf2a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: 'store', highlighted: true },
+			{ log: '$count', highlighted: false },
+			{ log: 0 }
+		]);
+
+		logs.length = 0;
+
+		const [button] = target.querySelectorAll('button');
+		flushSync(() => button.click());
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: 'store', highlighted: true },
+			{ log: '$count', highlighted: false },
+			{ log: 1 }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte
new file mode 100644
index 0000000000..af57513365
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+
+	$effect(() => {
+		$inspect.trace('effect');
+		$count;
+	});
+</script>
+
+<button onclick={() => $count += 1}>
+	clicks: {$count}
+</button>

From 0a2a2e213ab183dc5b038e4fa4eb4913dd7761a4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Jul 2025 22:17:14 -0400
Subject: [PATCH 68/76] fix: add labels to `@const` tags and props (#16454)

* fix: add labels to `@const` tags and props

* changeset
---
 .changeset/four-spiders-type.md                  |  5 +++++
 .../3-transform/client/visitors/ConstTag.js      | 16 ++++++++++++++--
 .../src/internal/client/reactivity/props.js      |  4 ++++
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/four-spiders-type.md

diff --git a/.changeset/four-spiders-type.md b/.changeset/four-spiders-type.md
new file mode 100644
index 0000000000..9a4056c50a
--- /dev/null
+++ b/.changeset/four-spiders-type.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add labels to `@const` tags and props
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 c1be1e3220..34acdd6bb9 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
@@ -17,7 +17,13 @@ export function ConstTag(node, context) {
 	// TODO we can almost certainly share some code with $derived(...)
 	if (declaration.id.type === 'Identifier') {
 		const init = build_expression(context, declaration.init, node.metadata.expression);
-		context.state.init.push(b.const(declaration.id, create_derived(context.state, b.thunk(init))));
+		let expression = create_derived(context.state, b.thunk(init));
+
+		if (dev) {
+			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
+		}
+
+		context.state.init.push(b.const(declaration.id, expression));
 
 		context.state.transform[declaration.id.name] = { read: get_value };
 
@@ -55,7 +61,13 @@ export function ConstTag(node, context) {
 			])
 		);
 
-		context.state.init.push(b.const(tmp, create_derived(context.state, fn)));
+		let expression = create_derived(context.state, fn);
+
+		if (dev) {
+			expression = b.call('$.tag', expression, b.literal('[@const]'));
+		}
+
+		context.state.init.push(b.const(tmp, expression));
 
 		// we need to eagerly evaluate the expression in order to hit any
 		// 'Cannot access x before initialization' errors
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index f39d45bb04..28bfa88d96 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -393,6 +393,10 @@ export function prop(props, key, flags, fallback) {
 		return getter();
 	});
 
+	if (DEV) {
+		d.label = key;
+	}
+
 	// Capture the initial value if it's bindable
 	if (bindable) get(d);
 

From 53fdd0f93abee0dc89418c7338363e9b298d0900 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Jul 2025 22:18:50 -0400
Subject: [PATCH 69/76] chore: remove some unused code (#16455)

---
 packages/svelte/src/internal/client/reactivity/props.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 28bfa88d96..05b747a1c4 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -1,13 +1,11 @@
-/** @import { ComponentContext } from '#client' */
-/** @import { Derived, Effect, Source } from './types.js' */
+/** @import { Effect, Source } from './types.js' */
 import { DEV } from 'esm-env';
 import {
 	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED,
-	UNINITIALIZED
+	PROPS_IS_UPDATED
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../../shared/utils.js';
 import { set, source, update } from './sources.js';

From d3a01bd5a7d09384e29a599834d9b554a7a973ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 20 Jul 2025 17:19:56 -0400
Subject: [PATCH 70/76] fix: always mark reactions of deriveds (#16457)

* tweak

* fix

* test

* changeset
---
 .changeset/angry-hornets-hug.md               |  5 ++
 .../internal/client/reactivity/deriveds.js    |  4 +-
 .../src/internal/client/reactivity/sources.js | 19 +++----
 .../async-time-travelling-derived/_config.js  | 56 +++++++++++++++++++
 .../async-time-travelling-derived/main.svelte | 26 +++++++++
 5 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/angry-hornets-hug.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte

diff --git a/.changeset/angry-hornets-hug.md b/.changeset/angry-hornets-hug.md
new file mode 100644
index 0000000000..ffe59db100
--- /dev/null
+++ b/.changeset/angry-hornets-hug.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always mark reactions of deriveds
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index fa6a9e02a1..7f730e365e 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -337,7 +337,9 @@ export function update_derived(derived) {
 
 	// don't mark derived clean if we're reading it inside a
 	// cleanup function, or it will cache a stale value
-	if (is_destroying_effect) return;
+	if (is_destroying_effect) {
+		return;
+	}
 
 	if (batch_deriveds !== null) {
 		batch_deriveds.set(derived, derived.v);
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 9b534d2d71..f6b14f3360 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -314,9 +314,6 @@ function mark_reactions(signal, status) {
 		var reaction = reactions[i];
 		var flags = reaction.f;
 
-		// Skip any effects that are already dirty
-		if ((flags & DIRTY) !== 0) continue;
-
 		// In legacy mode, skip the current effect to prevent infinite loops
 		if (!runes && reaction === active_effect) continue;
 
@@ -326,15 +323,15 @@ function mark_reactions(signal, status) {
 			continue;
 		}
 
-		set_signal_status(reaction, status);
+		// don't set a DIRTY reaction to MAYBE_DIRTY
+		if ((flags & DIRTY) === 0) {
+			set_signal_status(reaction, status);
+		}
 
-		// If the signal a) was previously clean or b) is an unowned derived, then mark it
-		if ((flags & (CLEAN | UNOWNED)) !== 0) {
-			if ((flags & DERIVED) !== 0) {
-				mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
-			} else {
-				schedule_effect(/** @type {Effect} */ (reaction));
-			}
+		if ((flags & DERIVED) !== 0) {
+			mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
+		} else if ((flags & DIRTY) === 0) {
+			schedule_effect(/** @type {Effect} */ (reaction));
 		}
 	}
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js
new file mode 100644
index 0000000000..06437d2e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js
@@ -0,0 +1,56 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [a, b, update] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>0</button>
+				<h1>a</h1>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>0</button>
+				<h1>b</h1>
+			`
+		);
+
+		update.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>1</button>
+				<h1>b</h1>
+			`
+		);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>1</button>
+				<h1>a</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte
new file mode 100644
index 0000000000..5fca286a78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let object = $state(null);
+	let count = $state(0);
+
+	const condition = $derived(object === null);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => (object = null)}>a</button>
+	<button onclick={() => (object = {})}>b</button>
+
+	<button onclick={async () => {
+		count++;
+		await Promise.resolve();
+		object = {};
+	}}>{await count}</button>
+
+	{#if condition}
+		<h1>a</h1>
+	{:else}
+		<h1>b</h1>
+	{/if}
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
+

From 1f99914a16e03209cb7c0aac8ce9d3d72bb32f15 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 20 Jul 2025 17:22:01 -0400
Subject: [PATCH 71/76] chore: move `capture_signals` to legacy module (#16456)

---
 .changeset/swift-cherries-know.md             |  5 ++
 .../svelte/src/internal/client/dev/tracing.js |  2 +-
 packages/svelte/src/internal/client/index.js  |  2 +-
 packages/svelte/src/internal/client/legacy.js | 46 ++++++++++++++++
 .../svelte/src/internal/client/runtime.js     | 54 ++-----------------
 5 files changed, 56 insertions(+), 53 deletions(-)
 create mode 100644 .changeset/swift-cherries-know.md
 create mode 100644 packages/svelte/src/internal/client/legacy.js

diff --git a/.changeset/swift-cherries-know.md b/.changeset/swift-cherries-know.md
new file mode 100644
index 0000000000..d8bbb1256a
--- /dev/null
+++ b/.changeset/swift-cherries-know.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: move `capture_signals` to legacy module
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 1b26c702fb..673a710fac 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -4,7 +4,7 @@ import { snapshot } from '../../shared/clone.js';
 import { define_property } from '../../shared/utils.js';
 import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
-import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
+import { active_reaction, untrack } from '../runtime.js';
 
 /**
  * @typedef {{
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index cddb432a98..90f0f9baac 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -138,11 +138,11 @@ export {
 	mark_store_binding
 } from './reactivity/store.js';
 export { boundary, pending } from './dom/blocks/boundary.js';
+export { invalidate_inner_signals } from './legacy.js';
 export { set_text } from './render.js';
 export {
 	get,
 	safe_get,
-	invalidate_inner_signals,
 	tick,
 	untrack,
 	exclude_from_object,
diff --git a/packages/svelte/src/internal/client/legacy.js b/packages/svelte/src/internal/client/legacy.js
new file mode 100644
index 0000000000..97ad7244c0
--- /dev/null
+++ b/packages/svelte/src/internal/client/legacy.js
@@ -0,0 +1,46 @@
+/** @import { Value } from '#client' */
+import { internal_set } from './reactivity/sources.js';
+import { untrack } from './runtime.js';
+
+/**
+ * @type {Set<Value> | null}
+ * @deprecated
+ */
+export let captured_signals = null;
+
+/**
+ * Capture an array of all the signals that are read when `fn` is called
+ * @template T
+ * @param {() => T} fn
+ */
+function capture_signals(fn) {
+	var previous_captured_signals = captured_signals;
+
+	try {
+		captured_signals = new Set();
+
+		untrack(fn);
+
+		if (previous_captured_signals !== null) {
+			for (var signal of captured_signals) {
+				previous_captured_signals.add(signal);
+			}
+		}
+
+		return captured_signals;
+	} finally {
+		captured_signals = previous_captured_signals;
+	}
+}
+
+/**
+ * Invokes a function and captures all signals that are read during the invocation,
+ * then invalidates them.
+ * @param {() => any} fn
+ * @deprecated
+ */
+export function invalidate_inner_signals(fn) {
+	for (var signal of capture_signals(fn)) {
+		internal_set(signal, signal.v);
+	}
+}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 3d3c89975c..e86866af2a 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -22,7 +22,7 @@ import {
 	STALE_REACTION,
 	ERROR_VALUE
 } from './constants.js';
-import { internal_set, old_values } from './reactivity/sources.js';
+import { old_values } from './reactivity/sources.js';
 import {
 	destroy_derived_effects,
 	execute_derived,
@@ -45,6 +45,7 @@ import * as w from './warnings.js';
 import { Batch, batch_deriveds, flushSync, schedule_effect } from './reactivity/batch.js';
 import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
+import { captured_signals } from './legacy.js';
 
 export let is_updating_effect = false;
 
@@ -137,14 +138,6 @@ export function set_update_version(value) {
 // If we are working with a get() chain that has no active container,
 // to prevent memory leaks, we skip adding the reaction.
 export let skip_reaction = false;
-// Handle collecting all signals which are read during a specific time frame
-/** @type {Set<Value> | null} */
-export let captured_signals = null;
-
-/** @param {Set<Value> | null} value */
-export function set_captured_signals(value) {
-	captured_signals = value;
-}
 
 export function increment_write_version() {
 	return ++write_version;
@@ -531,9 +524,7 @@ export function get(signal) {
 	var flags = signal.f;
 	var is_derived = (flags & DERIVED) !== 0;
 
-	if (captured_signals !== null) {
-		captured_signals.add(signal);
-	}
+	captured_signals?.add(signal);
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
@@ -713,45 +704,6 @@ export function safe_get(signal) {
 	return signal && get(signal);
 }
 
-/**
- * Capture an array of all the signals that are read when `fn` is called
- * @template T
- * @param {() => T} fn
- */
-function capture_signals(fn) {
-	var previous_captured_signals = captured_signals;
-	captured_signals = new Set();
-
-	var captured = captured_signals;
-	var signal;
-
-	try {
-		untrack(fn);
-		if (previous_captured_signals !== null) {
-			for (signal of captured_signals) {
-				previous_captured_signals.add(signal);
-			}
-		}
-	} finally {
-		captured_signals = previous_captured_signals;
-	}
-
-	return captured;
-}
-
-/**
- * Invokes a function and captures all signals that are read during the invocation,
- * then invalidates them.
- * @param {() => any} fn
- */
-export function invalidate_inner_signals(fn) {
-	var captured = capture_signals(() => untrack(fn));
-
-	for (var signal of captured) {
-		internal_set(signal, signal.v);
-	}
-}
-
 /**
  * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
  * any state read inside `fn` will not be treated as a dependency.

From 8afe5ec0c5a2e38b9b3a55b0dec94b99aa10447c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 20 Jul 2025 17:23:10 -0400
Subject: [PATCH 72/76] Version Packages (#16453)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/angry-hornets-hug.md    |  5 -----
 .changeset/four-spiders-type.md    |  5 -----
 .changeset/silent-rockets-tease.md |  5 -----
 packages/svelte/CHANGELOG.md       | 10 ++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/angry-hornets-hug.md
 delete mode 100644 .changeset/four-spiders-type.md
 delete mode 100644 .changeset/silent-rockets-tease.md

diff --git a/.changeset/angry-hornets-hug.md b/.changeset/angry-hornets-hug.md
deleted file mode 100644
index ffe59db100..0000000000
--- a/.changeset/angry-hornets-hug.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: always mark reactions of deriveds
diff --git a/.changeset/four-spiders-type.md b/.changeset/four-spiders-type.md
deleted file mode 100644
index 9a4056c50a..0000000000
--- a/.changeset/four-spiders-type.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add labels to `@const` tags and props
diff --git a/.changeset/silent-rockets-tease.md b/.changeset/silent-rockets-tease.md
deleted file mode 100644
index 1a708c1d69..0000000000
--- a/.changeset/silent-rockets-tease.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: tag stores for `$inspect.trace()`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index c20618af11..472a2b4a98 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.36.11
+
+### Patch Changes
+
+- fix: always mark reactions of deriveds ([#16457](https://github.com/sveltejs/svelte/pull/16457))
+
+- fix: add labels to `@const` tags and props ([#16454](https://github.com/sveltejs/svelte/pull/16454))
+
+- fix: tag stores for `$inspect.trace()` ([#16452](https://github.com/sveltejs/svelte/pull/16452))
+
 ## 5.36.10
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 28ccb2884a..4b22911e6e 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.36.10",
+  "version": "5.36.11",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 8c59098e0c..07cf3cdf4d 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.36.10';
+export const VERSION = '5.36.11';
 export const PUBLIC_VERSION = '5';

From ce4a99ed6d0b4b53c7abb7a8763e8e4bc4de5431 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 20 Jul 2025 18:11:26 -0400
Subject: [PATCH 73/76] Version Packages (#16459)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/swift-cherries-know.md | 5 -----
 packages/svelte/CHANGELOG.md      | 6 ++++++
 packages/svelte/package.json      | 2 +-
 packages/svelte/src/version.js    | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/swift-cherries-know.md

diff --git a/.changeset/swift-cherries-know.md b/.changeset/swift-cherries-know.md
deleted file mode 100644
index d8bbb1256a..0000000000
--- a/.changeset/swift-cherries-know.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: move `capture_signals` to legacy module
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 472a2b4a98..1234efa0d5 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.36.12
+
+### Patch Changes
+
+- chore: move `capture_signals` to legacy module ([#16456](https://github.com/sveltejs/svelte/pull/16456))
+
 ## 5.36.11
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4b22911e6e..629ec99af8 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.36.11",
+  "version": "5.36.12",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 07cf3cdf4d..465bd73f0f 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.36.11';
+export const VERSION = '5.36.12';
 export const PUBLIC_VERSION = '5';

From aabd333d89a4c9241bc3ed57752cb2616dd66b7c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 21 Jul 2025 15:22:13 +0200
Subject: [PATCH 74/76] fix: ensure subscriptions are picked up correctly by
 deriveds (#16466)

Increment the version to ensure any dependent deriveds are marked dirty when the subscription is picked up again later. If we didn't do this then the comparison of write versions would determine that the derived has a later version than the subscriber, and it would not be re-run.

Fixes #16311
Fixes #15888
---
 .changeset/fresh-penguins-impress.md          |  5 +++
 .../src/reactivity/create-subscriber.js       |  4 ++
 .../samples/store-inside-derived/_config.js   | 45 +++++++++++++++++++
 .../samples/store-inside-derived/main.svelte  | 36 +++++++++++++++
 4 files changed, 90 insertions(+)
 create mode 100644 .changeset/fresh-penguins-impress.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte

diff --git a/.changeset/fresh-penguins-impress.md b/.changeset/fresh-penguins-impress.md
new file mode 100644
index 0000000000..35ff4f0aaa
--- /dev/null
+++ b/.changeset/fresh-penguins-impress.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure subscriptions are picked up correctly by deriveds
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 4dcac4e6f6..6f9313eb0a 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -82,6 +82,10 @@ export function createSubscriber(start) {
 						if (subscribers === 0) {
 							stop?.();
 							stop = undefined;
+							// Increment the version to ensure any dependent deriveds are marked dirty when the subscription is picked up again later.
+							// If we didn't do this then the comparison of write versions would determine that the derived has a later version than
+							// the subscriber, and it would not be re-run.
+							increment(version);
 						}
 					});
 				};
diff --git a/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js
new file mode 100644
index 0000000000..de078b1e75
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test: ({ assert, target }) => {
+		const [loading, increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: 0</div>
+				<div>valueFromStore.current: 0</div>
+				<div>valueDerivedCurrent: 0</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+
+		loading.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: Loading...</div>
+				<div>valueFromStore.current: Loading...</div>
+				<div>valueDerivedCurrent: Loading...</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+
+		increment.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: 1</div>
+				<div>valueFromStore.current: 1</div>
+				<div>valueDerivedCurrent: 1</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte
new file mode 100644
index 0000000000..06d0a0d4b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { fromStore, writable } from 'svelte/store';
+	
+  let isLoading = $state(false);
+
+  const value = writable(0);
+  const valueFromStore = fromStore(value);
+  const valueDerivedCurrent = $derived(valueFromStore.current);
+</script>
+
+<div>
+	$value: {isLoading ? 'Loading...' : $value}
+</div>
+
+<div>
+	valueFromStore.current: {isLoading ? 'Loading...' : valueFromStore.current}
+</div>
+
+<div>
+	valueDerivedCurrent: {isLoading ? 'Loading...' : valueDerivedCurrent}
+</div>
+
+<button
+	onclick={() => {
+		isLoading = true;
+	}}>
+	Loading
+</button>
+
+<button
+	onclick={() => {
+		$value++;
+		isLoading = false;
+	}}>
+	Increment
+</button>

From 28403beaeb360fd7b4096fe7c8ef98e43d0676c2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 13:32:47 -0400
Subject: [PATCH 75/76] Version Packages (#16467)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fresh-penguins-impress.md | 5 -----
 packages/svelte/CHANGELOG.md         | 6 ++++++
 packages/svelte/package.json         | 2 +-
 packages/svelte/src/version.js       | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/fresh-penguins-impress.md

diff --git a/.changeset/fresh-penguins-impress.md b/.changeset/fresh-penguins-impress.md
deleted file mode 100644
index 35ff4f0aaa..0000000000
--- a/.changeset/fresh-penguins-impress.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure subscriptions are picked up correctly by deriveds
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 1234efa0d5..5a5e532a08 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.36.13
+
+### Patch Changes
+
+- fix: ensure subscriptions are picked up correctly by deriveds ([#16466](https://github.com/sveltejs/svelte/pull/16466))
+
 ## 5.36.12
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 629ec99af8..4bf9a5df22 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.36.12",
+  "version": "5.36.13",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 465bd73f0f..7d47fbc5f1 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.36.12';
+export const VERSION = '5.36.13';
 export const PUBLIC_VERSION = '5';

From 9412c5861c365610d7c6c0e4ecd3572ac3fe5860 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 21 Jul 2025 22:17:25 -0400
Subject: [PATCH 76/76] chore: log effect functions in log_effect_tree (#16468)

---
 packages/svelte/src/internal/client/dev/debug.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js
index c47080ed2f..2714a3af1f 100644
--- a/packages/svelte/src/internal/client/dev/debug.js
+++ b/packages/svelte/src/internal/client/dev/debug.js
@@ -63,6 +63,13 @@ export function log_effect_tree(effect, depth = 0) {
 
 		// eslint-disable-next-line no-console
 		console.log(callsite);
+	} else {
+		// eslint-disable-next-line no-console
+		console.groupCollapsed(`%cfn`, `font-weight: normal`);
+		// eslint-disable-next-line no-console
+		console.log(effect.fn);
+		// eslint-disable-next-line no-console
+		console.groupEnd();
 	}
 
 	if (effect.deps !== null) {