From 7f473f618d76eb634845c807664442fc65032662 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 17 Apr 2025 23:51:46 +0200
Subject: [PATCH 001/259] fix: allow accessing snippet in script tag (#15789)

* fix: allow accessing snippet in script tag

* branches are identical

* update test

* rename test

* fix validation (we were mutating the wrong array)

* tidy up

* remove submodule

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/few-horses-wink.md                 |  5 ++++
 .../server/visitors/SnippetBlock.js           | 30 ++++++++-----------
 .../snippet-access-in-script/_config.js       |  7 +++++
 .../samples/snippet-access-in-script/fn.js    |  3 ++
 .../snippet-access-in-script/main.svelte      | 10 +++++++
 .../samples/snippet-invalid-call/_config.js   |  9 ++++++
 .../samples/snippet-invalid-call/main.svelte  |  7 +++++
 .../_expected/server/index.svelte.js          |  4 +--
 8 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/few-horses-wink.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte

diff --git a/.changeset/few-horses-wink.md b/.changeset/few-horses-wink.md
new file mode 100644
index 0000000000..8ffa3640c0
--- /dev/null
+++ b/.changeset/few-horses-wink.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use function declaration for snippets in server output to avoid TDZ violation
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
index 5118679b34..238485e665 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
@@ -1,4 +1,4 @@
-/** @import { ArrowFunctionExpression, BlockStatement, CallExpression } from 'estree' */
+/** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import { dev } from '../../../../state.js';
@@ -9,27 +9,21 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function SnippetBlock(node, context) {
-	const body = /** @type {BlockStatement} */ (context.visit(node.body));
+	let fn = b.function_declaration(
+		node.expression,
+		[b.id('$$payload'), ...node.parameters],
+		/** @type {BlockStatement} */ (context.visit(node.body))
+	);
 
-	if (dev) {
-		body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
-	}
+	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
+	fn.___snippet = true;
 
-	/** @type {ArrowFunctionExpression | CallExpression} */
-	let fn = b.arrow([b.id('$$payload'), ...node.parameters], body);
+	const statements = node.metadata.can_hoist ? context.state.hoisted : context.state.init;
 
 	if (dev) {
-		fn = b.call('$.prevent_snippet_stringification', fn);
+		fn.body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
+		statements.push(b.stmt(b.call('$.prevent_snippet_stringification', fn.id)));
 	}
 
-	const declaration = b.declaration('const', [b.declarator(node.expression, fn)]);
-
-	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
-	fn.___snippet = true;
-
-	if (node.metadata.can_hoist) {
-		context.state.hoisted.push(declaration);
-	} else {
-		context.state.init.push(declaration);
-	}
+	statements.push(fn);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js
new file mode 100644
index 0000000000..ed0ead960b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js
new file mode 100644
index 0000000000..9e9a48c60c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js
@@ -0,0 +1,3 @@
+export function fn(snippet) {
+	return snippet;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte
new file mode 100644
index 0000000000..cc73aa31db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { fn } from "./fn.js";
+	let variable = $state("var");
+
+	fn(test);
+</script>
+
+{#snippet test()}
+	{variable}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js
new file mode 100644
index 0000000000..7e72fd751a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	error: 'invalid_snippet_arguments'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte
new file mode 100644
index 0000000000..3c47db3f96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	test();
+</script>
+
+{#snippet test()}
+	<p>hello</p>
+{/snippet}
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 04bfbf6ae4..cadae2cf15 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
@@ -1,9 +1,9 @@
 import * as $ from 'svelte/internal/server';
 import TextInput from './Child.svelte';
 
-const snippet = ($$payload) => {
+function snippet($$payload) {
 	$$payload.out += `<!---->Something`;
-};
+}
 
 export default function Bind_component_snippet($$payload) {
 	let value = '';

From 5b7af5e28979d50f610cfd000fc2e67a9d8a5101 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 21:11:04 -0400
Subject: [PATCH 002/259] Version Packages (#15790)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/few-horses-wink.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/few-horses-wink.md

diff --git a/.changeset/few-horses-wink.md b/.changeset/few-horses-wink.md
deleted file mode 100644
index 8ffa3640c0..0000000000
--- a/.changeset/few-horses-wink.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use function declaration for snippets in server output to avoid TDZ violation
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e5681a3ceb..709b829fcd 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.27.3
+
+### Patch Changes
+
+- fix: use function declaration for snippets in server output to avoid TDZ violation ([#15789](https://github.com/sveltejs/svelte/pull/15789))
+
 ## 5.27.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dc6c57b1a2..efead5604c 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.27.2",
+  "version": "5.27.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 62624e866c..c64eded9c4 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.27.2';
+export const VERSION = '5.27.3';
 export const PUBLIC_VERSION = '5';

From d0dcc0b79534f377349e7f6aa4a97c7b55f51864 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Fri, 18 Apr 2025 08:19:37 -0700
Subject: [PATCH 003/259] fix: improve partial evaluation (#15781)

* init

* remove console log

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

* fix each indices

* dedupe

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

* always break

* fix formatting

* Apply suggestions from code review

* compactify

* compactify

* reuse values

* add more globals, template literals, try functions and (some) member expressions

* remove console logs

* remove function handling, tweak failing test

* changeset

* try putting static stuff in the template

* nevermind

* unused

* simplify

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

* YAGNI

* simplify and fix (should use cooked, not raw)

* unused

* changeset

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-adults-sit.md              |   5 +
 .../client/visitors/shared/utils.js           |  10 +-
 packages/svelte/src/compiler/phases/scope.js  | 210 ++++++++++++++++--
 .../samples/each-index-non-null/_config.js    |   3 +
 .../_expected/client/index.svelte.js          |  19 ++
 .../_expected/server/index.svelte.js          |  13 ++
 .../samples/each-index-non-null/index.svelte  |   3 +
 .../purity/_expected/client/index.svelte.js   |   2 +-
 .../purity/_expected/server/index.svelte.js   |   2 +-
 9 files changed, 243 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/serious-adults-sit.md
 create mode 100644 packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
 create mode 100644 packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte

diff --git a/.changeset/serious-adults-sit.md b/.changeset/serious-adults-sit.md
new file mode 100644
index 0000000000..8c98a7c366
--- /dev/null
+++ b/.changeset/serious-adults-sit.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: partially evaluate more expressions
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 380cf6cd02..bc79b76043 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
@@ -69,11 +69,17 @@ export function build_template_chunk(
 				node.metadata.expression
 			);
 
-			has_state ||= node.metadata.expression.has_state;
+			const evaluated = state.scope.evaluate(value);
+
+			has_state ||= 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
 				// extra work in the template_effect (instead we do the work in set_text).
+				if (evaluated.is_known) {
+					value = b.literal(evaluated.value);
+				}
+
 				return { value, has_state };
 			}
 
@@ -89,8 +95,6 @@ export function build_template_chunk(
 				}
 			}
 
-			const evaluated = state.scope.evaluate(value);
-
 			if (evaluated.is_known) {
 				quasi.value.cooked += evaluated.value + '';
 			} else {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 570d5e22d9..8297f174d3 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1,4 +1,4 @@
-/** @import { ArrowFunctionExpression, BinaryOperator, ClassDeclaration, Expression, FunctionDeclaration, FunctionExpression, Identifier, ImportDeclaration, MemberExpression, LogicalOperator, Node, Pattern, UnaryOperator, VariableDeclarator } from 'estree' */
+/** @import { ArrowFunctionExpression, BinaryOperator, ClassDeclaration, Expression, FunctionDeclaration, FunctionExpression, Identifier, ImportDeclaration, MemberExpression, LogicalOperator, Node, Pattern, UnaryOperator, VariableDeclarator, Super } from 'estree' */
 /** @import { Context, Visitor } from 'zimmerframe' */
 /** @import { AST, BindingKind, DeclarationKind } from '#compiler' */
 import is_reference from 'is-reference';
@@ -18,8 +18,71 @@ import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
 
 const UNKNOWN = Symbol('unknown');
 /** Includes `BigInt` */
-const NUMBER = Symbol('number');
-const STRING = Symbol('string');
+export const NUMBER = Symbol('number');
+export const STRING = Symbol('string');
+
+/** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
+const globals = {
+	BigInt: [NUMBER, BigInt],
+	'Math.min': [NUMBER, Math.min],
+	'Math.max': [NUMBER, Math.max],
+	'Math.random': [NUMBER],
+	'Math.floor': [NUMBER, Math.floor],
+	// @ts-expect-error
+	'Math.f16round': [NUMBER, Math.f16round],
+	'Math.round': [NUMBER, Math.round],
+	'Math.abs': [NUMBER, Math.abs],
+	'Math.acos': [NUMBER, Math.acos],
+	'Math.asin': [NUMBER, Math.asin],
+	'Math.atan': [NUMBER, Math.atan],
+	'Math.atan2': [NUMBER, Math.atan2],
+	'Math.ceil': [NUMBER, Math.ceil],
+	'Math.cos': [NUMBER, Math.cos],
+	'Math.sin': [NUMBER, Math.sin],
+	'Math.tan': [NUMBER, Math.tan],
+	'Math.exp': [NUMBER, Math.exp],
+	'Math.log': [NUMBER, Math.log],
+	'Math.pow': [NUMBER, Math.pow],
+	'Math.sqrt': [NUMBER, Math.sqrt],
+	'Math.clz32': [NUMBER, Math.clz32],
+	'Math.imul': [NUMBER, Math.imul],
+	'Math.sign': [NUMBER, Math.sign],
+	'Math.log10': [NUMBER, Math.log10],
+	'Math.log2': [NUMBER, Math.log2],
+	'Math.log1p': [NUMBER, Math.log1p],
+	'Math.expm1': [NUMBER, Math.expm1],
+	'Math.cosh': [NUMBER, Math.cosh],
+	'Math.sinh': [NUMBER, Math.sinh],
+	'Math.tanh': [NUMBER, Math.tanh],
+	'Math.acosh': [NUMBER, Math.acosh],
+	'Math.asinh': [NUMBER, Math.asinh],
+	'Math.atanh': [NUMBER, Math.atanh],
+	'Math.trunc': [NUMBER, Math.trunc],
+	'Math.fround': [NUMBER, Math.fround],
+	'Math.cbrt': [NUMBER, Math.cbrt],
+	Number: [NUMBER, Number],
+	'Number.isInteger': [NUMBER, Number.isInteger],
+	'Number.isFinite': [NUMBER, Number.isFinite],
+	'Number.isNaN': [NUMBER, Number.isNaN],
+	'Number.isSafeInteger': [NUMBER, Number.isSafeInteger],
+	'Number.parseFloat': [NUMBER, Number.parseFloat],
+	'Number.parseInt': [NUMBER, Number.parseInt],
+	String: [STRING, String],
+	'String.fromCharCode': [STRING, String.fromCharCode],
+	'String.fromCodePoint': [STRING, String.fromCodePoint]
+};
+
+/** @type {Record<string, any>} */
+const global_constants = {
+	'Math.PI': Math.PI,
+	'Math.E': Math.E,
+	'Math.LN10': Math.LN10,
+	'Math.LN2': Math.LN2,
+	'Math.LOG10E': Math.LOG10E,
+	'Math.LOG2E': Math.LOG2E,
+	'Math.SQRT2': Math.SQRT2,
+	'Math.SQRT1_2': Math.SQRT1_2
+};
 
 export class Binding {
 	/** @type {Scope} */
@@ -107,7 +170,7 @@ export class Binding {
 
 class Evaluation {
 	/** @type {Set<any>} */
-	values = new Set();
+	values;
 
 	/**
 	 * True if there is exactly one possible value
@@ -147,8 +210,11 @@ class Evaluation {
 	 *
 	 * @param {Scope} scope
 	 * @param {Expression} expression
+	 * @param {Set<any>} values
 	 */
-	constructor(scope, expression) {
+	constructor(scope, expression, values) {
+		this.values = values;
+
 		switch (expression.type) {
 			case 'Literal': {
 				this.values.add(expression.value);
@@ -172,15 +238,18 @@ class Evaluation {
 						binding.kind === 'rest_prop' ||
 						binding.kind === 'bindable_prop';
 
-					if (!binding.updated && binding.initial !== null && !is_prop) {
-						const evaluation = binding.scope.evaluate(/** @type {Expression} */ (binding.initial));
-						for (const value of evaluation.values) {
-							this.values.add(value);
-						}
+					if (binding.initial?.type === 'EachBlock' && binding.initial.index === expression.name) {
+						this.values.add(NUMBER);
 						break;
 					}
 
-					// TODO each index is always defined
+					if (!binding.updated && binding.initial !== null && !is_prop) {
+						binding.scope.evaluate(/** @type {Expression} */ (binding.initial), this.values);
+						break;
+					}
+				} else if (expression.name === 'undefined') {
+					this.values.add(undefined);
+					break;
 				}
 
 				// TODO glean what we can from reassignments
@@ -336,6 +405,101 @@ class Evaluation {
 				break;
 			}
 
+			case 'CallExpression': {
+				const keypath = get_global_keypath(expression.callee, scope);
+
+				if (keypath) {
+					if (is_rune(keypath)) {
+						const arg = /** @type {Expression | undefined} */ (expression.arguments[0]);
+
+						switch (keypath) {
+							case '$state':
+							case '$state.raw':
+							case '$derived':
+								if (arg) {
+									scope.evaluate(arg, this.values);
+								} else {
+									this.values.add(undefined);
+								}
+								break;
+
+							case '$props.id':
+								this.values.add(STRING);
+								break;
+
+							case '$effect.tracking':
+								this.values.add(false);
+								this.values.add(true);
+								break;
+
+							case '$derived.by':
+								if (arg?.type === 'ArrowFunctionExpression' && arg.body.type !== 'BlockStatement') {
+									scope.evaluate(arg.body, this.values);
+									break;
+								}
+
+								this.values.add(UNKNOWN);
+								break;
+
+							default: {
+								this.values.add(UNKNOWN);
+							}
+						}
+
+						break;
+					}
+
+					if (
+						Object.hasOwn(globals, keypath) &&
+						expression.arguments.every((arg) => arg.type !== 'SpreadElement')
+					) {
+						const [type, fn] = globals[keypath];
+						const values = expression.arguments.map((arg) => scope.evaluate(arg));
+
+						if (fn && values.every((e) => e.is_known)) {
+							this.values.add(fn(...values.map((e) => e.value)));
+						} else {
+							this.values.add(type);
+						}
+
+						break;
+					}
+				}
+
+				this.values.add(UNKNOWN);
+				break;
+			}
+
+			case 'TemplateLiteral': {
+				let result = expression.quasis[0].value.cooked;
+
+				for (let i = 0; i < expression.expressions.length; i += 1) {
+					const e = scope.evaluate(expression.expressions[i]);
+
+					if (e.is_known) {
+						result += e.value + expression.quasis[i + 1].value.cooked;
+					} else {
+						this.values.add(STRING);
+						break;
+					}
+				}
+
+				this.values.add(result);
+				break;
+			}
+
+			case 'MemberExpression': {
+				const keypath = get_global_keypath(expression, scope);
+
+				if (keypath && Object.hasOwn(global_constants, keypath)) {
+					this.values.add(global_constants[keypath]);
+					break;
+				}
+
+				this.values.add(UNKNOWN);
+				break;
+			}
+
 			default: {
 				this.values.add(UNKNOWN);
 			}
@@ -548,10 +712,10 @@ export class Scope {
 	 * Only call this once scope has been fully generated in a first pass,
 	 * else this evaluates on incomplete data and may yield wrong results.
 	 * @param {Expression} expression
-	 * @param {Set<any>} values
+	 * @param {Set<any>} [values]
 	 */
 	evaluate(expression, values = new Set()) {
-		return new Evaluation(this, expression);
+		return new Evaluation(this, expression, values);
 	}
 }
 
@@ -1115,7 +1279,19 @@ export function get_rune(node, scope) {
 	if (!node) return null;
 	if (node.type !== 'CallExpression') return null;
 
-	let n = node.callee;
+	const keypath = get_global_keypath(node.callee, scope);
+
+	if (!keypath || !is_rune(keypath)) return null;
+	return keypath;
+}
+
+/**
+ * Returns the name of the rune if the given expression is a `CallExpression` using a rune.
+ * @param {Expression | Super} node
+ * @param {Scope} scope
+ */
+function get_global_keypath(node, scope) {
+	let n = node;
 
 	let joined = '';
 
@@ -1133,12 +1309,8 @@ export function get_rune(node, scope) {
 
 	if (n.type !== 'Identifier') return null;
 
-	joined = n.name + joined;
-
-	if (!is_rune(joined)) return null;
-
 	const binding = scope.get(n.name);
 	if (binding !== null) return null; // rune name, but references a variable or store
 
-	return joined;
+	return n.name + joined;
 }
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..3d46a679b8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
@@ -0,0 +1,19 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root_1 = $.template(`<p></p>`);
+
+export default function Each_index_non_null($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.each(node, 0, () => Array(10), $.index, ($$anchor, $$item, i) => {
+		var p = root_1();
+
+		p.textContent = `index: ${i}`;
+		$.append($$anchor, p);
+	});
+
+	$.append($$anchor, fragment);
+}
\ 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
new file mode 100644
index 0000000000..3431e36833
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
@@ -0,0 +1,13 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Each_index_non_null($$payload) {
+	const each_array = $.ensure_array_like(Array(10));
+
+	$$payload.out += `<!--[-->`;
+
+	for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+		$$payload.out += `<p>index: ${$.escape(i)}</p>`;
+	}
+
+	$$payload.out += `<!--]-->`;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte b/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte
new file mode 100644
index 0000000000..03bfc9e372
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte
@@ -0,0 +1,3 @@
+{#each Array(10), i}
+	<p>index: {i}</p>
+{/each}
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 940ed8f9e8..5bc9766acf 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -8,7 +8,7 @@ export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = Math.max(0, Math.min(0, 100));
+	p.textContent = 0;
 
 	var p_1 = $.sibling(p, 2);
 
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 588332407a..9457378c0d 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>${$.escape(Math.max(0, Math.min(0, 100)))}</p> <p>${$.escape(location.href)}</p> `;
+	$$payload.out += `<p>0</p> <p>${$.escape(location.href)}</p> `;
 	Child($$payload, { prop: encodeURIComponent('hello') });
 	$$payload.out += `<!---->`;
 }
\ No newline at end of file

From 6fe5977b3d0bfd86d7b8e47f9e5374ffa31fba56 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 18 Apr 2025 11:27:19 -0400
Subject: [PATCH 004/259] Version Packages (#15798)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/serious-adults-sit.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/serious-adults-sit.md

diff --git a/.changeset/serious-adults-sit.md b/.changeset/serious-adults-sit.md
deleted file mode 100644
index 8c98a7c366..0000000000
--- a/.changeset/serious-adults-sit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: partially evaluate more expressions
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 709b829fcd..8c01c71099 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.28.0
+
+### Minor Changes
+
+- feat: partially evaluate more expressions ([#15781](https://github.com/sveltejs/svelte/pull/15781))
+
 ## 5.27.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index efead5604c..784b14ea26 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.27.3",
+  "version": "5.28.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c64eded9c4..4418204eca 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.27.3';
+export const VERSION = '5.28.0';
 export const PUBLIC_VERSION = '5';

From d8c6afde944a61c648c6b6f416f5ccafde272d44 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Fri, 18 Apr 2025 18:48:27 +0300
Subject: [PATCH 005/259] fix: emit error on wrong placement of the `:global`
 block selector (#15794)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/pretty-beers-care.md                          | 5 +++++
 .../docs/98-reference/.generated/compile-errors.md       | 6 ++++++
 packages/svelte/messages/compile-errors/style.md         | 4 ++++
 packages/svelte/src/compiler/errors.js                   | 9 +++++++++
 .../src/compiler/phases/2-analyze/css/css-analyze.js     | 6 +++++-
 .../samples/css-global-block-in-pseudoclass/_config.js   | 9 +++++++++
 .../samples/css-global-block-in-pseudoclass/main.svelte  | 4 ++++
 7 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/pretty-beers-care.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte

diff --git a/.changeset/pretty-beers-care.md b/.changeset/pretty-beers-care.md
new file mode 100644
index 0000000000..821bad41c4
--- /dev/null
+++ b/.changeset/pretty-beers-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: emit error on wrong placement of the `:global` block selector
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 6196a85ade..e8669ead53 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -274,6 +274,12 @@ A `:global` selector cannot modify an existing selector
 A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
+### css_global_block_invalid_placement
+
+```
+A `:global` selector cannot be inside a pseudoclass
+```
+
 ### css_global_invalid_placement
 
 ```
diff --git a/packages/svelte/messages/compile-errors/style.md b/packages/svelte/messages/compile-errors/style.md
index f08a2156a3..272efbccce 100644
--- a/packages/svelte/messages/compile-errors/style.md
+++ b/packages/svelte/messages/compile-errors/style.md
@@ -50,6 +50,10 @@ x y {
 
 > A `:global` selector can only be modified if it is a descendant of other selectors
 
+## css_global_block_invalid_placement
+
+> A `:global` selector cannot be inside a pseudoclass
+
 ## css_global_invalid_placement
 
 > `:global(...)` can be at the start or end of a selector sequence, but not in the middle
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index aa328764e1..c99f597468 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -581,6 +581,15 @@ export function css_global_block_invalid_modifier_start(node) {
 	e(node, 'css_global_block_invalid_modifier_start', `A \`:global\` selector can only be modified if it is a descendant of other selectors\nhttps://svelte.dev/e/css_global_block_invalid_modifier_start`);
 }
 
+/**
+ * A `:global` selector cannot be inside a pseudoclass
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function css_global_block_invalid_placement(node) {
+	e(node, 'css_global_block_invalid_placement', `A \`:global\` selector cannot be inside a pseudoclass\nhttps://svelte.dev/e/css_global_block_invalid_placement`);
+}
+
 /**
  * `:global(...)` can be at the start or end of a selector sequence, but not in the middle
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index 2dc3435648..d6052c9c3e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -68,8 +68,12 @@ const css_visitors = {
 			const global = node.children.find(is_global);
 
 			if (global) {
-				const idx = node.children.indexOf(global);
+				const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
+				if (is_nested && !global.selectors[0].args) {
+					e.css_global_block_invalid_placement(global.selectors[0]);
+				}
 
+				const idx = node.children.indexOf(global);
 				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 					for (let i = idx + 1; i < node.children.length; i++) {
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js
new file mode 100644
index 0000000000..c987725d74
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_placement',
+		message: 'A `:global` selector cannot be inside a pseudoclass',
+		position: [28, 35]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte
new file mode 100644
index 0000000000..53060df97d
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte
@@ -0,0 +1,4 @@
+<style>
+	/* invalid */
+	:is(:global) { color: red }
+</style>

From 3d808840298dcd7fbb40dfa90700082911e514e7 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 18 Apr 2025 17:50:38 +0200
Subject: [PATCH 006/259] fix: `update_version` after `delete` if `source` is
 `undefined` and `prop` in `target` (#15796)

* fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target`

* chore: remove submodule

* tweak test

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/great-colts-film.md                      |  5 +++++
 packages/svelte/src/internal/client/proxy.js        |  1 +
 .../samples/delete-proxy-key/_config.js             | 13 +++++++++++++
 .../samples/delete-proxy-key/main.svelte            | 13 +++++++++++++
 4 files changed, 32 insertions(+)
 create mode 100644 .changeset/great-colts-film.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte

diff --git a/.changeset/great-colts-film.md b/.changeset/great-colts-film.md
new file mode 100644
index 0000000000..273509c107
--- /dev/null
+++ b/.changeset/great-colts-film.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target`
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index d690790e3a..fd5706eaf2 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -100,6 +100,7 @@ export function proxy(value) {
 						prop,
 						with_parent(() => source(UNINITIALIZED, stack))
 					);
+					update_version(version);
 				}
 			} else {
 				// When working with arrays, we need to also ensure we update the length when removing
diff --git a/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js
new file mode 100644
index 0000000000..23141a01cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button>delete</button><p>test</p>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, '<button>delete</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte
new file mode 100644
index 0000000000..d3c519c401
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let obj = $state({test: 0})
+
+	let keys = $derived(Object.keys(obj));
+</script>
+
+<button onclick={() => delete obj.test}>
+	delete
+</button>
+
+{#each keys as key}
+	<p>{key}</p>
+{/each}

From b2d5787a09bffefb716d72706460d8b66e96c862 Mon Sep 17 00:00:00 2001
From: zeroberry <98147817+zeroberry@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:16:25 +0900
Subject: [PATCH 007/259] fix: ensure `<svelte:boundary>` properly removes
 error content in production mode (#15793)

* fix: ensure <svelte:boundary> properly removes error content in production mode

* add changeset
---
 .changeset/eleven-roses-speak.md              |  5 ++
 .../svelte/src/internal/client/runtime.js     | 79 ++++++++-----------
 .../samples/error-boundary-22/Child.svelte    |  3 +
 .../samples/error-boundary-22/_config.js      | 11 +++
 .../samples/error-boundary-22/main.svelte     | 15 ++++
 5 files changed, 69 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/eleven-roses-speak.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte

diff --git a/.changeset/eleven-roses-speak.md b/.changeset/eleven-roses-speak.md
new file mode 100644
index 0000000000..0d906f3b5f
--- /dev/null
+++ b/.changeset/eleven-roses-speak.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure <svelte:boundary> properly removes error content in production mode
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 7595aa4a19..fccea3e856 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -291,31 +291,21 @@ export function handle_error(error, effect, previous_effect, component_context)
 		is_throwing_error = true;
 	}
 
-	if (
-		!DEV ||
-		component_context === null ||
-		!(error instanceof Error) ||
-		handled_errors.has(error)
-	) {
-		propagate_error(error, effect);
-		return;
-	}
-
-	handled_errors.add(error);
+	if (DEV && component_context !== null && error instanceof Error && !handled_errors.has(error)) {
+		handled_errors.add(error);
 
-	const component_stack = [];
+		const component_stack = [];
 
-	const effect_name = effect.fn?.name;
+		const effect_name = effect.fn?.name;
 
-	if (effect_name) {
-		component_stack.push(effect_name);
-	}
+		if (effect_name) {
+			component_stack.push(effect_name);
+		}
 
-	/** @type {ComponentContext | null} */
-	let current_context = component_context;
+		/** @type {ComponentContext | null} */
+		let current_context = component_context;
 
-	while (current_context !== null) {
-		if (DEV) {
+		while (current_context !== null) {
 			/** @type {string} */
 			var filename = current_context.function?.[FILENAME];
 
@@ -323,35 +313,36 @@ export function handle_error(error, effect, previous_effect, component_context)
 				const file = filename.split('/').pop();
 				component_stack.push(file);
 			}
+
+			current_context = current_context.p;
 		}
 
-		current_context = current_context.p;
-	}
+		const indent = is_firefox ? '  ' : '\t';
+		define_property(error, 'message', {
+			value:
+				error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
+		});
+		define_property(error, 'component_stack', {
+			value: component_stack
+		});
 
-	const indent = is_firefox ? '  ' : '\t';
-	define_property(error, 'message', {
-		value: error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
-	});
-	define_property(error, 'component_stack', {
-		value: component_stack
-	});
-
-	const stack = error.stack;
-
-	// Filter out internal files from callstack
-	if (stack) {
-		const lines = stack.split('\n');
-		const new_lines = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (line.includes('svelte/src/internal')) {
-				continue;
+		const stack = error.stack;
+
+		// Filter out internal files from callstack
+		if (stack) {
+			const lines = stack.split('\n');
+			const new_lines = [];
+			for (let i = 0; i < lines.length; i++) {
+				const line = lines[i];
+				if (line.includes('svelte/src/internal')) {
+					continue;
+				}
+				new_lines.push(line);
 			}
-			new_lines.push(line);
+			define_property(error, 'stack', {
+				value: new_lines.join('\n')
+			});
 		}
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
 	}
 
 	propagate_error(error, effect);
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte
new file mode 100644
index 0000000000..ea60542af9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error();
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js
new file mode 100644
index 0000000000..c6be4a8cfd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p>error occurred</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte
new file mode 100644
index 0000000000..39b2fb2eb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from "./Child.svelte"
+</script>
+
+<svelte:boundary>
+	<p>This should be removed</p>
+
+	{#if true}
+		<Child />
+	{/if}
+
+	{#snippet failed()}
+		<p>error occurred</p>
+	{/snippet}
+</svelte:boundary>

From e40e9eb1a444426eb5ab27bf39cbda6225283574 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 18 Apr 2025 12:19:20 -0400
Subject: [PATCH 008/259] Version Packages (#15800)

* Version Packages

* Update packages/svelte/CHANGELOG.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/eleven-roses-speak.md |  5 -----
 .changeset/great-colts-film.md   |  5 -----
 .changeset/pretty-beers-care.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/eleven-roses-speak.md
 delete mode 100644 .changeset/great-colts-film.md
 delete mode 100644 .changeset/pretty-beers-care.md

diff --git a/.changeset/eleven-roses-speak.md b/.changeset/eleven-roses-speak.md
deleted file mode 100644
index 0d906f3b5f..0000000000
--- a/.changeset/eleven-roses-speak.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure <svelte:boundary> properly removes error content in production mode
diff --git a/.changeset/great-colts-film.md b/.changeset/great-colts-film.md
deleted file mode 100644
index 273509c107..0000000000
--- a/.changeset/great-colts-film.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target`
diff --git a/.changeset/pretty-beers-care.md b/.changeset/pretty-beers-care.md
deleted file mode 100644
index 821bad41c4..0000000000
--- a/.changeset/pretty-beers-care.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: emit error on wrong placement of the `:global` block selector
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8c01c71099..cb3b356cc7 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.28.1
+
+### Patch Changes
+
+- fix: ensure `<svelte:boundary>` properly removes error content in production mode ([#15793](https://github.com/sveltejs/svelte/pull/15793))
+
+- fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target` ([#15796](https://github.com/sveltejs/svelte/pull/15796))
+
+- fix: emit error on wrong placement of the `:global` block selector ([#15794](https://github.com/sveltejs/svelte/pull/15794))
+
 ## 5.28.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 784b14ea26..c91fbdd7d3 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.28.0",
+  "version": "5.28.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4418204eca..a19a773cd1 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.28.0';
+export const VERSION = '5.28.1';
 export const PUBLIC_VERSION = '5';

From a1adf2be6bae6032ab475b0efa76a720643583a2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Apr 2025 17:14:28 -0400
Subject: [PATCH 009/259] chore: squelch test console output (#15807)

* squelch some console spam

* another

* more

* more

* more

* last one
---
 .../samples/ondestroy-prop-access/_config.js  |  2 --
 .../svelte/tests/runtime-legacy/shared.ts     | 10 ++++-----
 .../_config.js                                | 10 ++-------
 .../event-handler-invalid-values/_config.js   | 18 ++++-----------
 .../event-handler-invalid-warning/_config.js  | 10 ++-------
 .../samples/inspect-exception/_config.js      |  3 ++-
 .../samples/inspect-trace-null/_config.js     |  6 ++++-
 .../main.svelte                               |  4 ++--
 packages/svelte/tests/signals/test.ts         | 22 ++++++++++++++++---
 9 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js
index 2ffb7e653f..4f75e82aae 100644
--- a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js
@@ -36,8 +36,6 @@ export default test({
 			btn1.click();
 		});
 
-		console.warn(logs);
-
 		// the five components guarded by `count < 2` unmount and log
 		assert.deepEqual(logs, [1, true, 1, true, 1, true, 1, true, 1, true]);
 
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index fc748ce6b2..14b6cff841 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -351,7 +351,7 @@ async function run_test_variant(
 				// @ts-expect-error
 				globalThis.__svelte.uid = 1;
 
-				if (manual_hydrate) {
+				if (manual_hydrate && variant === 'hydrate') {
 					hydrate_fn = () => {
 						instance = hydrate(mod.default, {
 							target,
@@ -469,10 +469,6 @@ async function run_test_variant(
 			throw err;
 		}
 	} finally {
-		console.log = console_log;
-		console.warn = console_warn;
-		console.error = console_error;
-
 		config.after_test?.();
 
 		// Free up the microtask queue
@@ -486,6 +482,10 @@ async function run_test_variant(
 				process.on('unhandledRejection', listener);
 			});
 		}
+
+		console.log = console_log;
+		console.warn = console_warn;
+		console.error = console_error;
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
index 01ac3c9ad0..e771010669 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
@@ -7,12 +7,8 @@ export default test({
 		dev: true
 	},
 
-	test({ assert, target, warnings }) {
-		/** @type {any} */
-		let error;
-
+	test({ assert, target, warnings, errors }) {
 		const handler = (/** @type {any}} */ e) => {
-			error = e.error;
 			e.stopImmediatePropagation();
 		};
 
@@ -20,9 +16,7 @@ export default test({
 
 		target.querySelector('button')?.click();
 
-		assert.throws(() => {
-			throw error;
-		}, /state_unsafe_mutation/);
+		assert.include(errors[0], 'state_unsafe_mutation');
 
 		window.removeEventListener('error', handler, true);
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
index d53812d4c3..7ca12af774 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
@@ -1,4 +1,3 @@
-import { assertType } from 'vitest';
 import { test } from '../../test';
 
 export default test({
@@ -8,12 +7,8 @@ export default test({
 		dev: true
 	},
 
-	test({ assert, target, warnings, logs }) {
-		/** @type {any} */
-		let error = null;
-
+	test({ assert, target, warnings, logs, errors }) {
 		const handler = (/** @type {any} */ e) => {
-			error = e.error;
 			e.stopImmediatePropagation();
 		};
 
@@ -23,16 +18,12 @@ export default test({
 
 		b1.click();
 		assert.deepEqual(logs, []);
-		assert.equal(error, null);
-
-		error = null;
-		logs.length = 0;
+		assert.deepEqual(errors, []);
 
 		b2.click();
 		assert.deepEqual(logs, ['clicked']);
-		assert.equal(error, null);
+		assert.deepEqual(errors, []);
 
-		error = null;
 		logs.length = 0;
 
 		b3.click();
@@ -40,8 +31,7 @@ export default test({
 		assert.deepEqual(warnings, [
 			'`click` handler at main.svelte:10:17 should be a function. Did you mean to add a leading `() =>`?'
 		]);
-		assert.isNotNull(error);
-		assert.match(error.message, /is not a function/);
+		assert.include(errors[0], 'is not a function');
 
 		window.removeEventListener('error', handler, true);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
index 423351a4c7..a0c792360e 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
@@ -7,12 +7,8 @@ export default test({
 		dev: true
 	},
 
-	test({ assert, target, warnings }) {
-		/** @type {any} */
-		let error;
-
+	test({ assert, target, warnings, errors }) {
 		const handler = (/** @type {any} */ e) => {
-			error = e.error;
 			e.stopImmediatePropagation();
 		};
 
@@ -20,9 +16,7 @@ export default test({
 
 		target.querySelector('button')?.click();
 
-		assert.throws(() => {
-			throw error;
-		}, /state_unsafe_mutation/);
+		assert.include(errors[0], 'state_unsafe_mutation');
 
 		window.removeEventListener('error', handler, true);
 
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 57caf6e08d..e155ff236a 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
@@ -6,11 +6,12 @@ export default test({
 		dev: true
 	},
 
-	async test({ assert, target, logs }) {
+	async test({ assert, target, logs, errors }) {
 		const b1 = target.querySelector('button');
 		b1?.click();
 		flushSync();
 
+		assert.ok(errors.length > 0);
 		assert.deepEqual(logs, ['init', 'a', 'init', 'b']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js
index e779a835c2..7982e8c1c6 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js
@@ -1,8 +1,12 @@
+import { assert } from 'vitest';
 import { test } from '../../test';
 
 export default test({
 	compileOptions: {
 		dev: true
 	},
-	test() {}
+
+	test({ logs }) {
+		assert.ok(logs.length > 0);
+	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
index e909d77fd6..9f3a56a9ed 100644
--- a/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	const log = () => {
-		console.log(snip);
+		if (!snip) throw new Error('oops');
 	}
 	let x = $state(0);
 </script>
@@ -9,4 +9,4 @@
 
 {#snippet snip()}
 	snippet {x}
-{/snippet}
\ No newline at end of file
+{/snippet}
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 3a427e9392..8421ae4a7c 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -15,6 +15,7 @@ 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';
 
 /**
  * @param runes runes mode
@@ -469,6 +470,9 @@ describe('signals', () => {
 	test('schedules rerun when writing to signal before reading it', (runes) => {
 		if (!runes) return () => {};
 
+		const error = console.error;
+		console.error = noop;
+
 		const value = state({ count: 0 });
 		user_effect(() => {
 			set(value, { count: 0 });
@@ -482,14 +486,19 @@ describe('signals', () => {
 			} catch (e: any) {
 				assert.include(e.message, 'effect_update_depth_exceeded');
 				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
 			}
-			assert.equal(errored, true);
 		};
 	});
 
 	test('schedules rerun when updating deeply nested value', (runes) => {
 		if (!runes) return () => {};
 
+		const error = console.error;
+		console.error = noop;
+
 		const value = proxy({ a: { b: { c: 0 } } });
 		user_effect(() => {
 			value.a.b.c += 1;
@@ -502,14 +511,19 @@ describe('signals', () => {
 			} catch (e: any) {
 				assert.include(e.message, 'effect_update_depth_exceeded');
 				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
 			}
-			assert.equal(errored, true);
 		};
 	});
 
 	test('schedules rerun when writing to signal before reading it', (runes) => {
 		if (!runes) return () => {};
 
+		const error = console.error;
+		console.error = noop;
+
 		const value = proxy({ arr: [] });
 		user_effect(() => {
 			value.arr = [];
@@ -523,8 +537,10 @@ describe('signals', () => {
 			} catch (e: any) {
 				assert.include(e.message, 'effect_update_depth_exceeded');
 				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
 			}
-			assert.equal(errored, true);
 		};
 	});
 

From bfb969a6cccb92180180416641e48889eab730a6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 21 Apr 2025 05:56:42 -0400
Subject: [PATCH 010/259] chore: simplify `process_effects` (#15809)

---
 packages/svelte/src/internal/client/runtime.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index fccea3e856..7a926bf624 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -780,19 +780,12 @@ function process_effects(root) {
 			} else if (is_branch) {
 				effect.f ^= CLEAN;
 			} else {
-				// Ensure we set the effect to be the active reaction
-				// to ensure that unowned deriveds are correctly tracked
-				// because we're flushing the current effect
-				var previous_active_reaction = active_reaction;
 				try {
-					active_reaction = effect;
 					if (check_dirtiness(effect)) {
 						update_effect(effect);
 					}
 				} catch (error) {
 					handle_error(error, effect, null, effect.ctx);
-				} finally {
-					active_reaction = previous_active_reaction;
 				}
 			}
 

From dfd742d532f578f47bc3e414e18e61af030381f7 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 22 Apr 2025 12:03:02 +0200
Subject: [PATCH 011/259] fix: don't mark selector lists inside `:global` with
 multiple items as unused (#15817)

Regression from #15762

Fixes #15816
---
 .changeset/wild-actors-retire.md                 |  5 +++++
 .../src/compiler/phases/3-transform/css/index.js |  7 ++++---
 .../tests/css/samples/global-block/_config.js    | 16 ++++++++--------
 .../tests/css/samples/global-block/expected.css  |  4 ++++
 .../tests/css/samples/global-block/input.svelte  |  4 ++++
 5 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/wild-actors-retire.md

diff --git a/.changeset/wild-actors-retire.md b/.changeset/wild-actors-retire.md
new file mode 100644
index 0000000000..d01a1c169b
--- /dev/null
+++ b/.changeset/wild-actors-retire.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't mark selector lists inside `:global` with multiple items as unused
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index 9f1142cce9..cee7ab2791 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -196,9 +196,12 @@ const visitors = {
 		next();
 	},
 	SelectorList(node, { state, next, path }) {
+		const parent = path.at(-1);
+
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
 		if (
-			(!is_in_global_block(path) || node.children.length > 1) &&
+			(!is_in_global_block(path) ||
+				(node.children.length > 1 && parent?.type === 'Rule' && parent.metadata.is_global_block)) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -260,7 +263,6 @@ const visitors = {
 
 		// if this selector list belongs to a rule, require a specificity bump for the
 		// first scoped selector but only if we're at the top level
-		let parent = path.at(-1);
 		if (parent?.type === 'Rule') {
 			specificity = { bumped: false };
 
@@ -376,7 +378,6 @@ const visitors = {
 };
 
 /**
- *
  * @param {Array<AST.CSS.Node>} path
  */
 function is_in_global_block(path) {
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index a8b11a73ec..18a56e9a97 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -7,28 +7,28 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 69,
+				line: 73,
 				column: 1,
-				character: 917
+				character: 964
 			},
 			end: {
-				line: 69,
+				line: 73,
 				column: 16,
-				character: 932
+				character: 979
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "unused :global"',
 			start: {
-				line: 100,
+				line: 104,
 				column: 29,
-				character: 1223
+				character: 1270
 			},
 			end: {
-				line: 100,
+				line: 104,
 				column: 43,
-				character: 1237
+				character: 1284
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index 12f9a75032..be1838fd98 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -3,6 +3,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	/*}*/
 
 	div.svelte-xyz {
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index ee05205d67..86d438031a 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -5,6 +5,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	}
 
 	div :global {

From 018996c1677e17857c404df33c8035a1a0c8b42e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 22 Apr 2025 12:17:51 +0200
Subject: [PATCH 012/259] Version Packages (#15818)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/wild-actors-retire.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/wild-actors-retire.md

diff --git a/.changeset/wild-actors-retire.md b/.changeset/wild-actors-retire.md
deleted file mode 100644
index d01a1c169b..0000000000
--- a/.changeset/wild-actors-retire.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't mark selector lists inside `:global` with multiple items as unused
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index cb3b356cc7..72cd00bc6a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.28.2
+
+### Patch Changes
+
+- fix: don't mark selector lists inside `:global` with multiple items as unused ([#15817](https://github.com/sveltejs/svelte/pull/15817))
+
 ## 5.28.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index c91fbdd7d3..ff71429d2f 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.28.1",
+  "version": "5.28.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index a19a773cd1..a3a9979d65 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.28.1';
+export const VERSION = '5.28.2';
 export const PUBLIC_VERSION = '5';

From 1c2fc210232c16d2eb0fdb20d9bac3cef2b87897 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 23 Apr 2025 16:49:11 +0200
Subject: [PATCH 013/259] fix: allow characters in the supplementary
 special-purpose plane (#15823)

fixes #15821

Source: https://en.wikipedia.org/wiki/Plane_(Unicode)#Supplementary_Special-purpose_Plane
---
 .changeset/wild-bulldogs-move.md                          | 5 +++++
 packages/svelte/src/compiler/phases/1-parse/utils/html.js | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/wild-bulldogs-move.md

diff --git a/.changeset/wild-bulldogs-move.md b/.changeset/wild-bulldogs-move.md
new file mode 100644
index 0000000000..c3c5580f77
--- /dev/null
+++ b/.changeset/wild-bulldogs-move.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow characters in the supplementary special-purpose plane
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/html.js b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
index a68acb996f..a0c2a5b06f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/html.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
@@ -72,6 +72,8 @@ const NUL = 0;
 // to replace them ourselves
 //
 // Source: http://en.wikipedia.org/wiki/Character_encodings_in_HTML#Illegal_characters
+// Also see: https://en.wikipedia.org/wiki/Plane_(Unicode)
+// Also see: https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
 
 /** @param {number} code */
 function validate_code(code) {
@@ -116,5 +118,10 @@ function validate_code(code) {
 		return code;
 	}
 
+	// supplementary special-purpose plane 0xe0000 - 0xe07f and 0xe0100 - 0xe01ef
+	if ((code >= 917504 && code <= 917631) || (code >= 917760 && code <= 917999)) {
+		return code;
+	}
+
 	return NUL;
 }

From c051a6eb1e61bf6c72842ba3c04900b07c54a5fe Mon Sep 17 00:00:00 2001
From: Lars Francke <lars.francke@stackable.tech>
Date: Wed, 30 Apr 2025 08:53:22 +0200
Subject: [PATCH 014/259] fix: improve error message for migration errors when
 slot would be renamed (#15841)

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
---
 .changeset/strong-coins-peel.md                              | 5 +++++
 packages/svelte/src/compiler/migrate/index.js                | 4 ++--
 .../impossible-migrate-$derived-derived-var-3/output.svelte  | 4 ++--
 .../impossible-migrate-slot-change-name/output.svelte        | 4 ++--
 .../impossible-migrate-slot-non-identifier/output.svelte     | 4 ++--
 5 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/strong-coins-peel.md

diff --git a/.changeset/strong-coins-peel.md b/.changeset/strong-coins-peel.md
new file mode 100644
index 0000000000..013e8e44a1
--- /dev/null
+++ b/.changeset/strong-coins-peel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve error message for migration errors when slot would be renamed
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 75a9a64905..2d5a4dcd9e 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1307,7 +1307,7 @@ const template = {
 			name = state.scope.generate(slot_name);
 			if (name !== slot_name) {
 				throw new MigrationError(
-					'This migration would change the name of a slot making the component unusable'
+					`This migration would change the name of a slot (${slot_name} to ${name}) making the component unusable`
 				);
 			}
 		}
@@ -1880,7 +1880,7 @@ function handle_identifier(node, state, path) {
 				let new_name = state.scope.generate(name);
 				if (new_name !== name) {
 					throw new MigrationError(
-						'This migration would change the name of a slot making the component unusable'
+						`This migration would change the name of a slot (${name} to ${new_name}) making the component unusable`
 					);
 				}
 			}
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
index 9e4f086aed..26012e1115 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
@@ -1,7 +1,7 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (derived to derived_1) making the component unusable -->
 <script>
 	let derived;
 </script>
 <Component>
 	<slot name="derived" slot="derived" />
-</Component>
\ No newline at end of file
+</Component>
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
index 2b6838a1d6..328966b63b 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
@@ -1,6 +1,6 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (body to body_1) making the component unusable -->
 <script>
 	let body;
 </script>
 
-<slot name="body"></slot>
\ No newline at end of file
+<slot name="body"></slot>
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
index 6e5ab10310..1e763577df 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
@@ -1,2 +1,2 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
-<slot name="dashed-name"></slot>
\ No newline at end of file
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (dashed-name to dashed_name) making the component unusable -->
+<slot name="dashed-name"></slot>

From 0ace76d8f1ea5402087e202152630cd50a5d757a Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 3 May 2025 05:43:27 -0700
Subject: [PATCH 015/259] docs: clarify `$inspect.trace` docs (#15858)

* docs: clarify `$inspect.trace` docs

* Update 07-$inspect.md

* Update documentation/docs/02-runes/07-$inspect.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/02-runes/07-$inspect.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index ff3d64757b..13ac8b79a3 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -52,6 +52,7 @@ This rune, added in 5.14, causes the surrounding function to be _traced_ in deve
 	import { doSomeWork } from './elsewhere';
 
 	$effect(() => {
+		+++// $inspect.trace must be the first statement of a function body+++
 		+++$inspect.trace();+++
 		doSomeWork();
 	});

From 8b7bea162449877be637dea44caa256928be0b19 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 14:19:47 -0400
Subject: [PATCH 016/259] chore: better `bench:compare` script (#15894)

* chore: make bench:compare results more legible

* fix

* fix

* fix
---
 benchmarking/compare/index.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/benchmarking/compare/index.js b/benchmarking/compare/index.js
index 9d8d279c35..8f38686a29 100644
--- a/benchmarking/compare/index.js
+++ b/benchmarking/compare/index.js
@@ -67,19 +67,29 @@ for (let i = 0; i < results[0].length; i += 1) {
 	for (const metric of ['time', 'gc_time']) {
 		const times = results.map((result) => +result[i][metric]);
 		let min = Infinity;
+		let max = -Infinity;
 		let min_index = -1;
 
 		for (let b = 0; b < times.length; b += 1) {
-			if (times[b] < min) {
-				min = times[b];
+			const time = times[b];
+
+			if (time < min) {
+				min = time;
 				min_index = b;
 			}
+
+			if (time > max) {
+				max = time;
+			}
 		}
 
 		if (min !== 0) {
-			console.group(`${metric}: fastest is ${branches[min_index]}`);
+			console.group(`${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
 			times.forEach((time, b) => {
-				console.log(`${branches[b]}: ${time.toFixed(2)}ms (${((time / min) * 100).toFixed(2)}%)`);
+				const SIZE = 20;
+				const n = Math.round(SIZE * (time / max));
+
+				console.log(`${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
 			});
 			console.groupEnd();
 		}
@@ -87,3 +97,7 @@ for (let i = 0; i < results[0].length; i += 1) {
 
 	console.groupEnd();
 }
+
+function char(i) {
+	return String.fromCharCode(97 + i);
+}

From b6164128b3ea823876fc9d14e8251befac6ff7bd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 15:51:05 -0400
Subject: [PATCH 017/259] chore: avoid microtasks when flushing sync
 (alternative) (#15895)

* chore: avoid microtasks when flushing sync

* chore: avoid microtasks when flushing sync

* chore: avoid microtasks when flushing sync

* tweak

* WIP

* another

* more

* tweak

* fix

* fix

* belt and braces

* Revert "belt and braces"

This reverts commit f8de1cf47ade629347ae7087cbb7e5f5099d0758.

---------

Co-authored-by: Dominic Gannaway <trueadm@users.noreply.github.com>
---
 .changeset/polite-melons-tickle.md             | 5 +++++
 packages/svelte/src/internal/client/runtime.js | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 .changeset/polite-melons-tickle.md

diff --git a/.changeset/polite-melons-tickle.md b/.changeset/polite-melons-tickle.md
new file mode 100644
index 0000000000..42967ea936
--- /dev/null
+++ b/.changeset/polite-melons-tickle.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: avoid microtasks when flushing sync
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 7a926bf624..2375dc0a63 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -823,6 +823,8 @@ export function flushSync(fn) {
 	if (fn) {
 		is_flushing = true;
 		flush_queued_root_effects();
+
+		is_flushing = true;
 		result = fn();
 	}
 

From 9e49be4d307dd179eab6312a80f0c0f7bc0040b4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 16:03:49 -0400
Subject: [PATCH 018/259] Version Packages (#15825)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/polite-melons-tickle.md |  5 -----
 .changeset/strong-coins-peel.md    |  5 -----
 .changeset/wild-bulldogs-move.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/polite-melons-tickle.md
 delete mode 100644 .changeset/strong-coins-peel.md
 delete mode 100644 .changeset/wild-bulldogs-move.md

diff --git a/.changeset/polite-melons-tickle.md b/.changeset/polite-melons-tickle.md
deleted file mode 100644
index 42967ea936..0000000000
--- a/.changeset/polite-melons-tickle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: avoid microtasks when flushing sync
diff --git a/.changeset/strong-coins-peel.md b/.changeset/strong-coins-peel.md
deleted file mode 100644
index 013e8e44a1..0000000000
--- a/.changeset/strong-coins-peel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: improve error message for migration errors when slot would be renamed
diff --git a/.changeset/wild-bulldogs-move.md b/.changeset/wild-bulldogs-move.md
deleted file mode 100644
index c3c5580f77..0000000000
--- a/.changeset/wild-bulldogs-move.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow characters in the supplementary special-purpose plane
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 72cd00bc6a..8650ba0e5b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.28.3
+
+### Patch Changes
+
+- chore: avoid microtasks when flushing sync ([#15895](https://github.com/sveltejs/svelte/pull/15895))
+
+- fix: improve error message for migration errors when slot would be renamed ([#15841](https://github.com/sveltejs/svelte/pull/15841))
+
+- fix: allow characters in the supplementary special-purpose plane ([#15823](https://github.com/sveltejs/svelte/pull/15823))
+
 ## 5.28.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ff71429d2f..85eef9c2eb 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.28.2",
+  "version": "5.28.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index a3a9979d65..b072c6432c 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.28.2';
+export const VERSION = '5.28.3';
 export const PUBLIC_VERSION = '5';

From 1cab761110b7268bd4ad98c86db419f594a0ac2e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 16:10:30 -0400
Subject: [PATCH 019/259] chore(deps-dev): bump vite from 5.4.18 to 5.4.19
 (#15897)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.4.18 to 5.4.19.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.19/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.19/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 5.4.19
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 playgrounds/sandbox/package.json |   2 +-
 pnpm-lock.yaml                   | 289 ++++++++++++++++---------------
 2 files changed, 149 insertions(+), 142 deletions(-)

diff --git a/playgrounds/sandbox/package.json b/playgrounds/sandbox/package.json
index 5aee92ab17..3ab65ac4b5 100644
--- a/playgrounds/sandbox/package.json
+++ b/playgrounds/sandbox/package.json
@@ -18,7 +18,7 @@
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
     "tinyglobby": "^0.2.12",
-    "vite": "^5.4.18",
+    "vite": "^5.4.19",
     "vite-plugin-inspect": "^0.8.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3518b0e57e..3d5db0fd8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,7 +152,7 @@ importers:
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0-next.6
-        version: 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        version: 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       polka:
         specifier: ^1.0.0-next.25
         version: 1.0.0-next.25
@@ -163,11 +163,11 @@ importers:
         specifier: ^0.2.12
         version: 0.2.12
       vite:
-        specifier: ^5.4.18
-        version: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
       vite-plugin-inspect:
         specifier: ^0.8.4
-        version: 0.8.4(rollup@4.39.0)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        version: 0.8.4(rollup@4.40.2)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
 
 packages:
 
@@ -408,8 +408,8 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/eslint-utils@4.5.1':
-    resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==}
+  '@eslint-community/eslint-utils@4.7.0':
+    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -551,8 +551,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm-eabi@4.39.0':
-    resolution: {integrity: sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==}
+  '@rollup/rollup-android-arm-eabi@4.40.2':
+    resolution: {integrity: sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==}
     cpu: [arm]
     os: [android]
 
@@ -561,8 +561,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.39.0':
-    resolution: {integrity: sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==}
+  '@rollup/rollup-android-arm64@4.40.2':
+    resolution: {integrity: sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==}
     cpu: [arm64]
     os: [android]
 
@@ -571,8 +571,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-arm64@4.39.0':
-    resolution: {integrity: sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==}
+  '@rollup/rollup-darwin-arm64@4.40.2':
+    resolution: {integrity: sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==}
     cpu: [arm64]
     os: [darwin]
 
@@ -581,18 +581,18 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.39.0':
-    resolution: {integrity: sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==}
+  '@rollup/rollup-darwin-x64@4.40.2':
+    resolution: {integrity: sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.39.0':
-    resolution: {integrity: sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==}
+  '@rollup/rollup-freebsd-arm64@4.40.2':
+    resolution: {integrity: sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.39.0':
-    resolution: {integrity: sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==}
+  '@rollup/rollup-freebsd-x64@4.40.2':
+    resolution: {integrity: sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==}
     cpu: [x64]
     os: [freebsd]
 
@@ -601,8 +601,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.39.0':
-    resolution: {integrity: sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.2':
+    resolution: {integrity: sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==}
     cpu: [arm]
     os: [linux]
 
@@ -611,8 +611,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.39.0':
-    resolution: {integrity: sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==}
+  '@rollup/rollup-linux-arm-musleabihf@4.40.2':
+    resolution: {integrity: sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==}
     cpu: [arm]
     os: [linux]
 
@@ -621,8 +621,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.39.0':
-    resolution: {integrity: sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==}
+  '@rollup/rollup-linux-arm64-gnu@4.40.2':
+    resolution: {integrity: sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==}
     cpu: [arm64]
     os: [linux]
 
@@ -631,13 +631,13 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.39.0':
-    resolution: {integrity: sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==}
+  '@rollup/rollup-linux-arm64-musl@4.40.2':
+    resolution: {integrity: sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.39.0':
-    resolution: {integrity: sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.2':
+    resolution: {integrity: sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==}
     cpu: [loong64]
     os: [linux]
 
@@ -646,8 +646,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.39.0':
-    resolution: {integrity: sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.2':
+    resolution: {integrity: sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==}
     cpu: [ppc64]
     os: [linux]
 
@@ -656,13 +656,13 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.39.0':
-    resolution: {integrity: sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==}
+  '@rollup/rollup-linux-riscv64-gnu@4.40.2':
+    resolution: {integrity: sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.39.0':
-    resolution: {integrity: sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==}
+  '@rollup/rollup-linux-riscv64-musl@4.40.2':
+    resolution: {integrity: sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==}
     cpu: [riscv64]
     os: [linux]
 
@@ -671,8 +671,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.39.0':
-    resolution: {integrity: sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==}
+  '@rollup/rollup-linux-s390x-gnu@4.40.2':
+    resolution: {integrity: sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==}
     cpu: [s390x]
     os: [linux]
 
@@ -681,8 +681,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.39.0':
-    resolution: {integrity: sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==}
+  '@rollup/rollup-linux-x64-gnu@4.40.2':
+    resolution: {integrity: sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==}
     cpu: [x64]
     os: [linux]
 
@@ -691,8 +691,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.39.0':
-    resolution: {integrity: sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==}
+  '@rollup/rollup-linux-x64-musl@4.40.2':
+    resolution: {integrity: sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==}
     cpu: [x64]
     os: [linux]
 
@@ -701,8 +701,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-arm64-msvc@4.39.0':
-    resolution: {integrity: sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.40.2':
+    resolution: {integrity: sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==}
     cpu: [arm64]
     os: [win32]
 
@@ -711,8 +711,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.39.0':
-    resolution: {integrity: sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.40.2':
+    resolution: {integrity: sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==}
     cpu: [ia32]
     os: [win32]
 
@@ -721,8 +721,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.39.0':
-    resolution: {integrity: sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==}
+  '@rollup/rollup-win32-x64-msvc@4.40.2':
+    resolution: {integrity: sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==}
     cpu: [x64]
     os: [win32]
 
@@ -816,8 +816,8 @@ packages:
     resolution: {integrity: sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/scope-manager@8.29.1':
-    resolution: {integrity: sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA==}
+  '@typescript-eslint/scope-manager@8.32.1':
+    resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/type-utils@8.26.0':
@@ -831,8 +831,8 @@ packages:
     resolution: {integrity: sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.29.1':
-    resolution: {integrity: sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ==}
+  '@typescript-eslint/types@8.32.1':
+    resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@8.26.0':
@@ -841,8 +841,8 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/typescript-estree@8.29.1':
-    resolution: {integrity: sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g==}
+  '@typescript-eslint/typescript-estree@8.32.1':
+    resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
@@ -854,8 +854,8 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.29.1':
-    resolution: {integrity: sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA==}
+  '@typescript-eslint/utils@8.32.1':
+    resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -865,8 +865,8 @@ packages:
     resolution: {integrity: sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.29.1':
-    resolution: {integrity: sha512-RGLh5CRaUEf02viP5c1Vh1cMGffQscyHe7HPAzGpfmfflFg1wUz2rYxd+OZqwpeypYvZ8UxSxuIpF++fmOzEcg==}
+  '@typescript-eslint/visitor-keys@8.32.1':
+    resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@vitest/coverage-v8@2.0.5':
@@ -1974,8 +1974,8 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rollup@4.39.0:
-    resolution: {integrity: sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==}
+  rollup@4.40.2:
+    resolution: {integrity: sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -2013,6 +2013,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
@@ -2310,8 +2315,8 @@ packages:
       terser:
         optional: true
 
-  vite@5.4.18:
-    resolution: {integrity: sha512-1oDcnEp3lVyHCuQ2YFelM4Alm2o91xNoMncRm1U7S+JdYfYOvbiGZ3/CxGttrOu2M/KcGz7cRC2DoNUA6urmMA==}
+  vite@5.4.19:
+    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -2711,7 +2716,7 @@ snapshots:
       eslint: 9.9.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.5.1(eslint@9.9.1)':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.9.1)':
     dependencies:
       eslint: 9.9.1
       eslint-visitor-keys: 3.4.3
@@ -2860,120 +2865,120 @@ snapshots:
     optionalDependencies:
       rollup: 4.22.4
 
-  '@rollup/pluginutils@5.1.0(rollup@4.39.0)':
+  '@rollup/pluginutils@5.1.0(rollup@4.40.2)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
-      rollup: 4.39.0
+      rollup: 4.40.2
 
   '@rollup/rollup-android-arm-eabi@4.22.4':
     optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.39.0':
+  '@rollup/rollup-android-arm-eabi@4.40.2':
     optional: true
 
   '@rollup/rollup-android-arm64@4.22.4':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.39.0':
+  '@rollup/rollup-android-arm64@4.40.2':
     optional: true
 
   '@rollup/rollup-darwin-arm64@4.22.4':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.39.0':
+  '@rollup/rollup-darwin-arm64@4.40.2':
     optional: true
 
   '@rollup/rollup-darwin-x64@4.22.4':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.39.0':
+  '@rollup/rollup-darwin-x64@4.40.2':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.39.0':
+  '@rollup/rollup-freebsd-arm64@4.40.2':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.39.0':
+  '@rollup/rollup-freebsd-x64@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-arm-gnueabihf@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.39.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-arm-musleabihf@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.39.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-arm64-gnu@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.39.0':
+  '@rollup/rollup-linux-arm64-gnu@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-arm64-musl@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.39.0':
+  '@rollup/rollup-linux-arm64-musl@4.40.2':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.39.0':
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.39.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-riscv64-gnu@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.39.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.40.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.39.0':
+  '@rollup/rollup-linux-riscv64-musl@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-s390x-gnu@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.39.0':
+  '@rollup/rollup-linux-s390x-gnu@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-x64-gnu@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.39.0':
+  '@rollup/rollup-linux-x64-gnu@4.40.2':
     optional: true
 
   '@rollup/rollup-linux-x64-musl@4.22.4':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.39.0':
+  '@rollup/rollup-linux-x64-musl@4.40.2':
     optional: true
 
   '@rollup/rollup-win32-arm64-msvc@4.22.4':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.39.0':
+  '@rollup/rollup-win32-arm64-msvc@4.40.2':
     optional: true
 
   '@rollup/rollup-win32-ia32-msvc@4.22.4':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.39.0':
+  '@rollup/rollup-win32-ia32-msvc@4.40.2':
     optional: true
 
   '@rollup/rollup-win32-x64-msvc@4.22.4':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.39.0':
+  '@rollup/rollup-win32-x64-msvc@4.40.2':
     optional: true
 
   '@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1)':
@@ -3000,25 +3005,25 @@ snapshots:
       typescript: 5.5.4
       typescript-eslint: 8.26.0(eslint@9.9.1)(typescript@5.5.4)
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       debug: 4.4.0
       svelte: link:packages/svelte
-      vite: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
       svelte: link:packages/svelte
-      vite: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-      vitefu: 0.2.5(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      vite: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vitefu: 0.2.5(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -3088,10 +3093,10 @@ snapshots:
       '@typescript-eslint/types': 8.26.0
       '@typescript-eslint/visitor-keys': 8.26.0
 
-  '@typescript-eslint/scope-manager@8.29.1':
+  '@typescript-eslint/scope-manager@8.32.1':
     dependencies:
-      '@typescript-eslint/types': 8.29.1
-      '@typescript-eslint/visitor-keys': 8.29.1
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/visitor-keys': 8.32.1
 
   '@typescript-eslint/type-utils@8.26.0(eslint@9.9.1)(typescript@5.5.4)':
     dependencies:
@@ -3106,7 +3111,7 @@ snapshots:
 
   '@typescript-eslint/types@8.26.0': {}
 
-  '@typescript-eslint/types@8.29.1': {}
+  '@typescript-eslint/types@8.32.1': {}
 
   '@typescript-eslint/typescript-estree@8.26.0(typescript@5.5.4)':
     dependencies:
@@ -3122,15 +3127,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.29.1(typescript@5.5.4)':
+  '@typescript-eslint/typescript-estree@8.32.1(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/types': 8.29.1
-      '@typescript-eslint/visitor-keys': 8.29.1
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/visitor-keys': 8.32.1
       debug: 4.4.0
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-api-utils: 2.1.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
@@ -3147,12 +3152,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.29.1(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/utils@8.32.1(eslint@9.9.1)(typescript@5.5.4)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.9.1)
-      '@typescript-eslint/scope-manager': 8.29.1
-      '@typescript-eslint/types': 8.29.1
-      '@typescript-eslint/typescript-estree': 8.29.1(typescript@5.5.4)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.9.1)
+      '@typescript-eslint/scope-manager': 8.32.1
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.5.4)
       eslint: 9.9.1
       typescript: 5.5.4
     transitivePeerDependencies:
@@ -3163,9 +3168,9 @@ snapshots:
       '@typescript-eslint/types': 8.26.0
       eslint-visitor-keys: 4.2.0
 
-  '@typescript-eslint/visitor-keys@8.29.1':
+  '@typescript-eslint/visitor-keys@8.32.1':
     dependencies:
-      '@typescript-eslint/types': 8.29.1
+      '@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))':
@@ -3491,7 +3496,7 @@ snapshots:
   eslint-compat-utils@0.5.1(eslint@9.9.1):
     dependencies:
       eslint: 9.9.1
-      semver: 7.7.1
+      semver: 7.7.2
 
   eslint-config-prettier@9.1.0(eslint@9.9.1):
     dependencies:
@@ -3499,7 +3504,7 @@ snapshots:
 
   eslint-plugin-es-x@7.8.0(eslint@9.9.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.9.1)
       '@eslint-community/regexpp': 4.12.1
       eslint: 9.9.1
       eslint-compat-utils: 0.5.1(eslint@9.9.1)
@@ -3508,8 +3513,8 @@ snapshots:
 
   eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4):
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.9.1)
-      '@typescript-eslint/utils': 8.29.1(eslint@9.9.1)(typescript@5.5.4)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.9.1)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.9.1)(typescript@5.5.4)
       enhanced-resolve: 5.18.1
       eslint: 9.9.1
       eslint-plugin-es-x: 7.8.0(eslint@9.9.1)
@@ -3517,7 +3522,7 @@ snapshots:
       globals: 15.15.0
       ignore: 5.3.2
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-declaration-location: 1.0.7(typescript@5.5.4)
     transitivePeerDependencies:
       - supports-color
@@ -3525,7 +3530,7 @@ snapshots:
 
   eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte):
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.9.1)
+      '@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
@@ -3536,7 +3541,7 @@ snapshots:
       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
-      semver: 7.7.1
+      semver: 7.7.2
       svelte-eslint-parser: 0.43.0(svelte@packages+svelte)
     optionalDependencies:
       svelte: link:packages/svelte
@@ -4292,30 +4297,30 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.22.4
       fsevents: 2.3.3
 
-  rollup@4.39.0:
+  rollup@4.40.2:
     dependencies:
       '@types/estree': 1.0.7
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.39.0
-      '@rollup/rollup-android-arm64': 4.39.0
-      '@rollup/rollup-darwin-arm64': 4.39.0
-      '@rollup/rollup-darwin-x64': 4.39.0
-      '@rollup/rollup-freebsd-arm64': 4.39.0
-      '@rollup/rollup-freebsd-x64': 4.39.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.39.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.39.0
-      '@rollup/rollup-linux-arm64-gnu': 4.39.0
-      '@rollup/rollup-linux-arm64-musl': 4.39.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.39.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.39.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.39.0
-      '@rollup/rollup-linux-riscv64-musl': 4.39.0
-      '@rollup/rollup-linux-s390x-gnu': 4.39.0
-      '@rollup/rollup-linux-x64-gnu': 4.39.0
-      '@rollup/rollup-linux-x64-musl': 4.39.0
-      '@rollup/rollup-win32-arm64-msvc': 4.39.0
-      '@rollup/rollup-win32-ia32-msvc': 4.39.0
-      '@rollup/rollup-win32-x64-msvc': 4.39.0
+      '@rollup/rollup-android-arm-eabi': 4.40.2
+      '@rollup/rollup-android-arm64': 4.40.2
+      '@rollup/rollup-darwin-arm64': 4.40.2
+      '@rollup/rollup-darwin-x64': 4.40.2
+      '@rollup/rollup-freebsd-arm64': 4.40.2
+      '@rollup/rollup-freebsd-x64': 4.40.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.40.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.40.2
+      '@rollup/rollup-linux-arm64-gnu': 4.40.2
+      '@rollup/rollup-linux-arm64-musl': 4.40.2
+      '@rollup/rollup-linux-loongarch64-gnu': 4.40.2
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.40.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.40.2
+      '@rollup/rollup-linux-riscv64-musl': 4.40.2
+      '@rollup/rollup-linux-s390x-gnu': 4.40.2
+      '@rollup/rollup-linux-x64-gnu': 4.40.2
+      '@rollup/rollup-linux-x64-musl': 4.40.2
+      '@rollup/rollup-win32-arm64-msvc': 4.40.2
+      '@rollup/rollup-win32-ia32-msvc': 4.40.2
+      '@rollup/rollup-win32-x64-msvc': 4.40.2
       fsevents: 2.3.3
 
   rrweb-cssom@0.7.1: {}
@@ -4347,6 +4352,8 @@ snapshots:
 
   semver@7.7.1: {}
 
+  semver@7.7.2: {}
+
   serialize-javascript@6.0.2:
     dependencies:
       randombytes: 2.1.0
@@ -4562,7 +4569,7 @@ snapshots:
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 1.1.2
-      vite: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4574,10 +4581,10 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-inspect@0.8.4(rollup@4.39.0)(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+  vite-plugin-inspect@0.8.4(rollup@4.40.2)(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
     dependencies:
       '@antfu/utils': 0.7.8
-      '@rollup/pluginutils': 5.1.0(rollup@4.39.0)
+      '@rollup/pluginutils': 5.1.0(rollup@4.40.2)
       debug: 4.4.0
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
@@ -4585,7 +4592,7 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 2.0.4
-      vite: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -4602,11 +4609,11 @@ snapshots:
       sass: 1.70.0
       terser: 5.27.0
 
-  vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
+  vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
-      rollup: 4.39.0
+      rollup: 4.40.2
     optionalDependencies:
       '@types/node': 20.12.7
       fsevents: 2.3.3
@@ -4614,9 +4621,9 @@ snapshots:
       sass: 1.70.0
       terser: 5.27.0
 
-  vitefu@0.2.5(vite@5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+  vitefu@0.2.5(vite@5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
     optionalDependencies:
-      vite: 5.4.18(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite: 5.4.19(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
   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:

From df03af2e9d6e53be6cfb72257c42b0c9e5e2c050 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Mon, 12 May 2025 23:15:03 +0300
Subject: [PATCH 020/259] fix: emit right error for a shadowed invalid rune
 (#15892)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/tall-cherries-fix.md                           | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/Identifier.js  | 2 +-
 .../samples/invalid-rune-name-shadowed/_config.js         | 8 ++++++++
 .../samples/invalid-rune-name-shadowed/main.svelte.js     | 5 +++++
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-cherries-fix.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js

diff --git a/.changeset/tall-cherries-fix.md b/.changeset/tall-cherries-fix.md
new file mode 100644
index 0000000000..df25e02da9
--- /dev/null
+++ b/.changeset/tall-cherries-fix.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: emit right error for a shadowed invalid rune
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index efbbe6cfa2..89a81127c1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -39,7 +39,7 @@ export function Identifier(node, context) {
 		if (
 			is_rune(node.name) &&
 			context.state.scope.get(node.name) === null &&
-			context.state.scope.get(node.name.slice(1)) === null
+			context.state.scope.get(node.name.slice(1))?.kind !== 'store_sub'
 		) {
 			/** @type {Expression} */
 			let current = node;
diff --git a/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
new file mode 100644
index 0000000000..a24996677c
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'rune_invalid_name',
+		message: '`$state.foo` is not a valid rune'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js
new file mode 100644
index 0000000000..966f7bc63b
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js
@@ -0,0 +1,5 @@
+class State {
+	value = $state.foo();
+}
+
+export const state = new State();

From eebb940b31285f300edd8a4a8c05aeab6a7b3d6e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 17:07:06 -0400
Subject: [PATCH 021/259] fix: prevent invalid BigInt calls from blowing up at
 compile time (#15900)

---
 .changeset/little-worms-wonder.md                          | 5 +++++
 packages/svelte/src/compiler/phases/scope.js               | 2 +-
 .../tests/runtime-runes/samples/bigint-invalid/_config.js  | 7 +++++++
 .../tests/runtime-runes/samples/bigint-invalid/main.svelte | 5 +++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/little-worms-wonder.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte

diff --git a/.changeset/little-worms-wonder.md b/.changeset/little-worms-wonder.md
new file mode 100644
index 0000000000..5482d7d5ce
--- /dev/null
+++ b/.changeset/little-worms-wonder.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent invalid BigInt calls from blowing up at compile time
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 8297f174d3..752bdac9d8 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -23,7 +23,7 @@ export const STRING = Symbol('string');
 
 /** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
 const globals = {
-	BigInt: [NUMBER, BigInt],
+	BigInt: [NUMBER],
 	'Math.min': [NUMBER, Math.min],
 	'Math.max': [NUMBER, Math.max],
 	'Math.random': [NUMBER],
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js
new file mode 100644
index 0000000000..810ac338a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	// check that this is a runtime error, not a compile time error
+	// caused by over-eager partial-evaluation
+	error: 'Cannot convert invalid to a BigInt'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte
new file mode 100644
index 0000000000..126528bad2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	var invalid = BigInt('invalid');
+</script>
+
+<h1>{invalid}</h1>

From 8a351944a3445a10ea4a035edf5255b3701e2c30 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 17:07:46 -0400
Subject: [PATCH 022/259] chore: tweak flushSync implementation (#15898)

---
 packages/svelte/src/internal/client/runtime.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 2375dc0a63..d790c0ad14 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -828,15 +828,16 @@ export function flushSync(fn) {
 		result = fn();
 	}
 
-	flush_tasks();
+	while (true) {
+		flush_tasks();
+
+		if (queued_root_effects.length === 0) {
+			return /** @type {T} */ (result);
+		}
 
-	while (queued_root_effects.length > 0) {
 		is_flushing = true;
 		flush_queued_root_effects();
-		flush_tasks();
 	}
-
-	return /** @type {T} */ (result);
 }
 
 /**

From 895337cf4786fea4131d6fd2fdc79c6369a2a088 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 17:12:48 -0400
Subject: [PATCH 023/259] fix: treat nullish expression as empty string
 (#15901)

* fix: treat nullish expression as empty string

* fix
---
 .changeset/blue-badgers-play.md                              | 5 +++++
 .../phases/3-transform/client/visitors/shared/utils.js       | 4 ++--
 .../runtime-runes/samples/nullish-empty-string/_config.js    | 5 +++++
 .../runtime-runes/samples/nullish-empty-string/main.svelte   | 1 +
 .../snapshot/samples/purity/_expected/client/index.svelte.js | 2 +-
 5 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/blue-badgers-play.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte

diff --git a/.changeset/blue-badgers-play.md b/.changeset/blue-badgers-play.md
new file mode 100644
index 0000000000..e07d393568
--- /dev/null
+++ b/.changeset/blue-badgers-play.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat nullish expression as empty string
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 bc79b76043..fb3f8df74b 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
@@ -77,7 +77,7 @@ export function build_template_chunk(
 				// If we have a single expression, then pass that in directly to possibly avoid doing
 				// extra work in the template_effect (instead we do the work in set_text).
 				if (evaluated.is_known) {
-					value = b.literal(evaluated.value);
+					value = b.literal((evaluated.value ?? '') + '');
 				}
 
 				return { value, has_state };
@@ -96,7 +96,7 @@ export function build_template_chunk(
 			}
 
 			if (evaluated.is_known) {
-				quasi.value.cooked += evaluated.value + '';
+				quasi.value.cooked += (evaluated.value ?? '') + '';
 			} else {
 				if (!evaluated.is_defined) {
 					// add `?? ''` where necessary
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js
new file mode 100644
index 0000000000..84e97e9735
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '[]'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte
new file mode 100644
index 0000000000..efe39b91fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte
@@ -0,0 +1 @@
+[{undefined ?? null}]
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 5bc9766acf..f661dbc01d 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -8,7 +8,7 @@ export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = 0;
+	p.textContent = '0';
 
 	var p_1 = $.sibling(p, 2);
 

From 92cdeadadfa85ac4d70f8649440655e6bb902dbd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 May 2025 18:52:51 -0400
Subject: [PATCH 024/259] chore: ts-ignore Math.f16round (#15902)

---
 packages/svelte/src/compiler/phases/scope.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 752bdac9d8..75a26d487b 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -28,7 +28,7 @@ const globals = {
 	'Math.max': [NUMBER, Math.max],
 	'Math.random': [NUMBER],
 	'Math.floor': [NUMBER, Math.floor],
-	// @ts-expect-error
+	// @ts-ignore
 	'Math.f16round': [NUMBER, Math.f16round],
 	'Math.round': [NUMBER, Math.round],
 	'Math.abs': [NUMBER, Math.abs],

From aa041a9e65cffc551f70a1499f51c223ef4c2289 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Mon, 12 May 2025 16:27:55 -0700
Subject: [PATCH 025/259] fix: warn on bidirectional control characters, fix
 various issues with template expressions (#15893)

* fix: warn on bidirectional control characters

* check evaluated values as well, fix minor issue

* fix failing tests

* lint

* fix

* shrink warning code

* use validator test suite rather than snapshot (which should be used sparingly as it creates more git noise)

* show ranges during parsing, and warn on all occurrences rather than just the first

* fix lint

* move check into Text visitor so it happens in expected order

* unused

* add svelte-ignore test

* ignore control characters following a svelte-ignore comment

* tweak message

* no need to test evaluations, since we are already testing the literals that they are composed of

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/rare-crews-collect.md              |  5 ++
 .../.generated/compile-warnings.md            |  8 +++
 .../svelte/messages/compile-warnings/misc.md  |  6 +++
 .../src/compiler/phases/2-analyze/index.js    |  4 ++
 .../phases/2-analyze/visitors/Literal.js      | 14 ++++++
 .../2-analyze/visitors/TemplateElement.js     | 12 +++++
 .../phases/2-analyze/visitors/Text.js         | 38 ++++++++++++--
 .../svelte/src/compiler/phases/patterns.js    |  2 +
 packages/svelte/src/compiler/warnings.js      |  9 ++++
 .../input.svelte                              |  8 +++
 .../warnings.json                             | 50 +++++++++++++++++++
 11 files changed, 153 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rare-crews-collect.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js
 create mode 100644 packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json

diff --git a/.changeset/rare-crews-collect.md b/.changeset/rare-crews-collect.md
new file mode 100644
index 0000000000..a4ffe09324
--- /dev/null
+++ b/.changeset/rare-crews-collect.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: warn on bidirectional control characters
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index 0e94cbadb2..7069f90206 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -586,6 +586,14 @@ Attributes should not contain ':' characters to prevent ambiguity with Svelte di
 Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
+### bidirectional_control_characters
+
+```
+A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+```
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ### bind_invalid_each_rest
 
 ```
diff --git a/packages/svelte/messages/compile-warnings/misc.md b/packages/svelte/messages/compile-warnings/misc.md
index 3b977db1be..29343dd28a 100644
--- a/packages/svelte/messages/compile-warnings/misc.md
+++ b/packages/svelte/messages/compile-warnings/misc.md
@@ -1,3 +1,9 @@
+## bidirectional_control_characters
+
+> A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ## legacy_code
 
 > `%code%` is no longer valid — please use `%suggestion%` instead
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 2e36a89649..766b317d06 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -43,6 +43,7 @@ import { ImportDeclaration } from './visitors/ImportDeclaration.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
+import { Literal } from './visitors/Literal.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { NewExpression } from './visitors/NewExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
@@ -63,6 +64,7 @@ import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
 import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
+import { TemplateElement } from './visitors/TemplateElement.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
@@ -156,6 +158,7 @@ const visitors = {
 	KeyBlock,
 	LabeledStatement,
 	LetDirective,
+	Literal,
 	MemberExpression,
 	NewExpression,
 	OnDirective,
@@ -176,6 +179,7 @@ const visitors = {
 	SvelteWindow,
 	SvelteBoundary,
 	TaggedTemplateExpression,
+	TemplateElement,
 	Text,
 	TransitionDirective,
 	TitleElement,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js
new file mode 100644
index 0000000000..58684ba71c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js
@@ -0,0 +1,14 @@
+/** @import { Literal } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {Literal} node
+ */
+export function Literal(node) {
+	if (typeof node.value === 'string') {
+		if (regex_bidirectional_control_characters.test(node.value)) {
+			w.bidirectional_control_characters(node);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js
new file mode 100644
index 0000000000..978042bbc5
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js
@@ -0,0 +1,12 @@
+/** @import { TemplateElement } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {TemplateElement} node
+ */
+export function TemplateElement(node) {
+	if (regex_bidirectional_control_characters.test(node.value.cooked ?? '')) {
+		w.bidirectional_control_characters(node);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index 363a111b7d..a03421e8dd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -1,20 +1,52 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
-import { regex_not_whitespace } from '../../patterns.js';
+import { regex_bidirectional_control_characters, regex_not_whitespace } from '../../patterns.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { extract_svelte_ignore } from '../../../utils/extract_svelte_ignore.js';
 
 /**
  * @param {AST.Text} node
  * @param {Context} context
  */
 export function Text(node, context) {
-	const in_template = context.path.at(-1)?.type === 'Fragment';
+	const parent = /** @type {AST.SvelteNode} */ (context.path.at(-1));
 
-	if (in_template && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+	if (
+		parent.type === 'Fragment' &&
+		context.state.parent_element &&
+		regex_not_whitespace.test(node.data)
+	) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
 			e.node_invalid_placement(node, message);
 		}
 	}
+
+	regex_bidirectional_control_characters.lastIndex = 0;
+	for (const match of node.data.matchAll(regex_bidirectional_control_characters)) {
+		let is_ignored = false;
+
+		// if we have a svelte-ignore comment earlier in the text, bail
+		// (otherwise we can only use svelte-ignore on parent elements/blocks)
+		if (parent.type === 'Fragment') {
+			for (const child of parent.nodes) {
+				if (child === node) break;
+
+				if (child.type === 'Comment') {
+					is_ignored ||= extract_svelte_ignore(
+						child.start + 4,
+						child.data,
+						context.state.analysis.runes
+					).includes('bidirectional_control_characters');
+				}
+			}
+		}
+
+		if (!is_ignored) {
+			let start = match.index + node.start;
+			w.bidirectional_control_characters({ start, end: start + match[0].length });
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/patterns.js b/packages/svelte/src/compiler/phases/patterns.js
index bda299de9e..2bee717131 100644
--- a/packages/svelte/src/compiler/phases/patterns.js
+++ b/packages/svelte/src/compiler/phases/patterns.js
@@ -21,3 +21,5 @@ export const regex_invalid_identifier_chars = /(^[^a-zA-Z_$]|[^a-zA-Z0-9_$])/g;
 export const regex_starts_with_vowel = /^[aeiou]/;
 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;
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index e6fc8caba5..c281433213 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -86,6 +86,7 @@ export const codes = [
 	'a11y_role_supports_aria_props_implicit',
 	'a11y_unknown_aria_attribute',
 	'a11y_unknown_role',
+	'bidirectional_control_characters',
 	'legacy_code',
 	'unknown_code',
 	'options_deprecated_accessors',
@@ -506,6 +507,14 @@ export function a11y_unknown_role(node, role, suggestion) {
 	w(node, 'a11y_unknown_role', `${suggestion ? `Unknown role '${role}'. Did you mean '${suggestion}'?` : `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
 }
 
+/**
+ * A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+ * @param {null | NodeLike} node
+ */
+export function bidirectional_control_characters(node) {
+	w(node, 'bidirectional_control_characters', `A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\nhttps://svelte.dev/e/bidirectional_control_characters`);
+}
+
 /**
  * `%code%` is no longer valid — please use `%suggestion%` instead
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte b/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte
new file mode 100644
index 0000000000..21587e5f4f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    let name = '\u2067\u2066rld\u2069\u2066wo\u2069\u2069';
+</script>
+⁧⁦def⁩⁦abc⁩⁩
+<h1>Hello, {name}!</h1>
+
+<!-- svelte-ignore bidirectional_control_characters -->
+⁧⁦def⁩⁦abc⁩⁩
diff --git a/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json b/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json
new file mode 100644
index 0000000000..6e70193c6c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json
@@ -0,0 +1,50 @@
+[
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 2,
+			"column": 15
+		},
+		"end": {
+			"line": 2,
+			"column": 58
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 0
+		},
+		"end": {
+			"line": 4,
+			"column": 2
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 5
+		},
+		"end": {
+			"line": 4,
+			"column": 7
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 10
+		},
+		"end": {
+			"line": 4,
+			"column": 12
+		}
+	}
+]

From f2796dda0e4dc1e3677bc87cf434ac8c2163c4c1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 19:51:16 -0400
Subject: [PATCH 026/259] Version Packages (#15899)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/blue-badgers-play.md   |  5 -----
 .changeset/little-worms-wonder.md |  5 -----
 .changeset/rare-crews-collect.md  |  5 -----
 .changeset/tall-cherries-fix.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/blue-badgers-play.md
 delete mode 100644 .changeset/little-worms-wonder.md
 delete mode 100644 .changeset/rare-crews-collect.md
 delete mode 100644 .changeset/tall-cherries-fix.md

diff --git a/.changeset/blue-badgers-play.md b/.changeset/blue-badgers-play.md
deleted file mode 100644
index e07d393568..0000000000
--- a/.changeset/blue-badgers-play.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: treat nullish expression as empty string
diff --git a/.changeset/little-worms-wonder.md b/.changeset/little-worms-wonder.md
deleted file mode 100644
index 5482d7d5ce..0000000000
--- a/.changeset/little-worms-wonder.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent invalid BigInt calls from blowing up at compile time
diff --git a/.changeset/rare-crews-collect.md b/.changeset/rare-crews-collect.md
deleted file mode 100644
index a4ffe09324..0000000000
--- a/.changeset/rare-crews-collect.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: warn on bidirectional control characters
diff --git a/.changeset/tall-cherries-fix.md b/.changeset/tall-cherries-fix.md
deleted file mode 100644
index df25e02da9..0000000000
--- a/.changeset/tall-cherries-fix.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: emit right error for a shadowed invalid rune
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8650ba0e5b..95378823f5 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.28.4
+
+### Patch Changes
+
+- fix: treat nullish expression as empty string ([#15901](https://github.com/sveltejs/svelte/pull/15901))
+
+- fix: prevent invalid BigInt calls from blowing up at compile time ([#15900](https://github.com/sveltejs/svelte/pull/15900))
+
+- fix: warn on bidirectional control characters ([#15893](https://github.com/sveltejs/svelte/pull/15893))
+
+- fix: emit right error for a shadowed invalid rune ([#15892](https://github.com/sveltejs/svelte/pull/15892))
+
 ## 5.28.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 85eef9c2eb..92d44ec155 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.28.3",
+  "version": "5.28.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b072c6432c..d933675d36 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.28.3';
+export const VERSION = '5.28.4';
 export const PUBLIC_VERSION = '5';

From 326b32932cf81ba01005b2757268321460f477cb Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Tue, 13 May 2025 03:04:48 +0300
Subject: [PATCH 027/259] fix: more frequently update `bind:buffered` to actual
 value (#15874)

* fix: more frequently update `bind:buffered` to actual value

* small tweak

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/short-impalas-exist.md              |  5 +++++
 .../client/dom/elements/bindings/media.js      | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/short-impalas-exist.md

diff --git a/.changeset/short-impalas-exist.md b/.changeset/short-impalas-exist.md
new file mode 100644
index 0000000000..a1f9120c8f
--- /dev/null
+++ b/.changeset/short-impalas-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: more frequently update `bind:buffered` to actual value
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/media.js b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
index 30a8dac1af..f96ee05989 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/media.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
@@ -62,7 +62,23 @@ export function bind_current_time(media, get, set = get) {
  * @param {(array: Array<{ start: number; end: number }>) => void} set
  */
 export function bind_buffered(media, set) {
-	listen(media, ['loadedmetadata', 'progress'], () => set(time_ranges_to_array(media.buffered)));
+	/** @type {{ start: number; end: number; }[]} */
+	var current;
+
+	// `buffered` can update without emitting any event, so we check it on various events.
+	// By specs, `buffered` always returns a new object, so we have to compare deeply.
+	listen(media, ['loadedmetadata', 'progress', 'timeupdate', 'seeking'], () => {
+		var ranges = media.buffered;
+
+		if (
+			!current ||
+			current.length !== ranges.length ||
+			current.some((range, i) => ranges.start(i) !== range.start || ranges.end(i) !== range.end)
+		) {
+			current = time_ranges_to_array(ranges);
+			set(current);
+		}
+	});
 }
 
 /**

From 3bb1af9677ad145a5a048311090b3bada54aef12 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Tue, 13 May 2025 03:05:15 +0300
Subject: [PATCH 028/259] fix: proxify the value in assignment shorthands to
 the private field (#15862)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/shaggy-toys-arrive.md              |  5 ++++
 packages/svelte/src/compiler/utils/ast.js     |  4 ++-
 .../_config.js                                | 20 +++++++++++++
 .../main.svelte                               | 28 +++++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shaggy-toys-arrive.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte

diff --git a/.changeset/shaggy-toys-arrive.md b/.changeset/shaggy-toys-arrive.md
new file mode 100644
index 0000000000..440fa042c9
--- /dev/null
+++ b/.changeset/shaggy-toys-arrive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: proxify the value in assignment shorthands to the private field
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 108f4eff64..23a95a1026 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -580,5 +580,7 @@ export function build_assignment_value(operator, left, right) {
 	return operator === '='
 		? right
 		: // turn something like x += 1 into x = x + 1
-			b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
+			['||=', '&&=', '??='].includes(operator)
+			? b.logical(/** @type {ESTree.LogicalOperator} */ (operator.slice(0, -1)), left, right)
+			: b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
new file mode 100644
index 0000000000..0fdeabfe0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>inc</button>
+			<p>a:1</p>
+			<p>b:2</p>
+			<p>c:3</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
new file mode 100644
index 0000000000..746f22b1e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#a = $state();
+		#b = $state({ val: -1 });
+		#c = $state();
+		constructor() {
+			this.#a ||= {val: 0}
+			this.#b &&= {val: 0}
+			this.#c ??= {val: 0}
+		}
+		inc() {
+			this.#a.val += 1;
+			this.#b.val += 2;
+			this.#c.val += 3;
+		}
+		get a() { return this.#a?.val; }
+		get b() { return this.#b?.val; }
+		get c() { return this.#c?.val; }
+	}
+
+	let counter = new Counter();
+</script>
+
+<button onclick={() => counter.inc()}>inc</button>
+<!-- prevent updating outputs in a common effect -->
+{#key 1}<p>a:{counter.a}</p>{/key}
+{#key 2}<p>b:{counter.b}</p>{/key}
+{#key 3}<p>c:{counter.c}</p>{/key}

From 77bdf249ffcd6b08765d3bf05da577d1223f0366 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 20:29:01 -0400
Subject: [PATCH 029/259] Version Packages (#15903)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/shaggy-toys-arrive.md  | 5 -----
 .changeset/short-impalas-exist.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/shaggy-toys-arrive.md
 delete mode 100644 .changeset/short-impalas-exist.md

diff --git a/.changeset/shaggy-toys-arrive.md b/.changeset/shaggy-toys-arrive.md
deleted file mode 100644
index 440fa042c9..0000000000
--- a/.changeset/shaggy-toys-arrive.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: proxify the value in assignment shorthands to the private field
diff --git a/.changeset/short-impalas-exist.md b/.changeset/short-impalas-exist.md
deleted file mode 100644
index a1f9120c8f..0000000000
--- a/.changeset/short-impalas-exist.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: more frequently update `bind:buffered` to actual value
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 95378823f5..4ea42a3da2 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.28.5
+
+### Patch Changes
+
+- fix: proxify the value in assignment shorthands to the private field ([#15862](https://github.com/sveltejs/svelte/pull/15862))
+
+- fix: more frequently update `bind:buffered` to actual value ([#15874](https://github.com/sveltejs/svelte/pull/15874))
+
 ## 5.28.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 92d44ec155..c3255e30cd 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.28.4",
+  "version": "5.28.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index d933675d36..3ba616e962 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.28.4';
+export const VERSION = '5.28.5';
 export const PUBLIC_VERSION = '5';

From 2bc2ae0dddab74eecff606790e1ef01ea281d6ea Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 13 May 2025 02:57:23 +0200
Subject: [PATCH 030/259] fix: use `transform.read` for
 `ownership_validator.mutation` array (#15848)

---
 .changeset/gorgeous-experts-perform.md                 |  5 +++++
 .../phases/3-transform/client/visitors/shared/utils.js |  7 +++++--
 .../_config.js                                         | 10 ++++++++++
 .../main.svelte                                        |  5 +++++
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/gorgeous-experts-perform.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte

diff --git a/.changeset/gorgeous-experts-perform.md b/.changeset/gorgeous-experts-perform.md
new file mode 100644
index 0000000000..9c4673a341
--- /dev/null
+++ b/.changeset/gorgeous-experts-perform.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use `transform.read` for `ownership_validator.mutation` array
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 fb3f8df74b..80b472ac37 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
@@ -324,15 +324,18 @@ export function validate_mutation(node, context, expression) {
 	const state = /** @type {ComponentClientTransformState} */ (context.state);
 	state.analysis.needs_mutation_validation = true;
 
-	/** @type {Array<Identifier | Literal>} */
+	/** @type {Array<Identifier | Literal | Expression>} */
 	const path = [];
 
 	while (left.type === 'MemberExpression') {
 		if (left.property.type === 'Literal') {
 			path.unshift(left.property);
 		} else if (left.property.type === 'Identifier') {
+			const transform = Object.hasOwn(context.state.transform, left.property.name)
+				? context.state.transform[left.property.name]
+				: null;
 			if (left.computed) {
-				path.unshift(left.property);
+				path.unshift(transform?.read ? transform.read(left.property) : left.property);
 			} else {
 				path.unshift(b.literal(left.property.name));
 			}
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js
new file mode 100644
index 0000000000..95556f4737
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, errors }) {
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte
new file mode 100644
index 0000000000..d834551221
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { rows = $bindable([]), row } = $props();
+	rows[row] = '';
+</script>
+

From 944ef1dbcecf6277e42d3da9ca60dcbe2929aa38 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 13 May 2025 03:00:11 +0200
Subject: [PATCH 031/259] fix: don't spread away `$$slots` from `$props` is
 it's used (#15849)

* fix: don't spread away `$$slots` from `$props` is it's used

* beef up test

* fix

* Update .changeset/ten-plants-carry.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/ten-plants-carry.md                        |  5 +++++
 .../server/visitors/VariableDeclaration.js            | 11 +++++++++--
 .../samples/props-and-slots/Child.svelte              |  9 +++++++++
 .../runtime-runes/samples/props-and-slots/_config.js  |  8 ++++++++
 .../runtime-runes/samples/props-and-slots/main.svelte |  7 +++++++
 5 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ten-plants-carry.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte

diff --git a/.changeset/ten-plants-carry.md b/.changeset/ten-plants-carry.md
new file mode 100644
index 0000000000..91ae5889cf
--- /dev/null
+++ b/.changeset/ten-plants-carry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't redeclare `$$slots`
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 1f2bd3e2b1..b76455b5c1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -1,6 +1,7 @@
 /** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { Context } from '../types.js' */
+/** @import { ComponentAnalysis } from '../../../types.js' */
 /** @import { Scope } from '../../../scope.js' */
 import { build_fallback, extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
@@ -50,20 +51,26 @@ export function VariableDeclaration(node, context) {
 						}
 					}
 				});
+
+				// if `$$slots` is declared separately, deconflict
+				const slots_name = /** @type {ComponentAnalysis} */ (context.state.analysis).uses_slots
+					? b.id('$$slots_')
+					: b.id('$$slots');
+
 				if (id.type === 'ObjectPattern' && has_rest) {
 					// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
 					id.properties.splice(
 						id.properties.length - 1,
 						0,
 						// @ts-ignore
-						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$slots'), slots_name),
 						b.prop('init', b.id('$$events'), b.id('$$events'))
 					);
 				} else if (id.type === 'Identifier') {
 					// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
 					// on the identifier reference
 					id = b.object_pattern([
-						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$slots'), slots_name),
 						b.prop('init', b.id('$$events'), b.id('$$events')),
 						b.rest(b.id(id.name))
 					]);
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte
new file mode 100644
index 0000000000..a2e7d6d8a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	const props = $props();
+</script>
+
+<p>{Object.keys(props)}</p>
+
+{#if $$slots.foo}
+	<p>foo exists</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js b/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js
new file mode 100644
index 0000000000..3f6fb4143c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>a</p>
+		<p>foo exists</p>
+	`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte
new file mode 100644
index 0000000000..3535da7132
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child a="b">
+	<div slot="foo">foo</div>
+</Child>

From fbb1aecc2d617c6f0cf47240ac457b50baf490ef Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 21:23:34 -0400
Subject: [PATCH 032/259] Version Packages (#15904)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/gorgeous-experts-perform.md | 5 -----
 .changeset/ten-plants-carry.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/gorgeous-experts-perform.md
 delete mode 100644 .changeset/ten-plants-carry.md

diff --git a/.changeset/gorgeous-experts-perform.md b/.changeset/gorgeous-experts-perform.md
deleted file mode 100644
index 9c4673a341..0000000000
--- a/.changeset/gorgeous-experts-perform.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use `transform.read` for `ownership_validator.mutation` array
diff --git a/.changeset/ten-plants-carry.md b/.changeset/ten-plants-carry.md
deleted file mode 100644
index 91ae5889cf..0000000000
--- a/.changeset/ten-plants-carry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't redeclare `$$slots`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4ea42a3da2..8df324d649 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.28.6
+
+### Patch Changes
+
+- fix: use `transform.read` for `ownership_validator.mutation` array ([#15848](https://github.com/sveltejs/svelte/pull/15848))
+
+- fix: don't redeclare `$slots` ([#15849](https://github.com/sveltejs/svelte/pull/15849))
+
 ## 5.28.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index c3255e30cd..dadba9d50c 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.28.5",
+  "version": "5.28.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 3ba616e962..a77849804c 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.28.5';
+export const VERSION = '5.28.6';
 export const PUBLIC_VERSION = '5';

From d4fb9f4b100683cafc1f8d558c059c8691aab250 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 12 May 2025 20:00:13 -0600
Subject: [PATCH 033/259] fix: remove unncessary guards that require CSP
 privilege when removing event attributes (#15846)

* fix: remove unncessary guards that cause CSP violations when removing event attributes

* add changeset
---
 .changeset/hot-seals-hang.md                              | 5 +++++
 .../svelte/src/internal/client/dom/elements/events.js     | 8 ++------
 2 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/hot-seals-hang.md

diff --git a/.changeset/hot-seals-hang.md b/.changeset/hot-seals-hang.md
new file mode 100644
index 0000000000..184b89d506
--- /dev/null
+++ b/.changeset/hot-seals-hang.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove unncessary guards that require CSP privilege when removing event attributes
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index 3374fe713f..c2b7fc7d83 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -26,12 +26,8 @@ export const root_event_handles = new Set();
 export function replay_events(dom) {
 	if (!hydrating) return;
 
-	if (dom.onload) {
-		dom.removeAttribute('onload');
-	}
-	if (dom.onerror) {
-		dom.removeAttribute('onerror');
-	}
+	dom.removeAttribute('onload');
+	dom.removeAttribute('onerror');
 	// @ts-expect-error
 	const event = dom.__e;
 	if (event !== undefined) {

From 8866851e2c3254d650732ee04c9cceb33f5a552c Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 12 May 2025 19:42:13 -0700
Subject: [PATCH 034/259] docs: add links to new CLI add-on documentation
 (#15835)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/07-misc/02-testing.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index 0842019039..64bf49d77a 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -6,9 +6,9 @@ Testing helps you write and maintain your code and guard against regressions. Te
 
 ## Unit and integration testing using Vitest
 
-Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/).
+Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.
 
-To get started, install Vitest:
+To setup Vitest manually, first install it:
 
 ```bash
 npm install -D vitest
@@ -254,9 +254,9 @@ When writing component tests that involve two-way bindings, context or snippet p
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
 
-To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
+You can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.
 
-After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
+If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests - mainly starting your application at a certain port. For example:
 
 ```js
 /// file: playwright.config.js

From b6fe1cca3ce6170ce92c6e09d78c43f6be17f9fb Mon Sep 17 00:00:00 2001
From: Tristan <62366897+TitanCmd@users.noreply.github.com>
Date: Tue, 13 May 2025 22:51:57 +1000
Subject: [PATCH 035/259] docs: remove dead link in 07-misc/99-faq.md (#15906)

remove dead link from the docs in favor of pointing to our own docs

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 documentation/docs/07-misc/99-faq.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/99-faq.md b/documentation/docs/07-misc/99-faq.md
index ed5c6277c0..cf98cdd3c3 100644
--- a/documentation/docs/07-misc/99-faq.md
+++ b/documentation/docs/07-misc/99-faq.md
@@ -81,9 +81,10 @@ _End-to-End Tests_: To ensure your users are able to interact with your applicat
 
 Some resources for getting started with testing:
 
+- [Svelte docs on testing](/docs/svelte/testing)
+- [Setup Vitest using the Svelte CLI](/docs/cli/vitest)
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
 - [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
-- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit)
 - [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
 - [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
 - [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)

From 8fc8bc79d1bd0b1c44b40135faf4211a5e648e5d Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Tue, 13 May 2025 17:16:37 +0300
Subject: [PATCH 036/259] docs: add missing bindings (#15834)

* add missing bindings docs

* tweak

* tweak

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../docs/03-template-syntax/11-bind.md        | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index c23f3b5232..0970ee384e 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -117,6 +117,29 @@ Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a f
 </form>
 ```
 
+## `<input bind:indeterminate>`
+
+Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:
+
+```svelte
+<script>
+	let checked = $state(false);
+	let indeterminate = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked bind:indeterminate>
+
+	{#if indeterminate}
+		waiting...
+	{:else if checked}
+		checked
+	{:else}
+		unchecked
+	{/if}
+</form>
+```
+
 ## `<input bind:group>`
 
 Inputs that work together can use `bind:group`.
@@ -227,6 +250,7 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 - [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
 - [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
 - [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
+- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)
 
 ```svelte
 <audio src={clip} bind:duration bind:currentTime bind:paused></audio>
@@ -254,6 +278,10 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 </details>
 ```
 
+## `window` and `document`
+
+To bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).
+
 ## Contenteditable bindings
 
 Elements with the `contenteditable` attribute support the following bindings:
@@ -278,6 +306,10 @@ All visible elements have the following readonly bindings, measured with a `Resi
 - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
 - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
 - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)
+- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)
+- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)
+- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)
 
 ```svelte
 <div bind:offsetWidth={width} bind:offsetHeight={height}>
@@ -285,7 +317,7 @@ All visible elements have the following readonly bindings, measured with a `Resi
 </div>
 ```
 
-> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Note that CSS transformations do not trigger `ResizeObserver` callbacks.
 
 ## bind:this
 

From 7826ebaccceeee5edda77b5d900d2c204590c6ff Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Tue, 13 May 2025 09:06:12 -0700
Subject: [PATCH 037/259] fix: rewrite destructuring logic to handle iterators
 (#15813)

* fix: wrap array destructuring in spread to avoid iterator edge case

* spread at `tmp` declaration

* completely rewrite destructuring handling

* only wrap in iife if necessary

* oops

* minor style tweaks

* separate visitors

* tweak

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-moles-yell.md              |  5 ++
 .../client/visitors/VariableDeclaration.js    | 69 ++++++++++---------
 .../server/visitors/VariableDeclaration.js    | 13 ++--
 .../phases/3-transform/shared/assignments.js  | 67 ++++++++++--------
 packages/svelte/src/compiler/phases/scope.js  |  5 +-
 packages/svelte/src/compiler/utils/ast.js     | 46 ++++++++++++-
 .../_expected/client/index.svelte.js          | 10 +--
 7 files changed, 141 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/serious-moles-yell.md

diff --git a/.changeset/serious-moles-yell.md b/.changeset/serious-moles-yell.md
new file mode 100644
index 0000000000..08f33dc059
--- /dev/null
+++ b/.changeset/serious-moles-yell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: rewrite destructuring logic to handle iterators
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 84044e4ded..84c205d163 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
@@ -2,7 +2,7 @@
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
-import { extract_paths } from '../../../../utils/ast.js';
+import { build_pattern, extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
@@ -141,20 +141,20 @@ export function VariableDeclaration(node, context) {
 						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
 					);
 				} else {
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
 					declarations.push(
-						b.declarator(b.id(tmp), value),
-						...paths.map((path) => {
-							const value = path.expression?.(b.id(tmp));
-							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
-							return b.declarator(
-								path.node,
-								binding?.kind === 'state' || binding?.kind === 'raw_state'
-									? create_state_declarator(binding.node, value)
-									: value
-							);
-						})
+						b.declarator(pattern, value),
+						.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
+							([original, replacement]) => {
+								const binding = context.state.scope.get(original.name);
+								return b.declarator(
+									original,
+									binding?.kind === 'state' || binding?.kind === 'raw_state'
+										? create_state_declarator(binding.node, replacement)
+										: replacement
+								);
+							}
+						)
 					);
 				}
 
@@ -170,8 +170,7 @@ export function VariableDeclaration(node, context) {
 						)
 					);
 				} else {
-					const bindings = extract_paths(declarator.id);
-
+					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
 					const init = /** @type {CallExpression} */ (declarator.init);
 
 					/** @type {Identifier} */
@@ -189,10 +188,16 @@ export function VariableDeclaration(node, context) {
 						);
 					}
 
-					for (let i = 0; i < bindings.length; i++) {
-						const binding = bindings[i];
+					for (let i = 0; i < replacements.size; i++) {
+						const [original, replacement] = [...replacements][i];
 						declarations.push(
-							b.declarator(binding.node, b.call('$.derived', b.thunk(binding.expression(rhs))))
+							b.declarator(
+								original,
+								b.call(
+									'$.derived',
+									b.arrow([], b.block([b.let(pattern, rhs), b.return(replacement)]))
+								)
+							)
 						);
 					}
 				}
@@ -304,19 +309,19 @@ function create_state_declarators(declarator, { scope, analysis }, value) {
 		];
 	}
 
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
+	const [pattern, replacements] = build_pattern(declarator.id, scope);
 	return [
-		b.declarator(b.id(tmp), value),
-		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
-			const binding = scope.get(/** @type {Identifier} */ (path.node).name);
-			return b.declarator(
-				path.node,
-				binding?.kind === 'state'
-					? b.call('$.mutable_source', value, analysis.immutable ? b.true : undefined)
-					: value
-			);
-		})
+		b.declarator(pattern, value),
+		.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
+			([original, replacement]) => {
+				const binding = scope.get(original.name);
+				return b.declarator(
+					original,
+					binding?.kind === 'state'
+						? b.call('$.mutable_source', replacement, analysis.immutable ? b.true : undefined)
+						: replacement
+				);
+			}
+		)
 	];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index b76455b5c1..17bf516a22 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -3,7 +3,7 @@
 /** @import { Context } from '../types.js' */
 /** @import { ComponentAnalysis } from '../../../types.js' */
 /** @import { Scope } from '../../../scope.js' */
-import { build_fallback, extract_paths } from '../../../../utils/ast.js';
+import { build_pattern, build_fallback, extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 import { walk } from 'zimmerframe';
@@ -188,13 +188,10 @@ function create_state_declarators(declarator, scope, value) {
 		return [b.declarator(declarator.id, value)];
 	}
 
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
+	const [pattern, replacements] = build_pattern(declarator.id, scope);
 	return [
-		b.declarator(b.id(tmp), value), // TODO inject declarator for opts, so we can use it below
-		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
-			return b.declarator(path.node, value);
-		})
+		b.declarator(pattern, value),
+		// TODO inject declarator for opts, so we can use it below
+		...[...replacements].map(([original, replacement]) => b.declarator(original, replacement))
 	];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
index 3e6bb0c4c6..85b0869a15 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
@@ -1,7 +1,7 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Node, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Node, Pattern } from 'estree' */
 /** @import { Context as ClientContext } from '../client/types.js' */
 /** @import { Context as ServerContext } from '../server/types.js' */
-import { extract_paths, is_expression_async } from '../../../utils/ast.js';
+import { build_pattern, is_expression_async } from '../../../utils/ast.js';
 import * as b from '#compiler/builders';
 
 /**
@@ -23,21 +23,23 @@ export function visit_assignment_expression(node, context, build_assignment) {
 
 		let changed = false;
 
-		const assignments = extract_paths(node.left).map((path) => {
-			const value = path.expression?.(rhs);
+		const [pattern, replacements] = build_pattern(node.left, context.state.scope);
 
-			let assignment = build_assignment('=', path.node, value, context);
-			if (assignment !== null) changed = true;
-
-			return (
-				assignment ??
-				b.assignment(
-					'=',
-					/** @type {Pattern} */ (context.visit(path.node)),
-					/** @type {Expression} */ (context.visit(value))
-				)
-			);
-		});
+		const assignments = [
+			b.let(pattern, rhs),
+			...[...replacements].map(([original, replacement]) => {
+				let assignment = build_assignment(node.operator, original, replacement, context);
+				if (assignment !== null) changed = true;
+				return b.stmt(
+					assignment ??
+						b.assignment(
+							node.operator,
+							/** @type {Identifier} */ (context.visit(original)),
+							/** @type {Expression} */ (context.visit(replacement))
+						)
+				);
+			})
+		];
 
 		if (!changed) {
 			// No change to output -> nothing to transform -> we can keep the original assignment
@@ -45,25 +47,36 @@ export function visit_assignment_expression(node, context, build_assignment) {
 		}
 
 		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
-		const sequence = b.sequence(assignments);
+		const block = b.block(assignments);
 
 		if (!is_standalone) {
 			// this is part of an expression, we need the sequence to end with the value
-			sequence.expressions.push(rhs);
+			block.body.push(b.return(rhs));
 		}
 
-		if (should_cache) {
-			// the right hand side is a complex expression, wrap in an IIFE to cache it
-			const iife = b.arrow([rhs], sequence);
+		if (is_standalone && !should_cache) {
+			return block;
+		}
 
-			const iife_is_async =
-				is_expression_async(value) ||
-				assignments.some((assignment) => is_expression_async(assignment));
+		const iife = b.arrow(should_cache ? [rhs] : [], block);
 
-			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
-		}
+		const iife_is_async =
+			is_expression_async(value) ||
+			assignments.some(
+				(assignment) =>
+					(assignment.type === 'ExpressionStatement' &&
+						is_expression_async(assignment.expression)) ||
+					(assignment.type === 'VariableDeclaration' &&
+						assignment.declarations.some(
+							(declaration) =>
+								is_expression_async(declaration.id) ||
+								(declaration.init && is_expression_async(declaration.init))
+						))
+			);
 
-		return sequence;
+		return iife_is_async
+			? b.await(b.call(b.async(iife), should_cache ? value : undefined))
+			: b.call(iife, should_cache ? value : undefined);
 	}
 
 	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 75a26d487b..f37dfab8d1 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -630,9 +630,10 @@ export class Scope {
 
 	/**
 	 * @param {string} preferred_name
+	 * @param {(name: string, counter: number) => string} [generator]
 	 * @returns {string}
 	 */
-	generate(preferred_name) {
+	generate(preferred_name, generator = (name, counter) => `${name}_${counter}`) {
 		if (this.#porous) {
 			return /** @type {Scope} */ (this.parent).generate(preferred_name);
 		}
@@ -647,7 +648,7 @@ export class Scope {
 			this.root.conflicts.has(name) ||
 			is_reserved(name)
 		) {
-			name = `${preferred_name}_${n++}`;
+			name = generator(preferred_name, n++);
 		}
 
 		this.references.set(name, []);
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 23a95a1026..32ff5a37b3 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -1,7 +1,8 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Scope } from '#compiler' */
 /** @import * as ESTree from 'estree' */
 import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';
+import is_reference from 'is-reference';
 
 /**
  * Gets the left-most identifier of a member expression or identifier.
@@ -128,6 +129,49 @@ export function unwrap_pattern(pattern, nodes = []) {
 	return nodes;
 }
 
+/**
+ * @param {ESTree.Pattern} id
+ * @param {Scope} scope
+ * @returns {[ESTree.Pattern, Map<ESTree.Identifier | ESTree.MemberExpression, ESTree.Identifier>]}
+ */
+export function build_pattern(id, scope) {
+	/** @type {Map<ESTree.Identifier | ESTree.MemberExpression, ESTree.Identifier>} */
+	const map = new Map();
+
+	/** @type {Map<string, string>} */
+	const names = new Map();
+
+	let counter = 0;
+
+	for (const node of unwrap_pattern(id)) {
+		const name = scope.generate(`$$${++counter}`, (_, counter) => `$$${counter}`);
+
+		map.set(node, b.id(name));
+
+		if (node.type === 'Identifier') {
+			names.set(node.name, name);
+		}
+	}
+
+	const pattern = walk(id, null, {
+		Identifier(node, context) {
+			if (is_reference(node, /** @type {ESTree.Pattern} */ (context.path.at(-1)))) {
+				const name = names.get(node.name);
+				if (name) return b.id(name);
+			}
+		},
+
+		MemberExpression(node, context) {
+			const n = map.get(node);
+			if (n) return n;
+
+			context.next();
+		}
+	});
+
+	return [pattern, map];
+}
+
 /**
  * Extracts all identifiers from a pattern.
  * @param {ESTree.Pattern} pattern
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
index 47f297bce9..b2ef29ccaf 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
@@ -7,10 +7,12 @@ let c = 3;
 let d = 4;
 
 export function update(array) {
-	(
-		$.set(a, array[0], true),
-		$.set(b, array[1], true)
-	);
+	{
+		let [$$1, $$2] = array;
+
+		$.set(a, $$1, true);
+		$.set(b, $$2, true);
+	};
 
 	[c, d] = array;
 }
\ No newline at end of file

From 7636031b0d73ec350e0addb2dbfa7a1e3ee413df Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 13:22:08 -0400
Subject: [PATCH 038/259] Version Packages (#15905)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/hot-seals-hang.md     | 5 -----
 .changeset/serious-moles-yell.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/hot-seals-hang.md
 delete mode 100644 .changeset/serious-moles-yell.md

diff --git a/.changeset/hot-seals-hang.md b/.changeset/hot-seals-hang.md
deleted file mode 100644
index 184b89d506..0000000000
--- a/.changeset/hot-seals-hang.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: remove unncessary guards that require CSP privilege when removing event attributes
diff --git a/.changeset/serious-moles-yell.md b/.changeset/serious-moles-yell.md
deleted file mode 100644
index 08f33dc059..0000000000
--- a/.changeset/serious-moles-yell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: rewrite destructuring logic to handle iterators
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8df324d649..935d2b7cc6 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.28.7
+
+### Patch Changes
+
+- fix: remove unncessary guards that require CSP privilege when removing event attributes ([#15846](https://github.com/sveltejs/svelte/pull/15846))
+
+- fix: rewrite destructuring logic to handle iterators ([#15813](https://github.com/sveltejs/svelte/pull/15813))
+
 ## 5.28.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dadba9d50c..ce257c687a 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.28.6",
+  "version": "5.28.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index a77849804c..d7c041762f 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.28.6';
+export const VERSION = '5.28.7';
 export const PUBLIC_VERSION = '5';

From b93a617aa814a0e9154ae84b6767cd8ca02459a2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 May 2025 13:33:23 -0400
Subject: [PATCH 039/259] feat: attachments (#15000)

* parse attachments

* basic attachments working

* working

* rename to attach

* fix

* restrict which symbols are recognised as attachment keys

* allow cleanup to be returned directly

* changeset

* fix

* lint

* remove createAttachmentKey/isAttachmentKey

* fix spreading of symbol properties onto component

* types

* fix

* update name

* reserve ability to use sequence expressions in future

* Update packages/svelte/src/internal/client/dom/elements/attachments.js

Co-authored-by: Leonidaz <lbarenblit@gmail.com>

* actually let's do this instead

* expose createAttachmentKey

* make room for `@attach` docs

* add docs

* failing test

* fix

* lock down

* add missing reference docs

* prevent conflicts

* update docs

* regenerate

* fix link

* add Attachment interface

* beef up test

* regenerate

* tweak types

* fix

---------

Co-authored-by: Leonidaz <lbarenblit@gmail.com>
---
 .changeset/poor-days-pay.md                   |   5 +
 .../docs/03-template-syntax/09-@attach.md     | 138 +++++++++++++++++
 .../{09-@const.md => 10-@const.md}            |   0
 .../{10-@debug.md => 11-@debug.md}            |   0
 .../{11-bind.md => 12-bind.md}                |   0
 .../{12-use.md => 13-use.md}                  |   3 +
 .../{13-transition.md => 14-transition.md}    |   0
 .../{14-in-and-out.md => 15-in-and-out.md}    |   0
 .../{15-animate.md => 16-animate.md}          |   0
 .../98-reference/21-svelte-attachments.md     |   5 +
 packages/svelte/elements.d.ts                 |   5 +
 packages/svelte/package.json                  |   4 +
 packages/svelte/scripts/generate-types.js     |   1 +
 packages/svelte/src/attachments/index.js      |  27 ++++
 packages/svelte/src/attachments/public.d.ts   |  12 ++
 .../compiler/phases/1-parse/read/script.js    |   2 +-
 .../src/compiler/phases/1-parse/read/style.js |   2 +-
 .../compiler/phases/1-parse/state/element.js  |  23 ++-
 .../src/compiler/phases/2-analyze/index.js    |   2 +
 .../phases/2-analyze/visitors/AttachTag.js    |  13 ++
 .../2-analyze/visitors/shared/component.js    |  36 +++--
 .../3-transform/client/transform-client.js    |   2 +
 .../3-transform/client/visitors/AttachTag.js  |  21 +++
 .../client/visitors/RegularElement.js         |   6 +-
 .../client/visitors/shared/component.js       |   8 +
 .../svelte/src/compiler/types/template.d.ts   |  13 +-
 packages/svelte/src/constants.js              |   2 +
 .../client/dom/elements/attachments.js        |  15 ++
 .../client/dom/elements/attributes.js         |   9 +-
 packages/svelte/src/internal/client/index.js  |   2 +
 .../src/internal/client/reactivity/props.js   |   6 +
 .../samples/attachments/input.svelte          |   1 +
 .../samples/attachments/output.json           | 141 ++++++++++++++++++
 .../samples/attachment-basic/_config.js       |   6 +
 .../samples/attachment-basic/main.svelte      |   1 +
 .../attachment-component-spread/Child.svelte  |   5 +
 .../attachment-component-spread/_config.js    |  15 ++
 .../attachment-component-spread/main.svelte   |  30 ++++
 .../samples/attachment-component/Child.svelte |   5 +
 .../samples/attachment-component/_config.js   |  14 ++
 .../samples/attachment-component/main.svelte  |  15 ++
 .../samples/attachment-reactive/_config.js    |  14 ++
 .../samples/attachment-reactive/main.svelte   |   6 +
 .../samples/attachment-spread/_config.js      |   8 +
 .../samples/attachment-spread/main.svelte     |   9 ++
 .../attachment-svelte-element/_config.js      |   6 +
 .../attachment-svelte-element/main.svelte     |   1 +
 packages/svelte/types/index.d.ts              |  47 +++++-
 48 files changed, 669 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/poor-days-pay.md
 create mode 100644 documentation/docs/03-template-syntax/09-@attach.md
 rename documentation/docs/03-template-syntax/{09-@const.md => 10-@const.md} (100%)
 rename documentation/docs/03-template-syntax/{10-@debug.md => 11-@debug.md} (100%)
 rename documentation/docs/03-template-syntax/{11-bind.md => 12-bind.md} (100%)
 rename documentation/docs/03-template-syntax/{12-use.md => 13-use.md} (93%)
 rename documentation/docs/03-template-syntax/{13-transition.md => 14-transition.md} (100%)
 rename documentation/docs/03-template-syntax/{14-in-and-out.md => 15-in-and-out.md} (100%)
 rename documentation/docs/03-template-syntax/{15-animate.md => 16-animate.md} (100%)
 create mode 100644 documentation/docs/98-reference/21-svelte-attachments.md
 create mode 100644 packages/svelte/src/attachments/index.js
 create mode 100644 packages/svelte/src/attachments/public.d.ts
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
 create mode 100644 packages/svelte/src/internal/client/dom/elements/attachments.js
 create mode 100644 packages/svelte/tests/parser-modern/samples/attachments/input.svelte
 create mode 100644 packages/svelte/tests/parser-modern/samples/attachments/output.json
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte

diff --git a/.changeset/poor-days-pay.md b/.changeset/poor-days-pay.md
new file mode 100644
index 0000000000..8fbff10586
--- /dev/null
+++ b/.changeset/poor-days-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: attachments
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
new file mode 100644
index 0000000000..c988386933
--- /dev/null
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -0,0 +1,138 @@
+---
+title: {@attach ...}
+---
+
+Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
+
+> [!NOTE]
+> Attachments are available in Svelte 5.29 and newer.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/attachments').Attachment} */
+	function myAttachment(element) {
+		console.log(element.nodeName); // 'DIV'
+
+		return () => {
+			console.log('cleaning up');
+		};
+	}
+</script>
+
+<div {@attach myAttachment}>...</div>
+```
+
+An element can have any number of attachments.
+
+## Attachment factories
+
+A useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<button {@attach tooltip(content)}>
+	Hover me
+</button>
+```
+
+Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
+
+## Inline attachments
+
+Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71WbW_aSBD-Kyt0VaBJyGKbqoUkOhdI68qGUkh6pPSDMY6xYwyH12Ab8d9vZtYE6DX38aQQe3fennlm1jvbUmTP3VKj9KcthO3MShelJz9041Ljx7YksiWKcAP2C0V9uazGazcUuDexY_d3-84iEm4kwE3pOnZW_lLcjqOx8OfLxUqwLVvafiTYjj2tFnN2Vr3yVvbUB4NqEJ81x9H11cEounbsaG3HaL_xp2J2s1WVHa5mru_NxMtyW6TAytKgwm5u2RYlYwF4YsEIVSrYDZMaVc8VLblXPlOmZ5UmxkP9P9ynJ9cR5fKxk7EIXQGQIV9wsXL_TtxY6JE_t4W_iO5wv_yURA6uWLhYLMuicrAdi_-2RAMCUGgTReUC8gUTB9mueC2WK1ckq4j9AhVytiPHDX_Fh_-PXBVvhcsdEHl7fSXZkeTHIgtdKp7c3UegUjRYjfM3hQ9ZjpOty407efbF5dyOnxssWYXlcWlqC7sBmDz3Kl575-k8bGIXvdMuvn7uKo_Zx3Ayv_Mnn-7FaH4X2Mo0m6gPyWObR5P5g2q0dc9q6fVeS8uMdifttRxvOg_DKf-ydkEHZBuj_ayZgeFZw472JfuoTb6niZPzyP78jTvtxdpUp-o0q6tWVl87c2dtBfrGan3Ip3Mn-hqkm9Ff3xbGp_6HLwqvWwOtDnFqZvAYmMPOxgyehTW8T7oZzy1fU8yhAXuW6La9xPJ5arW0fNLiWTfTamCnmsED2DlJd6BzM3DA1gBbPQVbDv444Qw6iTXgKfjxwC43B5QbyDzPgrXRNlAm0MZoW0nX5_B06Ak-Mc-k10L7kQe81M3gHvYAz0CvkTwAvC2IOdDT7kADDq0MdSHvxMp0XnAJeXyLrQCx8hTxj3J6L2Igbp5KDIRbSNw6YSPcuDfsI5ac8KI80yFWX0AeitHuox4-pa-BpoEvzKMOOSMfWDeBGIFXwP4gzOE9cu71kF_FEpgf8AF-eYq4wQZ5z8A_2HtUF_LRwjXEaYFvrBnkA7rg00L9pCfjJYjHxNzmG8qbeBlgjndBwT1ypyCG7gtPngcY-aTd8TBPM-h41vfiiX6hjsAT9g3yw4t9ReLGdR_rSjUEOfBDtQRcyKUhSI4cwG_SNlTiD3vou5XiO2IB_zniBhusJeanORnHPpLcU92oZ9F3RjUiTizkDnx2BPUv4KK6Qc9RHIwbTGPZ632vCzqjDHlxEFOK9l3C-Yx1UiQ_XDtgkjUkf0MjR59QJ5XiEqZ-geMZasBzmds9YIK-xadPfIkenTsPsWPP_YYHB2OkxXlIqT6DopYDXaOa-1i_jvwW0JkiPHhG8AwUsfpYV6gF4tFzeXYQD9ZDo76kHoV1l3r5MYa9WtG3VA-sPfYKxW5xhbiRvYm9IqhX8HwO8Ix0UL8471hLOtd16mPip4N5UR6AgRdnJ8dvCMip1vCjbw3khfFS6h9lI-jswjnHnpY16yPHWdGPGeHzMcdZTj1J_d3B_JVRjvnopCv5wD7RVdLDPqG4kscTTpQNfvPgbI3g_f-pS4--a3TGUynH_hvJb9QpDzXJg3fo3eyld1Xq3YHjmbn23lTh7sm1m3Gpwur8Df2umMq16vtlyqLF5cpdurb4zb12Gfu522Dv-HruR_IWpQGmuDdhGMILvNQQq8TdXbwyVB3NP6dT1angaKxyUxqlXuaNf40L8qKWg8-W0XV9weQdDYPXzX4YqsprvXlQpru5Dbf0kRIMSsZ-u8wvGPydeNxPTk-LFSvjlLQEY96Ex_XBXxWv_mroRp6Yoej8hmmV0wnNB7MlEK81j3dT2PXZGxnyRJKBpOyDAYkq7Pb2FsLupzips3KnoPVOY-esXFPes7csrewtYA8Eb5lli1k19qOyAAkMMLxyEsZbuW70i5MMnRR8HntxFvErXiZhguMfmL8gPOXmB3DC-E8aEafNVzVqqEGQXtdRUAcDvq6ioopSr-97tugAqvcyOar3iy3VnZLanbb1T1jZfrjxo2mp8WSHsbv7Bx1mHBBZDAAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { paint } from './gradient.js';
+</script>
+
+<canvas
+	width={32}
+	height={32}
+	{@attach (canvas) => {
+		const context = canvas.getContext('2d');
+
+		$effect(() => {
+			let frame = requestAnimationFrame(function loop(t) {
+				frame = requestAnimationFrame(loop);
+				paint(context, t);
+			});
+
+			return () => {
+				cancelAnimationFrame(frame);
+			};
+		});
+	}}
+></canvas>
+```
+
+## Passing attachments to components
+
+When used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.
+
+This allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	/** @type {import('svelte/elements').HTMLButtonAttributes} */
+	let { children, ...props } = $props();
+</script>
+
+<!-- `props` includes attachments -->
+<button {...props}>
+	{@render children?.()}
+</button>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+	import Button from './Button.svelte';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<Button {@attach tooltip(content)}>
+	Hover me
+</Button>
+```
+
+## Creating attachments programmatically
+
+To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
diff --git a/documentation/docs/03-template-syntax/09-@const.md b/documentation/docs/03-template-syntax/10-@const.md
similarity index 100%
rename from documentation/docs/03-template-syntax/09-@const.md
rename to documentation/docs/03-template-syntax/10-@const.md
diff --git a/documentation/docs/03-template-syntax/10-@debug.md b/documentation/docs/03-template-syntax/11-@debug.md
similarity index 100%
rename from documentation/docs/03-template-syntax/10-@debug.md
rename to documentation/docs/03-template-syntax/11-@debug.md
diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/12-bind.md
similarity index 100%
rename from documentation/docs/03-template-syntax/11-bind.md
rename to documentation/docs/03-template-syntax/12-bind.md
diff --git a/documentation/docs/03-template-syntax/12-use.md b/documentation/docs/03-template-syntax/13-use.md
similarity index 93%
rename from documentation/docs/03-template-syntax/12-use.md
rename to documentation/docs/03-template-syntax/13-use.md
index 45de023578..5f5321a1c0 100644
--- a/documentation/docs/03-template-syntax/12-use.md
+++ b/documentation/docs/03-template-syntax/13-use.md
@@ -2,6 +2,9 @@
 title: use:
 ---
 
+> [!NOTE]
+> In Svelte 5.29 and newer, consider using [attachments](@attach) instead, as they are more flexible and composable.
+
 Actions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/13-transition.md b/documentation/docs/03-template-syntax/14-transition.md
similarity index 100%
rename from documentation/docs/03-template-syntax/13-transition.md
rename to documentation/docs/03-template-syntax/14-transition.md
diff --git a/documentation/docs/03-template-syntax/14-in-and-out.md b/documentation/docs/03-template-syntax/15-in-and-out.md
similarity index 100%
rename from documentation/docs/03-template-syntax/14-in-and-out.md
rename to documentation/docs/03-template-syntax/15-in-and-out.md
diff --git a/documentation/docs/03-template-syntax/15-animate.md b/documentation/docs/03-template-syntax/16-animate.md
similarity index 100%
rename from documentation/docs/03-template-syntax/15-animate.md
rename to documentation/docs/03-template-syntax/16-animate.md
diff --git a/documentation/docs/98-reference/21-svelte-attachments.md b/documentation/docs/98-reference/21-svelte-attachments.md
new file mode 100644
index 0000000000..e446bdddc2
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-attachments.md
@@ -0,0 +1,5 @@
+---
+title: svelte/attachments
+---
+
+> MODULE: svelte/attachments
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 99d87b4c09..c637137365 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -31,6 +31,8 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
+import type { Attachment } from 'svelte/attachments';
+
 // Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined`
 
 type Booleanish = boolean | 'true' | 'false';
@@ -860,6 +862,9 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 
 	// allow any data- attribute
 	[key: `data-${string}`]: any;
+
+	// allow any attachment
+	[key: symbol]: Attachment<T>;
 }
 
 export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ce257c687a..0ec1f9204d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -34,6 +34,10 @@
       "types": "./types/index.d.ts",
       "default": "./src/animate/index.js"
     },
+    "./attachments": {
+      "types": "./types/index.d.ts",
+      "default": "./src/attachments/index.js"
+    },
     "./compiler": {
       "types": "./types/index.d.ts",
       "require": "./compiler/index.js",
diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
index 377fca4343..c558a2bbf7 100644
--- a/packages/svelte/scripts/generate-types.js
+++ b/packages/svelte/scripts/generate-types.js
@@ -35,6 +35,7 @@ await createBundle({
 		[pkg.name]: `${dir}/src/index.d.ts`,
 		[`${pkg.name}/action`]: `${dir}/src/action/public.d.ts`,
 		[`${pkg.name}/animate`]: `${dir}/src/animate/public.d.ts`,
+		[`${pkg.name}/attachments`]: `${dir}/src/attachments/public.d.ts`,
 		[`${pkg.name}/compiler`]: `${dir}/src/compiler/public.d.ts`,
 		[`${pkg.name}/easing`]: `${dir}/src/easing/index.js`,
 		[`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`,
diff --git a/packages/svelte/src/attachments/index.js b/packages/svelte/src/attachments/index.js
new file mode 100644
index 0000000000..948a19f4dd
--- /dev/null
+++ b/packages/svelte/src/attachments/index.js
@@ -0,0 +1,27 @@
+import { ATTACHMENT_KEY } from '../constants.js';
+
+/**
+ * Creates an object key that will be recognised as an attachment when the object is spread onto an element,
+ * as a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though
+ * is generally not needed when building an app.
+ *
+ * ```svelte
+ * <script>
+ * 	import { createAttachmentKey } from 'svelte/attachments';
+ *
+ * 	const props = {
+ * 		class: 'cool',
+ * 		onclick: () => alert('clicked'),
+ * 		[createAttachmentKey()]: (node) => {
+ * 			node.textContent = 'attached!';
+ * 		}
+ * 	};
+ * </script>
+ *
+ * <button {...props}>click me</button>
+ * ```
+ * @since 5.29
+ */
+export function createAttachmentKey() {
+	return Symbol(ATTACHMENT_KEY);
+}
diff --git a/packages/svelte/src/attachments/public.d.ts b/packages/svelte/src/attachments/public.d.ts
new file mode 100644
index 0000000000..caf1342d0a
--- /dev/null
+++ b/packages/svelte/src/attachments/public.d.ts
@@ -0,0 +1,12 @@
+/**
+ * An [attachment](https://svelte.dev/docs/svelte/@attach) is a function that runs when an element is mounted
+ * to the DOM, and optionally returns a function that is called when the element is later removed.
+ *
+ * It can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing
+ * a property created with [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).
+ */
+export interface Attachment<T extends EventTarget = Element> {
+	(element: T): void | (() => void);
+}
+
+export * from './index.js';
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 9d9ed3a1ef..6290127811 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -16,7 +16,7 @@ const ALLOWED_ATTRIBUTES = ['context', 'generics', 'lang', 'module'];
 /**
  * @param {Parser} parser
  * @param {number} start
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag>} attributes
  * @returns {AST.Script}
  */
 export function read_script(parser, start, attributes) {
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js
index 56dbe124b7..e15a47e6d5 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/style.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js
@@ -18,7 +18,7 @@ const REGEX_HTML_COMMENT_CLOSE = /-->/;
 /**
  * @param {Parser} parser
  * @param {number} start
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag>} attributes
  * @returns {AST.CSS.StyleSheet}
  */
 export default function read_style(parser, start, attributes) {
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 66946a8f8d..d20369b0d9 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -480,7 +480,7 @@ function read_static_attribute(parser) {
 
 /**
  * @param {Parser} parser
- * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | null}
+ * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | null}
  */
 function read_attribute(parser) {
 	const start = parser.index;
@@ -488,6 +488,27 @@ function read_attribute(parser) {
 	if (parser.eat('{')) {
 		parser.allow_whitespace();
 
+		if (parser.eat('@attach')) {
+			parser.require_whitespace();
+
+			const expression = read_expression(parser);
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			/** @type {AST.AttachTag} */
+			const attachment = {
+				type: 'AttachTag',
+				start,
+				end: parser.index,
+				expression,
+				metadata: {
+					expression: create_expression_metadata()
+				}
+			};
+
+			return attachment;
+		}
+
 		if (parser.eat('...')) {
 			const expression = read_expression(parser);
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 766b317d06..09cb41b23f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -18,6 +18,7 @@ import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
 import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 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 { BindDirective } from './visitors/BindDirective.js';
@@ -133,6 +134,7 @@ const visitors = {
 	},
 	ArrowFunctionExpression,
 	AssignmentExpression,
+	AttachTag,
 	Attribute,
 	AwaitBlock,
 	BindDirective,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
new file mode 100644
index 0000000000..1e318f228d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
@@ -0,0 +1,13 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+
+import { mark_subtree_dynamic } from './shared/fragment.js';
+
+/**
+ * @param {AST.AttachTag} node
+ * @param {Context} context
+ */
+export function AttachTag(node, context) {
+	mark_subtree_dynamic(context.path);
+	context.next({ ...context.state, expression: node.metadata.expression });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 04bf3d2ff3..aca87fab81 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -1,3 +1,4 @@
+/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 import * as e from '../../../../errors.js';
@@ -74,7 +75,8 @@ export function visit_component(node, context) {
 			attribute.type !== 'SpreadAttribute' &&
 			attribute.type !== 'LetDirective' &&
 			attribute.type !== 'OnDirective' &&
-			attribute.type !== 'BindDirective'
+			attribute.type !== 'BindDirective' &&
+			attribute.type !== 'AttachTag'
 		) {
 			e.component_invalid_directive(attribute);
 		}
@@ -91,15 +93,10 @@ export function visit_component(node, context) {
 				validate_attribute(attribute, node);
 
 				if (is_expression_attribute(attribute)) {
-					const expression = get_attribute_expression(attribute);
-					if (expression.type === 'SequenceExpression') {
-						let i = /** @type {number} */ (expression.start);
-						while (--i > 0) {
-							const char = context.state.analysis.source[i];
-							if (char === '(') break; // parenthesized sequence expressions are ok
-							if (char === '{') e.attribute_invalid_sequence_expression(expression);
-						}
-					}
+					disallow_unparenthesized_sequences(
+						get_attribute_expression(attribute),
+						context.state.analysis.source
+					);
 				}
 			}
 
@@ -113,6 +110,10 @@ export function visit_component(node, context) {
 		if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
 			context.state.analysis.uses_component_bindings = true;
 		}
+
+		if (attribute.type === 'AttachTag') {
+			disallow_unparenthesized_sequences(attribute.expression, context.state.analysis.source);
+		}
 	}
 
 	// If the component has a slot attribute — `<Foo slot="whatever" .../>` —
@@ -158,3 +159,18 @@ export function visit_component(node, context) {
 		context.visit({ ...node.fragment, nodes: nodes[slot_name] }, state);
 	}
 }
+
+/**
+ * @param {Expression} expression
+ * @param {string} source
+ */
+function disallow_unparenthesized_sequences(expression, source) {
+	if (expression.type === 'SequenceExpression') {
+		let i = /** @type {number} */ (expression.start);
+		while (--i > 0) {
+			const char = source[i];
+			if (char === '(') break; // parenthesized sequence expressions are ok
+			if (char === '{') e.attribute_invalid_sequence_expression(expression);
+		}
+	}
+}
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 f0da5a4918..9a2f4dd34c 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
@@ -56,6 +56,7 @@ import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { UseDirective } from './visitors/UseDirective.js';
+import { AttachTag } from './visitors/AttachTag.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
@@ -131,6 +132,7 @@ const visitors = {
 	TransitionDirective,
 	UpdateExpression,
 	UseDirective,
+	AttachTag,
 	VariableDeclaration
 };
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
new file mode 100644
index 0000000000..062604cacc
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
@@ -0,0 +1,21 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.AttachTag} node
+ * @param {ComponentContext} context
+ */
+export function AttachTag(node, context) {
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.attach',
+				context.state.node,
+				b.thunk(/** @type {Expression} */ (context.visit(node.expression)))
+			)
+		)
+	);
+	context.next();
+}
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 7468fcbbc7..ab981878ad 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
@@ -83,7 +83,7 @@ export function RegularElement(node, context) {
 	/** @type {AST.StyleDirective[]} */
 	const style_directives = [];
 
-	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective>} */
+	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.AttachTag>} */
 	const other_directives = [];
 
 	/** @type {ExpressionStatement[]} */
@@ -153,6 +153,10 @@ export function RegularElement(node, context) {
 				has_use = true;
 				other_directives.push(attribute);
 				break;
+
+			case 'AttachTag':
+				other_directives.push(attribute);
+				break;
 		}
 	}
 
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 c4071c67fe..6d3d8a68e6 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
@@ -257,6 +257,14 @@ export function build_component(node, component_name, context, anchor = context.
 					);
 				}
 			}
+		} else if (attribute.type === 'AttachTag') {
+			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (attribute.metadata.expression.has_state) {
+				expression = b.arrow([b.id('$$node')], b.call(expression, b.id('$$node')));
+			}
+
+			push_prop(b.prop('get', b.call('$.attachment'), expression, true));
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index a544cd1dec..54fdda92b8 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -174,6 +174,16 @@ export namespace AST {
 		};
 	}
 
+	/** A `{@attach foo(...)} tag */
+	export interface AttachTag extends BaseNode {
+		type: 'AttachTag';
+		expression: Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
+	}
+
 	/** An `animate:` directive */
 	export interface AnimateDirective extends BaseNode {
 		type: 'AnimateDirective';
@@ -273,7 +283,7 @@ export namespace AST {
 
 	interface BaseElement extends BaseNode {
 		name: string;
-		attributes: Array<Attribute | SpreadAttribute | Directive>;
+		attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
 		fragment: Fragment;
 	}
 
@@ -546,6 +556,7 @@ export namespace AST {
 		| AST.Attribute
 		| AST.SpreadAttribute
 		| Directive
+		| AST.AttachTag
 		| AST.Comment
 		| Block;
 
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 8861e440fc..2ecd4afee2 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -55,3 +55,5 @@ export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
  * TODO this is currently unused
  */
 export const ELEMENTS_WITHOUT_TEXT = ['audio', 'datalist', 'dl', 'optgroup', 'select', 'video'];
+
+export const ATTACHMENT_KEY = '@attach';
diff --git a/packages/svelte/src/internal/client/dom/elements/attachments.js b/packages/svelte/src/internal/client/dom/elements/attachments.js
new file mode 100644
index 0000000000..6e3089a384
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/elements/attachments.js
@@ -0,0 +1,15 @@
+import { effect } from '../../reactivity/effects.js';
+
+/**
+ * @param {Element} node
+ * @param {() => (node: Element) => void} get_fn
+ */
+export function attach(node, get_fn) {
+	effect(() => {
+		const fn = get_fn();
+
+		// we use `&&` rather than `?.` so that things like
+		// `{@attach DEV && something_dev_only()}` work
+		return fn && fn(node);
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index f63f55cc6e..3d1acbd31c 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -13,10 +13,11 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
+import { attach } from './attachments.js';
 import { clsx } from '../../../shared/attributes.js';
 import { set_class } from './class.js';
 import { set_style } from './style.js';
-import { NAMESPACE_HTML } from '../../../../constants.js';
+import { ATTACHMENT_KEY, NAMESPACE_HTML } from '../../../../constants.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -446,6 +447,12 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
 		set_hydrating(true);
 	}
 
+	for (let symbol of Object.getOwnPropertySymbols(next)) {
+		if (symbol.description === ATTACHMENT_KEY) {
+			attach(element, () => next[symbol]);
+		}
+	}
+
 	return current;
 }
 
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 14d6e29f5b..b5f746b276 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,3 +1,4 @@
+export { createAttachmentKey as attachment } from '../../attachments/index.js';
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
 export { push, pop } from './context.js';
 export { assign, assign_and, assign_or, assign_nullish } from './dev/assign.js';
@@ -22,6 +23,7 @@ export { element } from './dom/blocks/svelte-element.js';
 export { head } from './dom/blocks/svelte-head.js';
 export { append_styles } from './dom/css.js';
 export { action } from './dom/elements/actions.js';
+export { attach } from './dom/elements/attachments.js';
 export {
 	remove_input_defaults,
 	set_attribute,
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 8bfd8f9e25..77c58720e1 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -218,9 +218,15 @@ const spread_props_handler = {
 
 		for (let p of target.props) {
 			if (is_function(p)) p = p();
+			if (!p) continue;
+
 			for (const key in p) {
 				if (!keys.includes(key)) keys.push(key);
 			}
+
+			for (const key of Object.getOwnPropertySymbols(p)) {
+				if (!keys.includes(key)) keys.push(key);
+			}
 		}
 
 		return keys;
diff --git a/packages/svelte/tests/parser-modern/samples/attachments/input.svelte b/packages/svelte/tests/parser-modern/samples/attachments/input.svelte
new file mode 100644
index 0000000000..9faae8d1bf
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/attachments/input.svelte
@@ -0,0 +1 @@
+<div {@attach (node) => {}} {@attach (node) => {}}></div>
diff --git a/packages/svelte/tests/parser-modern/samples/attachments/output.json b/packages/svelte/tests/parser-modern/samples/attachments/output.json
new file mode 100644
index 0000000000..42e9880fcc
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/attachments/output.json
@@ -0,0 +1,141 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 57,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "RegularElement",
+				"start": 0,
+				"end": 57,
+				"name": "div",
+				"attributes": [
+					{
+						"type": "AttachTag",
+						"start": 5,
+						"end": 27,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 14,
+							"end": 26,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 14
+								},
+								"end": {
+									"line": 1,
+									"column": 26
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 15,
+									"end": 19,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 15
+										},
+										"end": {
+											"line": 1,
+											"column": 19
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 24,
+								"end": 26,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 24
+									},
+									"end": {
+										"line": 1,
+										"column": 26
+									}
+								},
+								"body": []
+							}
+						}
+					},
+					{
+						"type": "AttachTag",
+						"start": 28,
+						"end": 50,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 37,
+							"end": 49,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 37
+								},
+								"end": {
+									"line": 1,
+									"column": 49
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 38,
+									"end": 42,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 38
+										},
+										"end": {
+											"line": 1,
+											"column": 42
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 47,
+								"end": 49,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 47
+									},
+									"end": {
+										"line": 1,
+										"column": 49
+									}
+								},
+								"body": []
+							}
+						}
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js
new file mode 100644
index 0000000000..1be4737069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>DIV</div>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte
new file mode 100644
index 0000000000..1a1f74e4a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte
@@ -0,0 +1 @@
+<div {@attach (node) => node.textContent = node.nodeName}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js
new file mode 100644
index 0000000000..23907c62d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>update</button><div></div>`,
+
+	test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		assert.deepEqual(logs, ['one DIV']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['one DIV', 'cleanup one', 'two DIV']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte
new file mode 100644
index 0000000000..d1d7e65126
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+	import Child from './Child.svelte';
+
+	let stuff = $state({
+		[createAttachmentKey()]: (node) => {
+			console.log(`one ${node.nodeName}`);
+
+			return () => {
+				console.log('cleanup one');
+			};
+		}
+	});
+
+	function update() {
+		stuff = {
+			[createAttachmentKey()]: (node) => {
+				console.log(`two ${node.nodeName}`);
+
+				return () => {
+					console.log('cleanup two');
+				}
+			}
+		};
+	}
+</script>
+
+<button onclick={update}>update</button>
+
+<Child {...stuff} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
new file mode 100644
index 0000000000..b6ef016be5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<button>update</button><div></div>`,
+	html: `<button>update</button><div>one</div>`,
+
+	test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<button>update</button><div>two</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
new file mode 100644
index 0000000000..29e26689db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let message = $state('one');
+
+	function attachment(message) {
+		return (node) => {
+			node.textContent = message;
+		};
+	}
+</script>
+
+<button onclick={() => message = 'two'}>update</button>
+
+<Child {@attach attachment(message)} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
new file mode 100644
index 0000000000..7d0502590b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div><button>increment</button>`,
+	html: `<div>1</div><button>increment</button>`,
+
+	test: ({ assert, target }) => {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<div>2</div><button>increment</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
new file mode 100644
index 0000000000..9fa3cfdb67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let value = $state(1);
+</script>
+
+<div {@attach (node) => node.textContent = value}></div>
+<button onclick={() => value += 1}>increment</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js
new file mode 100644
index 0000000000..96fc207450
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js
@@ -0,0 +1,8 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		assert.deepEqual(logs, ['hello']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte
new file mode 100644
index 0000000000..dbd8c47ada
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+
+	let stuff = $state({
+		[createAttachmentKey()]: () => console.log('hello')
+	});
+</script>
+
+<div {...stuff}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
new file mode 100644
index 0000000000..1be4737069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>DIV</div>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte
new file mode 100644
index 0000000000..bd4b52342f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte
@@ -0,0 +1 @@
+<svelte:element this={'div'} {@attach (node) => node.textContent = node.nodeName}></svelte:element>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b233cfcc0b..ff9764b88b 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -624,6 +624,44 @@ declare module 'svelte/animate' {
 	export {};
 }
 
+declare module 'svelte/attachments' {
+	/**
+	 * An [attachment](https://svelte.dev/docs/svelte/@attach) is a function that runs when an element is mounted
+	 * to the DOM, and optionally returns a function that is called when the element is later removed.
+	 *
+	 * It can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing
+	 * a property created with [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).
+	 */
+	export interface Attachment<T extends EventTarget = Element> {
+		(element: T): void | (() => void);
+	}
+	/**
+	 * Creates an object key that will be recognised as an attachment when the object is spread onto an element,
+	 * as a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though
+	 * is generally not needed when building an app.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { createAttachmentKey } from 'svelte/attachments';
+	 *
+	 * 	const props = {
+	 * 		class: 'cool',
+	 * 		onclick: () => alert('clicked'),
+	 * 		[createAttachmentKey()]: (node) => {
+	 * 			node.textContent = 'attached!';
+	 * 		}
+	 * 	};
+	 * </script>
+	 *
+	 * <button {...props}>click me</button>
+	 * ```
+	 * @since 5.29
+	 */
+	export function createAttachmentKey(): symbol;
+
+	export {};
+}
+
 declare module 'svelte/compiler' {
 	import type { SourceMap } from 'magic-string';
 	import type { ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, Expression, Identifier, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
@@ -1055,6 +1093,12 @@ declare module 'svelte/compiler' {
 			expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 		}
 
+		/** A `{@attach foo(...)} tag */
+		export interface AttachTag extends BaseNode {
+			type: 'AttachTag';
+			expression: Expression;
+		}
+
 		/** An `animate:` directive */
 		export interface AnimateDirective extends BaseNode {
 			type: 'AnimateDirective';
@@ -1137,7 +1181,7 @@ declare module 'svelte/compiler' {
 
 		interface BaseElement extends BaseNode {
 			name: string;
-			attributes: Array<Attribute | SpreadAttribute | Directive>;
+			attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
 			fragment: Fragment;
 		}
 
@@ -1327,6 +1371,7 @@ declare module 'svelte/compiler' {
 			| AST.Attribute
 			| AST.SpreadAttribute
 			| Directive
+			| AST.AttachTag
 			| AST.Comment
 			| Block;
 

From 51b858dfd1e38f92c0086146e5fa7f55ed7a8069 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 13:36:51 -0400
Subject: [PATCH 040/259] Version Packages (#15914)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/poor-days-pay.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/poor-days-pay.md

diff --git a/.changeset/poor-days-pay.md b/.changeset/poor-days-pay.md
deleted file mode 100644
index 8fbff10586..0000000000
--- a/.changeset/poor-days-pay.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: attachments
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 935d2b7cc6..136219af42 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.29.0
+
+### Minor Changes
+
+- feat: attachments ([#15000](https://github.com/sveltejs/svelte/pull/15000))
+
 ## 5.28.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0ec1f9204d..312aa50c25 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.28.7",
+  "version": "5.29.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index d7c041762f..4499374896 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.28.7';
+export const VERSION = '5.29.0';
 export const PUBLIC_VERSION = '5';

From 66a21552f64eea77a46e22a46eb46d4ff010d949 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 14 May 2025 21:58:58 +0200
Subject: [PATCH 041/259] feat: allow generics on snippets (#15915)

* feat: allow generics on snippets

* chore: fix lint

* reuse bracket matching logic

* remove some unused stuff

* chore: update name, test and types

* chore: fix lint

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/ten-colts-grab.md                  |   5 +
 .../compiler/phases/1-parse/read/context.js   |  75 +----
 .../src/compiler/phases/1-parse/state/tag.js  |  20 ++
 .../compiler/phases/1-parse/utils/bracket.js  | 113 +++++--
 .../svelte/src/compiler/types/template.d.ts   |   1 +
 .../samples/generic-snippets/input.svelte     |  10 +
 .../samples/generic-snippets/output.json      | 299 ++++++++++++++++++
 packages/svelte/types/index.d.ts              |   1 +
 8 files changed, 421 insertions(+), 103 deletions(-)
 create mode 100644 .changeset/ten-colts-grab.md
 create mode 100644 packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte
 create mode 100644 packages/svelte/tests/parser-modern/samples/generic-snippets/output.json

diff --git a/.changeset/ten-colts-grab.md b/.changeset/ten-colts-grab.md
new file mode 100644
index 0000000000..6e0e20bc84
--- /dev/null
+++ b/.changeset/ten-colts-grab.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: allow generics on snippets
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/context.js b/packages/svelte/src/compiler/phases/1-parse/read/context.js
index f4c73dcf40..b118901830 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/context.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/context.js
@@ -1,7 +1,7 @@
 /** @import { Location } from 'locate-character' */
 /** @import { Pattern } from 'estree' */
 /** @import { Parser } from '../index.js' */
-import { is_bracket_open, is_bracket_close, get_bracket_close } from '../utils/bracket.js';
+import { match_bracket } from '../utils/bracket.js';
 import { parse_expression_at } from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
@@ -33,7 +33,9 @@ export default function read_pattern(parser) {
 		};
 	}
 
-	if (!is_bracket_open(parser.template[i])) {
+	const char = parser.template[i];
+
+	if (char !== '{' && char !== '[') {
 		e.expected_pattern(i);
 	}
 
@@ -71,75 +73,6 @@ export default function read_pattern(parser) {
 	}
 }
 
-/**
- * @param {Parser} parser
- * @param {number} start
- */
-function match_bracket(parser, start) {
-	const bracket_stack = [];
-
-	let i = start;
-
-	while (i < parser.template.length) {
-		let char = parser.template[i++];
-
-		if (char === "'" || char === '"' || char === '`') {
-			i = match_quote(parser, i, char);
-			continue;
-		}
-
-		if (is_bracket_open(char)) {
-			bracket_stack.push(char);
-		} else if (is_bracket_close(char)) {
-			const popped = /** @type {string} */ (bracket_stack.pop());
-			const expected = /** @type {string} */ (get_bracket_close(popped));
-
-			if (char !== expected) {
-				e.expected_token(i - 1, expected);
-			}
-
-			if (bracket_stack.length === 0) {
-				return i;
-			}
-		}
-	}
-
-	e.unexpected_eof(parser.template.length);
-}
-
-/**
- * @param {Parser} parser
- * @param {number} start
- * @param {string} quote
- */
-function match_quote(parser, start, quote) {
-	let is_escaped = false;
-	let i = start;
-
-	while (i < parser.template.length) {
-		const char = parser.template[i++];
-
-		if (is_escaped) {
-			is_escaped = false;
-			continue;
-		}
-
-		if (char === quote) {
-			return i;
-		}
-
-		if (char === '\\') {
-			is_escaped = true;
-		}
-
-		if (quote === '`' && char === '$' && parser.template[i] === '{') {
-			i = match_bracket(parser, i);
-		}
-	}
-
-	e.unterminated_string_constant(start);
-}
-
 /**
  * @param {Parser} parser
  * @returns {any}
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 0eb98c27e8..4153463c83 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -8,9 +8,12 @@ import { parse_expression_at } from '../acorn.js';
 import read_pattern from '../read/context.js';
 import read_expression, { get_loose_identifier } from '../read/expression.js';
 import { create_fragment } from '../utils/create.js';
+import { match_bracket } from '../utils/bracket.js';
 
 const regex_whitespace_with_closing_curly_brace = /^\s*}/;
 
+const pointy_bois = { '<': '>' };
+
 /** @param {Parser} parser */
 export default function tag(parser) {
 	const start = parser.index;
@@ -351,6 +354,22 @@ function open(parser) {
 
 		const params_start = parser.index;
 
+		// snippets could have a generic signature, e.g. `#snippet foo<T>(...)`
+		/** @type {string | undefined} */
+		let type_params;
+
+		// if we match a generic opening
+		if (parser.ts && parser.match('<')) {
+			const start = parser.index;
+			const end = match_bracket(parser, start, pointy_bois);
+
+			type_params = parser.template.slice(start + 1, end - 1);
+
+			parser.index = end;
+		}
+
+		parser.allow_whitespace();
+
 		const matched = parser.eat('(', true, false);
 
 		if (matched) {
@@ -388,6 +407,7 @@ function open(parser) {
 				end: name_end,
 				name
 			},
+			typeParams: type_params,
 			parameters: function_expression.params,
 			body: create_fragment(),
 			metadata: {
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js b/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
index b7c8cb43cd..8c69a58c99 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
@@ -1,34 +1,5 @@
-const SQUARE_BRACKET_OPEN = '[';
-const SQUARE_BRACKET_CLOSE = ']';
-const CURLY_BRACKET_OPEN = '{';
-const CURLY_BRACKET_CLOSE = '}';
-const PARENTHESES_OPEN = '(';
-const PARENTHESES_CLOSE = ')';
-
-/** @param {string} char */
-export function is_bracket_open(char) {
-	return char === SQUARE_BRACKET_OPEN || char === CURLY_BRACKET_OPEN;
-}
-
-/** @param {string} char */
-export function is_bracket_close(char) {
-	return char === SQUARE_BRACKET_CLOSE || char === CURLY_BRACKET_CLOSE;
-}
-
-/** @param {string} open */
-export function get_bracket_close(open) {
-	if (open === SQUARE_BRACKET_OPEN) {
-		return SQUARE_BRACKET_CLOSE;
-	}
-
-	if (open === CURLY_BRACKET_OPEN) {
-		return CURLY_BRACKET_CLOSE;
-	}
-
-	if (open === PARENTHESES_OPEN) {
-		return PARENTHESES_CLOSE;
-	}
-}
+/** @import { Parser } from '../index.js' */
+import * as e from '../../../errors.js';
 
 /**
  * @param {number} num
@@ -121,7 +92,7 @@ function count_leading_backslashes(string, search_start_index) {
  * @returns {number | undefined} The index of the closing bracket, or undefined if not found.
  */
 export function find_matching_bracket(template, index, open) {
-	const close = get_bracket_close(open);
+	const close = default_brackets[open];
 	let brackets = 1;
 	let i = index;
 	while (brackets > 0 && i < template.length) {
@@ -162,3 +133,81 @@ export function find_matching_bracket(template, index, open) {
 	}
 	return undefined;
 }
+
+/** @type {Record<string, string>} */
+const default_brackets = {
+	'{': '}',
+	'(': ')',
+	'[': ']'
+};
+
+/**
+ * @param {Parser} parser
+ * @param {number} start
+ * @param {Record<string, string>} brackets
+ */
+export function match_bracket(parser, start, brackets = default_brackets) {
+	const close = Object.values(brackets);
+	const bracket_stack = [];
+
+	let i = start;
+
+	while (i < parser.template.length) {
+		let char = parser.template[i++];
+
+		if (char === "'" || char === '"' || char === '`') {
+			i = match_quote(parser, i, char);
+			continue;
+		}
+
+		if (char in brackets) {
+			bracket_stack.push(char);
+		} else if (close.includes(char)) {
+			const popped = /** @type {string} */ (bracket_stack.pop());
+			const expected = /** @type {string} */ (brackets[popped]);
+
+			if (char !== expected) {
+				e.expected_token(i - 1, expected);
+			}
+
+			if (bracket_stack.length === 0) {
+				return i;
+			}
+		}
+	}
+
+	e.unexpected_eof(parser.template.length);
+}
+
+/**
+ * @param {Parser} parser
+ * @param {number} start
+ * @param {string} quote
+ */
+function match_quote(parser, start, quote) {
+	let is_escaped = false;
+	let i = start;
+
+	while (i < parser.template.length) {
+		const char = parser.template[i++];
+
+		if (is_escaped) {
+			is_escaped = false;
+			continue;
+		}
+
+		if (char === quote) {
+			return i;
+		}
+
+		if (char === '\\') {
+			is_escaped = true;
+		}
+
+		if (quote === '`' && char === '$' && parser.template[i] === '{') {
+			i = match_bracket(parser, i);
+		}
+	}
+
+	e.unterminated_string_constant(start);
+}
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 54fdda92b8..6dec1f2dbe 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -468,6 +468,7 @@ export namespace AST {
 		type: 'SnippetBlock';
 		expression: Identifier;
 		parameters: Pattern[];
+		typeParams?: string;
 		body: Fragment;
 		/** @internal */
 		metadata: {
diff --git a/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte b/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte
new file mode 100644
index 0000000000..4ee619728d
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+{#snippet generic<T extends string>(val: T)}
+	{val}
+{/snippet}
+
+{#snippet complex_generic<T extends { bracket: "<" } | "<" | Set<"<>">>(val: T)}
+	{val}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
new file mode 100644
index 0000000000..b66ee7288f
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
@@ -0,0 +1,299 @@
+{
+	"css": null,
+	"js": [],
+	"start": 30,
+	"end": 192,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "Text",
+				"start": 28,
+				"end": 30,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 30,
+				"end": 92,
+				"expression": {
+					"type": "Identifier",
+					"start": 40,
+					"end": 47,
+					"name": "generic"
+				},
+				"typeParams": "T extends string",
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 66,
+						"end": 72,
+						"loc": {
+							"start": {
+								"line": 4,
+								"column": 36
+							},
+							"end": {
+								"line": 4,
+								"column": 42
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 69,
+							"end": 72,
+							"loc": {
+								"start": {
+									"line": 4,
+									"column": 39
+								},
+								"end": {
+									"line": 4,
+									"column": 42
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 71,
+								"end": 72,
+								"loc": {
+									"start": {
+										"line": 4,
+										"column": 41
+									},
+									"end": {
+										"line": 4,
+										"column": 42
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 71,
+									"end": 72,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 41
+										},
+										"end": {
+											"line": 4,
+											"column": 42
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 74,
+							"end": 76,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "ExpressionTag",
+							"start": 76,
+							"end": 81,
+							"expression": {
+								"type": "Identifier",
+								"start": 77,
+								"end": 80,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 2
+									},
+									"end": {
+										"line": 5,
+										"column": 5
+									}
+								},
+								"name": "val"
+							}
+						},
+						{
+							"type": "Text",
+							"start": 81,
+							"end": 82,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 92,
+				"end": 94,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 94,
+				"end": 192,
+				"expression": {
+					"type": "Identifier",
+					"start": 104,
+					"end": 119,
+					"name": "complex_generic"
+				},
+				"typeParams": "T extends { bracket: \"<\" } | \"<\" | Set<\"<>\">",
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 166,
+						"end": 172,
+						"loc": {
+							"start": {
+								"line": 8,
+								"column": 72
+							},
+							"end": {
+								"line": 8,
+								"column": 78
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 169,
+							"end": 172,
+							"loc": {
+								"start": {
+									"line": 8,
+									"column": 75
+								},
+								"end": {
+									"line": 8,
+									"column": 78
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 171,
+								"end": 172,
+								"loc": {
+									"start": {
+										"line": 8,
+										"column": 77
+									},
+									"end": {
+										"line": 8,
+										"column": 78
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 171,
+									"end": 172,
+									"loc": {
+										"start": {
+											"line": 8,
+											"column": 77
+										},
+										"end": {
+											"line": 8,
+											"column": 78
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 174,
+							"end": 176,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "ExpressionTag",
+							"start": 176,
+							"end": 181,
+							"expression": {
+								"type": "Identifier",
+								"start": 177,
+								"end": 180,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 2
+									},
+									"end": {
+										"line": 9,
+										"column": 5
+									}
+								},
+								"name": "val"
+							}
+						},
+						{
+							"type": "Text",
+							"start": 181,
+							"end": 182,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				}
+			}
+		]
+	},
+	"options": null,
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 18,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 2,
+					"column": 0
+				}
+			},
+			"body": [],
+			"sourceType": "module"
+		},
+		"attributes": [
+			{
+				"type": "Attribute",
+				"start": 8,
+				"end": 17,
+				"name": "lang",
+				"value": [
+					{
+						"start": 14,
+						"end": 16,
+						"type": "Text",
+						"raw": "ts",
+						"data": "ts"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index ff9764b88b..bb958c5108 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1301,6 +1301,7 @@ declare module 'svelte/compiler' {
 			type: 'SnippetBlock';
 			expression: Identifier;
 			parameters: Pattern[];
+			typeParams?: string;
 			body: Fragment;
 		}
 

From e2a13a3beb246fe3f3e471353921a2db5ca1c57d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 16:03:05 -0400
Subject: [PATCH 042/259] Version Packages (#15916)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/ten-colts-grab.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/ten-colts-grab.md

diff --git a/.changeset/ten-colts-grab.md b/.changeset/ten-colts-grab.md
deleted file mode 100644
index 6e0e20bc84..0000000000
--- a/.changeset/ten-colts-grab.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: allow generics on snippets
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 136219af42..b25235276b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.30.0
+
+### Minor Changes
+
+- feat: allow generics on snippets ([#15915](https://github.com/sveltejs/svelte/pull/15915))
+
 ## 5.29.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 312aa50c25..5c27d88952 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.29.0",
+  "version": "5.30.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4499374896..69492b1bf2 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.29.0';
+export const VERSION = '5.30.0';
 export const PUBLIC_VERSION = '5';

From 43e32ba2ce7bf30a4854af9318c8388a4d1265d6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 May 2025 17:37:25 -0400
Subject: [PATCH 043/259] docs: update attach example (#15920)

---
 .../docs/03-template-syntax/09-@attach.md     | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index c988386933..2df0882e34 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -59,14 +59,10 @@ Since the `tooltip(content)` expression runs inside an [effect]($effect), the at
 
 ## Inline attachments
 
-Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71WbW_aSBD-Kyt0VaBJyGKbqoUkOhdI68qGUkh6pPSDMY6xYwyH12Ab8d9vZtYE6DX38aQQe3fennlm1jvbUmTP3VKj9KcthO3MShelJz9041Ljx7YksiWKcAP2C0V9uazGazcUuDexY_d3-84iEm4kwE3pOnZW_lLcjqOx8OfLxUqwLVvafiTYjj2tFnN2Vr3yVvbUB4NqEJ81x9H11cEounbsaG3HaL_xp2J2s1WVHa5mru_NxMtyW6TAytKgwm5u2RYlYwF4YsEIVSrYDZMaVc8VLblXPlOmZ5UmxkP9P9ynJ9cR5fKxk7EIXQGQIV9wsXL_TtxY6JE_t4W_iO5wv_yURA6uWLhYLMuicrAdi_-2RAMCUGgTReUC8gUTB9mueC2WK1ckq4j9AhVytiPHDX_Fh_-PXBVvhcsdEHl7fSXZkeTHIgtdKp7c3UegUjRYjfM3hQ9ZjpOty407efbF5dyOnxssWYXlcWlqC7sBmDz3Kl575-k8bGIXvdMuvn7uKo_Zx3Ayv_Mnn-7FaH4X2Mo0m6gPyWObR5P5g2q0dc9q6fVeS8uMdifttRxvOg_DKf-ydkEHZBuj_ayZgeFZw472JfuoTb6niZPzyP78jTvtxdpUp-o0q6tWVl87c2dtBfrGan3Ip3Mn-hqkm9Ff3xbGp_6HLwqvWwOtDnFqZvAYmMPOxgyehTW8T7oZzy1fU8yhAXuW6La9xPJ5arW0fNLiWTfTamCnmsED2DlJd6BzM3DA1gBbPQVbDv444Qw6iTXgKfjxwC43B5QbyDzPgrXRNlAm0MZoW0nX5_B06Ak-Mc-k10L7kQe81M3gHvYAz0CvkTwAvC2IOdDT7kADDq0MdSHvxMp0XnAJeXyLrQCx8hTxj3J6L2Igbp5KDIRbSNw6YSPcuDfsI5ac8KI80yFWX0AeitHuox4-pa-BpoEvzKMOOSMfWDeBGIFXwP4gzOE9cu71kF_FEpgf8AF-eYq4wQZ5z8A_2HtUF_LRwjXEaYFvrBnkA7rg00L9pCfjJYjHxNzmG8qbeBlgjndBwT1ypyCG7gtPngcY-aTd8TBPM-h41vfiiX6hjsAT9g3yw4t9ReLGdR_rSjUEOfBDtQRcyKUhSI4cwG_SNlTiD3vou5XiO2IB_zniBhusJeanORnHPpLcU92oZ9F3RjUiTizkDnx2BPUv4KK6Qc9RHIwbTGPZ632vCzqjDHlxEFOK9l3C-Yx1UiQ_XDtgkjUkf0MjR59QJ5XiEqZ-geMZasBzmds9YIK-xadPfIkenTsPsWPP_YYHB2OkxXlIqT6DopYDXaOa-1i_jvwW0JkiPHhG8AwUsfpYV6gF4tFzeXYQD9ZDo76kHoV1l3r5MYa9WtG3VA-sPfYKxW5xhbiRvYm9IqhX8HwO8Ix0UL8471hLOtd16mPip4N5UR6AgRdnJ8dvCMip1vCjbw3khfFS6h9lI-jswjnHnpY16yPHWdGPGeHzMcdZTj1J_d3B_JVRjvnopCv5wD7RVdLDPqG4kscTTpQNfvPgbI3g_f-pS4--a3TGUynH_hvJb9QpDzXJg3fo3eyld1Xq3YHjmbn23lTh7sm1m3Gpwur8Df2umMq16vtlyqLF5cpdurb4zb12Gfu522Dv-HruR_IWpQGmuDdhGMILvNQQq8TdXbwyVB3NP6dT1angaKxyUxqlXuaNf40L8qKWg8-W0XV9weQdDYPXzX4YqsprvXlQpru5Dbf0kRIMSsZ-u8wvGPydeNxPTk-LFSvjlLQEY96Ex_XBXxWv_mroRp6Yoej8hmmV0wnNB7MlEK81j3dT2PXZGxnyRJKBpOyDAYkq7Pb2FsLupzips3KnoPVOY-esXFPes7csrewtYA8Eb5lli1k19qOyAAkMMLxyEsZbuW70i5MMnRR8HntxFvErXiZhguMfmL8gPOXmB3DC-E8aEafNVzVqqEGQXtdRUAcDvq6ioopSr-97tugAqvcyOar3iy3VnZLanbb1T1jZfrjxo2mp8WSHsbv7Bx1mHBBZDAAA)):
+Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):
 
 ```svelte
 <!--- file: App.svelte --->
-<script>
-	import { paint } from './gradient.js';
-</script>
-
 <canvas
 	width={32}
 	height={32}
@@ -74,19 +70,16 @@ Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAA
 		const context = canvas.getContext('2d');
 
 		$effect(() => {
-			let frame = requestAnimationFrame(function loop(t) {
-				frame = requestAnimationFrame(loop);
-				paint(context, t);
-			});
-
-			return () => {
-				cancelAnimationFrame(frame);
-			};
+			context.fillStyle = color;
+			context.fillRect(0, 0, canvas.width, canvas.height);
 		});
 	}}
 ></canvas>
 ```
 
+> [!NOTE]
+> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.
+
 ## Passing attachments to components
 
 When used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.

From 623cfb06531873c9b765c77572dc2a2f2abece36 Mon Sep 17 00:00:00 2001
From: Scott Wu <sw@scottwu.ca>
Date: Thu, 15 May 2025 06:01:24 +0800
Subject: [PATCH 044/259] docs: Clarify when is a variable proxied (#15804)

* Update 02-$state.md

* Update 02-$state.md

* Update 02-$state.md

* Update documentation/docs/02-runes/02-$state.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 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 16630a977b..aac006d2f5 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -20,7 +20,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
+> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
 

From 0e22b541104783d5ac5079272cefe20d79de5fe7 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 15 May 2025 00:08:36 +0200
Subject: [PATCH 045/259] fix: add `typeParams` to `SnippetBlock` for legacy
 parser (#15921)

---
 .changeset/polite-tips-enjoy.md               |   5 +
 packages/svelte/src/compiler/legacy.js        |   3 +-
 .../samples/generic-snippets/input.svelte     |  10 +
 .../samples/generic-snippets/output.json      | 244 ++++++++++++++++++
 4 files changed, 261 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/polite-tips-enjoy.md
 create mode 100644 packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte
 create mode 100644 packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json

diff --git a/.changeset/polite-tips-enjoy.md b/.changeset/polite-tips-enjoy.md
new file mode 100644
index 0000000000..ab95388f7f
--- /dev/null
+++ b/.changeset/polite-tips-enjoy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `typeParams` to `SnippetBlock` for legacy parser
diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
index e3f88c8f1d..f6b7e4b054 100644
--- a/packages/svelte/src/compiler/legacy.js
+++ b/packages/svelte/src/compiler/legacy.js
@@ -378,7 +378,8 @@ export function convert(source, ast) {
 					end: node.end,
 					expression: node.expression,
 					parameters: node.parameters,
-					children: node.body.nodes.map((child) => visit(child))
+					children: node.body.nodes.map((child) => visit(child)),
+					typeParams: node.typeParams
 				};
 			},
 			// @ts-expect-error
diff --git a/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte b/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte
new file mode 100644
index 0000000000..4ee619728d
--- /dev/null
+++ b/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+{#snippet generic<T extends string>(val: T)}
+	{val}
+{/snippet}
+
+{#snippet complex_generic<T extends { bracket: "<" } | "<" | Set<"<>">>(val: T)}
+	{val}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
new file mode 100644
index 0000000000..37fb499e7b
--- /dev/null
+++ b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
@@ -0,0 +1,244 @@
+{
+	"html": {
+		"type": "Fragment",
+		"start": 30,
+		"end": 192,
+		"children": [
+			{
+				"type": "Text",
+				"start": 28,
+				"end": 30,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 30,
+				"end": 92,
+				"expression": {
+					"type": "Identifier",
+					"start": 40,
+					"end": 47,
+					"name": "generic"
+				},
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 66,
+						"end": 72,
+						"loc": {
+							"start": {
+								"line": 4,
+								"column": 36
+							},
+							"end": {
+								"line": 4,
+								"column": 42
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 69,
+							"end": 72,
+							"loc": {
+								"start": {
+									"line": 4,
+									"column": 39
+								},
+								"end": {
+									"line": 4,
+									"column": 42
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 71,
+								"end": 72,
+								"loc": {
+									"start": {
+										"line": 4,
+										"column": 41
+									},
+									"end": {
+										"line": 4,
+										"column": 42
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 71,
+									"end": 72,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 41
+										},
+										"end": {
+											"line": 4,
+											"column": 42
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"children": [
+					{
+						"type": "MustacheTag",
+						"start": 76,
+						"end": 81,
+						"expression": {
+							"type": "Identifier",
+							"start": 77,
+							"end": 80,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 2
+								},
+								"end": {
+									"line": 5,
+									"column": 5
+								}
+							},
+							"name": "val"
+						}
+					}
+				],
+				"typeParams": "T extends string"
+			},
+			{
+				"type": "Text",
+				"start": 92,
+				"end": 94,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 94,
+				"end": 192,
+				"expression": {
+					"type": "Identifier",
+					"start": 104,
+					"end": 119,
+					"name": "complex_generic"
+				},
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 166,
+						"end": 172,
+						"loc": {
+							"start": {
+								"line": 8,
+								"column": 72
+							},
+							"end": {
+								"line": 8,
+								"column": 78
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 169,
+							"end": 172,
+							"loc": {
+								"start": {
+									"line": 8,
+									"column": 75
+								},
+								"end": {
+									"line": 8,
+									"column": 78
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 171,
+								"end": 172,
+								"loc": {
+									"start": {
+										"line": 8,
+										"column": 77
+									},
+									"end": {
+										"line": 8,
+										"column": 78
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 171,
+									"end": 172,
+									"loc": {
+										"start": {
+											"line": 8,
+											"column": 77
+										},
+										"end": {
+											"line": 8,
+											"column": 78
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"children": [
+					{
+						"type": "MustacheTag",
+						"start": 176,
+						"end": 181,
+						"expression": {
+							"type": "Identifier",
+							"start": 177,
+							"end": 180,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 2
+								},
+								"end": {
+									"line": 9,
+									"column": 5
+								}
+							},
+							"name": "val"
+						}
+					}
+				],
+				"typeParams": "T extends { bracket: \"<\" } | \"<\" | Set<\"<>\">"
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 18,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 2,
+					"column": 0
+				}
+			},
+			"body": [],
+			"sourceType": "module"
+		}
+	}
+}

From 271fd336340acaa28007f426fa76d90a1fc904c7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 May 2025 18:27:24 -0400
Subject: [PATCH 046/259] Version Packages (#15922)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/polite-tips-enjoy.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/polite-tips-enjoy.md

diff --git a/.changeset/polite-tips-enjoy.md b/.changeset/polite-tips-enjoy.md
deleted file mode 100644
index ab95388f7f..0000000000
--- a/.changeset/polite-tips-enjoy.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add `typeParams` to `SnippetBlock` for legacy parser
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b25235276b..2b65a1889f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.30.1
+
+### Patch Changes
+
+- fix: add `typeParams` to `SnippetBlock` for legacy parser ([#15921](https://github.com/sveltejs/svelte/pull/15921))
+
 ## 5.30.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5c27d88952..b6e8d06c63 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.30.0",
+  "version": "5.30.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 69492b1bf2..b849318036 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.30.0';
+export const VERSION = '5.30.1';
 export const PUBLIC_VERSION = '5';

From ae71152013ef47cb917c371156a69224248d174c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 May 2025 11:18:55 -0400
Subject: [PATCH 047/259] docs: clarify keyed each blocks (#15923)

---
 documentation/docs/03-template-syntax/03-each.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index 70666f6a57..006cadd152 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -43,7 +43,9 @@ An each block can also specify an _index_, equivalent to the second argument in
 {#each expression as name, index (key)}...{/each}
 ```
 
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.
+
+The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
 
 ```svelte
 {#each items as item (item.id)}

From 17a7cf51e44dfb7704e6b2559e14e63f22972cd3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 May 2025 11:19:09 -0400
Subject: [PATCH 048/259] docs: clarify ordering of attributes with spread
 (#15917)

---
 documentation/docs/03-template-syntax/01-basic-markup.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md
index fe5f8b02aa..feecfe033e 100644
--- a/documentation/docs/03-template-syntax/01-basic-markup.md
+++ b/documentation/docs/03-template-syntax/01-basic-markup.md
@@ -82,12 +82,14 @@ As with elements, `name={name}` can be replaced with the `{name}` shorthand.
 <Widget foo={bar} answer={42} text="hello" />
 ```
 
+## Spread attributes
+
 _Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
 
-An element or component can have multiple spread attributes, interspersed with regular ones.
+An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a="b"`, while `c="d"` would take precedence over `things.c`:
 
 ```svelte
-<Widget {...things} />
+<Widget a="b" {...things} c="d" />
 ```
 
 ## Events

From a5a0b49003d9cb544ed7919a4320870bda237833 Mon Sep 17 00:00:00 2001
From: Matteo Battista <matteo.battista@gmail.com>
Date: Thu, 15 May 2025 18:14:18 +0200
Subject: [PATCH 049/259] fix: update_branch with (anchor).data possible
 undefined on ios devices  (#15851)

* fix: update_branch with (anchor).data possible undefined

* error sooner

* add tests

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/silly-apples-remain.md                   |  5 +++++
 .../svelte/src/internal/client/dom/blocks/each.js   |  3 ++-
 .../svelte/src/internal/client/dom/blocks/if.js     |  4 +++-
 .../svelte/src/internal/client/dom/hydration.js     | 13 +++++++++++++
 .../samples/cloudflare-mirage-borking-2/_config.js  |  6 ++++++
 .../cloudflare-mirage-borking-2/_expected.html      |  1 +
 .../cloudflare-mirage-borking-2/_override.html      |  1 +
 .../samples/cloudflare-mirage-borking-2/main.svelte |  5 +++++
 .../samples/cloudflare-mirage-borking/_config.js    |  6 ++++++
 .../cloudflare-mirage-borking/_expected.html        |  1 +
 .../cloudflare-mirage-borking/_override.html        |  1 +
 .../samples/cloudflare-mirage-borking/main.svelte   |  9 +++++++++
 12 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/silly-apples-remain.md
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html
 create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte

diff --git a/.changeset/silly-apples-remain.md b/.changeset/silly-apples-remain.md
new file mode 100644
index 0000000000..10d43db550
--- /dev/null
+++ b/.changeset/silly-apples-remain.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle more hydration mismatches
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 92c953b541..2997664fa2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -12,6 +12,7 @@ import {
 	hydrate_next,
 	hydrate_node,
 	hydrating,
+	read_hydration_instruction,
 	remove_nodes,
 	set_hydrate_node,
 	set_hydrating
@@ -160,7 +161,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		let mismatch = false;
 
 		if (hydrating) {
-			var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE;
+			var is_else = read_hydration_instruction(anchor) === HYDRATION_START_ELSE;
 
 			if (is_else !== (length === 0)) {
 				// hydration mismatch — remove the server-rendered DOM and start over
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index 925abb9d9d..bf1098c3f4 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -4,6 +4,7 @@ import {
 	hydrate_next,
 	hydrate_node,
 	hydrating,
+	read_hydration_instruction,
 	remove_nodes,
 	set_hydrate_node,
 	set_hydrating
@@ -56,7 +57,8 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
 
 		if (hydrating && hydrate_index !== -1) {
 			if (root_index === 0) {
-				const data = /** @type {Comment} */ (anchor).data;
+				const data = read_hydration_instruction(anchor);
+
 				if (data === HYDRATION_START) {
 					hydrate_index = 0;
 				} else if (data === HYDRATION_START_ELSE) {
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 8523ff97d5..ab3256da82 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -103,3 +103,16 @@ export function remove_nodes() {
 		node = next;
 	}
 }
+
+/**
+ *
+ * @param {TemplateNode} node
+ */
+export function read_hydration_instruction(node) {
+	if (!node || node.nodeType !== 8) {
+		w.hydration_mismatch();
+		throw HYDRATION_ERROR;
+	}
+
+	return /** @type {Comment} */ (node).data;
+}
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js
new file mode 100644
index 0000000000..56ba73b064
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/15819
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html
new file mode 100644
index 0000000000..5179fb04a5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html
@@ -0,0 +1 @@
+<p>start</p><p>cond</p><!---->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html
new file mode 100644
index 0000000000..2a1c323288
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html
@@ -0,0 +1 @@
+<!--[--> <p>start</p><!--[--><p>cond</p><!--]--><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte
new file mode 100644
index 0000000000..bfb4f2cdb8
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const cond = true;
+</script>
+
+<p>start</p>{#if cond}<p>cond</p>{/if}
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js
new file mode 100644
index 0000000000..56ba73b064
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/15819
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html
new file mode 100644
index 0000000000..f6c03b87c1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html
@@ -0,0 +1 @@
+<p>start</p> pre123 mid<!---->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html
new file mode 100644
index 0000000000..c84efbb00b
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html
@@ -0,0 +1 @@
+<!--[--><p>start</p>pre<a>123</a> <!--[-->mid<!--]--><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte
new file mode 100644
index 0000000000..2c9a94686e
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let cond = true;
+</script>
+
+<p>start</p>
+pre123
+{#if cond}
+mid
+{/if}

From 60b22ab933c45ce329f4e7919be0b0b73a65ecbb Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sat, 17 May 2025 10:07:21 +0200
Subject: [PATCH 050/259] fix: falsy attachments types (#15939)

---
 .changeset/chilled-otters-hear.md | 5 +++++
 packages/svelte/elements.d.ts     | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chilled-otters-hear.md

diff --git a/.changeset/chilled-otters-hear.md b/.changeset/chilled-otters-hear.md
new file mode 100644
index 0000000000..53a9872d96
--- /dev/null
+++ b/.changeset/chilled-otters-hear.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: falsy attachments types
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index c637137365..237e96c699 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -863,8 +863,8 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	// allow any data- attribute
 	[key: `data-${string}`]: any;
 
-	// allow any attachment
-	[key: symbol]: Attachment<T>;
+	// allow any attachment and falsy values (by using false we prevent the usage of booleans values by themselves)
+	[key: symbol]: Attachment<T> | false | undefined | null;
 }
 
 export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});

From c7e4b8e765ee3e5f184d736ed401e63124065753 Mon Sep 17 00:00:00 2001
From: pengqiseven <134899215+pengqiseven@users.noreply.github.com>
Date: Sat, 17 May 2025 16:10:54 +0800
Subject: [PATCH 051/259] chore: remove redundant word in comment (#15942)

Signed-off-by: pengqiseven <912170095@qq.com>
---
 .../svelte/src/compiler/phases/2-analyze/visitors/Attribute.js  | 2 +-
 .../phases/3-transform/client/visitors/RegularElement.js        | 2 +-
 packages/svelte/src/internal/client/dom/elements/class.js       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

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 3ba81767cc..773aa59744 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -211,7 +211,7 @@ function get_delegated_event(event_name, handler, context) {
 
 		if (
 			binding !== null &&
-			// Bail out if the the binding is a rest param
+			// Bail out if the binding is a rest param
 			(binding.declaration_kind === 'rest_param' ||
 				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
 				(((!context.state.analysis.runes && binding.kind === 'each') ||
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 ab981878ad..1d39289f3d 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
@@ -564,7 +564,7 @@ export function build_style_directives_object(style_directives, context) {
 
 /**
  * Serializes an assignment to an element property by adding relevant statements to either only
- * the init or the the init and update arrays, depending on whether or not the value is dynamic.
+ * the init or the init and update arrays, depending on whether or not the value is dynamic.
  * Resulting code for static looks something like this:
  * ```js
  * element.property = value;
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index fc081b8956..038ce33f3e 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -24,7 +24,7 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes)
 		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
 			// Removing the attribute when the value is only an empty string causes
 			// performance issues vs simply making the className an empty string. So
-			// we should only remove the class if the the value is nullish
+			// we should only remove the class if the value is nullish
 			// and there no hash/directives :
 			if (next_class_name == null) {
 				dom.removeAttribute('class');

From c365634ace068698e29c0331399f3a8c03ad5467 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 17 May 2025 05:04:39 -0400
Subject: [PATCH 052/259] Version Packages (#15931)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/chilled-otters-hear.md | 5 -----
 .changeset/silly-apples-remain.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/chilled-otters-hear.md
 delete mode 100644 .changeset/silly-apples-remain.md

diff --git a/.changeset/chilled-otters-hear.md b/.changeset/chilled-otters-hear.md
deleted file mode 100644
index 53a9872d96..0000000000
--- a/.changeset/chilled-otters-hear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: falsy attachments types
diff --git a/.changeset/silly-apples-remain.md b/.changeset/silly-apples-remain.md
deleted file mode 100644
index 10d43db550..0000000000
--- a/.changeset/silly-apples-remain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: handle more hydration mismatches
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 2b65a1889f..9d5cfe1334 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.30.2
+
+### Patch Changes
+
+- fix: falsy attachments types ([#15939](https://github.com/sveltejs/svelte/pull/15939))
+
+- fix: handle more hydration mismatches ([#15851](https://github.com/sveltejs/svelte/pull/15851))
+
 ## 5.30.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b6e8d06c63..4ec70a88b5 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.30.1",
+  "version": "5.30.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b849318036..a5cc8b7191 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.30.1';
+export const VERSION = '5.30.2';
 export const PUBLIC_VERSION = '5';

From b2ce3fa85ed77ba173da9ab27d7bc36f17b7e9c7 Mon Sep 17 00:00:00 2001
From: Mateusz Kadlubowski <xeho91@pm.me>
Date: Sun, 18 May 2025 16:25:11 +0800
Subject: [PATCH 053/259] (fix/ast types) fix: Add missing `AttachTag` in `Tag`
 union type inside the `AST` namespace from `"svelte/compiler"` (#15946)

---
 .changeset/funny-carrots-teach.md                | 5 +++++
 packages/svelte/src/compiler/types/template.d.ts | 8 +++++++-
 packages/svelte/types/index.d.ts                 | 8 +++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/funny-carrots-teach.md

diff --git a/.changeset/funny-carrots-teach.md b/.changeset/funny-carrots-teach.md
new file mode 100644
index 0000000000..53ff135e84
--- /dev/null
+++ b/.changeset/funny-carrots-teach.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"`
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 6dec1f2dbe..b51c9e9a8d 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -547,7 +547,13 @@ export namespace AST {
 		| AST.SvelteWindow
 		| AST.SvelteBoundary;
 
-	export type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
+	export type Tag =
+		| AST.AttachTag
+		| AST.ConstTag
+		| AST.DebugTag
+		| AST.ExpressionTag
+		| AST.HtmlTag
+		| AST.RenderTag;
 
 	export type TemplateNode =
 		| AST.Root
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index bb958c5108..1fda9a36b8 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1362,7 +1362,13 @@ declare module 'svelte/compiler' {
 			| AST.SvelteWindow
 			| AST.SvelteBoundary;
 
-		export type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
+		export type Tag =
+			| AST.AttachTag
+			| AST.ConstTag
+			| AST.DebugTag
+			| AST.ExpressionTag
+			| AST.HtmlTag
+			| AST.RenderTag;
 
 		export type TemplateNode =
 			| AST.Root

From 42e7e8168d01f2510c73bf23bec1e0a6d9e44a66 Mon Sep 17 00:00:00 2001
From: Christian Decker <50999401+cmdecker95@users.noreply.github.com>
Date: Sun, 18 May 2025 04:50:12 -0400
Subject: [PATCH 054/259] chore: fix docs typo in 02-context.md (#15944)

---
 documentation/docs/06-runtime/02-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 4204bcfe6d..f395de421c 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -125,7 +125,7 @@ In many cases this is perfectly fine, but there is a risk: if you mutate the sta
 ```svelte
 <!--- file: App.svelte ---->
 <script>
-	import { myGlobalState } from 'svelte';
+	import { myGlobalState } from './state.svelte.js';
 
 	let { data } = $props();
 

From d103adff9c0fc7802e0bf6000bcc75c77f4b2e3f Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Mon, 19 May 2025 09:48:58 -0600
Subject: [PATCH 055/259] feat: State declarations in class constructors
 (#15820)

* feat: State declarations in class constructors

* feat: Analysis phase

* misc

* feat: client

* improvements

* feat: It is now at least backwards compatible. though the new stuff may still be wrong

* feat: It works I think?

* final cleanup??

* tests

* test for better types

* changeset

* rename functions (the function doesn't test call-expression-ness)

* small readability tweak

* failing test

* fix

* disallow computed state fields

* tweak message to better accommodate the case in which state is declared after a regular property

* failing test

* wildly confusing to have so many things called 'class analysis' - rename the transform-phrase ones to transformers

* missed a spot

* and another

* store analysis for use during transformation

* move code to where it is used

* do the analysis upfront, it's way simpler

* skip failing test for now

* simplify

* get rid of the class

* on second thoughts

* reduce indirection

* make analysis available at transform time

* WIP

* WIP

* WIP

* fix

* remove unused stuff

* revert snapshot tests

* unused

* note to self

* fix

* unused

* unused

* remove some unused stuff

* unused

* lint, tidy up

* reuse helper

* tweak

* simplify/DRY

* unused

* tweak

* unused

* more

* tweak

* tweak

* fix proxying logic

* tweak

* tweak

* adjust message to accommodate more cases

* unskip and fix test

* fix

* move

* revert unneeded drive-by change

* fix

* fix

* update docs

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/mean-squids-scream.md              |   5 +
 documentation/docs/02-runes/02-$state.md      |   8 +-
 .../98-reference/.generated/compile-errors.md |  34 ++-
 .../svelte/messages/compile-errors/script.md  |  30 ++-
 packages/svelte/src/compiler/errors.js        |  23 +-
 .../src/compiler/phases/2-analyze/index.js    |  12 +-
 .../src/compiler/phases/2-analyze/types.d.ts  |   7 +-
 .../visitors/AssignmentExpression.js          |   2 +-
 .../2-analyze/visitors/BindDirective.js       |   2 +-
 .../2-analyze/visitors/CallExpression.js      |  51 +++-
 .../phases/2-analyze/visitors/ClassBody.js    | 105 +++++++--
 .../2-analyze/visitors/PropertyDefinition.js  |  21 ++
 .../2-analyze/visitors/UpdateExpression.js    |   2 +-
 .../phases/2-analyze/visitors/shared/utils.js |  50 +++-
 .../3-transform/client/transform-client.js    |   6 +-
 .../phases/3-transform/client/types.d.ts      |  10 +-
 .../client/visitors/AssignmentExpression.js   |  51 ++--
 .../client/visitors/CallExpression.js         |  35 ++-
 .../3-transform/client/visitors/ClassBody.js  | 222 ++++++------------
 .../client/visitors/MemberExpression.js       |   6 +-
 .../client/visitors/UpdateExpression.js       |   2 +-
 .../3-transform/server/transform-server.js    |   6 +-
 .../phases/3-transform/server/types.d.ts      |   2 -
 .../server/visitors/AssignmentExpression.js   |  25 ++
 .../server/visitors/CallExpression.js         |   9 +
 .../3-transform/server/visitors/ClassBody.js  | 133 ++++-------
 .../server/visitors/MemberExpression.js       |  23 --
 .../compiler/phases/3-transform/types.d.ts    |   4 +-
 packages/svelte/src/compiler/phases/nodes.js  |  13 +
 .../svelte/src/compiler/phases/types.d.ts     |  15 +-
 packages/svelte/src/compiler/types/index.d.ts |  14 ++
 packages/svelte/src/utils.js                  |  26 +-
 .../class-state-field-static/_config.js       |   2 +-
 .../samples/runes-no-rune-each/_config.js     |   3 +-
 .../runes-wrong-derived-placement/_config.js  |   2 +-
 .../runes-wrong-state-placement/_config.js    |   3 +-
 .../_config.js                                |   0
 .../main.svelte                               |   0
 .../_config.js                                |  13 +
 .../main.svelte                               |  13 +
 .../_config.js                                |  13 +
 .../main.svelte                               |  12 +
 .../_config.js                                |   3 +
 .../main.svelte                               |   9 +
 .../_config.js                                |  45 ++++
 .../main.svelte                               |  37 +++
 .../_config.js                                |  20 ++
 .../main.svelte                               |  12 +
 .../_config.js                                |  20 ++
 .../main.svelte                               |  22 ++
 .../class-state-constructor/_config.js        |  20 ++
 .../class-state-constructor/main.svelte       |  18 ++
 .../class-state-constructor-1/errors.json     |  14 ++
 .../class-state-constructor-1/input.svelte.js |   7 +
 .../class-state-constructor-10/errors.json    |  14 ++
 .../input.svelte.js                           |   9 +
 .../class-state-constructor-2/errors.json     |  14 ++
 .../class-state-constructor-2/input.svelte.js |   7 +
 .../class-state-constructor-3/errors.json     |  14 ++
 .../class-state-constructor-3/input.svelte.js |   7 +
 .../class-state-constructor-4/errors.json     |  14 ++
 .../class-state-constructor-4/input.svelte.js |   7 +
 .../class-state-constructor-5/errors.json     |  14 ++
 .../class-state-constructor-5/input.svelte.js |   7 +
 .../class-state-constructor-6/errors.json     |  14 ++
 .../class-state-constructor-6/input.svelte.js |   6 +
 .../class-state-constructor-7/errors.json     |  14 ++
 .../class-state-constructor-7/input.svelte.js |   7 +
 .../class-state-constructor-8/errors.json     |  14 ++
 .../class-state-constructor-8/input.svelte.js |   6 +
 .../class-state-constructor-9/errors.json     |  14 ++
 .../class-state-constructor-9/input.svelte.js |   7 +
 .../const-tag-invalid-rune-usage/errors.json  |   2 +-
 73 files changed, 1070 insertions(+), 363 deletions(-)
 create mode 100644 .changeset/mean-squids-scream.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
 rename packages/svelte/tests/runtime-runes/samples/{class-state-constructor-closure-private => class-state-constructor-closure-private-1}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{class-state-constructor-closure-private => class-state-constructor-closure-private-1}/main.svelte (100%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js

diff --git a/.changeset/mean-squids-scream.md b/.changeset/mean-squids-scream.md
new file mode 100644
index 0000000000..2157ea85a6
--- /dev/null
+++ b/.changeset/mean-squids-scream.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: allow state fields to be declared inside class constructors
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index aac006d2f5..f7314e2950 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -67,16 +67,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -110,10 +109,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index e8669ead53..db848a0299 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
 This snippet is shadowing the prop `%prop%` with the same name
 ```
 
+### state_field_duplicate
+
+```
+`%name%` has already been declared on this class
+```
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+### state_field_invalid_assignment
+
+```
+Cannot assign to a state field before its declaration
+```
+
 ### state_invalid_export
 
 ```
@@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_placement
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 ```
 
 ### store_invalid_scoped_subscription
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index aabcbeae48..e11975aef2 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -212,13 +212,41 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 > Cannot reassign or bind to snippet parameter
 
+## state_field_duplicate
+
+> `%name%` has already been declared on this class
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+## state_field_invalid_assignment
+
+> Cannot assign to a state field before its declaration
+
 ## state_invalid_export
 
 > Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 
 ## state_invalid_placement
 
-> `%rune%(...)` can only be used as a variable declaration initializer or a class field
+> `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 
 ## store_invalid_scoped_subscription
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index c99f597468..25e72340c6 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -461,6 +461,25 @@ export function snippet_parameter_assignment(node) {
 	e(node, 'snippet_parameter_assignment', `Cannot reassign or bind to snippet parameter\nhttps://svelte.dev/e/snippet_parameter_assignment`);
 }
 
+/**
+ * `%name%` has already been declared on this class
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function state_field_duplicate(node, name) {
+	e(node, 'state_field_duplicate', `\`${name}\` has already been declared on this class\nhttps://svelte.dev/e/state_field_duplicate`);
+}
+
+/**
+ * Cannot assign to a state field before its declaration
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function state_field_invalid_assignment(node) {
+	e(node, 'state_field_invalid_assignment', `Cannot assign to a state field before its declaration\nhttps://svelte.dev/e/state_field_invalid_assignment`);
+}
+
 /**
  * Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
  * @param {null | number | NodeLike} node
@@ -471,13 +490,13 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `%rune%(...)` can only be used as a variable declaration initializer or a class field
+ * `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
  * @param {null | number | NodeLike} node
  * @param {string} rune
  * @returns {never}
  */
 export function state_invalid_placement(node, rune) {
-	e(node, 'state_invalid_placement', `\`${rune}(...)\` can only be used as a variable declaration initializer or a class field\nhttps://svelte.dev/e/state_invalid_placement`);
+	e(node, 'state_invalid_placement', `\`${rune}(...)\` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.\nhttps://svelte.dev/e/state_invalid_placement`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 09cb41b23f..fded183b86 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -48,6 +48,7 @@ import { Literal } from './visitors/Literal.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { NewExpression } from './visitors/NewExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
+import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
@@ -164,6 +165,7 @@ const visitors = {
 	MemberExpression,
 	NewExpression,
 	OnDirective,
+	PropertyDefinition,
 	RegularElement,
 	RenderTag,
 	SlotElement,
@@ -256,7 +258,8 @@ export function analyze_module(ast, options) {
 		accessors: false,
 		runes: true,
 		immutable: true,
-		tracing: false
+		tracing: false,
+		classes: new Map()
 	};
 
 	walk(
@@ -265,7 +268,7 @@ export function analyze_module(ast, options) {
 			scope,
 			scopes,
 			analysis: /** @type {ComponentAnalysis} */ (analysis),
-			derived_state: [],
+			state_fields: new Map(),
 			// TODO the following are not needed for modules, but we have to pass them in order to avoid type error,
 			// and reducing the type would result in a lot of tedious type casts elsewhere - find a good solution one day
 			ast_type: /** @type {any} */ (null),
@@ -429,6 +432,7 @@ export function analyze_component(root, source, options) {
 		elements: [],
 		runes,
 		tracing: false,
+		classes: new Map(),
 		immutable: runes || options.immutable,
 		exports: [],
 		uses_props: false,
@@ -624,7 +628,7 @@ export function analyze_component(root, source, options) {
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: new Map(),
 				function_depth: scope.function_depth,
 				reactive_statement: null
 			};
@@ -691,7 +695,7 @@ export function analyze_component(root, source, options) {
 				reactive_statement: null,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: new Map(),
 				function_depth: scope.function_depth
 			};
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index 17c8123de1..080239bac0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
@@ -1,6 +1,6 @@
 import type { Scope } from '../scope.js';
 import type { ComponentAnalysis, ReactiveStatement } from '../types.js';
-import type { AST, ExpressionMetadata, ValidatedCompileOptions } from '#compiler';
+import type { AST, ExpressionMetadata, StateField, ValidatedCompileOptions } from '#compiler';
 
 export interface AnalysisState {
 	scope: Scope;
@@ -18,7 +18,10 @@ export interface AnalysisState {
 	component_slots: Set<string>;
 	/** Information about the current expression/directive/block value */
 	expression: ExpressionMetadata | null;
-	derived_state: { name: string; private: boolean }[];
+
+	/** Used to analyze class state */
+	state_fields: Map<string, StateField>;
+
 	function_depth: number;
 
 	// legacy stuff
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
index a64c89cd88..673c79f2df 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	validate_assignment(node, node.left, context.state);
+	validate_assignment(node, node.left, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.left.type === 'MemberExpression' ? object(node.left) : node.left;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 18ea79262b..9f02e7fa5a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -158,7 +158,7 @@ export function BindDirective(node, context) {
 		return;
 	}
 
-	validate_assignment(node, node.expression, context.state);
+	validate_assignment(node, node.expression, context);
 
 	const assignee = node.expression;
 	const left = object(assignee);
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 904817b014..33abb52cac 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -114,12 +114,13 @@ export function CallExpression(node, context) {
 		case '$state':
 		case '$state.raw':
 		case '$derived':
-		case '$derived.by':
-			if (
-				(parent.type !== 'VariableDeclarator' ||
-					get_parent(context.path, -3).type === 'ConstTag') &&
-				!(parent.type === 'PropertyDefinition' && !parent.static && !parent.computed)
-			) {
+		case '$derived.by': {
+			const valid =
+				is_variable_declaration(parent, context) ||
+				is_class_property_definition(parent) ||
+				is_class_property_assignment_at_constructor_root(parent, context);
+
+			if (!valid) {
 				e.state_invalid_placement(node, rune);
 			}
 
@@ -130,6 +131,7 @@ export function CallExpression(node, context) {
 			}
 
 			break;
+		}
 
 		case '$effect':
 		case '$effect.pre':
@@ -270,3 +272,40 @@ function get_function_label(nodes) {
 		return parent.id.name;
 	}
 }
+
+/**
+ * @param {AST.SvelteNode} parent
+ * @param {Context} context
+ */
+function is_variable_declaration(parent, context) {
+	return parent.type === 'VariableDeclarator' && get_parent(context.path, -3).type !== 'ConstTag';
+}
+
+/**
+ * @param {AST.SvelteNode} parent
+ */
+function is_class_property_definition(parent) {
+	return parent.type === 'PropertyDefinition' && !parent.static && !parent.computed;
+}
+
+/**
+ * @param {AST.SvelteNode} node
+ * @param {Context} context
+ */
+function is_class_property_assignment_at_constructor_root(node, context) {
+	if (
+		node.type === 'AssignmentExpression' &&
+		node.operator === '=' &&
+		node.left.type === 'MemberExpression' &&
+		node.left.object.type === 'ThisExpression' &&
+		((node.left.property.type === 'Identifier' && !node.left.computed) ||
+			node.left.property.type === 'PrivateIdentifier' ||
+			node.left.property.type === 'Literal')
+	) {
+		// MethodDefinition (-5) -> FunctionExpression (-4) -> BlockStatement (-3) -> ExpressionStatement (-2) -> AssignmentExpression (-1)
+		const parent = get_parent(context.path, -5);
+		return parent?.type === 'MethodDefinition' && parent.kind === 'constructor';
+	}
+
+	return false;
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
index 0463e4da85..ffc39ac00d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
@@ -1,30 +1,107 @@
-/** @import { ClassBody } from 'estree' */
+/** @import { AssignmentExpression, CallExpression, ClassBody, PropertyDefinition, Expression, PrivateIdentifier, MethodDefinition } from 'estree' */
+/** @import { StateField } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
 import { get_rune } from '../../scope.js';
+import * as e from '../../../errors.js';
+import { is_state_creation_rune } from '../../../../utils.js';
+import { get_name } from '../../nodes.js';
+import { regex_invalid_identifier_chars } from '../../patterns.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	/** @type {{name: string, private: boolean}[]} */
-	const derived_state = [];
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
+	/** @type {string[]} */
+	const private_ids = [];
 
-	for (const definition of node.body) {
+	for (const prop of node.body) {
 		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'PrivateIdentifier' || definition.key.type === 'Identifier') &&
-			definition.value?.type === 'CallExpression'
+			(prop.type === 'MethodDefinition' || prop.type === 'PropertyDefinition') &&
+			prop.key.type === 'PrivateIdentifier'
 		) {
-			const rune = get_rune(definition.value, context.state.scope);
-			if (rune === '$derived' || rune === '$derived.by') {
-				derived_state.push({
-					name: definition.key.name,
-					private: definition.key.type === 'PrivateIdentifier'
-				});
+			private_ids.push(prop.key.name);
+		}
+	}
+
+	/** @type {Map<string, StateField>} */
+	const state_fields = new Map();
+
+	context.state.analysis.classes.set(node, state_fields);
+
+	/** @type {MethodDefinition | null} */
+	let constructor = null;
+
+	/**
+	 * @param {PropertyDefinition | AssignmentExpression} node
+	 * @param {Expression | PrivateIdentifier} key
+	 * @param {Expression | null | undefined} value
+	 */
+	function handle(node, key, value) {
+		const name = get_name(key);
+		if (name === null) return;
+
+		const rune = get_rune(value, context.state.scope);
+
+		if (rune && is_state_creation_rune(rune)) {
+			if (state_fields.has(name)) {
+				e.state_field_duplicate(node, name);
 			}
+
+			state_fields.set(name, {
+				node,
+				type: rune,
+				// @ts-expect-error for public state this is filled out in a moment
+				key: key.type === 'PrivateIdentifier' ? key : null,
+				value: /** @type {CallExpression} */ (value)
+			});
+		}
+	}
+
+	for (const child of node.body) {
+		if (child.type === 'PropertyDefinition' && !child.computed && !child.static) {
+			handle(child, child.key, child.value);
 		}
+
+		if (child.type === 'MethodDefinition' && child.kind === 'constructor') {
+			constructor = child;
+		}
+	}
+
+	if (constructor) {
+		for (const statement of constructor.value.body.body) {
+			if (statement.type !== 'ExpressionStatement') continue;
+			if (statement.expression.type !== 'AssignmentExpression') continue;
+
+			const { left, right } = statement.expression;
+
+			if (left.type !== 'MemberExpression') continue;
+			if (left.object.type !== 'ThisExpression') continue;
+			if (left.computed && left.property.type !== 'Literal') continue;
+
+			handle(statement.expression, left.property, right);
+		}
+	}
+
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
+
+		let deconflicted = name.replace(regex_invalid_identifier_chars, '_');
+		while (private_ids.includes(deconflicted)) {
+			deconflicted = '_' + deconflicted;
+		}
+
+		private_ids.push(deconflicted);
+		field.key = b.private_id(deconflicted);
 	}
 
-	context.next({ ...context.state, derived_state });
+	context.next({ ...context.state, state_fields });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
new file mode 100644
index 0000000000..99d05cb47c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
@@ -0,0 +1,21 @@
+/** @import { PropertyDefinition } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { get_name } from '../../nodes.js';
+
+/**
+ * @param {PropertyDefinition} node
+ * @param {Context} context
+ */
+export function PropertyDefinition(node, context) {
+	const name = get_name(node.key);
+	const field = name && context.state.state_fields.get(name);
+
+	if (field && node !== field.node && node.value) {
+		if (/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)) {
+			e.state_field_invalid_assignment(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
index 741effc67a..13f4b9019e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function UpdateExpression(node, context) {
-	validate_assignment(node, node.argument, context.state);
+	validate_assignment(node, node.argument, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.argument.type === 'MemberExpression' ? object(node.argument) : node.argument;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 12e21c386c..d7b682da08 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -4,24 +4,25 @@
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers } from '../../../../utils/ast.js';
+import { extract_identifiers, get_parent } from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {AssignmentExpression | UpdateExpression | AST.BindDirective} node
  * @param {Pattern | Expression} argument
- * @param {AnalysisState} state
+ * @param {Context} context
  */
-export function validate_assignment(node, argument, state) {
-	validate_no_const_assignment(node, argument, state.scope, node.type === 'BindDirective');
+export function validate_assignment(node, argument, context) {
+	validate_no_const_assignment(node, argument, context.state.scope, node.type === 'BindDirective');
 
 	if (argument.type === 'Identifier') {
-		const binding = state.scope.get(argument.name);
+		const binding = context.state.scope.get(argument.name);
 
-		if (state.analysis.runes) {
-			if (binding?.node === state.analysis.props_id) {
+		if (context.state.analysis.runes) {
+			if (binding?.node === context.state.analysis.props_id) {
 				e.constant_assignment(node, '$props.id()');
 			}
 
@@ -34,6 +35,41 @@ export function validate_assignment(node, argument, state) {
 			e.snippet_parameter_assignment(node);
 		}
 	}
+
+	if (argument.type === 'MemberExpression' && argument.object.type === 'ThisExpression') {
+		const name =
+			argument.computed && argument.property.type !== 'Literal'
+				? null
+				: get_name(argument.property);
+
+		const field = name !== null && context.state.state_fields?.get(name);
+
+		// check we're not assigning to a state field before its declaration in the constructor
+		if (field && field.node.type === 'AssignmentExpression' && node !== field.node) {
+			let i = context.path.length;
+			while (i--) {
+				const parent = context.path[i];
+
+				if (
+					parent.type === 'FunctionDeclaration' ||
+					parent.type === 'FunctionExpression' ||
+					parent.type === 'ArrowFunctionExpression'
+				) {
+					const grandparent = get_parent(context.path, i - 1);
+
+					if (
+						grandparent.type === 'MethodDefinition' &&
+						grandparent.kind === 'constructor' &&
+						/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)
+					) {
+						e.state_field_invalid_assignment(node);
+					}
+
+					break;
+				}
+			}
+		}
+	}
 }
 
 /**
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 9a2f4dd34c..f2eda3a7d2 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
@@ -163,8 +163,7 @@ export function client_component(analysis, options) {
 		},
 		events: new Set(),
 		preserve_whitespace: options.preserveWhitespace,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
 		in_constructor: false,
 		instance_level_snippets: [],
@@ -671,8 +670,7 @@ export function client_module(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
 		in_constructor: false
 	};
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 243e1c64a3..763b6773c7 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
@@ -9,15 +9,12 @@ import type {
 	UpdateExpression,
 	VariableDeclaration
 } from 'estree';
-import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
+import type { AST, Namespace, StateField, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
 import type { SourceLocation } from '#shared';
 
 export interface ClientTransformState extends TransformState {
-	readonly private_state: Map<string, StateField>;
-	readonly public_state: Map<string, StateField>;
-
 	/**
 	 * `true` if the current lexical scope belongs to a class constructor. this allows
 	 * us to rewrite `this.foo` as `this.#foo.value`
@@ -94,11 +91,6 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly module_level_snippets: VariableDeclaration[];
 }
 
-export interface StateField {
-	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
-	id: PrivateIdentifier;
-}
-
 export type Context = import('zimmerframe').Context<AST.SvelteNode, ClientTransformState>;
 export type Visitors = import('zimmerframe').Visitors<AST.SvelteNode, any>;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index e3f9450050..a46b318601 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -11,6 +11,8 @@ import { dev, locate_node } from '../../../../state.js';
 import { should_proxy } from '../utils.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 import { validate_mutation } from './shared/utils.js';
+import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {AssignmentExpression} node
@@ -50,25 +52,42 @@ const callees = {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
-	// Handle class private/public state assignment cases
-	if (
-		context.state.analysis.runes &&
-		left.type === 'MemberExpression' &&
-		left.property.type === 'PrivateIdentifier'
-	) {
-		const private_state = context.state.private_state.get(left.property.name);
+	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		if (field) {
+			// special case — state declaration in class constructor
+			if (field.node.type === 'AssignmentExpression' && left === field.node.left) {
+				const rune = get_rune(right, context.state.scope);
+
+				if (rune) {
+					const child_state = {
+						...context.state,
+						in_constructor: rune !== '$derived' && rune !== '$derived.by'
+					};
+
+					return b.assignment(
+						operator,
+						b.member(b.this, field.key),
+						/** @type {Expression} */ (context.visit(right, child_state))
+					);
+				}
+			}
 
-		if (private_state !== undefined) {
-			let value = /** @type {Expression} */ (
-				context.visit(build_assignment_value(operator, left, right))
-			);
+			// special case — assignment to private state field
+			if (left.property.type === 'PrivateIdentifier') {
+				let value = /** @type {Expression} */ (
+					context.visit(build_assignment_value(operator, left, right))
+				);
 
-			const needs_proxy =
-				private_state.kind === 'state' &&
-				is_non_coercive_operator(operator) &&
-				should_proxy(value, context.state.scope);
+				const needs_proxy =
+					field.type === '$state' &&
+					is_non_coercive_operator(operator) &&
+					should_proxy(value, context.state.scope);
 
-			return b.call('$.set', left, value, needs_proxy && b.true);
+				return b.call('$.set', left, value, needs_proxy && b.true);
+			}
 		}
 	}
 
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 b110f8eae8..665be9e23b 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
@@ -4,19 +4,52 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 import { transform_inspect_rune } from '../../utils.js';
+import { should_proxy } from '../utils.js';
 
 /**
  * @param {CallExpression} node
  * @param {Context} context
  */
 export function CallExpression(node, context) {
-	switch (get_rune(node, context.state.scope)) {
+	const rune = get_rune(node, context.state.scope);
+
+	switch (rune) {
 		case '$host':
 			return b.id('$$props.$$host');
 
 		case '$effect.tracking':
 			return b.call('$.effect_tracking');
 
+		// transform state field assignments in constructors
+		case '$state':
+		case '$state.raw': {
+			let arg = node.arguments[0];
+
+			/** @type {Expression | undefined} */
+			let value = undefined;
+
+			if (arg) {
+				value = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+				if (
+					rune === '$state' &&
+					should_proxy(/** @type {Expression} */ (arg), context.state.scope)
+				) {
+					value = b.call('$.proxy', value);
+				}
+			}
+
+			return b.call('$.state', value);
+		}
+
+		case '$derived':
+		case '$derived.by': {
+			let fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+			if (rune === '$derived') fn = b.thunk(fn);
+
+			return b.call('$.derived', fn);
+		}
+
 		case '$state.snapshot':
 			return b.call(
 				'$.snapshot',
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index f3ebd94069..71a8fc3d05 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -1,184 +1,96 @@
-/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
-/** @import { Context, StateField } from '../types' */
+/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
+/** @import { StateField } from '#compiler' */
+/** @import { Context } from '../types' */
 import * as b from '#compiler/builders';
-import { regex_invalid_identifier_chars } from '../../../patterns.js';
-import { get_rune } from '../../../scope.js';
-import { should_proxy } from '../utils.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_state = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_state = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {Map<(MethodDefinition|PropertyDefinition)["key"], string>} */
-	const definition_names = new Map();
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	/** @type {string[]} */
-	const private_ids = [];
+		// insert backing fields for stuff declared in the constructor
+		if (field.node.type === 'AssignmentExpression') {
+			const member = b.member(b.this, field.key);
 
-	for (const definition of node.body) {
-		if (
-			(definition.type === 'PropertyDefinition' || definition.type === 'MethodDefinition') &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const type = definition.key.type;
-			const name = get_name(definition.key, public_state);
-			if (!name) continue;
-
-			// we store the deconflicted name in the map so that we can access it later
-			definition_names.set(definition.key, name);
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
-
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (
-					rune === '$state' ||
-					rune === '$state.raw' ||
-					rune === '$derived' ||
-					rune === '$derived.by'
-				) {
-					/** @type {StateField} */
-					const field = {
-						kind:
-							rune === '$state'
-								? 'state'
-								: rune === '$state.raw'
-									? 'raw_state'
-									: rune === '$derived.by'
-										? 'derived_by'
-										: 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
-
-					if (is_private) {
-						private_state.set(name, field);
-					} else {
-						public_state.set(name, field);
-					}
-				}
-			}
-		}
-	}
+			const should_proxy = field.type === '$state' && true; // TODO
 
-	// each `foo = $state()` needs a backing `#foo` field
-	for (const [name, field] of public_state) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
-		}
+			const key = b.key(name);
 
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
+			body.push(
+				b.prop_def(field.key, null),
 
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
+				b.method('get', key, [], [b.return(b.call('$.get', member))]),
 
-	const child_state = { ...context.state, public_state, private_state };
+				b.method(
+					'set',
+					key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
+		}
+	}
 
 	// Replace parts of the class body
 	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const name = definition_names.get(definition.key);
-			if (!name) continue;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_state : public_state).get(name);
-
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				let value = null;
-
-				if (definition.value.arguments.length > 0) {
-					const init = /** @type {Expression} **/ (
-						context.visit(definition.value.arguments[0], child_state)
-					);
-
-					value =
-						field.kind === 'state'
-							? b.call(
-									'$.state',
-									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
-								)
-							: field.kind === 'raw_state'
-								? b.call('$.state', init)
-								: field.kind === 'derived_by'
-									? b.call('$.derived', init)
-									: b.call('$.derived', b.thunk(init));
-				} else {
-					// if no arguments, we know it's state as `$derived()` is a compile error
-					value = b.call('$.state');
-				}
-
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
-
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-
-					// set foo(value) { this.#foo = value; }
-					const val = b.id('value');
-
-					body.push(
-						b.method(
-							'set',
-							definition.key,
-							[val],
-							[b.stmt(b.call('$.set', member, val, field.kind === 'state' && b.true))]
-						)
-					);
-				}
-				continue;
-			}
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
 		}
 
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
-	}
+		const name = get_name(definition.key);
+		const field = name && /** @type {StateField} */ (state_fields.get(name));
 
-	return { ...node, body };
-}
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
+		}
 
-/**
- * @param {Identifier | PrivateIdentifier | Literal} node
- * @param {Map<string, StateField>} public_state
- */
-function get_name(node, public_state) {
-	if (node.type === 'Literal') {
-		let name = node.value?.toString().replace(regex_invalid_identifier_chars, '_');
-
-		// the above could generate conflicts because it has to generate a valid identifier
-		// so stuff like `0` and `1` or `state%` and `state^` will result in the same string
-		// so we have to de-conflict. We can only check `public_state` because private state
-		// can't have literal keys
-		while (name && public_state.has(name)) {
-			name = '_' + name;
+		if (name[0] === '#') {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+		} else if (field.node === definition) {
+			const member = b.member(b.this, field.key);
+
+			const should_proxy = field.type === '$state' && true; // TODO
+
+			body.push(
+				b.prop_def(
+					field.key,
+					/** @type {CallExpression} */ (context.visit(field.value, child_state))
+				),
+
+				b.method('get', definition.key, [], [b.return(b.call('$.get', member))]),
+
+				b.method(
+					'set',
+					definition.key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
 		}
-		return name;
-	} else {
-		return node.name;
 	}
+
+	return { ...node, body };
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
index ab88345ddd..7e89b0e705 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
@@ -9,9 +9,11 @@ import * as b from '#compiler/builders';
 export function MemberExpression(node, context) {
 	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
 	if (node.property.type === 'PrivateIdentifier') {
-		const field = context.state.private_state.get(node.property.name);
+		const field = context.state.state_fields.get('#' + node.property.name);
+
 		if (field) {
-			return context.state.in_constructor && (field.kind === 'raw_state' || field.kind === 'state')
+			return context.state.in_constructor &&
+				(field.type === '$state.raw' || field.type === '$state')
 				? b.member(node, 'v')
 				: b.call('$.get', node);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 96be119b84..66952eb298 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -15,7 +15,7 @@ export function UpdateExpression(node, context) {
 		argument.type === 'MemberExpression' &&
 		argument.object.type === 'ThisExpression' &&
 		argument.property.type === 'PrivateIdentifier' &&
-		context.state.private_state.has(argument.property.name)
+		context.state.state_fields.has('#' + argument.property.name)
 	) {
 		let fn = '$.update';
 		if (node.prefix) fn += '_pre';
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 e7896991d9..3498b2636b 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
@@ -23,7 +23,6 @@ import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
-import { MemberExpression } from './visitors/MemberExpression.js';
 import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
@@ -49,7 +48,6 @@ const global_visitors = {
 	ExpressionStatement,
 	Identifier,
 	LabeledStatement,
-	MemberExpression,
 	PropertyDefinition,
 	UpdateExpression,
 	VariableDeclaration
@@ -99,7 +97,7 @@ export function server_component(analysis, options) {
 		template: /** @type {any} */ (null),
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
-		private_derived: new Map(),
+		state_fields: new Map(),
 		skip_hydration_boundaries: false
 	};
 
@@ -395,7 +393,7 @@ export function server_module(analysis, options) {
 		// to be present for `javascript_visitors_legacy` and so is included in module
 		// transform state as well as component transform state
 		legacy_reactive_statements: new Map(),
-		private_derived: new Map()
+		state_fields: new Map()
 	};
 
 	const module = /** @type {Program} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
index 971271642c..adde7480cb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
@@ -2,12 +2,10 @@ import type { Expression, Statement, ModuleDeclaration, LabeledStatement } from
 import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { StateField } from '../client/types.js';
 
 export interface ServerTransformState extends TransformState {
 	/** The $: calls, which will be ordered in the end */
 	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
-	readonly private_derived: Map<string, StateField>;
 }
 
 export interface ComponentServerTransformState extends ServerTransformState {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 071a12f9bc..280c16dbd2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -3,6 +3,8 @@
 /** @import { Context, ServerTransformState } from '../types.js' */
 import * as b from '#compiler/builders';
 import { build_assignment_value } from '../../../../utils/ast.js';
+import { get_name } from '../../../nodes.js';
+import { get_rune } from '../../../scope.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
@@ -22,6 +24,29 @@ export function AssignmentExpression(node, context) {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
+	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		// special case — state declaration in class constructor
+		if (field && field.node.type === 'AssignmentExpression' && left === field.node.left) {
+			const rune = get_rune(right, context.state.scope);
+
+			if (rune) {
+				const key =
+					left.property.type === 'PrivateIdentifier' || rune === '$state' || rune === '$state.raw'
+						? left.property
+						: field.key;
+
+				return b.assignment(
+					operator,
+					b.member(b.this, key, key.type === 'Literal'),
+					/** @type {Expression} */ (context.visit(right))
+				);
+			}
+		}
+	}
+
 	let object = left;
 
 	while (object.type === 'MemberExpression') {
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 5bcbdee9fb..e36dc820b3 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,15 @@ export function CallExpression(node, context) {
 		return b.arrow([], b.block([]));
 	}
 
+	if (rune === '$state' || rune === '$state.raw') {
+		return node.arguments[0] ? context.visit(node.arguments[0]) : b.void0;
+	}
+
+	if (rune === '$derived' || rune === '$derived.by') {
+		const fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+		return b.call('$.once', rune === '$derived' ? b.thunk(fn) : fn);
+	}
+
 	if (rune === '$state.snapshot') {
 		return b.call(
 			'$.snapshot',
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index c0ebdeae08..6797b0beff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -1,120 +1,77 @@
-/** @import { ClassBody, Expression, MethodDefinition, PropertyDefinition } from 'estree' */
+/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
 /** @import { Context } from '../types.js' */
-/** @import { StateField } from '../../client/types.js' */
-import { dev } from '../../../../state.js';
 import * as b from '#compiler/builders';
-import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_derived = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_derived = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {string[]} */
-	const private_ids = [];
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	for (const definition of node.body) {
+		// insert backing fields for stuff declared in the constructor
 		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
+			field &&
+			field.node.type === 'AssignmentExpression' &&
+			(field.type === '$derived' || field.type === '$derived.by')
 		) {
-			const { type, name } = definition.key;
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
+			const member = b.member(b.this, field.key);
 
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (rune === '$derived' || rune === '$derived.by') {
-					/** @type {StateField} */
-					const field = {
-						kind: rune === '$derived.by' ? 'derived_by' : 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
-
-					if (is_private) {
-						private_derived.set(name, field);
-					} else {
-						public_derived.set(name, field);
-					}
-				}
-			}
+			body.push(
+				b.prop_def(field.key, null),
+				b.method('get', b.key(name), [], [b.return(b.call(member))])
+			);
 		}
 	}
 
-	// each `foo = $derived()` needs a backing `#foo` field
-	for (const [name, field] of public_derived) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
-		}
-
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
-
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
-
-	const child_state = { ...context.state, private_derived };
-
 	// Replace parts of the class body
 	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
-		) {
-			const name = definition.key.name;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_derived : public_derived).get(name);
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
+		}
 
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				const init = /** @type {Expression} **/ (
-					context.visit(definition.value.arguments[0], child_state)
-				);
-				const value =
-					field.kind === 'derived_by' ? b.call('$.once', init) : b.call('$.once', b.thunk(init));
+		const name = get_name(definition.key);
+		const field = name && state_fields.get(name);
 
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
+		}
 
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
+		if (name[0] === '#' || field.type === '$state' || field.type === '$state.raw') {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+		} else if (field.node === definition) {
+			const member = b.member(b.this, field.key);
 
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[b.id('_')],
-								[b.throw_error(`Cannot update a derived property ('${name}')`)]
-							)
-						);
-					}
-				}
+			body.push(
+				b.prop_def(
+					field.key,
+					/** @type {CallExpression} */ (context.visit(field.value, child_state))
+				),
 
-				continue;
-			}
+				b.method('get', definition.key, [], [b.return(b.call(member))])
+			);
 		}
-
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
 	}
 
 	return { ...node, body };
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
deleted file mode 100644
index 73631395e6..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @import { MemberExpression } from 'estree' */
-/** @import { Context } from '../types.js' */
-import * as b from '#compiler/builders';
-
-/**
- * @param {MemberExpression} node
- * @param {Context} context
- */
-export function MemberExpression(node, context) {
-	if (
-		context.state.analysis.runes &&
-		node.object.type === 'ThisExpression' &&
-		node.property.type === 'PrivateIdentifier'
-	) {
-		const field = context.state.private_derived.get(node.property.name);
-
-		if (field) {
-			return b.call(node);
-		}
-	}
-
-	context.next();
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
index 5d860207dd..887ad447b9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
@@ -1,5 +1,5 @@
 import type { Scope } from '../scope.js';
-import type { AST, ValidatedModuleCompileOptions } from '#compiler';
+import type { AST, StateField, ValidatedModuleCompileOptions } from '#compiler';
 import type { Analysis } from '../types.js';
 
 export interface TransformState {
@@ -7,4 +7,6 @@ export interface TransformState {
 	readonly options: ValidatedModuleCompileOptions;
 	readonly scope: Scope;
 	readonly scopes: Map<AST.SvelteNode, Scope>;
+
+	readonly state_fields: Map<string, StateField>;
 }
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 003c3a2c49..2043747ed0 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -1,4 +1,6 @@
+/** @import { Expression, PrivateIdentifier } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
+
 /**
  * All nodes that can appear elsewhere than the top level, have attributes and can contain children
  */
@@ -64,3 +66,14 @@ export function create_expression_metadata() {
 		has_call: false
 	};
 }
+
+/**
+ * @param {Expression | PrivateIdentifier} node
+ */
+export function get_name(node) {
+	if (node.type === 'Literal') return String(node.value);
+	if (node.type === 'PrivateIdentifier') return '#' + node.name;
+	if (node.type === 'Identifier') return node.name;
+
+	return null;
+}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index f98cbe1415..67cbd75ff8 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,6 +1,15 @@
-import type { AST, Binding } from '#compiler';
-import type { Identifier, LabeledStatement, Node, Program } from 'estree';
+import type { AST, Binding, StateField } from '#compiler';
+import type {
+	AssignmentExpression,
+	ClassBody,
+	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;
@@ -29,6 +38,8 @@ export interface Analysis {
 	immutable: boolean;
 	tracing: boolean;
 
+	classes: Map<ClassBody, Map<string, StateField>>;
+
 	// TODO figure out if we can move this to ComponentAnalysis
 	accessors: boolean;
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 616c346ad3..ef52552a2e 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -2,6 +2,13 @@ import type { SourceMap } from 'magic-string';
 import type { Binding } from '../phases/scope.js';
 import type { AST, Namespace } from './template.js';
 import type { ICompileDiagnostic } from '../utils/compile_diagnostic.js';
+import type { StateCreationRuneName } from '../../utils.js';
+import type {
+	AssignmentExpression,
+	CallExpression,
+	PrivateIdentifier,
+	PropertyDefinition
+} from 'estree';
 
 /** The return value of `compile` from `svelte/compiler` */
 export interface CompileResult {
@@ -269,6 +276,13 @@ export interface ExpressionMetadata {
 	has_call: boolean;
 }
 
+export interface StateField {
+	type: StateCreationRuneName;
+	node: PropertyDefinition | AssignmentExpression;
+	key: PrivateIdentifier;
+	value: CallExpression;
+}
+
 export * from './template.js';
 
 export { Binding, Scope } from '../phases/scope.js';
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index ada318e85a..921eaec57c 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -428,15 +428,19 @@ export function is_mathml(name) {
 	return MATHML_ELEMENTS.includes(name);
 }
 
-const RUNES = /** @type {const} */ ([
+export const STATE_CREATION_RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
+	'$derived',
+	'$derived.by'
+]);
+
+const RUNES = /** @type {const} */ ([
+	...STATE_CREATION_RUNES,
 	'$state.snapshot',
 	'$props',
 	'$props.id',
 	'$bindable',
-	'$derived',
-	'$derived.by',
 	'$effect',
 	'$effect.pre',
 	'$effect.tracking',
@@ -447,12 +451,24 @@ const RUNES = /** @type {const} */ ([
 	'$host'
 ]);
 
+/** @typedef {RUNES[number]} RuneName */
+
 /**
  * @param {string} name
- * @returns {name is RUNES[number]}
+ * @returns {name is RuneName}
  */
 export function is_rune(name) {
-	return RUNES.includes(/** @type {RUNES[number]} */ (name));
+	return RUNES.includes(/** @type {RuneName} */ (name));
+}
+
+/** @typedef {STATE_CREATION_RUNES[number]} StateCreationRuneName */
+
+/**
+ * @param {string} name
+ * @returns {name is StateCreationRuneName}
+ */
+export function is_state_creation_rune(name) {
+	return STATE_CREATION_RUNES.includes(/** @type {StateCreationRuneName} */ (name));
 }
 
 /** List of elements that require raw contents and should not have SSR comments put in them */
diff --git a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
index e6551031cc..f5b116117e 100644
--- a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$state(...)` can only be used as a variable declaration initializer or a class field',
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.',
 		position: [33, 41]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
index 476d7239a3..f31748d26a 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$derived(...)` can only be used as a variable declaration initializer or a class field'
+			'`$derived(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
new file mode 100644
index 0000000000..3d8ea41418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+	const counter = new Counter();
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
new file mode 100644
index 0000000000..47b8c901eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const counter = new class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
new file mode 100644
index 0000000000..e2c4f302b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	class Test {
+		0 = $state();
+
+		constructor() {
+			this[1] = $state();
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
new file mode 100644
index 0000000000..4cf1aea213
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// The component context class instance gets shared between tests, strangely, causing hydration to fail?
+	mode: ['client', 'server'],
+
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [
+			0,
+			'class trigger false',
+			'local trigger false',
+			1,
+			2,
+			3,
+			4,
+			'class trigger true',
+			'local trigger true'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
new file mode 100644
index 0000000000..03687d01bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
@@ -0,0 +1,37 @@
+<script module>
+	class SomeLogic {
+		trigger() {
+			this.someValue++;
+		}
+
+		constructor() {
+			this.someValue = $state(0);
+			this.isAboveThree = $derived(this.someValue > 3);
+		}
+	}
+
+	const someLogic = new SomeLogic();
+</script>
+
+<script>
+	function increment() {
+		someLogic.trigger();
+	}
+
+	let localDerived = $derived(someLogic.someValue > 3);
+
+	$effect(() => {
+		console.log(someLogic.someValue);
+	});
+	$effect(() => {
+		console.log('class trigger ' + someLogic.isAboveThree)
+	});
+	$effect(() => {
+		console.log('local trigger ' + localDerived)
+	});
+
+</script>
+
+<button on:click={increment}>
+	clicks: {someLogic.someValue}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
new file mode 100644
index 0000000000..02cf36d900
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
new file mode 100644
index 0000000000..5dbbb10afd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	class Counter {
+		count;
+
+		constructor(count) {
+			this.count = $state(count);
+		}
+	}
+	const counter = new Counter(0);
+</script>
+
+<button onclick={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
new file mode 100644
index 0000000000..32cca6c693
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10: 20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>11: 22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>12: 24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
new file mode 100644
index 0000000000..d8feb554cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	class Counter {
+		constructor(initial) {
+			this.count = $state(initial);
+		}
+
+		increment = () => {
+			this.count++;
+		}
+	}
+
+	class PluggableCounter extends Counter {
+		constructor(initial, plugin) {
+			super(initial)
+			this.custom = $derived(plugin(this.count));
+		}
+	}
+
+	const counter = new PluggableCounter(10, (count) => count * 2);
+</script>
+
+<button onclick={counter.increment}>{counter.count}: {counter.custom}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
new file mode 100644
index 0000000000..f35dc57228
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
new file mode 100644
index 0000000000..aa8ba1658b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	class Counter {
+		/** @type {number} */
+		#count;
+
+		constructor(initial) {
+			this.#count = $state(initial);
+			this.doubled = $derived(this.#count * 2);
+		}
+
+		increment = () => {
+			this.#count++;
+		}
+	}
+	const counter = new Counter(10);
+</script>
+
+<button onclick={counter.increment}>{counter.doubled}</button>
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
new file mode 100644
index 0000000000..05cd4d9d9d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = $state(0);
+
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
new file mode 100644
index 0000000000..c4cb0991d0
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 4,
+			"column": 18
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
new file mode 100644
index 0000000000..e5ad562727
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
@@ -0,0 +1,9 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = -1;
+		}
+
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
new file mode 100644
index 0000000000..e37be4b3e6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
new file mode 100644
index 0000000000..175c41f98c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 28
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
new file mode 100644
index 0000000000..f9196ff3cd
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state.raw(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
new file mode 100644
index 0000000000..9f959874c8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
+		"start": {
+			"line": 4,
+			"column": 16
+		},
+		"end": {
+			"line": 4,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
new file mode 100644
index 0000000000..bf1aada1b5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = $state(0);
+		}
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
new file mode 100644
index 0000000000..af2f30dade
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
new file mode 100644
index 0000000000..bc3d19a14f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	// prettier-ignore
+	'count' = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
new file mode 100644
index 0000000000..ae7a47f31b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 4,
+			"column": 2
+		},
+		"end": {
+			"line": 4,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
new file mode 100644
index 0000000000..2ebe52e685
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	count = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
new file mode 100644
index 0000000000..64e56f8d5c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
+		"start": {
+			"line": 5,
+			"column": 16
+		},
+		"end": {
+			"line": 5,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
new file mode 100644
index 0000000000..50c8559837
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
@@ -0,0 +1,7 @@
+const count = 'count';
+
+export class Counter {
+	constructor() {
+		this[count] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
new file mode 100644
index 0000000000..2e0bd10ff8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 3,
+			"column": 2
+		},
+		"end": {
+			"line": 3,
+			"column": 17
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
new file mode 100644
index 0000000000..0a76c6fec9
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	constructor() {
+		this.count = -1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
new file mode 100644
index 0000000000..b7dd4c8ed4
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 2,
+			"column": 12
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
new file mode 100644
index 0000000000..a8469e13af
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = -1;
+
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
index 32594e4268..e1906b181a 100644
--- a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "state_invalid_placement",
-		"message": "`$derived(...)` can only be used as a variable declaration initializer or a class field",
+		"message": "`$derived(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
 		"start": {
 			"line": 2,
 			"column": 15

From 21bf947ca8269ada01a2ec7962aeedc841026ac5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 19 May 2025 11:56:41 -0400
Subject: [PATCH 056/259] Version Packages (#15947)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/funny-carrots-teach.md |  5 -----
 .changeset/mean-squids-scream.md  |  5 -----
 packages/svelte/CHANGELOG.md      | 10 ++++++++++
 packages/svelte/package.json      |  2 +-
 packages/svelte/src/version.js    |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/funny-carrots-teach.md
 delete mode 100644 .changeset/mean-squids-scream.md

diff --git a/.changeset/funny-carrots-teach.md b/.changeset/funny-carrots-teach.md
deleted file mode 100644
index 53ff135e84..0000000000
--- a/.changeset/funny-carrots-teach.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"`
diff --git a/.changeset/mean-squids-scream.md b/.changeset/mean-squids-scream.md
deleted file mode 100644
index 2157ea85a6..0000000000
--- a/.changeset/mean-squids-scream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: allow state fields to be declared inside class constructors
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 9d5cfe1334..d40ff09317 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.31.0
+
+### Minor Changes
+
+- feat: allow state fields to be declared inside class constructors ([#15820](https://github.com/sveltejs/svelte/pull/15820))
+
+### Patch Changes
+
+- fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"` ([#15946](https://github.com/sveltejs/svelte/pull/15946))
+
 ## 5.30.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4ec70a88b5..ee35cda2bd 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.30.2",
+  "version": "5.31.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index a5cc8b7191..ed99ef6795 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.30.2';
+export const VERSION = '5.31.0';
 export const PUBLIC_VERSION = '5';

From b7b393d50fab48d4f38d0f72c5c177de5c236024 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 19 May 2025 18:26:10 +0200
Subject: [PATCH 057/259] chore: watch for messages changes in dev generate
 script (#15950)

* chore: watch for messages changes in dev generate script

* no need for this to be async

* tweak

* guard

* only create one timeout

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/svelte/package.json                  |   2 +-
 .../svelte/scripts/process-messages/index.js  | 680 +++++++++---------
 2 files changed, 357 insertions(+), 325 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ee35cda2bd..e0f6afe6fc 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -136,7 +136,7 @@
   ],
   "scripts": {
     "build": "node scripts/process-messages && rollup -c && pnpm generate:types && node scripts/check-treeshakeability.js",
-    "dev": "node scripts/process-messages && rollup -cw",
+    "dev": "node scripts/process-messages -w & rollup -cw",
     "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
     "check:watch": "tsc --watch",
     "generate:version": "node ./scripts/generate-version.js",
diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js
index 80619acfa7..81c59271de 100644
--- a/packages/svelte/scripts/process-messages/index.js
+++ b/packages/svelte/scripts/process-messages/index.js
@@ -1,409 +1,441 @@
 // @ts-check
+import process from 'node:process';
 import fs from 'node:fs';
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import * as esrap from 'esrap';
 
-/** @type {Record<string, Record<string, { messages: string[], details: string | null }>>} */
-const messages = {};
-const seen = new Set();
-
 const DIR = '../../documentation/docs/98-reference/.generated';
-fs.rmSync(DIR, { force: true, recursive: true });
-fs.mkdirSync(DIR);
 
-for (const category of fs.readdirSync('messages')) {
-	if (category.startsWith('.')) continue;
+const watch = process.argv.includes('-w');
 
-	messages[category] = {};
+function run() {
+	/** @type {Record<string, Record<string, { messages: string[], details: string | null }>>} */
+	const messages = {};
+	const seen = new Set();
 
-	for (const file of fs.readdirSync(`messages/${category}`)) {
-		if (!file.endsWith('.md')) continue;
+	fs.rmSync(DIR, { force: true, recursive: true });
+	fs.mkdirSync(DIR);
 
-		const markdown = fs
-			.readFileSync(`messages/${category}/${file}`, 'utf-8')
-			.replace(/\r\n/g, '\n');
+	for (const category of fs.readdirSync('messages')) {
+		if (category.startsWith('.')) continue;
 
-		const sorted = [];
+		messages[category] = {};
 
-		for (const match of markdown.matchAll(/## ([\w]+)\n\n([^]+?)(?=$|\n\n## )/g)) {
-			const [_, code, text] = match;
+		for (const file of fs.readdirSync(`messages/${category}`)) {
+			if (!file.endsWith('.md')) continue;
 
-			if (seen.has(code)) {
-				throw new Error(`Duplicate message code ${category}/${code}`);
-			}
+			const markdown = fs
+				.readFileSync(`messages/${category}/${file}`, 'utf-8')
+				.replace(/\r\n/g, '\n');
 
-			sorted.push({ code, _ });
+			const sorted = [];
 
-			const sections = text.trim().split('\n\n');
-			const details = [];
+			for (const match of markdown.matchAll(/## ([\w]+)\n\n([^]+?)(?=$|\n\n## )/g)) {
+				const [_, code, text] = match;
 
-			while (!sections[sections.length - 1].startsWith('> ')) {
-				details.unshift(/** @type {string} */ (sections.pop()));
-			}
+				if (seen.has(code)) {
+					throw new Error(`Duplicate message code ${category}/${code}`);
+				}
+
+				sorted.push({ code, _ });
 
-			if (sections.length === 0) {
-				throw new Error('No message text');
+				const sections = text.trim().split('\n\n');
+				const details = [];
+
+				while (!sections[sections.length - 1].startsWith('> ')) {
+					details.unshift(/** @type {string} */ (sections.pop()));
+				}
+
+				if (sections.length === 0) {
+					throw new Error('No message text');
+				}
+
+				seen.add(code);
+				messages[category][code] = {
+					messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
+					details: details.join('\n\n')
+				};
 			}
 
-			seen.add(code);
-			messages[category][code] = {
-				messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
-				details: details.join('\n\n')
-			};
+			sorted.sort((a, b) => (a.code < b.code ? -1 : 1));
+
+			fs.writeFileSync(
+				`messages/${category}/${file}`,
+				sorted.map((x) => x._.trim()).join('\n\n') + '\n'
+			);
 		}
 
-		sorted.sort((a, b) => (a.code < b.code ? -1 : 1));
 		fs.writeFileSync(
-			`messages/${category}/${file}`,
-			sorted.map((x) => x._.trim()).join('\n\n') + '\n'
+			`${DIR}/${category}.md`,
+			'<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n' +
+				Object.entries(messages[category])
+					.map(([code, { messages, details }]) => {
+						const chunks = [
+							`### ${code}`,
+							...messages.map((message) => '```\n' + message + '\n```')
+						];
+
+						if (details) {
+							chunks.push(details);
+						}
+
+						return chunks.join('\n\n');
+					})
+					.sort()
+					.join('\n\n') +
+				'\n'
 		);
 	}
 
-	fs.writeFileSync(
-		`${DIR}/${category}.md`,
-		'<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n' +
-			Object.entries(messages[category])
-				.map(([code, { messages, details }]) => {
-					const chunks = [`### ${code}`, ...messages.map((message) => '```\n' + message + '\n```')];
-
-					if (details) {
-						chunks.push(details);
-					}
-
-					return chunks.join('\n\n');
-				})
-				.sort()
-				.join('\n\n') +
-			'\n'
-	);
-}
-
-/**
- * @param {string} name
- * @param {string} dest
- */
-function transform(name, dest) {
-	const source = fs
-		.readFileSync(new URL(`./templates/${name}.js`, import.meta.url), 'utf-8')
-		.replace(/\r\n/g, '\n');
-
 	/**
-	 * @type {Array<{
-	 * 	type: string;
-	 * 	value: string;
-	 * 	start: number;
-	 * 	end: number
-	 * }>}
+	 * @param {string} name
+	 * @param {string} dest
 	 */
-	const comments = [];
-
-	let ast = acorn.parse(source, {
-		ecmaVersion: 'latest',
-		sourceType: 'module',
-		onComment: (block, value, start, end) => {
-			if (block && /\n/.test(value)) {
-				let a = start;
-				while (a > 0 && source[a - 1] !== '\n') a -= 1;
-
-				let b = a;
-				while (/[ \t]/.test(source[b])) b += 1;
-
-				const indentation = source.slice(a, b);
-				value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
-			}
-
-			comments.push({ type: block ? 'Block' : 'Line', value, start, end });
-		}
-	});
+	function transform(name, dest) {
+		const source = fs
+			.readFileSync(new URL(`./templates/${name}.js`, import.meta.url), 'utf-8')
+			.replace(/\r\n/g, '\n');
 
-	ast = walk(ast, null, {
-		_(node, { next }) {
-			let comment;
+		/**
+		 * @type {Array<{
+		 * 	type: string;
+		 * 	value: string;
+		 * 	start: number;
+		 * 	end: number
+		 * }>}
+		 */
+		const comments = [];
+
+		let ast = acorn.parse(source, {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			onComment: (block, value, start, end) => {
+				if (block && /\n/.test(value)) {
+					let a = start;
+					while (a > 0 && source[a - 1] !== '\n') a -= 1;
+
+					let b = a;
+					while (/[ \t]/.test(source[b])) b += 1;
+
+					const indentation = source.slice(a, b);
+					value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
+				}
 
-			while (comments[0] && comments[0].start < node.start) {
-				comment = comments.shift();
-				// @ts-expect-error
-				(node.leadingComments ||= []).push(comment);
+				comments.push({ type: block ? 'Block' : 'Line', value, start, end });
 			}
+		});
 
-			next();
-
-			if (comments[0]) {
-				const slice = source.slice(node.end, comments[0].start);
+		ast = walk(ast, null, {
+			_(node, { next }) {
+				let comment;
 
-				if (/^[,) \t]*$/.test(slice)) {
+				while (comments[0] && comments[0].start < node.start) {
+					comment = comments.shift();
 					// @ts-expect-error
-					node.trailingComments = [comments.shift()];
+					(node.leadingComments ||= []).push(comment);
 				}
-			}
-		},
-		// @ts-expect-error
-		Identifier(node, context) {
-			if (node.name === 'CODES') {
-				return {
-					type: 'ArrayExpression',
-					elements: Object.keys(messages[name]).map((code) => ({
-						type: 'Literal',
-						value: code
-					}))
-				};
-			}
-		}
-	});
-
-	if (comments.length > 0) {
-		// @ts-expect-error
-		(ast.trailingComments ||= []).push(...comments);
-	}
-
-	const category = messages[name];
-
-	// find the `export function CODE` node
-	const index = ast.body.findIndex((node) => {
-		if (
-			node.type === 'ExportNamedDeclaration' &&
-			node.declaration &&
-			node.declaration.type === 'FunctionDeclaration'
-		) {
-			return node.declaration.id.name === 'CODE';
-		}
-	});
-
-	if (index === -1) throw new Error(`missing export function CODE in ${name}.js`);
 
-	const template_node = ast.body[index];
-	ast.body.splice(index, 1);
+				next();
 
-	for (const code in category) {
-		const { messages } = category[code];
-		/** @type {string[]} */
-		const vars = [];
+				if (comments[0]) {
+					const slice = source.slice(node.end, comments[0].start);
 
-		const group = messages.map((text, i) => {
-			for (const match of text.matchAll(/%(\w+)%/g)) {
-				const name = match[1];
-				if (!vars.includes(name)) {
-					vars.push(match[1]);
+					if (/^[,) \t]*$/.test(slice)) {
+						// @ts-expect-error
+						node.trailingComments = [comments.shift()];
+					}
+				}
+			},
+			// @ts-expect-error
+			Identifier(node, context) {
+				if (node.name === 'CODES') {
+					return {
+						type: 'ArrayExpression',
+						elements: Object.keys(messages[name]).map((code) => ({
+							type: 'Literal',
+							value: code
+						}))
+					};
 				}
 			}
-
-			return {
-				text,
-				vars: vars.slice()
-			};
 		});
 
-		/** @type {import('estree').Expression} */
-		let message = { type: 'Literal', value: '' };
-		let prev_vars;
+		if (comments.length > 0) {
+			// @ts-expect-error
+			(ast.trailingComments ||= []).push(...comments);
+		}
 
-		for (let i = 0; i < group.length; i += 1) {
-			const { text, vars } = group[i];
+		const category = messages[name];
 
-			if (vars.length === 0) {
-				message = {
-					type: 'Literal',
-					value: text
-				};
-				prev_vars = vars;
-				continue;
+		// find the `export function CODE` node
+		const index = ast.body.findIndex((node) => {
+			if (
+				node.type === 'ExportNamedDeclaration' &&
+				node.declaration &&
+				node.declaration.type === 'FunctionDeclaration'
+			) {
+				return node.declaration.id.name === 'CODE';
 			}
+		});
 
-			const parts = text.split(/(%\w+%)/);
+		if (index === -1) throw new Error(`missing export function CODE in ${name}.js`);
 
-			/** @type {import('estree').Expression[]} */
-			const expressions = [];
+		const template_node = ast.body[index];
+		ast.body.splice(index, 1);
 
-			/** @type {import('estree').TemplateElement[]} */
-			const quasis = [];
+		for (const code in category) {
+			const { messages } = category[code];
+			/** @type {string[]} */
+			const vars = [];
 
-			for (let i = 0; i < parts.length; i += 1) {
-				const part = parts[i];
-				if (i % 2 === 0) {
-					const str = part.replace(/(`|\${)/g, '\\$1');
-					quasis.push({
-						type: 'TemplateElement',
-						value: { raw: str, cooked: str },
-						tail: i === parts.length - 1
-					});
-				} else {
-					expressions.push({
-						type: 'Identifier',
-						name: part.slice(1, -1)
-					});
+			const group = messages.map((text, i) => {
+				for (const match of text.matchAll(/%(\w+)%/g)) {
+					const name = match[1];
+					if (!vars.includes(name)) {
+						vars.push(match[1]);
+					}
 				}
-			}
+
+				return {
+					text,
+					vars: vars.slice()
+				};
+			});
 
 			/** @type {import('estree').Expression} */
-			const expression = {
-				type: 'TemplateLiteral',
-				expressions,
-				quasis
-			};
-
-			if (prev_vars) {
-				if (vars.length === prev_vars.length) {
-					throw new Error('Message overloads must have new parameters');
+			let message = { type: 'Literal', value: '' };
+			let prev_vars;
+
+			for (let i = 0; i < group.length; i += 1) {
+				const { text, vars } = group[i];
+
+				if (vars.length === 0) {
+					message = {
+						type: 'Literal',
+						value: text
+					};
+					prev_vars = vars;
+					continue;
 				}
 
-				message = {
-					type: 'ConditionalExpression',
-					test: {
-						type: 'Identifier',
-						name: vars[prev_vars.length]
-					},
-					consequent: expression,
-					alternate: message
-				};
-			} else {
-				message = expression;
-			}
+				const parts = text.split(/(%\w+%)/);
 
-			prev_vars = vars;
-		}
+				/** @type {import('estree').Expression[]} */
+				const expressions = [];
 
-		const clone = walk(/** @type {import('estree').Node} */ (template_node), null, {
-			// @ts-expect-error Block is a block comment, which is not recognised
-			Block(node, context) {
-				if (!node.value.includes('PARAMETER')) return;
-
-				const value = /** @type {string} */ (node.value)
-					.split('\n')
-					.map((line) => {
-						if (line === ' * MESSAGE') {
-							return messages[messages.length - 1]
-								.split('\n')
-								.map((line) => ` * ${line}`)
-								.join('\n');
-						}
+				/** @type {import('estree').TemplateElement[]} */
+				const quasis = [];
 
-						if (line.includes('PARAMETER')) {
-							return vars
-								.map((name, i) => {
-									const optional = i >= group[0].vars.length;
+				for (let i = 0; i < parts.length; i += 1) {
+					const part = parts[i];
+					if (i % 2 === 0) {
+						const str = part.replace(/(`|\${)/g, '\\$1');
+						quasis.push({
+							type: 'TemplateElement',
+							value: { raw: str, cooked: str },
+							tail: i === parts.length - 1
+						});
+					} else {
+						expressions.push({
+							type: 'Identifier',
+							name: part.slice(1, -1)
+						});
+					}
+				}
 
-									return optional
-										? ` * @param {string | undefined | null} [${name}]`
-										: ` * @param {string} ${name}`;
-								})
-								.join('\n');
-						}
+				/** @type {import('estree').Expression} */
+				const expression = {
+					type: 'TemplateLiteral',
+					expressions,
+					quasis
+				};
 
-						return line;
-					})
-					.filter((x) => x !== '')
-					.join('\n');
+				if (prev_vars) {
+					if (vars.length === prev_vars.length) {
+						throw new Error('Message overloads must have new parameters');
+					}
 
-				if (value !== node.value) {
-					return { ...node, value };
+					message = {
+						type: 'ConditionalExpression',
+						test: {
+							type: 'Identifier',
+							name: vars[prev_vars.length]
+						},
+						consequent: expression,
+						alternate: message
+					};
+				} else {
+					message = expression;
 				}
-			},
-			FunctionDeclaration(node, context) {
-				if (node.id.name !== 'CODE') return;
 
-				const params = [];
+				prev_vars = vars;
+			}
 
-				for (const param of node.params) {
-					if (param.type === 'Identifier' && param.name === 'PARAMETER') {
-						params.push(...vars.map((name) => ({ type: 'Identifier', name })));
-					} else {
-						params.push(param);
+			const clone = walk(/** @type {import('estree').Node} */ (template_node), null, {
+				// @ts-expect-error Block is a block comment, which is not recognised
+				Block(node, context) {
+					if (!node.value.includes('PARAMETER')) return;
+
+					const value = /** @type {string} */ (node.value)
+						.split('\n')
+						.map((line) => {
+							if (line === ' * MESSAGE') {
+								return messages[messages.length - 1]
+									.split('\n')
+									.map((line) => ` * ${line}`)
+									.join('\n');
+							}
+
+							if (line.includes('PARAMETER')) {
+								return vars
+									.map((name, i) => {
+										const optional = i >= group[0].vars.length;
+
+										return optional
+											? ` * @param {string | undefined | null} [${name}]`
+											: ` * @param {string} ${name}`;
+									})
+									.join('\n');
+							}
+
+							return line;
+						})
+						.filter((x) => x !== '')
+						.join('\n');
+
+					if (value !== node.value) {
+						return { ...node, value };
 					}
-				}
+				},
+				FunctionDeclaration(node, context) {
+					if (node.id.name !== 'CODE') return;
+
+					const params = [];
 
-				return /** @type {import('estree').FunctionDeclaration} */ ({
-					.../** @type {import('estree').FunctionDeclaration} */ (context.next()),
-					params,
-					id: {
-						...node.id,
-						name: code
+					for (const param of node.params) {
+						if (param.type === 'Identifier' && param.name === 'PARAMETER') {
+							params.push(...vars.map((name) => ({ type: 'Identifier', name })));
+						} else {
+							params.push(param);
+						}
 					}
-				});
-			},
-			TemplateLiteral(node, context) {
-				/** @type {import('estree').TemplateElement} */
-				let quasi = {
-					type: 'TemplateElement',
-					value: {
-						...node.quasis[0].value
-					},
-					tail: node.quasis[0].tail
-				};
 
-				/** @type {import('estree').TemplateLiteral} */
-				let out = {
-					type: 'TemplateLiteral',
-					quasis: [quasi],
-					expressions: []
-				};
+					return /** @type {import('estree').FunctionDeclaration} */ ({
+						.../** @type {import('estree').FunctionDeclaration} */ (context.next()),
+						params,
+						id: {
+							...node.id,
+							name: code
+						}
+					});
+				},
+				TemplateLiteral(node, context) {
+					/** @type {import('estree').TemplateElement} */
+					let quasi = {
+						type: 'TemplateElement',
+						value: {
+							...node.quasis[0].value
+						},
+						tail: node.quasis[0].tail
+					};
 
-				for (let i = 0; i < node.expressions.length; i += 1) {
-					const q = structuredClone(node.quasis[i + 1]);
-					const e = node.expressions[i];
+					/** @type {import('estree').TemplateLiteral} */
+					let out = {
+						type: 'TemplateLiteral',
+						quasis: [quasi],
+						expressions: []
+					};
 
-					if (e.type === 'Literal' && e.value === 'CODE') {
-						quasi.value.raw += code + q.value.raw;
-						continue;
-					}
+					for (let i = 0; i < node.expressions.length; i += 1) {
+						const q = structuredClone(node.quasis[i + 1]);
+						const e = node.expressions[i];
 
-					if (e.type === 'Identifier' && e.name === 'MESSAGE') {
-						if (message.type === 'Literal') {
-							const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
-							quasi.value.raw += str + q.value.raw;
+						if (e.type === 'Literal' && e.value === 'CODE') {
+							quasi.value.raw += code + q.value.raw;
 							continue;
 						}
 
-						if (message.type === 'TemplateLiteral') {
-							const m = structuredClone(message);
-							quasi.value.raw += m.quasis[0].value.raw;
-							out.quasis.push(...m.quasis.slice(1));
-							out.expressions.push(...m.expressions);
-							quasi = m.quasis[m.quasis.length - 1];
-							quasi.value.raw += q.value.raw;
-							continue;
+						if (e.type === 'Identifier' && e.name === 'MESSAGE') {
+							if (message.type === 'Literal') {
+								const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
+								quasi.value.raw += str + q.value.raw;
+								continue;
+							}
+
+							if (message.type === 'TemplateLiteral') {
+								const m = structuredClone(message);
+								quasi.value.raw += m.quasis[0].value.raw;
+								out.quasis.push(...m.quasis.slice(1));
+								out.expressions.push(...m.expressions);
+								quasi = m.quasis[m.quasis.length - 1];
+								quasi.value.raw += q.value.raw;
+								continue;
+							}
 						}
+
+						out.quasis.push((quasi = q));
+						out.expressions.push(/** @type {import('estree').Expression} */ (context.visit(e)));
 					}
 
-					out.quasis.push((quasi = q));
-					out.expressions.push(/** @type {import('estree').Expression} */ (context.visit(e)));
+					return out;
+				},
+				Literal(node) {
+					if (node.value === 'CODE') {
+						return {
+							type: 'Literal',
+							value: code
+						};
+					}
+				},
+				Identifier(node) {
+					if (node.name !== 'MESSAGE') return;
+					return message;
 				}
+			});
 
-				return out;
-			},
-			Literal(node) {
-				if (node.value === 'CODE') {
-					return {
-						type: 'Literal',
-						value: code
-					};
-				}
-			},
-			Identifier(node) {
-				if (node.name !== 'MESSAGE') return;
-				return message;
-			}
-		});
+			// @ts-expect-error
+			ast.body.push(clone);
+		}
+
+		const module = esrap.print(ast);
 
-		// @ts-expect-error
-		ast.body.push(clone);
+		fs.writeFileSync(
+			dest,
+			`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
+				module.code,
+			'utf-8'
+		);
 	}
 
-	const module = esrap.print(ast);
+	transform('compile-errors', 'src/compiler/errors.js');
+	transform('compile-warnings', 'src/compiler/warnings.js');
 
-	fs.writeFileSync(
-		dest,
-		`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
-			module.code,
-		'utf-8'
-	);
+	transform('client-warnings', 'src/internal/client/warnings.js');
+	transform('client-errors', 'src/internal/client/errors.js');
+	transform('server-errors', 'src/internal/server/errors.js');
+	transform('shared-errors', 'src/internal/shared/errors.js');
+	transform('shared-warnings', 'src/internal/shared/warnings.js');
 }
 
-transform('compile-errors', 'src/compiler/errors.js');
-transform('compile-warnings', 'src/compiler/warnings.js');
+if (watch) {
+	let running = false;
+	let timeout;
+
+	fs.watch('messages', { recursive: true }, (type, file) => {
+		if (running) {
+			timeout ??= setTimeout(() => {
+				running = false;
+				timeout = null;
+			});
+		} else {
+			running = true;
+
+			// eslint-disable-next-line no-console
+			console.log('Regenerating messages...');
+			run();
+		}
+	});
+}
 
-transform('client-warnings', 'src/internal/client/warnings.js');
-transform('client-errors', 'src/internal/client/errors.js');
-transform('server-errors', 'src/internal/server/errors.js');
-transform('shared-errors', 'src/internal/shared/errors.js');
-transform('shared-warnings', 'src/internal/shared/warnings.js');
+run();

From a2ddca1aa10362c7e6962e04ec60e55ec758218d Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 19 May 2025 20:25:07 +0200
Subject: [PATCH 058/259] fix: avoid auto-parenthesis for special-keywords-only
 `MediaQuery` (#15937)

* fix: avoid auto-parenthesis for special keywords only `MediaQuery`

* chore: update changeset

* chore: i has english knowledge

* fix: fix media queries with commas
---
 .changeset/sweet-islands-sell.md              |  5 +++++
 packages/svelte/src/reactivity/media-query.js | 20 ++++++++++++++++++-
 .../samples/media-query/_config.js            |  5 +++++
 .../samples/media-query/main.svelte           |  5 +++++
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sweet-islands-sell.md

diff --git a/.changeset/sweet-islands-sell.md b/.changeset/sweet-islands-sell.md
new file mode 100644
index 0000000000..b4fbbf182c
--- /dev/null
+++ b/.changeset/sweet-islands-sell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid auto-parenthesis for special-keywords-only `MediaQuery`
diff --git a/packages/svelte/src/reactivity/media-query.js b/packages/svelte/src/reactivity/media-query.js
index 22310df18d..d286709719 100644
--- a/packages/svelte/src/reactivity/media-query.js
+++ b/packages/svelte/src/reactivity/media-query.js
@@ -3,6 +3,19 @@ import { ReactiveValue } from './reactive-value.js';
 
 const parenthesis_regex = /\(.+\)/;
 
+// these keywords are valid media queries but they need to be without parenthesis
+//
+// eg: new MediaQuery('screen')
+//
+// however because of the auto-parenthesis logic in the constructor since there's no parentehesis
+// in the media query they'll be surrounded by parenthesis
+//
+// however we can check if the media query is only composed of these keywords
+// and skip the auto-parenthesis
+//
+// https://github.com/sveltejs/svelte/issues/15930
+const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
+
 /**
  * Creates a media query and provides a `current` property that reflects whether or not it matches.
  *
@@ -27,7 +40,12 @@ export class MediaQuery extends ReactiveValue {
 	 * @param {boolean} [fallback] Fallback value for the server
 	 */
 	constructor(query, fallback) {
-		let final_query = parenthesis_regex.test(query) ? query : `(${query})`;
+		let final_query =
+			parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+				? query
+				: `(${query})`;
 		const q = window.matchMedia(final_query);
 		super(
 			() => q.matches,
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
index f7a4ca05f5..d8b202955a 100644
--- a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
@@ -5,5 +5,10 @@ export default test({
 	async test({ window }) {
 		expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 599px), (min-width: 900px)');
 		expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 900px)');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen');
+		expect(window.matchMedia).toHaveBeenCalledWith('not print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      random');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
index 446a9213dd..fe07ed8ab0 100644
--- a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
@@ -3,4 +3,9 @@
 
 	const mq = new MediaQuery("(max-width: 599px), (min-width: 900px)");
 	const mq2 = new MediaQuery("min-width: 900px");
+	const mq3 = new MediaQuery("screen");
+	const mq4 = new MediaQuery("not print");
+	const mq5 = new MediaQuery("screen,print");
+	const mq6 = new MediaQuery("screen,      print");
+	const mq7 = new MediaQuery("screen,      random");
 </script>

From a96d01b9187a223861c51833046703fe521c9235 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 19 May 2025 15:39:25 -0400
Subject: [PATCH 059/259] Version Packages (#15956)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/sweet-islands-sell.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/sweet-islands-sell.md

diff --git a/.changeset/sweet-islands-sell.md b/.changeset/sweet-islands-sell.md
deleted file mode 100644
index b4fbbf182c..0000000000
--- a/.changeset/sweet-islands-sell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid auto-parenthesis for special-keywords-only `MediaQuery`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index d40ff09317..4508a9b054 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.31.1
+
+### Patch Changes
+
+- fix: avoid auto-parenthesis for special-keywords-only `MediaQuery` ([#15937](https://github.com/sveltejs/svelte/pull/15937))
+
 ## 5.31.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e0f6afe6fc..45a875d19b 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.31.0",
+  "version": "5.31.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ed99ef6795..e42e6741bd 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.31.0';
+export const VERSION = '5.31.1';
 export const PUBLIC_VERSION = '5';

From 22a0211cbb1fed32cfdc6d496e8f8fe6bdee086c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 19 May 2025 16:32:23 -0400
Subject: [PATCH 060/259] docs: clarify when attachments re-run (#15927)

* clarify when attachments re-run

* Update documentation/docs/03-template-syntax/09-@attach.md

* Update documentation/docs/03-template-syntax/09-@attach.md

* update docs

* fix
---
 .../docs/03-template-syntax/09-@attach.md     | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index 2df0882e34..3644cbc8e8 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -2,7 +2,9 @@
 title: {@attach ...}
 ---
 
-Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
+Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
+
+Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
 
 > [!NOTE]
 > Attachments are available in Svelte 5.29 and newer.
@@ -55,7 +57,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
 </button>
 ```
 
-Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
+Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
 
 ## Inline attachments
 
@@ -126,6 +128,35 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
 </Button>
 ```
 
+## Controlling when attachments re-run
+
+Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
+
+```js
+// @errors: 7006 2304 2552
+function foo(bar) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+		update(node, bar);
+	};
+}
+```
+
+In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
+
+```js
+// @errors: 7006 2304 2552
+function foo(+++getBar+++) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+
++++		$effect(() => {
+			update(node, getBar());
+		});+++
+	}
+}
+```
+
 ## Creating attachments programmatically
 
 To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).

From 7183886a73208d4ed34d990319ce2c0f455cad24 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 20 May 2025 00:02:08 +0200
Subject: [PATCH 061/259] feat: attachments `fromAction` utility (#15933)

* feat: attachments `fromAction` utility

* fix: typing of the utility

Co-authored-by: Aidan Bleser <117548273+ieedan@users.noreply.github.com>

* simplify implementation - create action first, then only create update/destroy effects if necessary

* add since

* regenerate

* remove FromAction interface

* overload

* fix: use typedef instead of exported interface

* get rid of the arg0, arg1 stuff

* oops

* god i hate overloads

* defer to the reference documentation

* damn ur weird typescript

* gah

---------

Co-authored-by: Aidan Bleser <117548273+ieedan@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wise-tigers-happen.md              |   5 +
 .../docs/03-template-syntax/09-@attach.md     |   4 +
 packages/svelte/src/attachments/index.js      |  86 +++++++++++++
 .../samples/attachment-from-action/_config.js | 116 ++++++++++++++++++
 .../attachment-from-action/main.svelte        |  37 ++++++
 packages/svelte/types/index.d.ts              | 101 +++++++++++++++
 6 files changed, 349 insertions(+)
 create mode 100644 .changeset/wise-tigers-happen.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte

diff --git a/.changeset/wise-tigers-happen.md b/.changeset/wise-tigers-happen.md
new file mode 100644
index 0000000000..53cc671859
--- /dev/null
+++ b/.changeset/wise-tigers-happen.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: attachments `fromAction` utility
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index 3644cbc8e8..b25fbb32a6 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -160,3 +160,7 @@ function foo(+++getBar+++) {
 ## Creating attachments programmatically
 
 To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
+
+## Converting actions to attachments
+
+If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.
diff --git a/packages/svelte/src/attachments/index.js b/packages/svelte/src/attachments/index.js
index 948a19f4dd..dc2f3e93d7 100644
--- a/packages/svelte/src/attachments/index.js
+++ b/packages/svelte/src/attachments/index.js
@@ -1,4 +1,9 @@
+/** @import { Action, ActionReturn } from '../action/public' */
+/** @import { Attachment } from './public' */
+import { noop, render_effect } from 'svelte/internal/client';
 import { ATTACHMENT_KEY } from '../constants.js';
+import { untrack } from 'svelte';
+import { teardown } from '../internal/client/reactivity/effects.js';
 
 /**
  * Creates an object key that will be recognised as an attachment when the object is spread onto an element,
@@ -25,3 +30,84 @@ import { ATTACHMENT_KEY } from '../constants.js';
 export function createAttachmentKey() {
 	return Symbol(ATTACHMENT_KEY);
 }
+
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ * @template {EventTarget} E
+ * @template {unknown} T
+ * @overload
+ * @param {Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>)} action The action function
+ * @param {() => T} fn A function that returns the argument for the action
+ * @returns {Attachment<E>}
+ */
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ * @template {EventTarget} E
+ * @overload
+ * @param {Action<E, void> | ((element: E) => void | ActionReturn<void>)} action The action function
+ * @returns {Attachment<E>}
+ */
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ *
+ * @template {EventTarget} E
+ * @template {unknown} T
+ * @param {Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>)} action The action function
+ * @param {() => T} fn A function that returns the argument for the action
+ * @returns {Attachment<E>}
+ * @since 5.32
+ */
+export function fromAction(action, fn = /** @type {() => T} */ (noop)) {
+	return (element) => {
+		const { update, destroy } = untrack(() => action(element, fn()) ?? {});
+
+		if (update) {
+			var ran = false;
+			render_effect(() => {
+				const arg = fn();
+				if (ran) update(arg);
+			});
+			ran = true;
+		}
+
+		if (destroy) {
+			teardown(destroy);
+		}
+	};
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js
new file mode 100644
index 0000000000..2e53f0d29d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js
@@ -0,0 +1,116 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		// both logs on creation it will not log on change
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment']);
+
+		// clicking the first button logs the right value
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment', 0]);
+
+		// clicking the second button logs the right value
+		flushSync(() => {
+			btn2?.click();
+		});
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment', 0, 0]);
+
+		// updating the arguments logs the update function for both
+		flushSync(() => {
+			btn3?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment'
+		]);
+
+		// clicking the first button again shows the right value
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1
+		]);
+
+		// clicking the second button again shows the right value
+		flushSync(() => {
+			btn2?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1,
+			1
+		]);
+
+		// unmounting logs the destroy function for both
+		flushSync(() => {
+			btn3?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1,
+			1,
+			'destroy',
+			'action',
+			'destroy',
+			'attachment'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte
new file mode 100644
index 0000000000..35079aa15e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { fromAction } from 'svelte/attachments';
+	let { count = 0 } = $props();
+
+	function test(node, thing) {
+		const kind = node.dataset.kind;
+		console.log('create', thing, kind);
+		let t = thing;
+		const controller = new AbortController();
+		node.addEventListener(
+			'click',
+			() => {
+				console.log(t);
+			},
+			{
+				signal: controller.signal
+			}
+		);
+		return {
+			update(new_thing) {
+				console.log('update', new_thing, kind);
+				t = new_thing;
+			},
+			destroy() {
+				console.log('destroy', kind);
+				controller.abort();
+			}
+		};
+	}
+</script>
+
+{#if count < 2}
+	<button data-kind="action" use:test={count}></button>
+	<button data-kind="attachment" {@attach fromAction(test, ()=>count)}></button>
+{/if}
+
+<button onclick={()=> count++}></button>
\ No newline at end of file
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 1fda9a36b8..fcc1ec315c 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -658,6 +658,107 @@ declare module 'svelte/attachments' {
 	 * @since 5.29
 	 */
 	export function createAttachmentKey(): symbol;
+	/**
+	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+	 * It's useful if you want to start using attachments on components but you have actions provided by a library.
+	 *
+	 * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+	 * action function, not the argument itself.
+	 *
+	 * ```svelte
+	 * <!-- with an action -->
+	 * <div use:foo={bar}>...</div>
+	 *
+	 * <!-- with an attachment -->
+	 * <div {@attach fromAction(foo, () => bar)}>...</div>
+	 * ```
+	 * */
+	export function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>), fn: () => T): Attachment<E>;
+	/**
+	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+	 * It's useful if you want to start using attachments on components but you have actions provided by a library.
+	 *
+	 * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+	 * action function, not the argument itself.
+	 *
+	 * ```svelte
+	 * <!-- with an action -->
+	 * <div use:foo={bar}>...</div>
+	 *
+	 * <!-- with an attachment -->
+	 * <div {@attach fromAction(foo, () => bar)}>...</div>
+	 * ```
+	 * */
+	export function fromAction<E extends EventTarget>(action: Action<E, void> | ((element: E) => void | ActionReturn<void>)): Attachment<E>;
+	/**
+	 * Actions can return an object containing the two properties defined in this interface. Both are optional.
+	 * - update: An action can have a parameter. This method will be called whenever that parameter changes,
+	 *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
+	 *   mean that the action accepts no parameters.
+	 * - destroy: Method that is called after the element is unmounted
+	 *
+	 * Additionally, you can specify which additional attributes and events the action enables on the applied element.
+	 * This applies to TypeScript typings only and has no effect at runtime.
+	 *
+	 * Example usage:
+	 * ```ts
+	 * interface Attributes {
+	 * 	newprop?: string;
+	 * 	'on:event': (e: CustomEvent<boolean>) => void;
+	 * }
+	 *
+	 * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
+	 * 	// ...
+	 * 	return {
+	 * 		update: (updatedParameter) => {...},
+	 * 		destroy: () => {...}
+	 * 	};
+	 * }
+	 * ```
+	 */
+	interface ActionReturn<
+		Parameter = undefined,
+		Attributes extends Record<string, any> = Record<never, any>
+	> {
+		update?: (parameter: Parameter) => void;
+		destroy?: () => void;
+		/**
+		 * ### DO NOT USE THIS
+		 * This exists solely for type-checking and has no effect at runtime.
+		 * Set this through the `Attributes` generic instead.
+		 */
+		$$_attributes?: Attributes;
+	}
+
+	/**
+	 * Actions are functions that are called when an element is created.
+	 * You can use this interface to type such actions.
+	 * The following example defines an action that only works on `<div>` elements
+	 * and optionally accepts a parameter which it has a default value for:
+	 * ```ts
+	 * export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
+	 *   // ...
+	 * }
+	 * ```
+	 * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
+	 *
+	 * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
+	 * See interface `ActionReturn` for more details.
+	 */
+	interface Action<
+		Element = HTMLElement,
+		Parameter = undefined,
+		Attributes extends Record<string, any> = Record<never, any>
+	> {
+		<Node extends Element>(
+			...args: undefined extends Parameter
+				? [node: Node, parameter?: Parameter]
+				: [node: Node, parameter: Parameter]
+		): void | ActionReturn<Parameter, Attributes>;
+	}
+
+	// Implementation notes:
+	// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
 
 	export {};
 }

From c66a43940aee4c24f4c003a50b433e64d316e40a Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Tue, 20 May 2025 17:50:54 +0300
Subject: [PATCH 062/259] feat: warn on implicitly closed tags (#15932)

* warn on implicitly closed tags

* lint

* changeset

* separate tests for parent/sibling case

* account for attributes in opening tag

* tweak

* update message

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/blue-experts-tell.md               |  5 ++++
 .../.generated/compile-warnings.md            | 19 ++++++++++++++
 .../messages/compile-warnings/template.md     | 17 ++++++++++++
 .../compiler/phases/1-parse/state/element.js  | 13 +++++++++-
 packages/svelte/src/compiler/warnings.js      | 11 ++++++++
 .../implicitly-closed-by-parent/input.svelte  |  6 +++++
 .../implicitly-closed-by-parent/warnings.json | 26 +++++++++++++++++++
 .../implicitly-closed-by-sibling/input.svelte |  9 +++++++
 .../warnings.json                             | 26 +++++++++++++++++++
 9 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/blue-experts-tell.md
 create mode 100644 packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json

diff --git a/.changeset/blue-experts-tell.md b/.changeset/blue-experts-tell.md
new file mode 100644
index 0000000000..a12fb126d1
--- /dev/null
+++ b/.changeset/blue-experts-tell.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: warn on implicitly closed tags
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index 7069f90206..b579d38602 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -632,6 +632,25 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### element_implicitly_closed
+
+```
+This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+```
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ### element_invalid_self_closing_tag
 
 ```
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index c1675e5995..d61a61d950 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -30,6 +30,23 @@
 
 > `<%name%>` will be treated as an HTML element unless it begins with a capital letter
 
+## element_implicitly_closed
+
+> This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ## element_invalid_self_closing_tag
 
 > Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
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 d20369b0d9..6b6c9160d8 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -93,7 +93,16 @@ export default function element(parser) {
 				}
 			}
 
-			if (parent.type !== 'RegularElement' && !parser.loose) {
+			if (parent.type === 'RegularElement') {
+				if (!parser.last_auto_closed_tag || parser.last_auto_closed_tag.tag !== name) {
+					const end = parent.fragment.nodes[0]?.start ?? start;
+					w.element_implicitly_closed(
+						{ start: parent.start, end },
+						`</${name}>`,
+						`</${parent.name}>`
+					);
+				}
+			} else if (!parser.loose) {
 				if (parser.last_auto_closed_tag && parser.last_auto_closed_tag.tag === name) {
 					e.element_invalid_closing_tag_autoclosed(start, name, parser.last_auto_closed_tag.reason);
 				} else {
@@ -186,6 +195,8 @@ export default function element(parser) {
 	parser.allow_whitespace();
 
 	if (parent.type === 'RegularElement' && closing_tag_omitted(parent.name, name)) {
+		const end = parent.fragment.nodes[0]?.start ?? start;
+		w.element_implicitly_closed({ start: parent.start, end }, `<${name}>`, `</${parent.name}>`);
 		parent.end = start;
 		parser.pop();
 		parser.last_auto_closed_tag = {
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index c281433213..2a8316308c 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -114,6 +114,7 @@ export const codes = [
 	'bind_invalid_each_rest',
 	'block_empty',
 	'component_name_lowercase',
+	'element_implicitly_closed',
 	'element_invalid_self_closing_tag',
 	'event_directive_deprecated',
 	'node_invalid_placement_ssr',
@@ -746,6 +747,16 @@ export function component_name_lowercase(node, name) {
 	w(node, 'component_name_lowercase', `\`<${name}>\` will be treated as an HTML element unless it begins with a capital letter\nhttps://svelte.dev/e/component_name_lowercase`);
 }
 
+/**
+ * This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+ * @param {null | NodeLike} node
+ * @param {string} tag
+ * @param {string} closing
+ */
+export function element_implicitly_closed(node, tag, closing) {
+	w(node, 'element_implicitly_closed', `This element is implicitly closed by the following \`${tag}\`, which can cause an unexpected DOM structure. Add an explicit \`${closing}\` to avoid surprises.\nhttps://svelte.dev/e/element_implicitly_closed`);
+}
+
 /**
  * Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte
new file mode 100644
index 0000000000..f67eba18b8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte
@@ -0,0 +1,6 @@
+<main><div class="hello"></main>
+
+<main>
+	<div class="hello">
+		<p>hello</p>
+</main>
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json
new file mode 100644
index 0000000000..1316a2b65b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
+		"start": {
+			"line": 1,
+			"column": 6
+		},
+		"end": {
+			"line": 1,
+			"column": 25
+		}
+	},
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
+		"start": {
+			"line": 4,
+			"column": 1
+		},
+		"end": {
+			"line": 4,
+			"column": 20
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte
new file mode 100644
index 0000000000..7721f2f380
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<p class="hello">
+		<span></span>
+		<p></p>
+</div>
+
+<div>
+	<p class="hello"><p></p>
+</div>
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json
new file mode 100644
index 0000000000..6ea36c5a50
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 2,
+			"column": 18
+		}
+	},
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
+		"start": {
+			"line": 8,
+			"column": 1
+		},
+		"end": {
+			"line": 8,
+			"column": 18
+		}
+	}
+]

From 93443f93160792d49a85b6b8ac7571abd3fccede Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 20 May 2025 11:13:55 -0400
Subject: [PATCH 063/259] fix: only re-run directly applied attachment if it
 changed (#15962)

* fix: only re-run directly applied attachment if it changed

* add note

* one down

* fix

* Revert "one down"

This reverts commit 9f6c4cf84838de8d8cb93e7217de37871839ac8b.
---
 .changeset/slimy-drinks-divide.md             |  5 ++++
 .../client/dom/elements/attachments.js        | 30 +++++++++++++++----
 .../attachment-in-mutated-state/_config.js    | 16 ++++++++++
 .../attachment-in-mutated-state/main.svelte   | 15 ++++++++++
 4 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/slimy-drinks-divide.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte

diff --git a/.changeset/slimy-drinks-divide.md b/.changeset/slimy-drinks-divide.md
new file mode 100644
index 0000000000..420d0bed56
--- /dev/null
+++ b/.changeset/slimy-drinks-divide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only re-run directly applied attachment if it changed
diff --git a/packages/svelte/src/internal/client/dom/elements/attachments.js b/packages/svelte/src/internal/client/dom/elements/attachments.js
index 6e3089a384..4fc1280138 100644
--- a/packages/svelte/src/internal/client/dom/elements/attachments.js
+++ b/packages/svelte/src/internal/client/dom/elements/attachments.js
@@ -1,15 +1,33 @@
-import { effect } from '../../reactivity/effects.js';
+/** @import { Effect } from '#client' */
+import { block, branch, effect, destroy_effect } from '../../reactivity/effects.js';
+
+// TODO in 6.0 or 7.0, when we remove legacy mode, we can simplify this by
+// getting rid of the block/branch stuff and just letting the effect rip.
+// see https://github.com/sveltejs/svelte/pull/15962
 
 /**
  * @param {Element} node
  * @param {() => (node: Element) => void} get_fn
  */
 export function attach(node, get_fn) {
-	effect(() => {
-		const fn = get_fn();
+	/** @type {false | undefined | ((node: Element) => void)} */
+	var fn = undefined;
+
+	/** @type {Effect | null} */
+	var e;
+
+	block(() => {
+		if (fn !== (fn = get_fn())) {
+			if (e) {
+				destroy_effect(e);
+				e = null;
+			}
 
-		// we use `&&` rather than `?.` so that things like
-		// `{@attach DEV && something_dev_only()}` work
-		return fn && fn(node);
+			if (fn) {
+				e = branch(() => {
+					effect(() => /** @type {(node: Element) => void} */ (fn)(node));
+				});
+			}
+		}
 	});
 }
diff --git a/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js
new file mode 100644
index 0000000000..5d37252358
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up']);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up', 'down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte
new file mode 100644
index 0000000000..fbec108c7a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let state = {
+		count: 0,
+		attachment(){
+			console.log('up');
+			return () => console.log('down');
+		}
+	};
+</script>
+
+<button onclick={() => state.count++}>{state.count}</button>
+
+{#if state.count < 2}
+	<div {@attach state.attachment}></div>
+{/if}

From 21d5448ab72c1e0cf5dfd6ec989489d4f57516f7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 11:28:43 -0400
Subject: [PATCH 064/259] Version Packages (#15959)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/blue-experts-tell.md   |  5 -----
 .changeset/slimy-drinks-divide.md |  5 -----
 .changeset/wise-tigers-happen.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/blue-experts-tell.md
 delete mode 100644 .changeset/slimy-drinks-divide.md
 delete mode 100644 .changeset/wise-tigers-happen.md

diff --git a/.changeset/blue-experts-tell.md b/.changeset/blue-experts-tell.md
deleted file mode 100644
index a12fb126d1..0000000000
--- a/.changeset/blue-experts-tell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: warn on implicitly closed tags
diff --git a/.changeset/slimy-drinks-divide.md b/.changeset/slimy-drinks-divide.md
deleted file mode 100644
index 420d0bed56..0000000000
--- a/.changeset/slimy-drinks-divide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: only re-run directly applied attachment if it changed
diff --git a/.changeset/wise-tigers-happen.md b/.changeset/wise-tigers-happen.md
deleted file mode 100644
index 53cc671859..0000000000
--- a/.changeset/wise-tigers-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: attachments `fromAction` utility
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4508a9b054..270460e5ed 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.32.0
+
+### Minor Changes
+
+- feat: warn on implicitly closed tags ([#15932](https://github.com/sveltejs/svelte/pull/15932))
+
+- feat: attachments `fromAction` utility ([#15933](https://github.com/sveltejs/svelte/pull/15933))
+
+### Patch Changes
+
+- fix: only re-run directly applied attachment if it changed ([#15962](https://github.com/sveltejs/svelte/pull/15962))
+
 ## 5.31.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 45a875d19b..d374880887 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.31.1",
+  "version": "5.32.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e42e6741bd..9a198d097d 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.31.1';
+export const VERSION = '5.32.0';
 export const PUBLIC_VERSION = '5';

From de8094910de7e2d491c2f26b891844c2f311f78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gautier=20Ben=20A=C3=AFm?=
 <48261497+GauBen@users.noreply.github.com>
Date: Tue, 20 May 2025 19:32:47 +0200
Subject: [PATCH 065/259] fix(14815): warn when an invalid <select multiple>
 value is given (#14816)

* fix(14815): warn when an invalid <select multiple> value is given

* Create nervous-stingrays-travel.md
---
 .changeset/nervous-stingrays-travel.md        |  5 +++++
 .../.generated/client-warnings.md             | 13 +++++++++++++
 .../messages/client-warnings/warnings.md      | 11 +++++++++++
 .../client/dom/elements/bindings/select.js    | 19 +++++++++++++++----
 .../svelte/src/internal/client/warnings.js    | 11 +++++++++++
 .../select-multiple-invalid-value/_config.js  |  7 +++++++
 .../select-multiple-invalid-value/main.svelte |  9 +++++++++
 7 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nervous-stingrays-travel.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte

diff --git a/.changeset/nervous-stingrays-travel.md b/.changeset/nervous-stingrays-travel.md
new file mode 100644
index 0000000000..9ccc3e6c65
--- /dev/null
+++ b/.changeset/nervous-stingrays-travel.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+Warn when an invalid `<select multiple>` value is given
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 77d1df4cdd..fe90b0db38 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -200,6 +200,19 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+### select_multiple_invalid_value
+
+```
+The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+```
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index f8e9ebd8a0..f1901271d1 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -168,6 +168,17 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+## select_multiple_invalid_value
+
+> The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ## state_proxy_equality_mismatch
 
 > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 32cd160de2..20f95af5ec 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -2,6 +2,8 @@ import { effect } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import { untrack } from '../../../runtime.js';
 import { is } from '../../../proxy.js';
+import { is_array } from '../../../../shared/utils.js';
+import * as w from '../../../warnings.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
@@ -12,6 +14,17 @@ import { is } from '../../../proxy.js';
  */
 export function select_option(select, value, mounting) {
 	if (select.multiple) {
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			return w.select_multiple_invalid_value();
+		}
+
+		// Otherwise, update the selection
 		return select_options(select, value);
 	}
 
@@ -124,14 +137,12 @@ export function bind_select_value(select, get, set = get) {
 }
 
 /**
- * @template V
  * @param {HTMLSelectElement} select
- * @param {V} value
+ * @param {unknown[]} value
  */
 function select_options(select, value) {
 	for (var option of select.options) {
-		// @ts-ignore
-		option.selected = ~value.indexOf(get_option_value(option));
+		option.selected = value.includes(get_option_value(option));
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index c84b487e28..e07892a4b0 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -158,6 +158,17 @@ export function ownership_invalid_mutation(name, location, prop, parent) {
 	}
 }
 
+/**
+ * The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+ */
+export function select_multiple_invalid_value() {
+	if (DEV) {
+		console.warn(`%c[svelte] select_multiple_invalid_value\n%cThe \`value\` property of a \`<select multiple>\` element should be an array, but it received a non-array value. The selection will be kept as is.\nhttps://svelte.dev/e/select_multiple_invalid_value`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
+	}
+}
+
 /**
  * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
  * @param {string} operator
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
new file mode 100644
index 0000000000..1f04f176af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		'The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.'
+	]
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
new file mode 100644
index 0000000000..f3dfedf0e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
@@ -0,0 +1,9 @@
+<select multiple value={null}>
+  <option>option</option>
+</select>
+<select multiple value={undefined}>
+  <option>option</option>
+</select>
+<select multiple value={123}>
+  <option>option</option>
+</select>

From ef48d35a15fc104efd6ee5cf13eceea3ace4ae0d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 14:13:31 -0400
Subject: [PATCH 066/259] Version Packages (#15967)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/nervous-stingrays-travel.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/nervous-stingrays-travel.md

diff --git a/.changeset/nervous-stingrays-travel.md b/.changeset/nervous-stingrays-travel.md
deleted file mode 100644
index 9ccc3e6c65..0000000000
--- a/.changeset/nervous-stingrays-travel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"svelte": patch
----
-
-Warn when an invalid `<select multiple>` value is given
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 270460e5ed..b65a941bd9 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.32.1
+
+### Patch Changes
+
+- Warn when an invalid `<select multiple>` value is given ([#14816](https://github.com/sveltejs/svelte/pull/14816))
+
 ## 5.32.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index d374880887..64fa308000 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.32.0",
+  "version": "5.32.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 9a198d097d..c6748487fb 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.32.0';
+export const VERSION = '5.32.1';
 export const PUBLIC_VERSION = '5';

From 4e72b7d28b5d8f469ee7ffaee02f94a111823bd4 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 21 May 2025 15:18:33 +0200
Subject: [PATCH 067/259] fix: import `untrack` directly from client in
 `svelte/attachments` (#15974)

---
 .changeset/short-ads-rhyme.md            | 5 +++++
 packages/svelte/src/attachments/index.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/short-ads-rhyme.md

diff --git a/.changeset/short-ads-rhyme.md b/.changeset/short-ads-rhyme.md
new file mode 100644
index 0000000000..31434530ab
--- /dev/null
+++ b/.changeset/short-ads-rhyme.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: import untrack directly from client in `svelte/attachments`
diff --git a/packages/svelte/src/attachments/index.js b/packages/svelte/src/attachments/index.js
index dc2f3e93d7..b9fde9b6d9 100644
--- a/packages/svelte/src/attachments/index.js
+++ b/packages/svelte/src/attachments/index.js
@@ -2,7 +2,7 @@
 /** @import { Attachment } from './public' */
 import { noop, render_effect } from 'svelte/internal/client';
 import { ATTACHMENT_KEY } from '../constants.js';
-import { untrack } from 'svelte';
+import { untrack } from '../index-client.js';
 import { teardown } from '../internal/client/reactivity/effects.js';
 
 /**

From c03ea47e4ef88782a0f43b3157d7712a03c44698 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 May 2025 15:09:21 -0400
Subject: [PATCH 068/259] chore: simplify `<pre>` cleaning (#15980)

---
 .changeset/fifty-llamas-know.md                 |  5 +++++
 .../src/compiler/phases/3-transform/utils.js    | 17 +++++------------
 2 files changed, 10 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/fifty-llamas-know.md

diff --git a/.changeset/fifty-llamas-know.md b/.changeset/fifty-llamas-know.md
new file mode 100644
index 0000000000..f11c975f3d
--- /dev/null
+++ b/.changeset/fifty-llamas-know.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: simplify `<pre>` cleaning
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 5aa40c8abb..5803c04947 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -271,19 +271,12 @@ export function clean_nodes(
 
 	var first = trimmed[0];
 
-	// initial newline inside a `<pre>` is disregarded, if not followed by another newline
+	// if first text node inside a <pre> is a single newline, discard it, because otherwise
+	// the browser will do it for us which could break hydration
 	if (parent.type === 'RegularElement' && parent.name === 'pre' && first?.type === 'Text') {
-		const text = first.data.replace(regex_starts_with_newline, '');
-		if (text !== first.data) {
-			const tmp = text.replace(regex_starts_with_newline, '');
-			if (text === tmp) {
-				first.data = text;
-				first.raw = first.raw.replace(regex_starts_with_newline, '');
-				if (first.data === '') {
-					trimmed.shift();
-					first = trimmed[0];
-				}
-			}
+		if (first.data === '\n' || first.data === '\r\n') {
+			trimmed.shift();
+			first = trimmed[0];
 		}
 	}
 

From 50de8c53178d61f675c5fa1d2d1fc88ae94bb0cd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 May 2025 19:45:07 -0400
Subject: [PATCH 069/259] fix: attach __svelte_meta correctly to elements
 following a CSS wrapper (#15982)

* fix: attach __svelte_meta correctly to elements following a CSS wrapper

* Update .changeset/nervous-hotels-clean.md
---
 .changeset/nervous-hotels-clean.md            |  5 +++
 .../client/visitors/shared/component.js       |  9 +++-
 .../svelte-meta-css-wrapper/Component.svelte  |  7 ++++
 .../svelte-meta-css-wrapper/_config.js        | 42 +++++++++++++++++++
 .../svelte-meta-css-wrapper/main.svelte       |  7 ++++
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/nervous-hotels-clean.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte

diff --git a/.changeset/nervous-hotels-clean.md b/.changeset/nervous-hotels-clean.md
new file mode 100644
index 0000000000..77d5c186c7
--- /dev/null
+++ b/.changeset/nervous-hotels-clean.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: attach `__svelte_meta` correctly to elements following a CSS wrapper
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 6d3d8a68e6..99ed294d26 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
@@ -1,7 +1,7 @@
 /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { dev, is_ignored } from '../../../../../state.js';
+import { dev, is_ignored, locator } 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 } from '../shared/utils.js';
@@ -440,6 +440,13 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
+		if (dev) {
+			const loc = locator(node.start);
+			if (loc) {
+				context.state.locations.push([loc.line, loc.column]);
+			}
+		}
+
 		context.state.template.push(
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
new file mode 100644
index 0000000000..5668311b0e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
@@ -0,0 +1,7 @@
+<h2>hello from component</h2>
+
+<style>
+	h2 {
+		color: var(--color);
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
new file mode 100644
index 0000000000..1d76b0dd00
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<h1>hello</h1>
+		<svelte-css-wrapper style="display: contents; --color: red;">
+			<h2 class="svelte-13kae5a">hello from component</h2>
+		</svelte-css-wrapper>
+		<p>goodbye</p>
+	`,
+
+	async test({ target, assert }) {
+		const h1 = target.querySelector('h1');
+		const h2 = target.querySelector('h2');
+		const p = target.querySelector('p');
+
+		// @ts-expect-error
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 5,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(h2.__svelte_meta.loc, {
+			file: 'Component.svelte',
+			line: 1,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(p.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 7,
+			column: 0
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
new file mode 100644
index 0000000000..f49a48fb52
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<h1>hello</h1>
+<Component --color="red" />
+<p>goodbye</p>

From 5a840982a7d06d1aaea59db8352fb2bf0188c0ec Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 May 2025 11:18:39 -0400
Subject: [PATCH 070/259] Version Packages (#15978)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fifty-llamas-know.md    |  5 -----
 .changeset/nervous-hotels-clean.md |  5 -----
 .changeset/short-ads-rhyme.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/fifty-llamas-know.md
 delete mode 100644 .changeset/nervous-hotels-clean.md
 delete mode 100644 .changeset/short-ads-rhyme.md

diff --git a/.changeset/fifty-llamas-know.md b/.changeset/fifty-llamas-know.md
deleted file mode 100644
index f11c975f3d..0000000000
--- a/.changeset/fifty-llamas-know.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: simplify `<pre>` cleaning
diff --git a/.changeset/nervous-hotels-clean.md b/.changeset/nervous-hotels-clean.md
deleted file mode 100644
index 77d5c186c7..0000000000
--- a/.changeset/nervous-hotels-clean.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: attach `__svelte_meta` correctly to elements following a CSS wrapper
diff --git a/.changeset/short-ads-rhyme.md b/.changeset/short-ads-rhyme.md
deleted file mode 100644
index 31434530ab..0000000000
--- a/.changeset/short-ads-rhyme.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: import untrack directly from client in `svelte/attachments`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b65a941bd9..4c65954c9f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.32.2
+
+### Patch Changes
+
+- chore: simplify `<pre>` cleaning ([#15980](https://github.com/sveltejs/svelte/pull/15980))
+
+- fix: attach `__svelte_meta` correctly to elements following a CSS wrapper ([#15982](https://github.com/sveltejs/svelte/pull/15982))
+
+- fix: import untrack directly from client in `svelte/attachments` ([#15974](https://github.com/sveltejs/svelte/pull/15974))
+
 ## 5.32.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 64fa308000..168e7abe37 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.32.1",
+  "version": "5.32.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c6748487fb..c93d7e2e25 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.32.1';
+export const VERSION = '5.32.2';
 export const PUBLIC_VERSION = '5';

From d1141a19b5eaa156d3cd39cb756f0a69dd3c3b8e Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 22 May 2025 17:21:50 +0200
Subject: [PATCH 071/259] feat: functional template generation (#15538)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/forty-llamas-unite.md              |   5 +
 .changeset/smart-boats-accept.md              |   5 +
 .../3-transform/client/transform-client.js    |   7 +-
 .../fix-attribute-casing.js                   |  18 ++
 .../client/transform-template/index.js        |  68 ++++++++
 .../client/transform-template/template.js     | 162 ++++++++++++++++++
 .../client/transform-template/types.d.ts      |  22 +++
 .../phases/3-transform/client/types.d.ts      |  23 +--
 .../3-transform/client/visitors/AwaitBlock.js |   2 +-
 .../3-transform/client/visitors/Comment.js    |   2 +-
 .../3-transform/client/visitors/EachBlock.js  |   2 +-
 .../3-transform/client/visitors/Fragment.js   | 136 ++-------------
 .../3-transform/client/visitors/HtmlTag.js    |   2 +-
 .../3-transform/client/visitors/IfBlock.js    |   2 +-
 .../3-transform/client/visitors/KeyBlock.js   |   2 +-
 .../client/visitors/RegularElement.js         |  66 ++-----
 .../3-transform/client/visitors/RenderTag.js  |   2 +-
 .../client/visitors/SlotElement.js            |   2 +-
 .../client/visitors/SvelteBoundary.js         |   2 +-
 .../client/visitors/SvelteElement.js          |   2 +-
 .../client/visitors/shared/component.js       |  23 ++-
 .../client/visitors/shared/fragment.js        |   4 +-
 .../server/visitors/RegularElement.js         |   6 +-
 .../src/compiler/phases/3-transform/utils.js  |   2 +-
 packages/svelte/src/compiler/types/index.d.ts |   9 +
 .../svelte/src/compiler/validate-options.js   |   2 +
 packages/svelte/src/constants.js              |   2 +
 .../src/internal/client/dev/elements.js       |   2 +-
 .../src/internal/client/dom/operations.js     |  41 +++++
 .../src/internal/client/dom/reconciler.js     |   2 +-
 .../src/internal/client/dom/template.js       | 145 +++++++++++++---
 .../svelte/src/internal/client/dom/types.d.ts |   4 +
 packages/svelte/src/internal/client/index.js  |  12 +-
 .../svelte/src/internal/client/types.d.ts     |   4 +
 .../svelte/src/internal/shared/types.d.ts     |   4 -
 packages/svelte/tests/helpers.js              |   2 +
 packages/svelte/tests/hydration/test.ts       |  11 +-
 packages/svelte/tests/runtime-browser/test.ts |   3 +-
 .../svelte/tests/runtime-legacy/shared.ts     |   3 +-
 .../custom-element-attributes/main.svelte     |  26 +--
 .../samples/functional-templating/_config.js  |   9 +
 .../samples/functional-templating/main.svelte |   1 +
 .../_expected/client/index.svelte.js          |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 .../_expected/client/main.svelte.js           |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 .../samples/functional-templating/_config.js  |   7 +
 .../_expected/client/index.svelte.js          |  25 +++
 .../_expected/server/index.svelte.js          |   5 +
 .../functional-templating/index.svelte        |   6 +
 .../_expected/client/index.svelte.js          |   2 +-
 .../hmr/_expected/client/index.svelte.js      |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 .../purity/_expected/client/index.svelte.js   |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 .../_expected/server/index.svelte.js          |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 .../_expected/server/index.svelte.js          |   2 +-
 .../_expected/client/index.svelte.js          |   2 +-
 packages/svelte/types/index.d.ts              |  18 ++
 playgrounds/sandbox/run.js                    |  18 +-
 61 files changed, 666 insertions(+), 288 deletions(-)
 create mode 100644 .changeset/forty-llamas-unite.md
 create mode 100644 .changeset/smart-boats-accept.md
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts
 create mode 100644 packages/svelte/src/internal/client/dom/types.d.ts
 create mode 100644 packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte
 create mode 100644 packages/svelte/tests/snapshot/samples/functional-templating/_config.js
 create mode 100644 packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/functional-templating/index.svelte

diff --git a/.changeset/forty-llamas-unite.md b/.changeset/forty-llamas-unite.md
new file mode 100644
index 0000000000..933cece1c6
--- /dev/null
+++ b/.changeset/forty-llamas-unite.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: XHTML compliance
diff --git a/.changeset/smart-boats-accept.md b/.changeset/smart-boats-accept.md
new file mode 100644
index 0000000000..4cdfeb30d0
--- /dev/null
+++ b/.changeset/smart-boats-accept.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add `fragments: 'html' | 'tree'` option for wider CSP compliance
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 f2eda3a7d2..e2e006c14b 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
@@ -154,10 +154,6 @@ export function client_component(analysis, options) {
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
 		metadata: {
-			context: {
-				template_needs_import_node: false,
-				template_contains_script_tag: false
-			},
 			namespace: options.namespace,
 			bound_contenteditable: false
 		},
@@ -174,8 +170,7 @@ export function client_component(analysis, options) {
 		update: /** @type {any} */ (null),
 		expressions: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
-		template: /** @type {any} */ (null),
-		locations: /** @type {any} */ (null)
+		template: /** @type {any} */ (null)
 	};
 
 	const module = /** @type {ESTree.Program} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js
new file mode 100644
index 0000000000..ce56c43d7c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js
@@ -0,0 +1,18 @@
+const svg_attributes =
+	'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(
+		' '
+	);
+
+const svg_attribute_lookup = new Map();
+
+svg_attributes.forEach((name) => {
+	svg_attribute_lookup.set(name.toLowerCase(), name);
+});
+
+/**
+ * @param {string} name
+ */
+export default function fix_attribute_casing(name) {
+	name = name.toLowerCase();
+	return svg_attribute_lookup.get(name) || name;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
new file mode 100644
index 0000000000..d0327e702a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -0,0 +1,68 @@
+/** @import { Location } from 'locate-character' */
+/** @import { Namespace } from '#compiler' */
+/** @import { ComponentClientTransformState } from '../types.js' */
+/** @import { Node } from './types.js' */
+import { TEMPLATE_USE_MATHML, TEMPLATE_USE_SVG } from '../../../../../constants.js';
+import { dev, locator } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {Node[]} nodes
+ */
+function build_locations(nodes) {
+	const array = b.array([]);
+
+	for (const node of nodes) {
+		if (node.type !== 'element') continue;
+
+		const { line, column } = /** @type {Location} */ (locator(node.start));
+
+		const expression = b.array([b.literal(line), b.literal(column)]);
+		const children = build_locations(node.children);
+
+		if (children.elements.length > 0) {
+			expression.elements.push(children);
+		}
+
+		array.elements.push(expression);
+	}
+
+	return array;
+}
+
+/**
+ * @param {ComponentClientTransformState} state
+ * @param {Namespace} namespace
+ * @param {number} [flags]
+ */
+export function transform_template(state, namespace, flags = 0) {
+	const tree = state.options.fragments === 'tree';
+
+	const expression = tree ? state.template.as_tree() : state.template.as_html();
+
+	if (tree) {
+		if (namespace === 'svg') flags |= TEMPLATE_USE_SVG;
+		if (namespace === 'mathml') flags |= TEMPLATE_USE_MATHML;
+	}
+
+	let call = b.call(
+		tree ? `$.from_tree` : `$.from_${namespace}`,
+		expression,
+		flags ? b.literal(flags) : undefined
+	);
+
+	if (state.template.contains_script_tag) {
+		call = b.call(`$.with_script`, call);
+	}
+
+	if (dev) {
+		call = b.call(
+			'$.add_locations',
+			call,
+			b.member(b.id(state.analysis.name), '$.FILENAME', true),
+			build_locations(state.template.nodes)
+		);
+	}
+
+	return call;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
new file mode 100644
index 0000000000..8f7f8a1f43
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
@@ -0,0 +1,162 @@
+/** @import { AST } from '#compiler' */
+/** @import { Node, Element } from './types'; */
+import { escape_html } from '../../../../../escaping.js';
+import { is_void } from '../../../../../utils.js';
+import * as b from '#compiler/builders';
+import fix_attribute_casing from './fix-attribute-casing.js';
+import { regex_starts_with_newline } from '../../../patterns.js';
+
+export class Template {
+	/**
+	 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
+	 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
+	 */
+	contains_script_tag = false;
+
+	/** `true` if the HTML template needs to be instantiated with `importNode` */
+	needs_import_node = false;
+
+	/** @type {Node[]} */
+	nodes = [];
+
+	/** @type {Node[][]} */
+	#stack = [this.nodes];
+
+	/** @type {Element | undefined} */
+	#element;
+
+	#fragment = this.nodes;
+
+	/**
+	 * @param {string} name
+	 * @param {number} start
+	 */
+	push_element(name, start) {
+		this.#element = {
+			type: 'element',
+			name,
+			attributes: {},
+			children: [],
+			start
+		};
+
+		this.#fragment.push(this.#element);
+
+		this.#fragment = /** @type {Element} */ (this.#element).children;
+		this.#stack.push(this.#fragment);
+	}
+
+	/** @param {string} [data] */
+	push_comment(data) {
+		this.#fragment.push({ type: 'comment', data });
+	}
+
+	/** @param {AST.Text[]} nodes */
+	push_text(nodes) {
+		this.#fragment.push({ type: 'text', nodes });
+	}
+
+	pop_element() {
+		this.#stack.pop();
+		this.#fragment = /** @type {Node[]} */ (this.#stack.at(-1));
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {string | undefined} value
+	 */
+	set_prop(key, value) {
+		/** @type {Element} */ (this.#element).attributes[key] = value;
+	}
+
+	as_html() {
+		return b.template([b.quasi(this.nodes.map(stringify).join(''), true)], []);
+	}
+
+	as_tree() {
+		// if the first item is a comment we need to add another comment for effect.start
+		if (this.nodes[0].type === 'comment') {
+			this.nodes.unshift({ type: 'comment', data: undefined });
+		}
+
+		return b.array(this.nodes.map(objectify));
+	}
+}
+
+/**
+ * @param {Node} item
+ */
+function stringify(item) {
+	if (item.type === 'text') {
+		return item.nodes.map((node) => node.raw).join('');
+	}
+
+	if (item.type === 'comment') {
+		return item.data ? `<!--${item.data}-->` : '<!>';
+	}
+
+	let str = `<${item.name}`;
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		str += ` ${key}`;
+		if (value !== undefined) str += `="${escape_html(value, true)}"`;
+	}
+
+	if (is_void(item.name)) {
+		str += '/>'; // XHTML compliance
+	} else {
+		str += `>`;
+		str += item.children.map(stringify).join('');
+		str += `</${item.name}>`;
+	}
+
+	return str;
+}
+
+/** @param {Node} item */
+function objectify(item) {
+	if (item.type === 'text') {
+		return b.literal(item.nodes.map((node) => node.data).join(''));
+	}
+
+	if (item.type === 'comment') {
+		return item.data ? b.array([b.literal(`// ${item.data}`)]) : null;
+	}
+
+	const element = b.array([b.literal(item.name)]);
+
+	const attributes = b.object([]);
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		attributes.properties.push(
+			b.prop(
+				'init',
+				b.key(fix_attribute_casing(key)),
+				value === undefined ? b.void0 : b.literal(value)
+			)
+		);
+	}
+
+	if (attributes.properties.length > 0 || item.children.length > 0) {
+		element.elements.push(attributes.properties.length > 0 ? attributes : b.null);
+	}
+
+	if (item.children.length > 0) {
+		const children = item.children.map(objectify);
+		element.elements.push(...children);
+
+		// special case — strip leading newline from `<pre>` and `<textarea>`
+		if (item.name === 'pre' || item.name === 'textarea') {
+			const first = children[0];
+			if (first?.type === 'Literal') {
+				first.value = /** @type {string} */ (first.value).replace(regex_starts_with_newline, '');
+			}
+		}
+	}
+
+	return element;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts
new file mode 100644
index 0000000000..1555e10ef0
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts
@@ -0,0 +1,22 @@
+import type { AST } from '#compiler';
+
+export interface Element {
+	type: 'element';
+	name: string;
+	attributes: Record<string, string | undefined>;
+	children: Node[];
+	/** used for populating __svelte_meta */
+	start: number;
+}
+
+export interface Text {
+	type: 'text';
+	nodes: AST.Text[];
+}
+
+export interface Comment {
+	type: 'comment';
+	data: string | undefined;
+}
+
+export type Node = Element | Text | Comment;
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 763b6773c7..2388ee1b00 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
@@ -3,16 +3,15 @@ import type {
 	Statement,
 	LabeledStatement,
 	Identifier,
-	PrivateIdentifier,
 	Expression,
 	AssignmentExpression,
 	UpdateExpression,
 	VariableDeclaration
 } from 'estree';
-import type { AST, Namespace, StateField, ValidatedCompileOptions } from '#compiler';
+import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { SourceLocation } from '#shared';
+import type { Template } from './transform-template/template.js';
 
 export interface ClientTransformState extends TransformState {
 	/**
@@ -53,26 +52,10 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	/** Expressions used inside the render effect */
 	readonly expressions: Expression[];
 	/** The HTML template string */
-	readonly template: Array<string | Expression>;
-	readonly locations: SourceLocation[];
+	readonly template: Template;
 	readonly metadata: {
 		namespace: Namespace;
 		bound_contenteditable: boolean;
-		/**
-		 * Stuff that is set within the children of one `Fragment` visitor that is relevant
-		 * to said fragment. Shouldn't be destructured or otherwise spread unless inside the
-		 * `Fragment` visitor to keep the object reference intact (it's also nested
-		 * within `metadata` for this reason).
-		 */
-		context: {
-			/** `true` if the HTML template needs to be instantiated with `importNode` */
-			template_needs_import_node: boolean;
-			/**
-			 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
-			 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
-			 */
-			template_contains_script_tag: boolean;
-		};
 	};
 	readonly preserve_whitespace: boolean;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index 96a4addb72..30e370327f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -11,7 +11,7 @@ import { get_value } from './shared/declarations.js';
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
 	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
index 24011e62aa..21d1619f8a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
@@ -7,5 +7,5 @@
  */
 export function Comment(node, context) {
 	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
-	context.state.template.push(`<!--${node.data}-->`);
+	context.state.template.push_comment(node.data);
 }
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 e5aee24765..f80fa0e61e 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
@@ -32,7 +32,7 @@ export function EachBlock(node, context) {
 	);
 
 	if (!each_node_meta.is_controlled) {
-		context.state.template.push('<!>');
+		context.state.template.push_comment();
 	}
 
 	let flags = 0;
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 b6dca0779a..4825184d31 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,14 +1,13 @@
-/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
-/** @import { AST, Namespace } from '#compiler' */
-/** @import { SourceLocation } from '#shared' */
+/** @import { Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
-import { dev } from '../../../../state.js';
 import * as b from '#compiler/builders';
-import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
+import { transform_template } from '../transform-template/index.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement } from './shared/utils.js';
+import { Template } from '../transform-template/template.js';
 
 /**
  * @param {AST.Fragment} node
@@ -18,7 +17,7 @@ export function Fragment(node, context) {
 	// Creates a new block which looks roughly like this:
 	// ```js
 	// // hoisted:
-	// const block_name = $.template(`...`);
+	// const block_name = $.from_html(`...`);
 	//
 	// // for the main block:
 	// const id = block_name();
@@ -67,14 +66,9 @@ export function Fragment(node, context) {
 		update: [],
 		expressions: [],
 		after_update: [],
-		template: [],
-		locations: [],
+		template: new Template(),
 		transform: { ...context.state.transform },
 		metadata: {
-			context: {
-				template_needs_import_node: false,
-				template_contains_script_tag: false
-			},
 			namespace,
 			bound_contenteditable: context.state.metadata.bound_contenteditable
 		}
@@ -89,24 +83,6 @@ export function Fragment(node, context) {
 		body.push(b.stmt(b.call('$.next')));
 	}
 
-	/**
-	 * @param {Identifier} template_name
-	 * @param {Expression[]} args
-	 */
-	const add_template = (template_name, args) => {
-		let call = b.call(get_template_function(namespace, state), ...args);
-		if (dev) {
-			call = b.call(
-				'$.add_locations',
-				call,
-				b.member(b.id(context.state.analysis.name), '$.FILENAME', true),
-				build_locations(state.locations)
-			);
-		}
-
-		context.state.hoisted.push(b.var(template_name, call));
-	};
-
 	if (is_single_element) {
 		const element = /** @type {AST.RegularElement} */ (trimmed[0]);
 
@@ -117,14 +93,10 @@ export function Fragment(node, context) {
 			node: id
 		});
 
-		/** @type {Expression[]} */
-		const args = [join_template(state.template)];
+		let flags = state.template.needs_import_node ? TEMPLATE_USE_IMPORT_NODE : undefined;
 
-		if (state.metadata.context.template_needs_import_node) {
-			args.push(b.literal(TEMPLATE_USE_IMPORT_NODE));
-		}
-
-		add_template(template_name, args);
+		const template = transform_template(state, namespace, flags);
+		state.hoisted.push(b.var(template_name, template));
 
 		body.push(b.var(id, b.call(template_name)));
 		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
@@ -164,15 +136,16 @@ export function Fragment(node, context) {
 
 				let flags = TEMPLATE_FRAGMENT;
 
-				if (state.metadata.context.template_needs_import_node) {
+				if (state.template.needs_import_node) {
 					flags |= TEMPLATE_USE_IMPORT_NODE;
 				}
 
-				if (state.template.length === 1 && state.template[0] === '<!>') {
+				if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
 					// special case — we can use `$.comment` instead of creating a unique template
 					body.push(b.var(id, b.call('$.comment')));
 				} else {
-					add_template(template_name, [join_template(state.template), b.literal(flags)]);
+					const template = transform_template(state, namespace, flags);
+					state.hoisted.push(b.var(template_name, template));
 
 					body.push(b.var(id, b.call(template_name)));
 				}
@@ -199,86 +172,3 @@ export function Fragment(node, context) {
 
 	return b.block(body);
 }
-
-/**
- * @param {Array<string | Expression>} items
- */
-function join_template(items) {
-	let quasi = b.quasi('');
-	const template = b.template([quasi], []);
-
-	/**
-	 * @param {Expression} expression
-	 */
-	function push(expression) {
-		if (expression.type === 'TemplateLiteral') {
-			for (let i = 0; i < expression.expressions.length; i += 1) {
-				const q = expression.quasis[i];
-				const e = expression.expressions[i];
-
-				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
-				push(e);
-			}
-
-			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
-			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
-		} else if (expression.type === 'Literal') {
-			/** @type {string} */ (quasi.value.cooked) += expression.value;
-		} else {
-			template.expressions.push(expression);
-			template.quasis.push((quasi = b.quasi('')));
-		}
-	}
-
-	for (const item of items) {
-		if (typeof item === 'string') {
-			quasi.value.cooked += item;
-		} else {
-			push(item);
-		}
-	}
-
-	for (const quasi of template.quasis) {
-		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
-	}
-
-	quasi.tail = true;
-
-	return template;
-}
-
-/**
- *
- * @param {Namespace} namespace
- * @param {ComponentClientTransformState} state
- * @returns
- */
-function get_template_function(namespace, state) {
-	const contains_script_tag = state.metadata.context.template_contains_script_tag;
-	return namespace === 'svg'
-		? contains_script_tag
-			? '$.svg_template_with_script'
-			: '$.ns_template'
-		: namespace === 'mathml'
-			? '$.mathml_template'
-			: contains_script_tag
-				? '$.template_with_script'
-				: '$.template';
-}
-
-/**
- * @param {SourceLocation[]} locations
- */
-function build_locations(locations) {
-	return b.array(
-		locations.map((loc) => {
-			const expression = b.array([b.literal(loc[0]), b.literal(loc[1])]);
-
-			if (loc.length === 3) {
-				expression.elements.push(build_locations(loc[2]));
-			}
-
-			return expression;
-		})
-	);
-}
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 a69b9cfe70..405b400b42 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
@@ -9,7 +9,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function HtmlTag(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	const expression = /** @type {Expression} */ (context.visit(node.expression));
 
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 c650a1e15c..3702a47bc9 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
@@ -8,7 +8,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 	const statements = [];
 
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
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 7d6a8b0006..5e63f7e872 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
@@ -8,7 +8,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	const key = /** @type {Expression} */ (context.visit(node.expression));
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
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 1d39289f3d..c1806b5128 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
@@ -1,17 +1,14 @@
 /** @import { ArrayExpression, Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression } from 'estree' */
 /** @import { AST } from '#compiler' */
-/** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import {
 	cannot_be_set_statically,
 	is_boolean_attribute,
 	is_dom_property,
-	is_load_error_element,
-	is_void
+	is_load_error_element
 } from '../../../../../utils.js';
-import { escape_html } from '../../../../../escaping.js';
-import { dev, is_ignored, locator } from '../../../../state.js';
+import { is_ignored } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { is_custom_element_node } from '../../../nodes.js';
@@ -39,40 +36,24 @@ import { visit_event_attribute } from './shared/events.js';
  * @param {ComponentContext} context
  */
 export function RegularElement(node, context) {
-	/** @type {SourceLocation} */
-	let location = [-1, -1];
-
-	if (dev) {
-		const loc = locator(node.start);
-		if (loc) {
-			location[0] = loc.line;
-			location[1] = loc.column;
-			context.state.locations.push(location);
-		}
-	}
+	context.state.template.push_element(node.name, node.start);
 
 	if (node.name === 'noscript') {
-		context.state.template.push('<noscript></noscript>');
+		context.state.template.pop_element();
 		return;
 	}
 
 	const is_custom_element = is_custom_element_node(node);
 
-	if (node.name === 'video' || is_custom_element) {
-		// cloneNode is faster, but it does not instantiate the underlying class of the
-		// custom element until the template is connected to the dom, which would
-		// cause problems when setting properties on the custom element.
-		// Therefore we need to use importNode instead, which doesn't have this caveat.
-		// Additionally, Webkit browsers need importNode for video elements for autoplay
-		// to work correctly.
-		context.state.metadata.context.template_needs_import_node = true;
-	}
-
-	if (node.name === 'script') {
-		context.state.metadata.context.template_contains_script_tag = true;
-	}
+	// cloneNode is faster, but it does not instantiate the underlying class of the
+	// custom element until the template is connected to the dom, which would
+	// cause problems when setting properties on the custom element.
+	// Therefore we need to use importNode instead, which doesn't have this caveat.
+	// Additionally, Webkit browsers need importNode for video elements for autoplay
+	// to work correctly.
+	context.state.template.needs_import_node ||= node.name === 'video' || is_custom_element;
 
-	context.state.template.push(`<${node.name}`);
+	context.state.template.contains_script_tag ||= node.name === 'script';
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
@@ -110,7 +91,7 @@ export function RegularElement(node, context) {
 					const { value } = build_attribute_value(attribute.value, context);
 
 					if (value.type === 'Literal' && typeof value.value === 'string') {
-						context.state.template.push(` is="${escape_html(value.value, true)}"`);
+						context.state.template.set_prop('is', value.value);
 						continue;
 					}
 				}
@@ -290,12 +271,9 @@ export function RegularElement(node, context) {
 				}
 
 				if (name !== 'class' || value) {
-					context.state.template.push(
-						` ${attribute.name}${
-							is_boolean_attribute(name) && value === true
-								? ''
-								: `="${value === true ? '' : escape_html(value, true)}"`
-						}`
+					context.state.template.set_prop(
+						attribute.name,
+						is_boolean_attribute(name) && value === true ? undefined : value === true ? '' : value
 					);
 				}
 			} else if (name === 'autofocus') {
@@ -329,8 +307,6 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
 	}
 
-	context.state.template.push('>');
-
 	const metadata = {
 		...context.state.metadata,
 		namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
@@ -352,7 +328,6 @@ export function RegularElement(node, context) {
 	const state = {
 		...context.state,
 		metadata,
-		locations: [],
 		scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
 		preserve_whitespace:
 			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
@@ -446,14 +421,7 @@ export function RegularElement(node, context) {
 		context.state.update.push(b.stmt(b.assignment('=', dir, dir)));
 	}
 
-	if (state.locations.length > 0) {
-		// @ts-expect-error
-		location.push(state.locations);
-	}
-
-	if (!is_void(node.name)) {
-		context.state.template.push(`</${node.name}>`);
-	}
+	context.state.template.pop_element();
 }
 
 /**
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 6067c2562a..fec7b5762a 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
@@ -9,7 +9,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	const expression = unwrap_optional(node.expression);
 
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 ba9fcc7377..401cfde428 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
@@ -11,7 +11,7 @@ import { memoize_expression } from './shared/utils.js';
  */
 export function SlotElement(node, context) {
 	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	/** @type {Property[]} */
 	const props = [];
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 b279b5badd..ec1c650814 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
@@ -88,7 +88,7 @@ export function SvelteBoundary(node, context) {
 		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
 	);
 
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 	context.state.init.push(
 		external_statements.length > 0 ? b.block([...external_statements, boundary]) : boundary
 	);
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 ee597dd043..7e97035e00 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
@@ -13,7 +13,7 @@ import { build_render_statement } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function SvelteElement(node, context) {
-	context.state.template.push(`<!>`);
+	context.state.template.push_comment();
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
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 99ed294d26..57402c2b4a 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
@@ -1,7 +1,7 @@
 /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { dev, is_ignored, locator } from '../../../../../state.js';
+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 } from '../shared/utils.js';
@@ -440,18 +440,17 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
-		if (dev) {
-			const loc = locator(node.start);
-			if (loc) {
-				context.state.locations.push([loc.line, loc.column]);
-			}
+		if (context.state.metadata.namespace === 'svg') {
+			// this boils down to <g><!></g>
+			context.state.template.push_element('g', node.start);
+		} else {
+			// this boils down to <svelte-css-wrapper style='display: contents'><!></svelte-css-wrapper>
+			context.state.template.push_element('svelte-css-wrapper', node.start);
+			context.state.template.set_prop('style', 'display: contents');
 		}
 
-		context.state.template.push(
-			context.state.metadata.namespace === 'svg'
-				? '<g><!></g>'
-				: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
-		);
+		context.state.template.push_comment();
+		context.state.template.pop_element();
 
 		statements.push(
 			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
@@ -459,7 +458,7 @@ export function build_component(node, component_name, context, anchor = context.
 			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
-		context.state.template.push('<!>');
+		context.state.template.push_comment();
 		statements.push(b.stmt(fn(anchor)));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index c91e2b3b44..7af2c2d4aa 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -64,11 +64,11 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	function flush_sequence(sequence) {
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			state.template.push(sequence.map((node) => node.raw).join(''));
+			state.template.push_text(sequence);
 			return;
 		}
 
-		state.template.push(' ');
+		state.template.push_text([{ type: 'Text', data: ' ', raw: ' ', start: -1, end: -1 }]);
 
 		const { has_state, value } = build_template_chunk(sequence, visit, state);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 5901cb4c50..2928ca9173 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -24,9 +24,11 @@ export function RegularElement(node, context) {
 			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
 	};
 
+	const node_is_void = is_void(node.name);
+
 	context.state.template.push(b.literal(`<${node.name}`));
 	const body = build_element_attributes(node, { ...context, state });
-	context.state.template.push(b.literal('>'));
+	context.state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
 
 	if ((node.name === 'script' || node.name === 'style') && node.fragment.nodes.length === 1) {
 		context.state.template.push(
@@ -94,7 +96,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (!is_void(node.name)) {
+	if (!node_is_void) {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 5803c04947..1445ce3aa6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -324,7 +324,7 @@ export function clean_nodes(
 }
 
 /**
- * Infers the namespace for the children of a node that should be used when creating the `$.template(...)`.
+ * Infers the namespace for the children of a node that should be used when creating the fragment
  * @param {Namespace} namespace
  * @param {AST.SvelteNode} parent
  * @param {AST.SvelteNode[]} nodes
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index ef52552a2e..a53a431cf1 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -122,6 +122,15 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * @default false
 	 */
 	preserveWhitespace?: boolean;
+	/**
+	 * Which strategy to use when cloning DOM fragments:
+	 *
+	 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+	 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+	 *
+	 * @default 'html'
+	 */
+	fragments?: 'html' | 'tree';
 	/**
 	 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 	 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index ab932ed5bc..85305d7ce9 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -110,6 +110,8 @@ export const validate_component_options =
 
 			preserveComments: boolean(false),
 
+			fragments: list(['html', 'tree']),
+
 			preserveWhitespace: boolean(false),
 
 			runes: boolean(undefined),
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 2ecd4afee2..4e1785723c 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -17,6 +17,8 @@ export const TRANSITION_GLOBAL = 1 << 2;
 
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
+export const TEMPLATE_USE_SVG = 1 << 2;
+export const TEMPLATE_USE_MATHML = 1 << 3;
 
 export const HYDRATION_START = '[';
 /** used to indicate that an `{:else}...` block was rendered */
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index bf75e6e5cc..62ac09d784 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -1,4 +1,4 @@
-/** @import { SourceLocation } from '#shared' */
+/** @import { SourceLocation } from '#client' */
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
 import { hydrating } from '../dom/hydration.js';
 
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index aae44d4b39..97062f04e3 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -204,3 +204,44 @@ export function sibling(node, count = 1, is_text = false) {
 export function clear_text_content(node) {
 	node.textContent = '';
 }
+
+/**
+ *
+ * @param {string} tag
+ * @param {string} [namespace]
+ * @param {string} [is]
+ * @returns
+ */
+export function create_element(tag, namespace, is) {
+	let options = is ? { is } : undefined;
+	if (namespace) {
+		return document.createElementNS(namespace, tag, options);
+	}
+	return document.createElement(tag, options);
+}
+
+export function create_fragment() {
+	return document.createDocumentFragment();
+}
+
+/**
+ * @param {string} data
+ * @returns
+ */
+export function create_comment(data = '') {
+	return document.createComment(data);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} key
+ * @param {string} value
+ * @returns
+ */
+export function set_attribute(element, key, value = '') {
+	if (key.startsWith('xlink:')) {
+		element.setAttributeNS('http://www.w3.org/1999/xlink', key, value);
+		return;
+	}
+	return element.setAttribute(key, value);
+}
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
index 9897e08d53..8d3b5c0495 100644
--- a/packages/svelte/src/internal/client/dom/reconciler.js
+++ b/packages/svelte/src/internal/client/dom/reconciler.js
@@ -1,6 +1,6 @@
 /** @param {string} html */
 export function create_fragment_from_html(html) {
 	var elem = document.createElement('template');
-	elem.innerHTML = html;
+	elem.innerHTML = html.replaceAll('<!>', '<!---->'); // XHTML compliance
 	return elem.content;
 }
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index de2df62c92..0b77ab1396 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,9 +1,25 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { TemplateStructure } from './types' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { create_text, get_first_child, is_firefox } from './operations.js';
+import {
+	create_text,
+	get_first_child,
+	is_firefox,
+	create_element,
+	create_fragment,
+	create_comment,
+	set_attribute
+} from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
-import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
+import {
+	NAMESPACE_MATHML,
+	NAMESPACE_SVG,
+	TEMPLATE_FRAGMENT,
+	TEMPLATE_USE_IMPORT_NODE,
+	TEMPLATE_USE_MATHML,
+	TEMPLATE_USE_SVG
+} from '../../../constants.js';
 
 /**
  * @param {TemplateNode} start
@@ -23,7 +39,7 @@ export function assign_nodes(start, end) {
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function template(content, flags) {
+export function from_html(content, flags) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
 	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
 
@@ -64,17 +80,6 @@ export function template(content, flags) {
 	};
 }
 
-/**
- * @param {string} content
- * @param {number} flags
- * @returns {() => Node | Node[]}
- */
-/*#__NO_SIDE_EFFECTS__*/
-export function template_with_script(content, flags) {
-	var fn = template(content, flags);
-	return () => run_scripts(/** @type {Element | DocumentFragment} */ (fn()));
-}
-
 /**
  * @param {string} content
  * @param {number} flags
@@ -82,7 +87,7 @@ export function template_with_script(content, flags) {
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function ns_template(content, flags, ns = 'svg') {
+function from_namespace(content, flags, ns = 'svg') {
 	/**
 	 * Whether or not the first item is a text/element node. If not, we need to
 	 * create an additional comment node to act as `effect.nodes.start`
@@ -133,22 +138,120 @@ export function ns_template(content, flags, ns = 'svg') {
 /**
  * @param {string} content
  * @param {number} flags
- * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function svg_template_with_script(content, flags) {
-	var fn = ns_template(content, flags);
-	return () => run_scripts(/** @type {Element | DocumentFragment} */ (fn()));
+export function from_svg(content, flags) {
+	return from_namespace(content, flags, 'svg');
 }
 
 /**
  * @param {string} content
  * @param {number} flags
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function from_mathml(content, flags) {
+	return from_namespace(content, flags, 'math');
+}
+
+/**
+ * @param {TemplateStructure[]} structure
+ * @param {NAMESPACE_SVG | NAMESPACE_MATHML | undefined} [ns]
+ */
+function fragment_from_tree(structure, ns) {
+	var fragment = create_fragment();
+
+	for (var item of structure) {
+		if (typeof item === 'string') {
+			fragment.append(create_text(item));
+			continue;
+		}
+
+		// if `preserveComments === true`, comments are represented as `['// <data>']`
+		if (item === undefined || item[0][0] === '/') {
+			fragment.append(create_comment(item ? item[0].slice(3) : ''));
+			continue;
+		}
+
+		const [name, attributes, ...children] = item;
+
+		const namespace = name === 'svg' ? NAMESPACE_SVG : name === 'math' ? NAMESPACE_MATHML : ns;
+
+		var element = create_element(name, namespace, attributes?.is);
+
+		for (var key in attributes) {
+			set_attribute(element, key, attributes[key]);
+		}
+
+		if (children.length > 0) {
+			var target =
+				element.tagName === 'TEMPLATE'
+					? /** @type {HTMLTemplateElement} */ (element).content
+					: element;
+
+			target.append(
+				fragment_from_tree(children, element.tagName === 'foreignObject' ? undefined : namespace)
+			);
+		}
+
+		fragment.append(element);
+	}
+
+	return fragment;
+}
+
+/**
+ * @param {TemplateStructure[]} structure
+ * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function mathml_template(content, flags) {
-	return ns_template(content, flags, 'math');
+export function from_tree(structure, flags) {
+	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
+	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
+
+	/** @type {Node} */
+	var node;
+
+	return () => {
+		if (hydrating) {
+			assign_nodes(hydrate_node, null);
+			return hydrate_node;
+		}
+
+		if (node === undefined) {
+			const ns =
+				(flags & TEMPLATE_USE_SVG) !== 0
+					? NAMESPACE_SVG
+					: (flags & TEMPLATE_USE_MATHML) !== 0
+						? NAMESPACE_MATHML
+						: undefined;
+
+			node = fragment_from_tree(structure, ns);
+			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
+		}
+
+		var clone = /** @type {TemplateNode} */ (
+			use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true)
+		);
+
+		if (is_fragment) {
+			var start = /** @type {TemplateNode} */ (get_first_child(clone));
+			var end = /** @type {TemplateNode} */ (clone.lastChild);
+
+			assign_nodes(start, end);
+		} else {
+			assign_nodes(clone, clone);
+		}
+
+		return clone;
+	};
+}
+
+/**
+ * @param {() => Element | DocumentFragment} fn
+ */
+export function with_script(fn) {
+	return () => run_scripts(fn());
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/types.d.ts b/packages/svelte/src/internal/client/dom/types.d.ts
new file mode 100644
index 0000000000..bc3525919b
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/types.d.ts
@@ -0,0 +1,4 @@
+export type TemplateStructure =
+	| string
+	| undefined
+	| [string, Record<string, string> | undefined, ...TemplateStructure[]];
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index b5f746b276..226d79a65f 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -88,13 +88,13 @@ export {
 export {
 	append,
 	comment,
-	ns_template,
-	svg_template_with_script,
-	mathml_template,
-	template,
-	template_with_script,
+	from_html,
+	from_mathml,
+	from_svg,
+	from_tree,
 	text,
-	props_id
+	props_id,
+	with_script
 } from './dom/template.js';
 export { user_derived as derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index b46bdf2013..9703c2aac1 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -183,4 +183,8 @@ export type ProxyStateObject<T = Record<string | symbol, any>> = T & {
 	[STATE_SYMBOL]: T;
 };
 
+export type SourceLocation =
+	| [line: number, column: number]
+	| [line: number, column: number, SourceLocation[]];
+
 export * from './reactivity/types';
diff --git a/packages/svelte/src/internal/shared/types.d.ts b/packages/svelte/src/internal/shared/types.d.ts
index a97a61af67..4deeb76b2f 100644
--- a/packages/svelte/src/internal/shared/types.d.ts
+++ b/packages/svelte/src/internal/shared/types.d.ts
@@ -3,10 +3,6 @@ export type Store<V> = {
 	set(value: V): void;
 };
 
-export type SourceLocation =
-	| [line: number, column: number]
-	| [line: number, column: number, SourceLocation[]];
-
 export type Getters<T> = {
 	[K in keyof T]: () => T[K];
 };
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index f853d5873c..e62b662372 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -190,3 +190,5 @@ if (typeof window !== 'undefined') {
 		};
 	});
 }
+
+export const fragments = /** @type {'html' | 'tree'} */ (process.env.FRAGMENTS) ?? 'html';
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index 266ac07bff..70d5c5d072 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -4,6 +4,7 @@ import * as fs from 'node:fs';
 import { assert } from 'vitest';
 import { compile_directory } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
+import { fragments } from '../helpers.js';
 import { assert_ok, suite, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
 import { render } from 'svelte/server';
@@ -43,7 +44,12 @@ function read(path: string): string | void {
 
 const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	if (!config.load_compiled) {
-		await compile_directory(cwd, 'client', { accessors: true, ...config.compileOptions });
+		await compile_directory(cwd, 'client', {
+			accessors: true,
+			fragments,
+			...config.compileOptions
+		});
+
 		await compile_directory(cwd, 'server', config.compileOptions);
 	}
 
@@ -125,7 +131,8 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		flushSync();
 
-		const normalize = (string: string) => string.trim().replace(/\r\n/g, '\n');
+		const normalize = (string: string) =>
+			string.trim().replaceAll('\r\n', '\n').replaceAll('/>', '>');
 
 		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
 		assert.equal(normalize(target.innerHTML), normalize(expected));
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
index 582a10edf7..63e601b115 100644
--- a/packages/svelte/tests/runtime-browser/test.ts
+++ b/packages/svelte/tests/runtime-browser/test.ts
@@ -5,7 +5,7 @@ import * as path from 'node:path';
 import { compile } from 'svelte/compiler';
 import { afterAll, assert, beforeAll, describe } from 'vitest';
 import { suite, suite_with_variants } from '../suite';
-import { write } from '../helpers';
+import { write, fragments } from '../helpers';
 import type { Warning } from '#compiler';
 
 const assert_file = path.resolve(__dirname, 'assert.js');
@@ -87,6 +87,7 @@ async function run_test(
 					build.onLoad({ filter: /\.svelte$/ }, (args) => {
 						const compiled = compile(fs.readFileSync(args.path, 'utf-8').replace(/\r/g, ''), {
 							generate: 'client',
+							fragments,
 							...config.compileOptions,
 							immutable: config.immutable,
 							customElement: test_dir.includes('custom-elements-samples'),
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 14b6cff841..690a7e3d98 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -6,7 +6,7 @@ import { proxy } from 'svelte/internal/client';
 import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
-import { compile_directory } from '../helpers.js';
+import { compile_directory, fragments } from '../helpers.js';
 import { setup_html_equal } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
@@ -158,6 +158,7 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		rootDir: cwd,
 		dev: force_hmr ? true : undefined,
 		hmr: force_hmr ? true : undefined,
+		fragments,
 		...config.compileOptions,
 		immutable: config.immutable,
 		accessors: 'accessors' in config ? config.accessors : true,
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
index 4c98245e5b..82774f160d 100644
--- a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
@@ -1,18 +1,20 @@
 <script module>
-    customElements.define('value-element', class extends HTMLElement {
+	if(!customElements.get('value-element')) {
+		customElements.define('value-element', class extends HTMLElement {
 
-        constructor() {
-            super();
-            this.attachShadow({ mode: 'open' });
-        }
+			constructor() {
+				super();
+				this.attachShadow({ mode: 'open' });
+			}
 
-        set value(v) {
-            if (this.__value !== v) {
-                this.__value = v;
-                this.shadowRoot.innerHTML = `<span>${v}</span>`;
-            }
-        }
-    });
+			set value(v) {
+				if (this.__value !== v) {
+					this.__value = v;
+					this.shadowRoot.innerHTML = `<span>${v}</span>`;
+				}
+			}
+		});
+	}
 </script>
 
 <my-element string="test" object={{ test: true }}></my-element>
diff --git a/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
new file mode 100644
index 0000000000..5d36f2e969
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		fragments: 'tree'
+	},
+
+	html: `<p>hello</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte b/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte
new file mode 100644
index 0000000000..302a01f335
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte
@@ -0,0 +1 @@
+<p>hello</p>
diff --git a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
index 3e5a12ed9d..9bb45ebf78 100644
--- a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
@@ -5,7 +5,7 @@ function increment(_, counter) {
 	counter.count += 1;
 }
 
-var root = $.template(`<button> </button> <!> `, 1);
+var root = $.from_html(`<button> </button> <!> `, 1);
 
 export default function Await_block_scope($$anchor) {
 	let counter = $.proxy({ count: 0 });
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index 390e86a351..ba3f4b155a 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -10,7 +10,7 @@ const snippet = ($$anchor) => {
 	$.append($$anchor, text);
 };
 
-var root = $.template(`<!> `, 1);
+var root = $.from_html(`<!> `, 1);
 
 export default function Bind_component_snippet($$anchor) {
 	let value = $.state('');
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index 219db6ffd5..3a13fa7e15 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -1,7 +1,7 @@
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
+var root = $.from_html(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
 
 export default function Main($$anchor) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
index 3d46a679b8..804a7c26f1 100644
--- a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root_1 = $.template(`<p></p>`);
+var root_1 = $.from_html(`<p></p>`);
 
 export default function Each_index_non_null($$anchor) {
 	var fragment = $.comment();
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_config.js b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
new file mode 100644
index 0000000000..23231c969b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		fragments: 'tree'
+	}
+});
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..792d5421e1
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
@@ -0,0 +1,25 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_tree(
+	[
+		['h1', null, 'hello'],
+		' ',
+		[
+			'div',
+			{ class: 'potato' },
+			['p', null, 'child element'],
+			' ',
+			['p', null, 'another child element']
+		]
+	],
+	1
+);
+
+export default function Functional_templating($$anchor) {
+	var fragment = root();
+
+	$.next(2);
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..dc49c0c213
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
@@ -0,0 +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>`;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/index.svelte b/packages/svelte/tests/snapshot/samples/functional-templating/index.svelte
new file mode 100644
index 0000000000..c0fe8965b8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/index.svelte
@@ -0,0 +1,6 @@
+<h1>hello</h1>
+
+<div class="potato">
+	<p>child element</p>
+	<p>another child element</p>
+</div>
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
index 899c126001..68fdaa4570 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<h1>hello world</h1>`);
+var root = $.from_html(`<h1>hello world</h1>`);
 
 export default function Hello_world($$anchor) {
 	var h1 = root();
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 3c8322500b..1fac1338c5 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<h1>hello world</h1>`);
+var root = $.from_html(`<h1>hello world</h1>`);
 
 function Hmr($$anchor) {
 	var h1 = root();
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
index 21f6ed9680..b46acee82e 100644
--- a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
 var on_click = (_, count) => $.update(count);
-var root = $.template(`<h1></h1> <b></b> <button> </button> <h1></h1>`, 1);
+var root = $.from_html(`<h1></h1> <b></b> <button> </button> <h1></h1>`, 1);
 
 export default function Nullish_coallescence_omittance($$anchor) {
 	let name = 'world';
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index f661dbc01d..a351851875 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<p></p> <p></p> <!>`, 1);
+var root = $.from_html(`<p></p> <p></p> <!>`, 1);
 
 export default function Purity($$anchor) {
 	var fragment = root();
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 541b56a407..78147659ff 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <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></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`, 3);
+var root = $.from_html(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <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></custom-elements></cant-skip> <div><input/></div> <div><source/></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
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 e694c12647..a587c05e2c 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">a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`;
+	$$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">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/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
index a67210e541..c446b3d3ef 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
@@ -8,7 +8,7 @@ function reset(_, str, tpl) {
 	$.set(tpl, ``);
 }
 
-var root = $.template(`<input> <input> <button>reset</button>`, 1);
+var root = $.from_html(`<input/> <input/> <button>reset</button>`, 1);
 
 export default function State_proxy_literal($$anchor) {
 	let str = $.state('');
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 7b2a884d70..f814dd4f84 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 += `<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/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
index d520d1ef24..464435cb0a 100644
--- a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<p> </p>`);
+var root = $.from_html(`<p> </p>`);
 
 export default function Text_nodes_deriveds($$anchor) {
 	let count1 = 0;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index fcc1ec315c..201dbed9aa 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -985,6 +985,15 @@ declare module 'svelte/compiler' {
 		 * @default false
 		 */
 		preserveWhitespace?: boolean;
+		/**
+		 * Which strategy to use when cloning DOM fragments:
+		 *
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
+		 */
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -2872,6 +2881,15 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * @default false
 		 */
 		preserveWhitespace?: boolean;
+		/**
+		 * Which strategy to use when cloning DOM fragments:
+		 *
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
+		 */
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 3a62286b24..93d01a4b10 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -85,9 +85,25 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		}
 
 		write(output_js, compiled.js.code + '\n//# sourceMappingURL=' + path.basename(output_map));
-
 		write(output_map, compiled.js.map.toString());
 
+		// generate with fragments: 'tree'
+		if (generate === 'client') {
+			const compiled = compile(source, {
+				dev: true,
+				filename: input,
+				generate,
+				runes: argv.values.runes,
+				fragments: 'tree'
+			});
+
+			const output_js = `${cwd}/output/${generate}/${file}.tree.js`;
+			const output_map = `${cwd}/output/${generate}/${file}.tree.js.map`;
+
+			write(output_js, compiled.js.code + '\n//# sourceMappingURL=' + path.basename(output_map));
+			write(output_map, compiled.js.map.toString());
+		}
+
 		if (compiled.css) {
 			write(output_css, compiled.css.code);
 		}

From 9250c9cb365026e9fdafa125701a7518af8fc74b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 May 2025 11:26:01 -0400
Subject: [PATCH 072/259] Version Packages (#15987)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/forty-llamas-unite.md | 5 -----
 .changeset/smart-boats-accept.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/forty-llamas-unite.md
 delete mode 100644 .changeset/smart-boats-accept.md

diff --git a/.changeset/forty-llamas-unite.md b/.changeset/forty-llamas-unite.md
deleted file mode 100644
index 933cece1c6..0000000000
--- a/.changeset/forty-llamas-unite.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: XHTML compliance
diff --git a/.changeset/smart-boats-accept.md b/.changeset/smart-boats-accept.md
deleted file mode 100644
index 4cdfeb30d0..0000000000
--- a/.changeset/smart-boats-accept.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: add `fragments: 'html' | 'tree'` option for wider CSP compliance
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4c65954c9f..3f7876144f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.0
+
+### Minor Changes
+
+- feat: XHTML compliance ([#15538](https://github.com/sveltejs/svelte/pull/15538))
+
+- feat: add `fragments: 'html' | 'tree'` option for wider CSP compliance ([#15538](https://github.com/sveltejs/svelte/pull/15538))
+
 ## 5.32.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 168e7abe37..0a992d1901 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.32.2",
+  "version": "5.33.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c93d7e2e25..20c84d001e 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.32.2';
+export const VERSION = '5.33.0';
 export const PUBLIC_VERSION = '5';

From ac046df40a0721fef362b481d6f41134c498406a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 22 May 2025 23:07:18 +0200
Subject: [PATCH 073/259] fix: make deriveds on the server lazy again (#15964)

* fix: make deriveds on the server lazy again

Fixes a regression introduced in #15820: deriveds need to be lazily called on the server, too, since they can close over variables only later defined

Fixes #15960

* fix: handle basic assignment of deriveds on the server

* fix: use `build_assignment_value` for deriveds assignments

* use once

* allow writing to public deriveds on server

---------

Co-authored-by: paoloricciuti <ricciutipaolo@gmail.com>
---
 .changeset/khaki-carrots-destroy.md           |  5 ++++
 .../3-transform/server/transform-server.js    |  2 ++
 .../server/visitors/AssignmentExpression.js   |  5 ++++
 .../server/visitors/CallExpression.js         |  2 +-
 .../3-transform/server/visitors/ClassBody.js  |  7 +++--
 .../server/visitors/MemberExpression.js       | 23 +++++++++++++++
 .../server/visitors/PropertyDefinition.js     |  7 +++--
 packages/svelte/src/internal/server/index.js  | 21 ++++++++++++++
 .../class-state-derived-private/_config.js    |  3 ++
 .../class-state-derived-private/main.svelte   | 16 ++++++++--
 .../samples/writable-derived-3/_config.js     |  5 ++++
 .../samples/writable-derived-3/main.svelte    | 29 +++++++++++++++++++
 12 files changed, 116 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/khaki-carrots-destroy.md
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte

diff --git a/.changeset/khaki-carrots-destroy.md b/.changeset/khaki-carrots-destroy.md
new file mode 100644
index 0000000000..677a83643d
--- /dev/null
+++ b/.changeset/khaki-carrots-destroy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make deriveds on the server lazy again
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 3498b2636b..7a3d6bef6c 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
@@ -23,6 +23,7 @@ import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
+import { MemberExpression } from './visitors/MemberExpression.js';
 import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
@@ -48,6 +49,7 @@ const global_visitors = {
 	ExpressionStatement,
 	Identifier,
 	LabeledStatement,
+	MemberExpression,
 	PropertyDefinition,
 	UpdateExpression,
 	VariableDeclaration
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 280c16dbd2..466682fb82 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -44,6 +44,11 @@ function build_assignment(operator, left, right, context) {
 					/** @type {Expression} */ (context.visit(right))
 				);
 			}
+		} else if (field && (field.type === '$derived' || field.type === '$derived.by')) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+			return b.call(b.member(b.this, name), value);
 		}
 	}
 
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 e36dc820b3..35c79988b0 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
@@ -31,7 +31,7 @@ export function CallExpression(node, context) {
 
 	if (rune === '$derived' || rune === '$derived.by') {
 		const fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
-		return b.call('$.once', rune === '$derived' ? b.thunk(fn) : fn);
+		return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
 	}
 
 	if (rune === '$state.snapshot') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index 6797b0beff..432d0142cd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -36,7 +36,8 @@ export function ClassBody(node, context) {
 
 			body.push(
 				b.prop_def(field.key, null),
-				b.method('get', b.key(name), [], [b.return(b.call(member))])
+				b.method('get', b.key(name), [], [b.return(b.call(member))]),
+				b.method('set', b.key(name), [b.id('$$value')], [b.return(b.call(member, b.id('$$value')))])
 			);
 		}
 	}
@@ -61,6 +62,7 @@ export function ClassBody(node, context) {
 		if (name[0] === '#' || field.type === '$state' || field.type === '$state.raw') {
 			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
 		} else if (field.node === definition) {
+			// $derived / $derived.by
 			const member = b.member(b.this, field.key);
 
 			body.push(
@@ -69,7 +71,8 @@ export function ClassBody(node, context) {
 					/** @type {CallExpression} */ (context.visit(field.value, child_state))
 				),
 
-				b.method('get', definition.key, [], [b.return(b.call(member))])
+				b.method('get', definition.key, [], [b.return(b.call(member))]),
+				b.method('set', b.key(name), [b.id('$$value')], [b.return(b.call(member, b.id('$$value')))])
 			);
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
new file mode 100644
index 0000000000..50b5ae793f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
@@ -0,0 +1,23 @@
+/** @import { ClassBody, MemberExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '#compiler/builders';
+
+/**
+ * @param {MemberExpression} node
+ * @param {Context} context
+ */
+export function MemberExpression(node, context) {
+	if (
+		context.state.analysis.runes &&
+		node.object.type === 'ThisExpression' &&
+		node.property.type === 'PrivateIdentifier'
+	) {
+		const field = context.state.state_fields?.get(`#${node.property.name}`);
+
+		if (field?.type === '$derived' || field?.type === '$derived.by') {
+			return b.call(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index c9225bb8da..498f90703c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -11,7 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
+		if (rune === '$state' || rune === '$state.raw') {
 			return {
 				...node,
 				value:
@@ -21,13 +21,14 @@ export function PropertyDefinition(node, context) {
 			};
 		}
 
-		if (rune === '$derived.by') {
+		if (rune === '$derived.by' || rune === '$derived') {
+			const fn = /** @type {Expression} */ (context.visit(node.value.arguments[0]));
 			return {
 				...node,
 				value:
 					node.value.arguments.length === 0
 						? null
-						: b.call(/** @type {Expression} */ (context.visit(node.value.arguments[0])))
+						: b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn)
 			};
 		}
 	}
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index b58a1d4372..29e09fe4dd 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -514,3 +514,24 @@ export {
 } from '../shared/validate.js';
 
 export { escape_html as escape };
+
+/**
+ * @template T
+ * @param {()=>T} fn
+ * @returns {(new_value?: T) => (T | void)}
+ */
+export function derived(fn) {
+	const get_value = once(fn);
+	/**
+	 * @type {T | undefined}
+	 */
+	let updated_value;
+
+	return function (new_value) {
+		if (arguments.length === 0) {
+			return updated_value ?? get_value();
+		}
+		updated_value = new_value;
+		return updated_value;
+	};
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
index 141d994a2f..40ef84a2e6 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
@@ -5,6 +5,7 @@ export default test({
 	html: `
 		<button>0</button>
 		<p>doubled: 0</p>
+		<p>tripled: 0</p>
 	`,
 
 	test({ assert, target }) {
@@ -17,6 +18,7 @@ export default test({
 			`
 				<button>1</button>
 				<p>doubled: 2</p>
+				<p>tripled: 3</p>
 			`
 		);
 
@@ -27,6 +29,7 @@ export default test({
 			`
 				<button>2</button>
 				<p>doubled: 4</p>
+				<p>tripled: 6</p>
 			`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
index 2c4c8f1839..d971566396 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
@@ -2,14 +2,24 @@
 	class Counter {
 		count = $state(0);
 		#doubled = $derived(this.count * 2);
+		#tripled = $derived.by(() => this.count * this.by);
 
-		get embiggened() {
+		constructor(by) {
+			this.by = by;
+		}
+
+		get embiggened1() {
 			return this.#doubled;
 		}
+
+		get embiggened2() {
+			return this.#tripled;
+		}
 	}
 
-	const counter = new Counter();
+	const counter = new Counter(3);
 </script>
 
 <button on:click={() => counter.count++}>{counter.count}</button>
-<p>doubled: {counter.embiggened}</p>
+<p>doubled: {counter.embiggened1}</p>
+<p>tripled: {counter.embiggened2}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js
new file mode 100644
index 0000000000..999e4ad6e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `3 3 3 3`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte
new file mode 100644
index 0000000000..0b20f811c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	class X {
+    x = $state(1);
+    on_class = $derived(this.x * 2);
+    #on_class_private = $derived(this.x * 2);
+    #in_constructor_private
+
+    constructor() {
+      this.#in_constructor_private = $derived(this.x * 2);
+      this.in_constructor = $derived(this.x * 2);
+      this.#on_class_private = 3;
+      this.#in_constructor_private = 3;
+    }
+
+    get on_class_private() {
+      return this.#on_class_private;
+    }
+
+    get in_constructor_private() {
+      return this.#in_constructor_private;
+    }
+  }
+
+  const x = new X();
+  x.on_class = 3;
+  x.in_constructor = 3;
+</script>
+
+{x.on_class} {x.in_constructor} {x.on_class_private} {x.in_constructor_private}

From db7b25b678f2722040f2b18321b85830d1d21365 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 May 2025 17:12:54 -0400
Subject: [PATCH 074/259] Version Packages (#15989)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/khaki-carrots-destroy.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/khaki-carrots-destroy.md

diff --git a/.changeset/khaki-carrots-destroy.md b/.changeset/khaki-carrots-destroy.md
deleted file mode 100644
index 677a83643d..0000000000
--- a/.changeset/khaki-carrots-destroy.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: make deriveds on the server lazy again
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 3f7876144f..13eebb36fa 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.1
+
+### Patch Changes
+
+- fix: make deriveds on the server lazy again ([#15964](https://github.com/sveltejs/svelte/pull/15964))
+
 ## 5.33.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0a992d1901..1580f58533 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.33.0",
+  "version": "5.33.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 20c84d001e..336e5fcb41 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.33.0';
+export const VERSION = '5.33.1';
 export const PUBLIC_VERSION = '5';

From 8e16c777e023ad8d4df7c4a05bd86217e1b00c7c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 May 2025 21:32:40 -0400
Subject: [PATCH 075/259] docs: improve bind:group example (#15968)

---
 .../docs/03-template-syntax/12-bind.md        | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index 0970ee384e..a59a2d8321 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -142,26 +142,27 @@ Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs
 
 ## `<input bind:group>`
 
-Inputs that work together can use `bind:group`.
+Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):
 
 ```svelte
+<!--- file: BurritoChooser.svelte --->
 <script>
 	let tortilla = $state('Plain');
 
-	/** @type {Array<string>} */
+	/** @type {string[]} */
 	let fillings = $state([]);
 </script>
 
 <!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain" />
-<input type="radio" bind:group={tortilla} value="Whole wheat" />
-<input type="radio" bind:group={tortilla} value="Spinach" />
+<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>
 
 <!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice" />
-<input type="checkbox" bind:group={fillings} value="Beans" />
-<input type="checkbox" bind:group={fillings} value="Cheese" />
-<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
 ```
 
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.

From 08346b51f28697676b95835ca10f93642e1c00fc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 May 2025 21:33:47 -0400
Subject: [PATCH 076/259] docs: move some `$state` information around (#15969)

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

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index f7314e2950..e19e68f6a8 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -20,9 +20,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
-
-State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this...
 
 ```js
 let todos = $state([
@@ -67,7 +65,7 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
+Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
@@ -121,6 +119,8 @@ class Todo {
 }
 ```
 
+> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+
 ## `$state.raw`
 
 In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@@ -145,6 +145,8 @@ person = {
 
 This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
+As with `$state`, you can declare class fields using `$state.raw`.
+
 ## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

From 6928aaca06d8bcc37d17ce715ed04221d6eccc72 Mon Sep 17 00:00:00 2001
From: venus <jhabrcetl@gmail.com>
Date: Fri, 23 May 2025 13:58:42 +0200
Subject: [PATCH 077/259] feat: enable TS autocomplete for Svelte HTML element
 definitions (#15972)

Covers #15971.

adds autocomplete support to SvelteHTMLElements while preserving its functionality that key can be any string using string & {} TS trick.
---
 packages/svelte/elements.d.ts    | 2 +-
 packages/svelte/svelte-html.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 237e96c699..71f28b4f97 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -2066,7 +2066,7 @@ export interface SvelteHTMLElements {
 		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
 	};
 
-	[name: string]: { [name: string]: any };
+	[name: string & {}]: { [name: string]: any };
 }
 
 export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 5042eaa4b8..6e37cc93e8 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -8,7 +8,7 @@ import * as svelteElements from './elements.js';
 /**
  * @internal do not use
  */
-type HTMLProps<Property extends string, Override> = Omit<
+type HTMLProps<Property extends keyof svelteElements.SvelteHTMLElements, Override> = Omit<
 	import('./elements.js').SvelteHTMLElements[Property],
 	keyof Override
 > &
@@ -250,7 +250,7 @@ declare global {
 			};
 			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
 
-			[name: string]: { [name: string]: any };
+			[name: string & {}]: { [name: string]: any };
 		}
 	}
 }

From 4c21f66f2789d11a7e3907014bfdc01960948214 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 23 May 2025 10:04:31 -0400
Subject: [PATCH 078/259] chore: add `@since` tag to fragments option (#15990)

---
 packages/svelte/src/compiler/types/index.d.ts | 1 +
 packages/svelte/types/index.d.ts              | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index a53a431cf1..0da036242b 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -129,6 +129,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
 	 *
 	 * @default 'html'
+	 * @since 5.33
 	 */
 	fragments?: 'html' | 'tree';
 	/**
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 201dbed9aa..1a83e0d0f1 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -992,6 +992,7 @@ declare module 'svelte/compiler' {
 		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
 		 *
 		 * @default 'html'
+		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
 		/**
@@ -2888,6 +2889,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
 		 *
 		 * @default 'html'
+		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
 		/**

From 8860ca6c1db45fa0bb18a46b9b3bc067196ac256 Mon Sep 17 00:00:00 2001
From: Mithi Sevilla <mithi.sevilla@gmail.com>
Date: Sat, 24 May 2025 21:49:10 +0800
Subject: [PATCH 079/259] docs: Improve sample code in `When not to use
 $effect` section (#15994)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: Improve example code in - When not to use $effect - section

The main change treats spent as the source of truth and derives left from it—simplifying the code, reducing the risk of inconsistencies, and improving the clarity of their relationship.

I also changed let total = 100 to const total = 100 to more clearly convey that the value is intended to remain constant.

* use normal binding for spent

* change let to const in prior example

* use diff highlighting

* i accidentally a typo

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/02-runes/04-$effect.md | 24 +++++++++--------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index 46ea9b81e9..0e129973d5 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -269,11 +269,11 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 If you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.
 
-You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAAE5WRTWrDMBCFryKGLBJoY3fRjWIHeoiu6i6UZBwEY0VE49TB-O6VxrFTSih0qe_Ne_OjHpxpEDS8O7ZMeIAnqC1hAP3RA1990hKI_Fb55v06XJA4sZ0J-IjvT47RcYyBIuzP1vO2chVHHFjxiQ2pUr3k-SZRQlbBx_LIFoEN4zJfzQph_UMQr4hRXmBd456Xy5Uqt6pPKHmkfmzyPAZL2PCnbRpg8qWYu63I7lu4gswOSRYqrPNt3CgeqqzgbNwRK1A76w76YqjFspfcQTWmK3vJHlQm1puSTVSeqdOc_r9GaeCHfUSY26TXry6Br4RSK3C6yMEGT-aqVU3YbUZ2NF6rfP2KzXgbuYzY46czdgyazy0On_FlLH3F-UDXhgIO35UGlA1rAgAA)):
 
 ```svelte
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
 	let left = $state(total);
 
@@ -297,32 +297,26 @@ You might be tempted to do something convoluted with effects to link one value t
 </label>
 ```
 
-Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51SsW6DMBT8FcvqABINdOhCIFKXTt06lg4GHpElYyz8iECIf69tcIIipo6-u3f3fPZMJWuBpvRzkBXyTpKSy5rLq6YRbbgATdOfmeKkrMgCBt9GPpQ66RsItFjJNBzhVScRJBobmumq5wovhSxQABLskAmSk7ckOXtMKyM22ItGhhAk4Z0R0OwIN-tIQzd-90HVhvy2HsGNiQFCMltBgd7XoecV2xzXNV7XaEcth7ZfRv7kujnsTX2Qd7USb5rFjwZkJlgJwpWRcakG04cpOS9oz-QVCuoeInXW-RyEJL-sG0b7Wy6kZWM-u7CFxM5tdrIl9qg72vB74H-y7T2iXROHyVb0CLanp1yNk4D1A1jQ91hzrQSbUtIIGLcir0ylJDm9Q7urz42bX4UwIk2xH2D5Xf4A7SeMcMQCAAA=)):
+Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE5VRvW7CMBB-FcvqECQK6dDFJEgsnfoGTQdDLsjSxVjxhYKivHvPBwFUsXS8774_nwftbQva6I_e78gdvNo6Xzu_j3quG4cQtfkaNJ1DIiWA8atkE8IiHgEpYVsb4Rm-O3gCT2yji7jrXKB15StiOJKiA1lUpXrL81VCEUjFwHTGXiJZgiyf3TYIjSxq6NwR6uyifr0ohMbEZnpHH2rWf7ImS8KZGtK6osl_UqelRIyVL5b3ir5AuwWUtoXzoee6fIWy0p31e6i0XMocLfZQDuI6qtaeykGcR7UU6XWznFAZU9LN_X9B2UyVayk9f3ji0-REugen6U9upDOCcAWcLlS7GNCejWoQTqsLtrfBqHzxDu3DrUTOf0xwIm2o62H85sk6_OHG2jQWI4y_3byXXGMCAAA=)):
 
 ```svelte
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
-	let left = $state(total);
-
-	function updateSpent(value) {
-		spent = value;
-		left = total - spent;
-	}
+	let left = $derived(total - spent);
 
-	function updateLeft(value) {
-		left = value;
++++	function updateLeft(left) {
 		spent = total - left;
-	}
+	}+++
 </script>
 
 <label>
-	<input type="range" bind:value={() => spent, updateSpent} max={total} />
+	<input type="range" bind:value={spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={() => left, updateLeft} max={total} />
+	<input type="range" +++bind:value={() => left, updateLeft}+++ max={total} />
 	{left}/{total} left
 </label>
 ```

From 4875cd6e67f82bd8da2fbe0679586c0e0113df96 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Sun, 25 May 2025 00:18:08 +0300
Subject: [PATCH 080/259] fix: correctly parse escaped unicode characters in
 css selector (#15976)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/lazy-singers-pretend.md            |  5 ++
 .../src/compiler/phases/1-parse/read/style.js | 20 ++---
 .../css/samples/unicode-identifier/_config.js | 76 +++++++++++++++++++
 .../samples/unicode-identifier/expected.css   | 21 +++++
 .../samples/unicode-identifier/expected.html  |  7 ++
 .../samples/unicode-identifier/input.svelte   | 31 ++++++++
 6 files changed, 151 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/lazy-singers-pretend.md
 create mode 100644 packages/svelte/tests/css/samples/unicode-identifier/_config.js
 create mode 100644 packages/svelte/tests/css/samples/unicode-identifier/expected.css
 create mode 100644 packages/svelte/tests/css/samples/unicode-identifier/expected.html
 create mode 100644 packages/svelte/tests/css/samples/unicode-identifier/input.svelte

diff --git a/.changeset/lazy-singers-pretend.md b/.changeset/lazy-singers-pretend.md
new file mode 100644
index 0000000000..f0aae80048
--- /dev/null
+++ b/.changeset/lazy-singers-pretend.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly parse escaped unicode characters in css selector
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js
index e15a47e6d5..80ab234d92 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/style.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js
@@ -12,6 +12,7 @@ const REGEX_NTH_OF =
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;
+const REGEX_UNICODE_SEQUENCE = /^\\[0-9a-fA-F]{1,6}(\r\n|\s)?/;
 const REGEX_COMMENT_CLOSE = /\*\//;
 const REGEX_HTML_COMMENT_CLOSE = /-->/;
 
@@ -580,25 +581,26 @@ function read_identifier(parser) {
 		e.css_expected_identifier(start);
 	}
 
-	let escaped = false;
-
 	while (parser.index < parser.template.length) {
 		const char = parser.template[parser.index];
-		if (escaped) {
-			identifier += '\\' + char;
-			escaped = false;
-		} else if (char === '\\') {
-			escaped = true;
+		if (char === '\\') {
+			const sequence = parser.match_regex(REGEX_UNICODE_SEQUENCE);
+			if (sequence) {
+				identifier += String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				parser.index += sequence.length;
+			} else {
+				identifier += '\\' + parser.template[parser.index + 1];
+				parser.index += 2;
+			}
 		} else if (
 			/** @type {number} */ (char.codePointAt(0)) >= 160 ||
 			REGEX_VALID_IDENTIFIER_CHAR.test(char)
 		) {
 			identifier += char;
+			parser.index++;
 		} else {
 			break;
 		}
-
-		parser.index++;
 	}
 
 	if (identifier === '') {
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/_config.js b/packages/svelte/tests/css/samples/unicode-identifier/_config.js
new file mode 100644
index 0000000000..da4ea75e36
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/_config.js
@@ -0,0 +1,76 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61  sdf"',
+			start: {
+				line: 22,
+				column: 1,
+				character: 465
+			},
+			end: {
+				line: 22,
+				column: 10,
+				character: 474
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61\n\tsdf"',
+			start: {
+				line: 23,
+				column: 1,
+				character: 492
+			},
+			end: {
+				line: 24,
+				column: 4,
+				character: 501
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61\n sdf"',
+			start: {
+				line: 25,
+				column: 1,
+				character: 519
+			},
+			end: {
+				line: 26,
+				column: 4,
+				character: 528
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "#\\31span"',
+			start: {
+				line: 28,
+				column: 1,
+				character: 547
+			},
+			end: {
+				line: 28,
+				column: 9,
+				character: 555
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "#\\31 span"',
+			start: {
+				line: 29,
+				column: 1,
+				character: 573
+			},
+			end: {
+				line: 29,
+				column: 10,
+				character: 582
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/expected.css b/packages/svelte/tests/css/samples/unicode-identifier/expected.css
new file mode 100644
index 0000000000..fb8b936dee
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/expected.css
@@ -0,0 +1,21 @@
+	#\31\32\33 .svelte-xyz{ color: green; }
+	#\31 23.svelte-xyz { color: green; }
+	#line\a break.svelte-xyz { color: green; }
+	#line\a
+break.svelte-xyz { color: green; }
+	#line\00000abreak.svelte-xyz { color: green; }
+	#line\00000a break.svelte-xyz { color: green; }
+	#line\00000a	break.svelte-xyz { color: green; }
+	.a\1f642 b.svelte-xyz { color: green; }
+
+	.\61sdf.svelte-xyz { color: green; }
+
+	/* (unused) .\61  sdf { color: red; }*/
+	/* (unused) .\61
+	sdf { color: red; }*/
+	/* (unused) .\61
+ sdf { color: red; }*/
+
+	/* (unused) #\31span { color: red; }*/
+	/* (unused) #\31 span { color: red; }*/
+	#\31 .svelte-xyz span:where(.svelte-xyz) { color: green; }
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/expected.html b/packages/svelte/tests/css/samples/unicode-identifier/expected.html
new file mode 100644
index 0000000000..9b5f8ede47
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/expected.html
@@ -0,0 +1,7 @@
+<div id="123" class="svelte-xyz"></div>
+<div class="svelte-xyz" id="line
+break"></div>
+<div class="a🙂b svelte-xyz"></div>
+<div class="asdf svelte-xyz"></div>
+<div class="&#97;sdf svelte-xyz"></div>
+<div id="1" class="svelte-xyz"><span class="svelte-xyz"></span></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/input.svelte b/packages/svelte/tests/css/samples/unicode-identifier/input.svelte
new file mode 100644
index 0000000000..04676c4c4d
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/input.svelte
@@ -0,0 +1,31 @@
+<div id="123"></div>
+<div id="line
+break"></div>
+<div class="a🙂b"></div>
+<div class="asdf"></div>
+<div class="&#97;sdf"></div>
+<div id="1"><span></span></div>
+
+<style>
+	#\31\32\33 { color: green; }
+	#\31 23 { color: green; }
+	#line\a break { color: green; }
+	#line\a
+break { color: green; }
+	#line\00000abreak { color: green; }
+	#line\00000a break { color: green; }
+	#line\00000a	break { color: green; }
+	.a\1f642 b { color: green; }
+
+	.\61sdf { color: green; }
+
+	.\61  sdf { color: red; }
+	.\61
+	sdf { color: red; }
+	.\61
+ sdf { color: red; }
+
+	#\31span { color: red; }
+	#\31 span { color: red; }
+	#\31  span { color: green; }
+</style>
\ No newline at end of file

From a38ea026c79a3fc439db038d99887db00c4d68de Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 25 May 2025 08:29:24 -0400
Subject: [PATCH 081/259] fix: don't mark deriveds as clean if updating during
 teardown (#15997)

---
 .changeset/old-insects-divide.md              |  5 +++++
 .../internal/client/reactivity/deriveds.js    | 16 +++++++++-----
 .../effect-teardown-stale-value/_config.js    | 22 +++++++++++++++++++
 .../effect-teardown-stale-value/main.svelte   | 14 ++++++++++++
 4 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/old-insects-divide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte

diff --git a/.changeset/old-insects-divide.md b/.changeset/old-insects-divide.md
new file mode 100644
index 0000000000..75707eb428
--- /dev/null
+++ b/.changeset/old-insects-divide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't mark deriveds as clean if updating during teardown
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 21780be862..e9cea0df3e 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -9,7 +9,8 @@ import {
 	update_reaction,
 	increment_write_version,
 	set_active_effect,
-	push_reaction_value
+	push_reaction_value,
+	is_destroying_effect
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
@@ -172,13 +173,18 @@ export function execute_derived(derived) {
  */
 export function update_derived(derived) {
 	var value = execute_derived(derived);
-	var status =
-		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
-
-	set_signal_status(derived, status);
 
 	if (!derived.equals(value)) {
 		derived.v = value;
 		derived.wv = increment_write_version();
 	}
+
+	// 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;
+
+	var status =
+		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
+
+	set_signal_status(derived, status);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js
new file mode 100644
index 0000000000..1016ffb43e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js
@@ -0,0 +1,22 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button>toggle (false)</button>`,
+
+	async test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up', { foo: false, bar: false }]);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, [
+			'up',
+			{ foo: false, bar: false },
+			'down',
+			{ foo: false, bar: false },
+			'up',
+			{ foo: true, bar: true }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte
new file mode 100644
index 0000000000..fff81591d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo = $state(false)
+	let bar = $derived(foo)
+
+	$effect(() => {
+		console.log('up', { foo, bar });
+
+		return () =>{
+			console.log('down', { foo, bar });
+		};
+	});
+</script>
+
+<button onclick={() => foo = !foo}>toggle ({foo})</button>

From add0c6a9878f0f3fc4d62c85fec4846de3b2a31e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 25 May 2025 11:07:46 -0400
Subject: [PATCH 082/259] Version Packages (#15998)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/lazy-singers-pretend.md | 5 -----
 .changeset/old-insects-divide.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/lazy-singers-pretend.md
 delete mode 100644 .changeset/old-insects-divide.md

diff --git a/.changeset/lazy-singers-pretend.md b/.changeset/lazy-singers-pretend.md
deleted file mode 100644
index f0aae80048..0000000000
--- a/.changeset/lazy-singers-pretend.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly parse escaped unicode characters in css selector
diff --git a/.changeset/old-insects-divide.md b/.changeset/old-insects-divide.md
deleted file mode 100644
index 75707eb428..0000000000
--- a/.changeset/old-insects-divide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't mark deriveds as clean if updating during teardown
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 13eebb36fa..62b1db3759 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.2
+
+### Patch Changes
+
+- fix: correctly parse escaped unicode characters in css selector ([#15976](https://github.com/sveltejs/svelte/pull/15976))
+
+- fix: don't mark deriveds as clean if updating during teardown ([#15997](https://github.com/sveltejs/svelte/pull/15997))
+
 ## 5.33.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 1580f58533..65af4a543f 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.33.1",
+  "version": "5.33.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 336e5fcb41..2184f10a6c 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.33.1';
+export const VERSION = '5.33.2';
 export const PUBLIC_VERSION = '5';

From fbb6444fd89573d01cb4afb5881d0d52d08853a9 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 26 May 2025 12:17:43 +0200
Subject: [PATCH 083/259] fix: allow using typescript in `customElement.extend`
 option (#16001)

Closes #15372

---------

Co-authored-by: Dominik G. <dominik.goepel@gmx.de>
---
 .changeset/olive-pandas-trade.md              |  5 +++++
 .../docs/07-misc/04-custom-elements.md        |  2 ++
 packages/svelte/src/compiler/index.js         |  5 +++++
 .../extend-with-ts/_config.js                 | 19 +++++++++++++++++++
 .../extend-with-ts/main.svelte                | 14 ++++++++++++++
 5 files changed, 45 insertions(+)
 create mode 100644 .changeset/olive-pandas-trade.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte

diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md
new file mode 100644
index 0000000000..bef36a3075
--- /dev/null
+++ b/.changeset/olive-pandas-trade.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow using typescript in `customElement.extend` option
diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index a8e0c81763..7e6a17b947 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -114,6 +114,8 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
+> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang="ts"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.
+
 ## Caveats and limitations
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 42427dd9c4..756a88a824 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -43,6 +43,11 @@ export function compile(source, options) {
 			instance: parsed.instance && remove_typescript_nodes(parsed.instance),
 			module: parsed.module && remove_typescript_nodes(parsed.module)
 		};
+		if (combined_options.customElementOptions?.extend) {
+			combined_options.customElementOptions.extend = remove_typescript_nodes(
+				combined_options.customElementOptions?.extend
+			);
+		}
 	}
 
 	const analysis = analyze_component(parsed, source, combined_options);
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
new file mode 100644
index 0000000000..6502a08290
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element name="world"></custom-element>';
+		await tick();
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+
+		assert.htmlEqual(
+			el.shadowRoot.innerHTML,
+			`
+		<p>name: world</p>
+	`
+		);
+		assert.equal(el.test, `test`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
new file mode 100644
index 0000000000..ddd2d4b61a
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options customElement={{
+	tag: "custom-element",
+	extend: (customClass)=>{
+		return class extends customClass{
+			public test: string = "test";
+		}
+	},
+}}/>
+
+<script lang="ts">
+	let { name } = $props();
+</script>
+
+<p>name: {name}</p>
\ No newline at end of file

From 94a2bca0e383b25ed436907b8884eb8d149d5830 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Mon, 26 May 2025 16:56:32 +0300
Subject: [PATCH 084/259] fix: cleanup event handlers on media elements
 (#16005)

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/thin-dolls-cover.md                |  5 +++++
 .../internal/client/dom/elements/events.js    | 11 ++++++++--
 .../event-media-element-cleanup/_config.js    | 20 +++++++++++++++++++
 .../event-media-element-cleanup/main.svelte   |  9 +++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-dolls-cover.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte

diff --git a/.changeset/thin-dolls-cover.md b/.changeset/thin-dolls-cover.md
new file mode 100644
index 0000000000..e9f09342a5
--- /dev/null
+++ b/.changeset/thin-dolls-cover.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup event handlers on media elements
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index c2b7fc7d83..fa3bf0b021 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -112,8 +112,15 @@ export function event(event_name, dom, handler, capture, passive) {
 	var options = { capture, passive };
 	var target_handler = create_event(event_name, dom, handler, options);
 
-	// @ts-ignore
-	if (dom === document.body || dom === window || dom === document) {
+	if (
+		dom === document.body ||
+		// @ts-ignore
+		dom === window ||
+		// @ts-ignore
+		dom === document ||
+		// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
+		dom instanceof HTMLMediaElement
+	) {
 		teardown(() => {
 			dom.removeEventListener(event_name, target_handler, options);
 		});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
new file mode 100644
index 0000000000..775afcab89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { expect, vi } from 'vitest';
+
+const handler = vi.fn();
+
+export default test({
+	props: {
+		handler
+	},
+	async test({ target }) {
+		const button = target.querySelector('button');
+		const video = target.querySelector('video');
+
+		button?.click();
+		flushSync();
+		video?.dispatchEvent(new Event('someevent'));
+		expect(handler).not.toHaveBeenCalled();
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
new file mode 100644
index 0000000000..6a1f9b6b4b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const { handler } = $props();
+	let show = $state(true);
+</script>
+
+<button onclick={() => show = false}>show/hide</button>
+{#if show}
+	<video onsomeevent={handler}></video>
+{/if}

From f9d0df60417b60d72fbb73ff671b4c2918b15c17 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Mon, 26 May 2025 15:54:19 -0700
Subject: [PATCH 085/259] docs: add link to lvalue info on `bind:` docs
 (#16008)

* add link to lvalue

* use more user-friendly info
---
 documentation/docs/03-template-syntax/12-bind.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index a59a2d8321..de57815687 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -4,7 +4,7 @@ title: bind:
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
 
-The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
 
 <!-- prettier-ignore -->
 ```svelte

From 6e2ba643c5526ae74f7c1c61a5883d1cc8848d0a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 26 May 2025 18:56:25 -0400
Subject: [PATCH 086/259] Version Packages (#16002)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/olive-pandas-trade.md | 5 -----
 .changeset/thin-dolls-cover.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/olive-pandas-trade.md
 delete mode 100644 .changeset/thin-dolls-cover.md

diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md
deleted file mode 100644
index bef36a3075..0000000000
--- a/.changeset/olive-pandas-trade.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow using typescript in `customElement.extend` option
diff --git a/.changeset/thin-dolls-cover.md b/.changeset/thin-dolls-cover.md
deleted file mode 100644
index e9f09342a5..0000000000
--- a/.changeset/thin-dolls-cover.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: cleanup event handlers on media elements
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 62b1db3759..dae7f68e85 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.3
+
+### Patch Changes
+
+- fix: allow using typescript in `customElement.extend` option ([#16001](https://github.com/sveltejs/svelte/pull/16001))
+
+- fix: cleanup event handlers on media elements ([#16005](https://github.com/sveltejs/svelte/pull/16005))
+
 ## 5.33.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 65af4a543f..3f625f1590 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.33.2",
+  "version": "5.33.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2184f10a6c..fb2f375273 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.33.2';
+export const VERSION = '5.33.3';
 export const PUBLIC_VERSION = '5';

From 4e3ff0944d3a45266ef5e4507b8e3f7acacd93bb Mon Sep 17 00:00:00 2001
From: Hyunbin Seo <47051820+hyunbinseo@users.noreply.github.com>
Date: Tue, 27 May 2025 21:57:45 +0900
Subject: [PATCH 087/259] fix: narrow `defaultChecked` to boolean (#16009)

* fix: narrow `defaultChecked` to boolean

* Update .changeset/mean-taxis-yell.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/mean-taxis-yell.md | 5 +++++
 packages/svelte/elements.d.ts | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/mean-taxis-yell.md

diff --git a/.changeset/mean-taxis-yell.md b/.changeset/mean-taxis-yell.md
new file mode 100644
index 0000000000..6257720d08
--- /dev/null
+++ b/.changeset/mean-taxis-yell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: narrow `defaultChecked` to boolean
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 71f28b4f97..0172b0e358 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -1115,8 +1115,8 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
 	defaultValue?: any;
 	defaultvalue?: any;
-	defaultChecked?: any;
-	defaultchecked?: any;
+	defaultChecked?: boolean | undefined | null;
+	defaultchecked?: boolean | undefined | null;
 	width?: number | string | undefined | null;
 	webkitdirectory?: boolean | undefined | null;
 

From 37488fa65c092c815584133b539ee79f570d2c76 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 27 May 2025 15:02:19 +0200
Subject: [PATCH 088/259] fix: warn when using rest or identifier in custom
 elements without props option (#16003)

* fix: warn when using rest or identifier in custom elements without props option

* chore: update message

* tweak message

* update tests

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/mighty-rabbits-teach.md            |  5 ++++
 .../.generated/compile-warnings.md            |  6 +++++
 .../messages/compile-warnings/script.md       |  4 +++
 .../2-analyze/visitors/VariableDeclarator.js  | 14 ++++++++++
 packages/svelte/src/compiler/warnings.js      |  9 +++++++
 .../input.svelte                              |  7 +++++
 .../warnings.json                             | 14 ++++++++++
 .../input.svelte                              |  5 ++++
 .../warnings.json                             | 26 +++++++++++++++++++
 .../input.svelte                              |  5 ++++
 .../warnings.json                             | 26 +++++++++++++++++++
 11 files changed, 121 insertions(+)
 create mode 100644 .changeset/mighty-rabbits-teach.md
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json

diff --git a/.changeset/mighty-rabbits-teach.md b/.changeset/mighty-rabbits-teach.md
new file mode 100644
index 0000000000..0d80ddd51a
--- /dev/null
+++ b/.changeset/mighty-rabbits-teach.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: warn when using rest or identifier in custom elements without props option
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index b579d38602..2af9021a6a 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -632,6 +632,12 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### custom_element_props_identifier
+
+```
+Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+```
+
 ### element_implicitly_closed
 
 ```
diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md
index 6603759156..26bd0c9027 100644
--- a/packages/svelte/messages/compile-warnings/script.md
+++ b/packages/svelte/messages/compile-warnings/script.md
@@ -1,3 +1,7 @@
+## custom_element_props_identifier
+
+> Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+
 ## export_let_unused
 
 > Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index a7d08d315d..c4b4272aba 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -4,6 +4,7 @@
 import { get_rune } from '../../scope.js';
 import { ensure_no_module_import_conflict, validate_identifier_name } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
 import { extract_paths } from '../../../utils/ast.js';
 import { equal } from '../../../utils/assert.js';
 
@@ -52,6 +53,19 @@ export function VariableDeclarator(node, context) {
 				e.props_invalid_identifier(node);
 			}
 
+			if (
+				context.state.analysis.custom_element &&
+				context.state.options.customElementOptions?.props == null
+			) {
+				let warn_on;
+				if (
+					node.id.type === 'Identifier' ||
+					(warn_on = node.id.properties.find((p) => p.type === 'RestElement')) != null
+				) {
+					w.custom_element_props_identifier(warn_on ?? node.id);
+				}
+			}
+
 			context.state.analysis.needs_props = true;
 
 			if (node.id.type === 'Identifier') {
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index 2a8316308c..1226190891 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -96,6 +96,7 @@ export const codes = [
 	'options_removed_hydratable',
 	'options_removed_loop_guard_timeout',
 	'options_renamed_ssr_dom',
+	'custom_element_props_identifier',
 	'export_let_unused',
 	'legacy_component_creation',
 	'non_reactive_update',
@@ -592,6 +593,14 @@ export function options_renamed_ssr_dom(node) {
 	w(node, 'options_renamed_ssr_dom', `\`generate: "dom"\` and \`generate: "ssr"\` options have been renamed to "client" and "server" respectively\nhttps://svelte.dev/e/options_renamed_ssr_dom`);
 }
 
+/**
+ * Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+ * @param {null | NodeLike} node
+ */
+export function custom_element_props_identifier(node) {
+	w(node, 'custom_element_props_identifier', `Using a rest element or a non-destructured declaration with \`$props()\` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the \`customElement.props\` option.\nhttps://svelte.dev/e/custom_element_props_identifier`);
+}
+
 /**
  * Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte
new file mode 100644
index 0000000000..bb7b930dc3
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte
@@ -0,0 +1,7 @@
+<svelte:options customElement={{
+	props: {}
+}} />
+
+<script>
+	let props = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json
new file mode 100644
index 0000000000..b880fe146c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 2,
+			"line": 3
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte
new file mode 100644
index 0000000000..207b554527
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte
@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let { ...props } = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json
new file mode 100644
index 0000000000..61e11ab108
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 15,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 7,
+			"line": 4
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte
new file mode 100644
index 0000000000..ca5b16f8c3
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte
@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let props = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json
new file mode 100644
index 0000000000..4c50bbd116
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 10,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 5,
+			"line": 4
+		}
+	}
+]

From 2e27c5d8aab4f77862f79919cb990e4f1009c064 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 27 May 2025 09:10:28 -0400
Subject: [PATCH 089/259] Version Packages (#16010)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/mean-taxis-yell.md      | 5 -----
 .changeset/mighty-rabbits-teach.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/mean-taxis-yell.md
 delete mode 100644 .changeset/mighty-rabbits-teach.md

diff --git a/.changeset/mean-taxis-yell.md b/.changeset/mean-taxis-yell.md
deleted file mode 100644
index 6257720d08..0000000000
--- a/.changeset/mean-taxis-yell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: narrow `defaultChecked` to boolean
diff --git a/.changeset/mighty-rabbits-teach.md b/.changeset/mighty-rabbits-teach.md
deleted file mode 100644
index 0d80ddd51a..0000000000
--- a/.changeset/mighty-rabbits-teach.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: warn when using rest or identifier in custom elements without props option
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index dae7f68e85..72ab89eb4a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.4
+
+### Patch Changes
+
+- fix: narrow `defaultChecked` to boolean ([#16009](https://github.com/sveltejs/svelte/pull/16009))
+
+- fix: warn when using rest or identifier in custom elements without props option ([#16003](https://github.com/sveltejs/svelte/pull/16003))
+
 ## 5.33.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3f625f1590..a63771a0b4 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.33.3",
+  "version": "5.33.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index fb2f375273..c2af8bbf43 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.33.3';
+export const VERSION = '5.33.4';
 export const PUBLIC_VERSION = '5';

From 81a34aa13426c6409da348b2a48f12f919276d43 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 28 May 2025 17:33:04 -0400
Subject: [PATCH 090/259] fix: handle derived destructured iterators (#16015)

* revert #15813

* failing test

* tweak

* tweak

* WIP

* WIP

* WIP

* WIP

* WIP

* working

* tweak

* changeset

* tweak description

* Update packages/svelte/src/compiler/utils/ast.js

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

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/purple-dryers-mate.md              |   5 +
 packages/svelte/src/compiler/migrate/index.js |   8 +-
 .../2-analyze/visitors/VariableDeclarator.js  |   3 +-
 .../3-transform/client/visitors/EachBlock.js  |  18 +-
 .../client/visitors/SnippetBlock.js           |  15 +-
 .../client/visitors/VariableDeclaration.js    | 154 ++++++++-------
 .../server/visitors/VariableDeclaration.js    |  29 ++-
 .../phases/3-transform/shared/assignments.js  |  93 +++++-----
 packages/svelte/src/compiler/phases/scope.js  |   5 +-
 packages/svelte/src/compiler/utils/ast.js     | 175 ++++++++----------
 packages/svelte/src/internal/client/index.js  |   2 +-
 packages/svelte/src/internal/server/index.js  |   2 +-
 packages/svelte/src/internal/shared/utils.js  |  35 ++++
 .../derived-destructured-iterator/_config.js  |  16 ++
 .../derived-destructured-iterator/main.svelte |  16 ++
 .../_expected/client/index.svelte.js          |  10 +-
 16 files changed, 348 insertions(+), 238 deletions(-)
 create mode 100644 .changeset/purple-dryers-mate.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte

diff --git a/.changeset/purple-dryers-mate.md b/.changeset/purple-dryers-mate.md
new file mode 100644
index 0000000000..fc8e96d6d4
--- /dev/null
+++ b/.changeset/purple-dryers-mate.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle derived destructured iterators
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 2d5a4dcd9e..5ca9adb98b 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -603,15 +603,15 @@ const instance_script = {
 					);
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
 					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					// const tmp = state.scope.generate('tmp');
-					// const paths = extract_paths(declarator.id);
+					// const tmp = b.id(state.scope.generate('tmp'));
+					// const paths = extract_paths(declarator.id, tmp);
 					// state.props_pre.push(
-					// 	b.declaration('const', b.id(tmp), visit(declarator.init!) as Expression)
+					// 	b.declaration('const', tmp, visit(declarator.init!) as Expression)
 					// );
 					// for (const path of paths) {
 					// 	const name = (path.node as Identifier).name;
 					// 	const binding = state.scope.get(name)!;
-					// 	const value = path.expression!(b.id(tmp));
+					// 	const value = path.expression;
 					// 	if (binding.kind === 'bindable_prop' || binding.kind === 'rest_prop') {
 					// 		state.props.push({
 					// 			local: name,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index c4b4272aba..89320f3962 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -7,6 +7,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { extract_paths } from '../../../utils/ast.js';
 import { equal } from '../../../utils/assert.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {VariableDeclarator} node
@@ -18,7 +19,7 @@ export function VariableDeclarator(node, context) {
 	if (context.state.analysis.runes) {
 		const init = node.init;
 		const rune = get_rune(init, context.state.scope);
-		const paths = extract_paths(node.id);
+		const { paths } = extract_paths(node.id, b.id('dummy'));
 
 		for (const path of paths) {
 			validate_identifier_name(context.state.scope.get(/** @type {Identifier} */ (path.node).name));
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 f80fa0e61e..5a944b6db3 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
@@ -234,13 +234,21 @@ export function EachBlock(node, context) {
 	} else if (node.context) {
 		const unwrapped = (flags & EACH_ITEM_REACTIVE) !== 0 ? b.call('$.get', item) : item;
 
-		for (const path of extract_paths(node.context)) {
+		const { inserts, paths } = extract_paths(node.context, unwrapped);
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			child_state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value), child_state));
+			declarations.push(b.var(id, b.call('$.derived', expression)));
+		}
+
+		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
 
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
@@ -249,7 +257,7 @@ export function EachBlock(node, context) {
 			child_state.transform[name] = {
 				read,
 				assign: (_, value) => {
-					const left = /** @type {Pattern} */ (path.update_expression(unwrapped));
+					const left = /** @type {Pattern} */ (path.update_expression);
 					return b.sequence([b.assignment('=', left, value), ...sequence]);
 				},
 				mutate: (_, mutation) => {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index a82645cd7a..0809aa21b2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -43,14 +43,21 @@ export function SnippetBlock(node, context) {
 		let arg_alias = `$$arg${i}`;
 		args.push(b.id(arg_alias));
 
-		const paths = extract_paths(argument);
+		const { inserts, paths } = extract_paths(argument, b.maybe_call(b.id(arg_alias)));
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			transform[id.name] = { read: get_value };
+
+			declarations.push(
+				b.var(id, b.call('$.derived', /** @type {Expression} */ (context.visit(b.thunk(value)))))
+			);
+		}
 
 		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(b.maybe_call(b.id(arg_alias)))))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
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 84c205d163..e717077917 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
@@ -2,12 +2,13 @@
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
-import { build_pattern, extract_paths } from '../../../../utils/ast.js';
+import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
 import { get_prop_source, is_prop_source, is_state_source, should_proxy } from '../utils.js';
 import { is_hoisted_function } from '../../utils.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {VariableDeclaration} node
@@ -116,7 +117,7 @@ export function VariableDeclaration(node, context) {
 			}
 
 			const args = /** @type {CallExpression} */ (init).arguments;
-			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
+			const value = /** @type {Expression} */ (args[0]) ?? b.void0; // TODO do we need the void 0? can we just omit it altogether?
 
 			if (rune === '$state' || rune === '$state.raw') {
 				/**
@@ -137,24 +138,34 @@ export function VariableDeclaration(node, context) {
 				};
 
 				if (declarator.id.type === 'Identifier') {
+					const expression = /** @type {Expression} */ (context.visit(value));
+
 					declarations.push(
-						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
+						b.declarator(declarator.id, create_state_declarator(declarator.id, expression))
 					);
 				} else {
-					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 					declarations.push(
-						b.declarator(pattern, value),
-						.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
-							([original, replacement]) => {
-								const binding = context.state.scope.get(original.name);
-								return b.declarator(
-									original,
-									binding?.kind === 'state' || binding?.kind === 'raw_state'
-										? create_state_declarator(binding.node, replacement)
-										: replacement
-								);
-							}
-						)
+						b.declarator(tmp, value),
+						...inserts.map(({ id, value }) => {
+							id.name = context.state.scope.generate('$$array');
+							context.state.transform[id.name] = { read: get_value };
+
+							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+							return b.declarator(id, b.call('$.derived', expression));
+						}),
+						...paths.map((path) => {
+							const value = /** @type {Expression} */ (context.visit(path.expression));
+							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+							return b.declarator(
+								path.node,
+								binding?.kind === 'state' || binding?.kind === 'raw_state'
+									? create_state_declarator(binding.node, value)
+									: value
+							);
+						})
 					);
 				}
 
@@ -163,44 +174,41 @@ export function VariableDeclaration(node, context) {
 
 			if (rune === '$derived' || rune === '$derived.by') {
 				if (declarator.id.type === 'Identifier') {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
+					let expression = /** @type {Expression} */ (context.visit(value));
+					if (rune === '$derived') expression = b.thunk(expression);
+
+					declarations.push(b.declarator(declarator.id, b.call('$.derived', expression)));
 				} else {
-					const [pattern, replacements] = build_pattern(declarator.id, context.state.scope);
 					const init = /** @type {CallExpression} */ (declarator.init);
 
-					/** @type {Identifier} */
-					let id;
 					let rhs = value;
 
-					if (rune === '$derived' && init.arguments[0].type === 'Identifier') {
-						id = init.arguments[0];
-					} else {
-						id = b.id(context.state.scope.generate('$$d'));
+					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
+						const id = b.id(context.state.scope.generate('$$d'));
 						rhs = b.call('$.get', id);
 
-						declarations.push(
-							b.declarator(id, b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value)))
-						);
+						let expression = /** @type {Expression} */ (context.visit(value));
+						if (rune === '$derived') expression = b.thunk(expression);
+
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
 					}
 
-					for (let i = 0; i < replacements.size; i++) {
-						const [original, replacement] = [...replacements][i];
-						declarations.push(
-							b.declarator(
-								original,
-								b.call(
-									'$.derived',
-									b.arrow([], b.block([b.let(pattern, rhs), b.return(replacement)]))
-								)
-							)
-						);
+					const { inserts, paths } = extract_paths(declarator.id, rhs);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+					}
+
+					for (const path of paths) {
+						const expression = /** @type {Expression} */ (context.visit(path.expression));
+						declarations.push(b.declarator(path.node, b.call('$.derived', b.thunk(expression))));
 					}
 				}
+
 				continue;
 			}
 		}
@@ -229,20 +237,29 @@ export function VariableDeclaration(node, context) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
 					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
 
 					declarations.push(
 						b.declarator(
-							b.id(tmp),
+							tmp,
 							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
 						)
 					);
 
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+					}
+
 					for (const path of paths) {
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
-						const value = path.expression?.(b.id(tmp));
+						const value = /** @type {Expression} */ (context.visit(path.expression));
+
 						declarations.push(
 							b.declarator(
 								path.node,
@@ -276,7 +293,7 @@ export function VariableDeclaration(node, context) {
 			declarations.push(
 				...create_state_declarators(
 					declarator,
-					context.state,
+					context,
 					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
 				)
 			);
@@ -296,32 +313,41 @@ export function VariableDeclaration(node, context) {
 /**
  * Creates the output for a state declaration in legacy mode.
  * @param {VariableDeclarator} declarator
- * @param {ComponentClientTransformState} scope
+ * @param {ComponentContext} context
  * @param {Expression} value
  */
-function create_state_declarators(declarator, { scope, analysis }, value) {
+function create_state_declarators(declarator, context, value) {
 	if (declarator.id.type === 'Identifier') {
 		return [
 			b.declarator(
 				declarator.id,
-				b.call('$.mutable_source', value, analysis.immutable ? b.true : undefined)
+				b.call('$.mutable_source', value, context.state.analysis.immutable ? b.true : undefined)
 			)
 		];
 	}
 
-	const [pattern, replacements] = build_pattern(declarator.id, scope);
+	const tmp = b.id(context.state.scope.generate('tmp'));
+	const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 	return [
-		b.declarator(pattern, value),
-		.../** @type {[Identifier, Identifier][]} */ ([...replacements]).map(
-			([original, replacement]) => {
-				const binding = scope.get(original.name);
-				return b.declarator(
-					original,
-					binding?.kind === 'state'
-						? b.call('$.mutable_source', replacement, analysis.immutable ? b.true : undefined)
-						: replacement
-				);
-			}
-		)
+		b.declarator(tmp, value),
+		...inserts.map(({ id, value }) => {
+			id.name = context.state.scope.generate('$$array');
+			context.state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+			return b.declarator(id, b.call('$.derived', expression));
+		}),
+		...paths.map((path) => {
+			const value = /** @type {Expression} */ (context.visit(path.expression));
+			const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+
+			return b.declarator(
+				path.node,
+				binding?.kind === 'state'
+					? b.call('$.mutable_source', value, context.state.analysis.immutable ? b.true : undefined)
+					: value
+			);
+		})
 	];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 17bf516a22..1f0e6be77c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -3,7 +3,7 @@
 /** @import { Context } from '../types.js' */
 /** @import { ComponentAnalysis } from '../../../types.js' */
 /** @import { Scope } from '../../../scope.js' */
-import { build_pattern, build_fallback, extract_paths } from '../../../../utils/ast.js';
+import { build_fallback, extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 import { walk } from 'zimmerframe';
@@ -120,21 +120,29 @@ export function VariableDeclaration(node, context) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
 					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 					declarations.push(
 						b.declarator(
-							b.id(tmp),
+							tmp,
 							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
 						)
 					);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						declarations.push(b.declarator(id, value));
+					}
+
 					for (const path of paths) {
-						const value = path.expression?.(b.id(tmp));
+						const value = path.expression;
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
 						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
 						declarations.push(b.declarator(path.node, build_fallback(prop, value)));
 					}
+
 					continue;
 				}
 
@@ -188,10 +196,13 @@ function create_state_declarators(declarator, scope, value) {
 		return [b.declarator(declarator.id, value)];
 	}
 
-	const [pattern, replacements] = build_pattern(declarator.id, scope);
+	const tmp = b.id(scope.generate('tmp'));
+	const { paths } = extract_paths(declarator.id, tmp);
 	return [
-		b.declarator(pattern, value),
-		// TODO inject declarator for opts, so we can use it below
-		...[...replacements].map(([original, replacement]) => b.declarator(original, replacement))
+		b.declarator(tmp, value), // TODO inject declarator for opts, so we can use it below
+		...paths.map((path) => {
+			const value = path.expression;
+			return b.declarator(path.node, value);
+		})
 	];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
index 85b0869a15..175b44f4fe 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
@@ -1,8 +1,9 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Node, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Node, Pattern, Statement } from 'estree' */
 /** @import { Context as ClientContext } from '../client/types.js' */
 /** @import { Context as ServerContext } from '../server/types.js' */
-import { build_pattern, is_expression_async } from '../../../utils/ast.js';
+import { extract_paths, is_expression_async } from '../../../utils/ast.js';
 import * as b from '#compiler/builders';
+import { get_value } from '../client/visitors/shared/declarations.js';
 
 /**
  * @template {ClientContext | ServerContext} Context
@@ -23,23 +24,27 @@ export function visit_assignment_expression(node, context, build_assignment) {
 
 		let changed = false;
 
-		const [pattern, replacements] = build_pattern(node.left, context.state.scope);
-
-		const assignments = [
-			b.let(pattern, rhs),
-			...[...replacements].map(([original, replacement]) => {
-				let assignment = build_assignment(node.operator, original, replacement, context);
-				if (assignment !== null) changed = true;
-				return b.stmt(
-					assignment ??
-						b.assignment(
-							node.operator,
-							/** @type {Identifier} */ (context.visit(original)),
-							/** @type {Expression} */ (context.visit(replacement))
-						)
-				);
-			})
-		];
+		const { inserts, paths } = extract_paths(node.left, rhs);
+
+		for (const { id } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+		}
+
+		const assignments = paths.map((path) => {
+			const value = path.expression;
+
+			let assignment = build_assignment('=', path.node, value, context);
+			if (assignment !== null) changed = true;
+
+			return (
+				assignment ??
+				b.assignment(
+					'=',
+					/** @type {Pattern} */ (context.visit(path.node)),
+					/** @type {Expression} */ (context.visit(value))
+				)
+			);
+		});
 
 		if (!changed) {
 			// No change to output -> nothing to transform -> we can keep the original assignment
@@ -47,36 +52,36 @@ export function visit_assignment_expression(node, context, build_assignment) {
 		}
 
 		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
-		const block = b.block(assignments);
 
-		if (!is_standalone) {
-			// this is part of an expression, we need the sequence to end with the value
-			block.body.push(b.return(rhs));
-		}
+		if (inserts.length > 0 || should_cache) {
+			/** @type {Statement[]} */
+			const statements = [
+				...inserts.map(({ id, value }) => b.var(id, value)),
+				...assignments.map(b.stmt)
+			];
 
-		if (is_standalone && !should_cache) {
-			return block;
+			if (!is_standalone) {
+				// this is part of an expression, we need the sequence to end with the value
+				statements.push(b.return(rhs));
+			}
+
+			const iife = b.arrow([rhs], b.block(statements));
+
+			const iife_is_async =
+				is_expression_async(value) ||
+				assignments.some((assignment) => is_expression_async(assignment));
+
+			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
 		}
 
-		const iife = b.arrow(should_cache ? [rhs] : [], block);
-
-		const iife_is_async =
-			is_expression_async(value) ||
-			assignments.some(
-				(assignment) =>
-					(assignment.type === 'ExpressionStatement' &&
-						is_expression_async(assignment.expression)) ||
-					(assignment.type === 'VariableDeclaration' &&
-						assignment.declarations.some(
-							(declaration) =>
-								is_expression_async(declaration.id) ||
-								(declaration.init && is_expression_async(declaration.init))
-						))
-			);
+		const sequence = b.sequence(assignments);
+
+		if (!is_standalone) {
+			// this is part of an expression, we need the sequence to end with the value
+			sequence.expressions.push(rhs);
+		}
 
-		return iife_is_async
-			? b.await(b.call(b.async(iife), should_cache ? value : undefined))
-			: b.call(iife, should_cache ? value : undefined);
+		return sequence;
 	}
 
 	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index f37dfab8d1..75a26d487b 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -630,10 +630,9 @@ export class Scope {
 
 	/**
 	 * @param {string} preferred_name
-	 * @param {(name: string, counter: number) => string} [generator]
 	 * @returns {string}
 	 */
-	generate(preferred_name, generator = (name, counter) => `${name}_${counter}`) {
+	generate(preferred_name) {
 		if (this.#porous) {
 			return /** @type {Scope} */ (this.parent).generate(preferred_name);
 		}
@@ -648,7 +647,7 @@ export class Scope {
 			this.root.conflicts.has(name) ||
 			is_reserved(name)
 		) {
-			name = generator(preferred_name, n++);
+			name = `${preferred_name}_${n++}`;
 		}
 
 		this.references.set(name, []);
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 32ff5a37b3..a20b6888c7 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -1,8 +1,7 @@
-/** @import { AST, Scope } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import * as ESTree from 'estree' */
 import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';
-import is_reference from 'is-reference';
 
 /**
  * Gets the left-most identifier of a member expression or identifier.
@@ -129,49 +128,6 @@ export function unwrap_pattern(pattern, nodes = []) {
 	return nodes;
 }
 
-/**
- * @param {ESTree.Pattern} id
- * @param {Scope} scope
- * @returns {[ESTree.Pattern, Map<ESTree.Identifier | ESTree.MemberExpression, ESTree.Identifier>]}
- */
-export function build_pattern(id, scope) {
-	/** @type {Map<ESTree.Identifier | ESTree.MemberExpression, ESTree.Identifier>} */
-	const map = new Map();
-
-	/** @type {Map<string, string>} */
-	const names = new Map();
-
-	let counter = 0;
-
-	for (const node of unwrap_pattern(id)) {
-		const name = scope.generate(`$$${++counter}`, (_, counter) => `$$${counter}`);
-
-		map.set(node, b.id(name));
-
-		if (node.type === 'Identifier') {
-			names.set(node.name, name);
-		}
-	}
-
-	const pattern = walk(id, null, {
-		Identifier(node, context) {
-			if (is_reference(node, /** @type {ESTree.Pattern} */ (context.path.at(-1)))) {
-				const name = names.get(node.name);
-				if (name) return b.id(name);
-			}
-		},
-
-		MemberExpression(node, context) {
-			const n = map.get(node);
-			if (n) return n;
-
-			context.next();
-		}
-	});
-
-	return [pattern, map];
-}
-
 /**
  * Extracts all identifiers from a pattern.
  * @param {ESTree.Pattern} pattern
@@ -271,40 +227,50 @@ export function extract_identifiers_from_destructuring(node, nodes = []) {
  * @property {ESTree.Identifier | ESTree.MemberExpression} node The node the destructuring path end in. Can be a member expression only for assignment expressions
  * @property {boolean} is_rest `true` if this is a `...rest` destructuring
  * @property {boolean} has_default_value `true` if this has a fallback value like `const { foo = 'bar } = ..`
- * @property {(expression: ESTree.Expression) => ESTree.Identifier | ESTree.MemberExpression | ESTree.CallExpression | ESTree.AwaitExpression} expression Returns an expression which walks the path starting at the given expression.
+ * @property {ESTree.Expression} expression The value of the current path
  * This will be a call expression if a rest element or default is involved — e.g. `const { foo: { bar: baz = 42 }, ...rest } = quux` — since we can't represent `baz` or `rest` purely as a path
  * Will be an await expression in case of an async default value (`const { foo = await bar } = ...`)
- * @property {(expression: ESTree.Expression) => ESTree.Identifier | ESTree.MemberExpression | ESTree.CallExpression | ESTree.AwaitExpression} update_expression Like `expression` but without default values.
+ * @property {ESTree.Expression} update_expression Like `expression` but without default values.
  */
 
 /**
  * Extracts all destructured assignments from a pattern.
+ * For each `id` in the returned `inserts`, make sure to adjust the `name`.
  * @param {ESTree.Node} param
- * @returns {DestructuredAssignment[]}
+ * @param {ESTree.Expression} initial
+ * @returns {{ inserts: Array<{ id: ESTree.Identifier, value: ESTree.Expression }>, paths: DestructuredAssignment[] }}
  */
-export function extract_paths(param) {
-	return _extract_paths(
-		[],
-		param,
-		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
-		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
-		false
-	);
+export function extract_paths(param, initial) {
+	/**
+	 * When dealing with array destructuring patterns (`let [a, b, c] = $derived(blah())`)
+	 * we need an intermediate declaration that creates an array, since `blah()` could
+	 * return a non-array-like iterator
+	 * @type {Array<{ id: ESTree.Identifier, value: ESTree.Expression }>}
+	 */
+	const inserts = [];
+
+	/** @type {DestructuredAssignment[]} */
+	const paths = [];
+
+	_extract_paths(paths, inserts, param, initial, initial, false);
+
+	return { inserts, paths };
 }
 
 /**
- * @param {DestructuredAssignment[]} assignments
+ * @param {DestructuredAssignment[]} paths
+ * @param {Array<{ id: ESTree.Identifier, value: ESTree.Expression }>} inserts
  * @param {ESTree.Node} param
- * @param {DestructuredAssignment['expression']} expression
- * @param {DestructuredAssignment['update_expression']} update_expression
+ * @param {ESTree.Expression} expression
+ * @param {ESTree.Expression} update_expression
  * @param {boolean} has_default_value
  * @returns {DestructuredAssignment[]}
  */
-function _extract_paths(assignments = [], param, expression, update_expression, has_default_value) {
+function _extract_paths(paths, inserts, param, expression, update_expression, has_default_value) {
 	switch (param.type) {
 		case 'Identifier':
 		case 'MemberExpression':
-			assignments.push({
+			paths.push({
 				node: param,
 				is_rest: false,
 				has_default_value,
@@ -316,28 +282,25 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 		case 'ObjectPattern':
 			for (const prop of param.properties) {
 				if (prop.type === 'RestElement') {
-					/** @type {DestructuredAssignment['expression']} */
-					const rest_expression = (object) => {
-						/** @type {ESTree.Expression[]} */
-						const props = [];
-
-						for (const p of param.properties) {
-							if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
-								if (p.key.type === 'Identifier' && !p.computed) {
-									props.push(b.literal(p.key.name));
-								} else if (p.key.type === 'Literal') {
-									props.push(b.literal(String(p.key.value)));
-								} else {
-									props.push(b.call('String', p.key));
-								}
+					/** @type {ESTree.Expression[]} */
+					const props = [];
+
+					for (const p of param.properties) {
+						if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
+							if (p.key.type === 'Identifier' && !p.computed) {
+								props.push(b.literal(p.key.name));
+							} else if (p.key.type === 'Literal') {
+								props.push(b.literal(String(p.key.value)));
+							} else {
+								props.push(b.call('String', p.key));
 							}
 						}
+					}
 
-						return b.call('$.exclude_from_object', expression(object), b.array(props));
-					};
+					const rest_expression = b.call('$.exclude_from_object', expression, b.array(props));
 
 					if (prop.argument.type === 'Identifier') {
-						assignments.push({
+						paths.push({
 							node: prop.argument,
 							is_rest: true,
 							has_default_value,
@@ -346,7 +309,8 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 						});
 					} else {
 						_extract_paths(
-							assignments,
+							paths,
+							inserts,
 							prop.argument,
 							rest_expression,
 							rest_expression,
@@ -354,11 +318,15 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 						);
 					}
 				} else {
-					/** @type {DestructuredAssignment['expression']} */
-					const object_expression = (object) =>
-						b.member(expression(object), prop.key, prop.computed || prop.key.type !== 'Identifier');
+					const object_expression = b.member(
+						expression,
+						prop.key,
+						prop.computed || prop.key.type !== 'Identifier'
+					);
+
 					_extract_paths(
-						assignments,
+						paths,
+						inserts,
 						prop.value,
 						object_expression,
 						object_expression,
@@ -369,16 +337,27 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 
 			break;
 
-		case 'ArrayPattern':
+		case 'ArrayPattern': {
+			// we create an intermediate declaration to convert iterables to arrays if necessary.
+			// the consumer is responsible for setting the name of the identifier
+			const id = b.id('#');
+
+			const value = b.call(
+				'$.to_array',
+				expression,
+				param.elements.at(-1)?.type === 'RestElement' ? undefined : b.literal(param.elements.length)
+			);
+
+			inserts.push({ id, value });
+
 			for (let i = 0; i < param.elements.length; i += 1) {
 				const element = param.elements[i];
 				if (element) {
 					if (element.type === 'RestElement') {
-						/** @type {DestructuredAssignment['expression']} */
-						const rest_expression = (object) =>
-							b.call(b.member(expression(object), 'slice'), b.literal(i));
+						const rest_expression = b.call(b.member(id, 'slice'), b.literal(i));
+
 						if (element.argument.type === 'Identifier') {
-							assignments.push({
+							paths.push({
 								node: element.argument,
 								is_rest: true,
 								has_default_value,
@@ -387,7 +366,8 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							});
 						} else {
 							_extract_paths(
-								assignments,
+								paths,
+								inserts,
 								element.argument,
 								rest_expression,
 								rest_expression,
@@ -395,10 +375,11 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							);
 						}
 					} else {
-						/** @type {DestructuredAssignment['expression']} */
-						const array_expression = (object) => b.member(expression(object), b.literal(i), true);
+						const array_expression = b.member(id, b.literal(i), true);
+
 						_extract_paths(
-							assignments,
+							paths,
+							inserts,
 							element,
 							array_expression,
 							array_expression,
@@ -409,13 +390,13 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 			}
 
 			break;
+		}
 
 		case 'AssignmentPattern': {
-			/** @type {DestructuredAssignment['expression']} */
-			const fallback_expression = (object) => build_fallback(expression(object), param.right);
+			const fallback_expression = build_fallback(expression, param.right);
 
 			if (param.left.type === 'Identifier') {
-				assignments.push({
+				paths.push({
 					node: param.left,
 					is_rest: false,
 					has_default_value: true,
@@ -423,14 +404,14 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					update_expression
 				});
 			} else {
-				_extract_paths(assignments, param.left, fallback_expression, update_expression, true);
+				_extract_paths(paths, inserts, param.left, fallback_expression, update_expression, true);
 			}
 
 			break;
 		}
 	}
 
-	return assignments;
+	return paths;
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 226d79a65f..62cb3e6513 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -154,7 +154,7 @@ export {
 } from './dom/operations.js';
 export { attr, clsx } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
-export { noop, fallback } from '../shared/utils.js';
+export { noop, fallback, to_array } from '../shared/utils.js';
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 29e09fe4dd..85c059e09b 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -504,7 +504,7 @@ export { assign_payload, copy_payload } from './payload.js';
 
 export { snapshot } from '../shared/clone.js';
 
-export { fallback } from '../shared/utils.js';
+export { fallback, to_array } from '../shared/utils.js';
 
 export {
 	invalid_default_snippet,
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index 5e7f3152d8..10f8597520 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -81,3 +81,38 @@ export function fallback(value, fallback, lazy = false) {
 			: /** @type {V} */ (fallback)
 		: value;
 }
+
+/**
+ * When encountering a situation like `let [a, b, c] = $derived(blah())`,
+ * we need to stash an intermediate value that `a`, `b`, and `c` derive
+ * from, in case it's an iterable
+ * @template T
+ * @param {ArrayLike<T> | Iterable<T>} value
+ * @param {number} [n]
+ * @returns {Array<T>}
+ */
+export function to_array(value, n) {
+	// return arrays unchanged
+	if (Array.isArray(value)) {
+		return value;
+	}
+
+	// if value is not iterable, or `n` is unspecified (indicates a rest
+	// element, which means we're not concerned about unbounded iterables)
+	// convert to an array with `Array.from`
+	if (n === undefined || !(Symbol.iterator in value)) {
+		return Array.from(value);
+	}
+
+	// otherwise, populate an array with `n` values
+
+	/** @type {T[]} */
+	const array = [];
+
+	for (const element of value) {
+		array.push(element);
+		if (array.length === n) break;
+	}
+
+	return array;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js
new file mode 100644
index 0000000000..7f8d1e000d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button><p>a: 1</p><p>b: 2</p><p>c: 3</p>`,
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button><p>a: 2</p><p>b: 3</p><p>c: 4</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte
new file mode 100644
index 0000000000..8c8629a72c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let offset = $state(1);
+
+	function* count(offset) {
+		let i = offset;
+		while (true) yield i++;
+	}
+
+	let [a, b, c] = $derived(count(offset));
+</script>
+
+<button onclick={() => offset += 1}>increment</button>
+
+<p>a: {a}</p>
+<p>b: {b}</p>
+<p>c: {c}</p>
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
index b2ef29ccaf..e9cf5b573d 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
@@ -7,12 +7,12 @@ let c = 3;
 let d = 4;
 
 export function update(array) {
-	{
-		let [$$1, $$2] = array;
+	((array) => {
+		var $$array = $.to_array(array, 2);
 
-		$.set(a, $$1, true);
-		$.set(b, $$2, true);
-	};
+		$.set(a, $$array[0], true);
+		$.set(b, $$array[1], true);
+	})(array);
 
 	[c, d] = array;
 }
\ No newline at end of file

From b8d15135cffd395beabb27ca7efd8ab402cf1048 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 28 May 2025 17:33:59 -0400
Subject: [PATCH 091/259] fix: stable attachments (#15961)

* fix: stable attachments

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix

* unused

* unused

* unused

* changeset

* ugh

* remove nonsensical comment, this is unused in spread

* rename

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

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

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/soft-jobs-sip.md                   |  5 ++
 .../client/visitors/RegularElement.js         | 49 +++---------
 .../client/visitors/SvelteElement.js          | 13 +--
 .../client/visitors/shared/element.js         | 79 ++++++++-----------
 .../client/visitors/shared/utils.js           | 11 +--
 .../client/dom/elements/attributes.js         | 68 +++++++++++++++-
 .../client/dom/elements/bindings/select.js    | 18 ++---
 packages/svelte/src/internal/client/index.js  |  1 +
 .../attachment-spread-stable/Component.svelte |  5 ++
 .../attachment-spread-stable/_config.js       | 16 ++++
 .../attachment-spread-stable/main.svelte      | 17 ++++
 11 files changed, 173 insertions(+), 109 deletions(-)
 create mode 100644 .changeset/soft-jobs-sip.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte

diff --git a/.changeset/soft-jobs-sip.md b/.changeset/soft-jobs-sip.md
new file mode 100644
index 0000000000..fcee398d45
--- /dev/null
+++ b/.changeset/soft-jobs-sip.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid rerunning attachments when unrelated spread attributes change
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 c1806b5128..e823792993 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
@@ -17,7 +17,7 @@ import { build_getter } from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
-	build_set_attributes,
+	build_attribute_effect,
 	build_set_class,
 	build_set_style
 } from './shared/element.js';
@@ -201,37 +201,7 @@ export function RegularElement(node, context) {
 	const node_id = context.state.node;
 
 	if (has_spread) {
-		const attributes_id = b.id(context.state.scope.generate('attributes'));
-
-		build_set_attributes(
-			attributes,
-			class_directives,
-			style_directives,
-			context,
-			node,
-			node_id,
-			attributes_id
-		);
-
-		// If value binding exists, that one takes care of calling $.init_select
-		if (node.name === 'select' && !bindings.has('value')) {
-			context.state.init.push(
-				b.stmt(b.call('$.init_select', node_id, b.thunk(b.member(attributes_id, 'value'))))
-			);
-
-			context.state.update.push(
-				b.if(
-					b.binary('in', b.literal('value'), attributes_id),
-					b.block([
-						// This ensures a one-way street to the DOM in case it's <select {value}>
-						// and not <select bind:value>. We need it in addition to $.init_select
-						// because the select value is not reflected as an attribute, so the
-						// mutation observer wouldn't notice.
-						b.stmt(b.call('$.select_option', node_id, b.member(attributes_id, 'value')))
-					])
-				)
-			);
-		}
+		build_attribute_effect(attributes, class_directives, style_directives, context, node, node_id);
 	} else {
 		/** If true, needs `__value` for inputs */
 		const needs_special_value_handling =
@@ -290,7 +260,8 @@ export function RegularElement(node, context) {
 				const { value, has_state } = build_attribute_value(
 					attribute.value,
 					context,
-					(value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value)
+					(value, metadata) =>
+						metadata.has_call ? get_expression_id(context.state.expressions, value) : value
 				);
 
 				const update = build_element_attribute_update(node, node_id, name, value, attributes);
@@ -482,10 +453,11 @@ function setup_select_synchronization(value_binding, context) {
 
 /**
  * @param {AST.ClassDirective[]} class_directives
+ * @param {Expression[]} expressions
  * @param {ComponentContext} context
  * @return {ObjectExpression | Identifier}
  */
-export function build_class_directives_object(class_directives, context) {
+export function build_class_directives_object(class_directives, expressions, context) {
 	let properties = [];
 	let has_call_or_state = false;
 
@@ -497,15 +469,16 @@ export function build_class_directives_object(class_directives, context) {
 
 	const directives = b.object(properties);
 
-	return has_call_or_state ? get_expression_id(context.state, directives) : directives;
+	return has_call_or_state ? get_expression_id(expressions, directives) : directives;
 }
 
 /**
  * @param {AST.StyleDirective[]} style_directives
+ * @param {Expression[]} expressions
  * @param {ComponentContext} context
  * @return {ObjectExpression | ArrayExpression}}
  */
-export function build_style_directives_object(style_directives, context) {
+export function build_style_directives_object(style_directives, expressions, context) {
 	let normal_properties = [];
 	let important_properties = [];
 
@@ -514,7 +487,7 @@ export function build_style_directives_object(style_directives, context) {
 			directive.value === true
 				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
 				: build_attribute_value(directive.value, context, (value, metadata) =>
-						metadata.has_call ? get_expression_id(context.state, value) : value
+						metadata.has_call ? get_expression_id(expressions, value) : value
 					).value;
 		const property = b.init(directive.name, expression);
 
@@ -653,7 +626,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 			? // if is a select with value we will also invoke `init_select` which need a reference before the template effect so we memoize separately
 				is_select_with_value
 				? memoize_expression(state, value)
-				: get_expression_id(state, value)
+				: get_expression_id(state.expressions, value)
 			: value
 	);
 
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 7e97035e00..7381553dbe 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
@@ -5,7 +5,11 @@ import { dev, locator } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { determine_namespace_for_children } from '../../utils.js';
-import { build_attribute_value, build_set_attributes, build_set_class } from './shared/element.js';
+import {
+	build_attribute_value,
+	build_attribute_effect,
+	build_set_class
+} from './shared/element.js';
 import { build_render_statement } from './shared/utils.js';
 
 /**
@@ -80,18 +84,15 @@ export function SvelteElement(node, context) {
 	) {
 		build_set_class(node, element_id, attributes[0], class_directives, inner_context, false);
 	} else if (attributes.length) {
-		const attributes_id = b.id(context.state.scope.generate('attributes'));
-
 		// Always use spread because we don't know whether the element is a custom element or not,
 		// therefore we need to do the "how to set an attribute" logic at runtime.
-		build_set_attributes(
+		build_attribute_effect(
 			attributes,
 			class_directives,
 			style_directives,
 			inner_context,
 			node,
-			element_id,
-			attributes_id
+			element_id
 		);
 	}
 
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 a093a0bf4a..67de25b770 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
@@ -16,28 +16,30 @@ import { build_template_chunk, get_expression_id } from './utils.js';
  * @param {ComponentContext} context
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {Identifier} element_id
- * @param {Identifier} attributes_id
  */
-export function build_set_attributes(
+export function build_attribute_effect(
 	attributes,
 	class_directives,
 	style_directives,
 	context,
 	element,
-	element_id,
-	attributes_id
+	element_id
 ) {
-	let is_dynamic = false;
-
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
 
+	/** @type {Expression[]} */
+	const expressions = [];
+
+	/** @param {Expression} value */
+	function memoize(value) {
+		return b.id(`$${expressions.push(value) - 1}`);
+	}
+
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
-			const { value, has_state } = build_attribute_value(
-				attribute.value,
-				context,
-				(value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value)
+			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
+				metadata.has_call ? memoize(value) : value
 			);
 
 			if (
@@ -51,16 +53,11 @@ export function build_set_attributes(
 			} else {
 				values.push(b.init(attribute.name, value));
 			}
-
-			is_dynamic ||= has_state;
 		} else {
-			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
-			is_dynamic = true;
-
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
 			if (attribute.metadata.expression.has_call) {
-				value = get_expression_id(context.state, value);
+				value = memoize(value);
 			}
 
 			values.push(b.spread(value));
@@ -72,12 +69,9 @@ export function build_set_attributes(
 			b.prop(
 				'init',
 				b.array([b.id('$.CLASS')]),
-				build_class_directives_object(class_directives, context)
+				build_class_directives_object(class_directives, expressions, context)
 			)
 		);
-
-		is_dynamic ||=
-			class_directives.find((directive) => directive.metadata.expression.has_state) !== null;
 	}
 
 	if (style_directives.length) {
@@ -85,31 +79,28 @@ export function build_set_attributes(
 			b.prop(
 				'init',
 				b.array([b.id('$.STYLE')]),
-				build_style_directives_object(style_directives, context)
+				build_style_directives_object(style_directives, expressions, context)
 			)
 		);
-
-		is_dynamic ||= style_directives.some((directive) => directive.metadata.expression.has_state);
 	}
 
-	const call = b.call(
-		'$.set_attributes',
-		element_id,
-		is_dynamic ? attributes_id : b.null,
-		b.object(values),
-		element.metadata.scoped &&
-			context.state.analysis.css.hash !== '' &&
-			b.literal(context.state.analysis.css.hash),
-		is_ignored(element, 'hydration_attribute_changed') && b.true
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.attribute_effect',
+				element_id,
+				b.arrow(
+					expressions.map((_, i) => b.id(`$${i}`)),
+					b.object(values)
+				),
+				expressions.length > 0 && b.array(expressions.map((expression) => b.thunk(expression))),
+				element.metadata.scoped &&
+					context.state.analysis.css.hash !== '' &&
+					b.literal(context.state.analysis.css.hash),
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		)
 	);
-
-	if (is_dynamic) {
-		context.state.init.push(b.let(attributes_id));
-		const update = b.stmt(b.assignment('=', attributes_id, call));
-		context.state.update.push(update);
-	} else {
-		context.state.init.push(b.stmt(call));
-	}
 }
 
 /**
@@ -167,7 +158,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 			value = b.call('$.clsx', value);
 		}
 
-		return metadata.has_call ? get_expression_id(context.state, value) : value;
+		return metadata.has_call ? get_expression_id(context.state.expressions, value) : value;
 	});
 
 	/** @type {Identifier | undefined} */
@@ -180,7 +171,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 	let next;
 
 	if (class_directives.length) {
-		next = build_class_directives_object(class_directives, context);
+		next = build_class_directives_object(class_directives, context.state.expressions, context);
 		has_state ||= class_directives.some((d) => d.metadata.expression.has_state);
 
 		if (has_state) {
@@ -235,7 +226,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 ? get_expression_id(context.state, value) : value
+		metadata.has_call ? get_expression_id(context.state.expressions, value) : value
 	);
 
 	/** @type {Identifier | undefined} */
@@ -248,7 +239,7 @@ export function build_set_style(node_id, attribute, style_directives, context) {
 	let next;
 
 	if (style_directives.length) {
-		next = build_style_directives_object(style_directives, context);
+		next = build_style_directives_object(style_directives, context.state.expressions, context);
 		has_state ||= style_directives.some((d) => d.metadata.expression.has_state);
 
 		if (has_state) {
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 80b472ac37..ebf88e878f 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
@@ -21,12 +21,12 @@ export function memoize_expression(state, value) {
 }
 
 /**
- *
- * @param {ComponentClientTransformState} state
+ * Pushes `value` into `expressions` and returns a new id
+ * @param {Expression[]} expressions
  * @param {Expression} value
  */
-export function get_expression_id(state, value) {
-	return b.id(`$${state.expressions.push(value) - 1}`);
+export function get_expression_id(expressions, value) {
+	return b.id(`$${expressions.push(value) - 1}`);
 }
 
 /**
@@ -40,7 +40,8 @@ export function build_template_chunk(
 	values,
 	visit,
 	state,
-	memoize = (value, metadata) => (metadata.has_call ? get_expression_id(state, value) : value)
+	memoize = (value, metadata) =>
+		metadata.has_call ? get_expression_id(state.expressions, value) : value
 ) {
 	/** @type {Expression[]} */
 	const expressions = [];
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 3d1acbd31c..6cfc123cc2 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,3 +1,4 @@
+/** @import { Effect } from '#client' */
 import { DEV } from 'esm-env';
 import { hydrating, set_hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
@@ -10,6 +11,7 @@ import { is_capture_event, is_delegated, normalize_attribute } from '../../../..
 import {
 	active_effect,
 	active_reaction,
+	get,
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
@@ -18,6 +20,9 @@ import { clsx } from '../../../shared/attributes.js';
 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 } from '../../reactivity/effects.js';
+import { derived } from '../../reactivity/deriveds.js';
+import { init_select, select_option } from './bindings/select.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -447,13 +452,68 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
 		set_hydrating(true);
 	}
 
-	for (let symbol of Object.getOwnPropertySymbols(next)) {
-		if (symbol.description === ATTACHMENT_KEY) {
-			attach(element, () => next[symbol]);
+	return current;
+}
+
+/**
+ * @param {Element & ElementCSSInlineStyle} element
+ * @param {(...expressions: any) => Record<string | symbol, any>} fn
+ * @param {Array<() => any>} thunks
+ * @param {string} [css_hash]
+ * @param {boolean} [skip_warning]
+ */
+export function attribute_effect(
+	element,
+	fn,
+	thunks = [],
+	css_hash,
+	skip_warning = false,
+	d = derived
+) {
+	const deriveds = thunks.map(d);
+
+	/** @type {Record<string | symbol, any> | undefined} */
+	var prev = undefined;
+
+	/** @type {Record<symbol, Effect>} */
+	var effects = {};
+
+	var is_select = element.nodeName === 'SELECT';
+	var inited = false;
+
+	block(() => {
+		var next = fn(...deriveds.map(get));
+
+		set_attributes(element, prev, next, css_hash, skip_warning);
+
+		if (inited && is_select) {
+			select_option(/** @type {HTMLSelectElement} */ (element), next.value, false);
+		}
+
+		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];
+
+			if (symbol.description === ATTACHMENT_KEY && (!prev || n !== prev[symbol])) {
+				if (effects[symbol]) destroy_effect(effects[symbol]);
+				effects[symbol] = branch(() => attach(element, () => n));
+			}
+		}
+
+		prev = next;
+	});
+
+	if (is_select) {
+		init_select(
+			/** @type {HTMLSelectElement} */ (element),
+			() => /** @type {Record<string | symbol, any>} */ (prev).value
+		);
 	}
 
-	return current;
+	inited = true;
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 20f95af5ec..e3263c65af 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -25,10 +25,14 @@ export function select_option(select, value, mounting) {
 		}
 
 		// Otherwise, update the selection
-		return select_options(select, value);
+		for (var option of select.options) {
+			option.selected = value.includes(get_option_value(option));
+		}
+
+		return;
 	}
 
-	for (var option of select.options) {
+	for (option of select.options) {
 		var option_value = get_option_value(option);
 		if (is(option_value, value)) {
 			option.selected = true;
@@ -136,16 +140,6 @@ export function bind_select_value(select, get, set = get) {
 	init_select(select);
 }
 
-/**
- * @param {HTMLSelectElement} select
- * @param {unknown[]} value
- */
-function select_options(select, value) {
-	for (var option of select.options) {
-		option.selected = value.includes(get_option_value(option));
-	}
-}
-
 /** @param {HTMLOptionElement} option */
 function get_option_value(option) {
 	// __value only exists if the <option> has a value attribute
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 62cb3e6513..71c06d7b1b 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -28,6 +28,7 @@ export {
 	remove_input_defaults,
 	set_attribute,
 	set_attributes,
+	attribute_effect,
 	set_custom_element_data,
 	set_xlink_attribute,
 	set_value,
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte
new file mode 100644
index 0000000000..d5f4e94358
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<p {...props}>hello</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js
new file mode 100644
index 0000000000..5d37252358
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up']);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up', 'down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte
new file mode 100644
index 0000000000..aef9da6dd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component from './Component.svelte';
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>{count}</button>
+
+{#if count < 2}
+	<Component
+		data-count={count}
+		{@attach () => {
+			console.log('up');
+			return () => console.log('down');
+		}}
+	/>
+{/if}

From b2fa84702d95939f039358b76de219a3578e4753 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 May 2025 17:37:04 -0400
Subject: [PATCH 092/259] Version Packages (#16020)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/purple-dryers-mate.md | 5 -----
 .changeset/soft-jobs-sip.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/purple-dryers-mate.md
 delete mode 100644 .changeset/soft-jobs-sip.md

diff --git a/.changeset/purple-dryers-mate.md b/.changeset/purple-dryers-mate.md
deleted file mode 100644
index fc8e96d6d4..0000000000
--- a/.changeset/purple-dryers-mate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: handle derived destructured iterators
diff --git a/.changeset/soft-jobs-sip.md b/.changeset/soft-jobs-sip.md
deleted file mode 100644
index fcee398d45..0000000000
--- a/.changeset/soft-jobs-sip.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid rerunning attachments when unrelated spread attributes change
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 72ab89eb4a..09533fc28d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.5
+
+### Patch Changes
+
+- fix: handle derived destructured iterators ([#16015](https://github.com/sveltejs/svelte/pull/16015))
+
+- fix: avoid rerunning attachments when unrelated spread attributes change ([#15961](https://github.com/sveltejs/svelte/pull/15961))
+
 ## 5.33.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index a63771a0b4..07bbbe237b 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.33.4",
+  "version": "5.33.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c2af8bbf43..697949b848 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.33.4';
+export const VERSION = '5.33.5';
 export const PUBLIC_VERSION = '5';

From 40e0e338835950a9b8fb407b59d9342edf3b8ddf Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 29 May 2025 00:33:40 +0200
Subject: [PATCH 093/259] feat: ssr select value (#16017)

* feat: ssr select value

* fix: adjust test output

* minor aesthetic OCD tweak - the normalizer takes care of this

* fix: handle implicit values

* chore: implicit value test

* fix: deal with spreads on select AND option

* fix: spreading

* chore: add test for cross component

* fix: test

* chore: add failing test

* fix: runtime valueless option selection

* tweak

* fix: snapshots

* fix (options are erroneously being marked as valueless

* simplify a bit (pass callback direct to valueless_option)

* tweak

* tweak ("execute the child" is the sort of thing that gets you visited by the FBI)

* lint

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/new-turkeys-exercise.md            |   5 +
 .../server/visitors/RegularElement.js         | 100 ++++++++++++++++--
 .../server/visitors/shared/element.js         |  85 ++++++++++++---
 packages/svelte/src/internal/server/index.js  |  27 +++++
 .../svelte/src/internal/server/payload.js     |   1 +
 .../samples/binding-circular/_config.js       |   4 +-
 .../samples/binding-indirect/_config.js       |  31 +++++-
 .../_config.js                                |  20 +++-
 .../binding-select-in-each-block/_config.js   |  22 +++-
 .../_config.js                                |   2 +-
 .../binding-select-initial-value/_config.js   |  20 +++-
 .../samples/binding-select/_config.js         |  22 +++-
 .../samples/select-in-each/_config.js         |  23 ++--
 .../samples/bindings-form-reset/main.svelte   |   8 +-
 .../select-value-component/Option.svelte      |   5 +
 .../select-value-component/_expected.html     |   1 +
 .../select-value-component/main.svelte        |   8 ++
 .../_expected.html                            |   1 +
 .../main.svelte                               |  13 +++
 .../_expected.html                            |   1 +
 .../select-value-implicit-value/main.svelte   |   5 +
 .../samples/select-value/_expected.html       |   1 +
 .../samples/select-value/main.svelte          |   5 +
 .../_expected/server/index.svelte.js          |   2 +-
 24 files changed, 351 insertions(+), 61 deletions(-)
 create mode 100644 .changeset/new-turkeys-exercise.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte

diff --git a/.changeset/new-turkeys-exercise.md b/.changeset/new-turkeys-exercise.md
new file mode 100644
index 0000000000..d00a5dd832
--- /dev/null
+++ b/.changeset/new-turkeys-exercise.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly mark <option> elements as selected during SSR
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 2928ca9173..65959938ac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -1,3 +1,4 @@
+/** @import { Expression } from 'estree' */
 /** @import { Location } from 'locate-character' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
@@ -6,8 +7,8 @@ import { is_void } from '../../../../../utils.js';
 import { dev, locator } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_element_attributes } from './shared/element.js';
-import { process_children, build_template } from './shared/utils.js';
+import { build_element_attributes, build_spread_object } from './shared/element.js';
+import { process_children, build_template, build_attribute_value } from './shared/utils.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -71,21 +72,96 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (body === null) {
-		process_children(trimmed, { ...context, state });
-	} else {
-		let id = body;
+	let select_with_value = false;
 
-		if (body.type !== 'Identifier') {
-			id = b.id(state.scope.generate('$$body'));
-			state.template.push(b.const(id, body));
+	if (node.name === 'select') {
+		const value = node.attributes.find(
+			(attribute) =>
+				(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+				attribute.name === 'value'
+		);
+		if (node.attributes.some((attribute) => attribute.type === 'SpreadAttribute')) {
+			select_with_value = true;
+			state.template.push(
+				b.stmt(
+					b.assignment(
+						'=',
+						b.id('$$payload.select_value'),
+						b.member(
+							build_spread_object(
+								node,
+								node.attributes.filter(
+									(attribute) =>
+										attribute.type === 'Attribute' ||
+										attribute.type === 'BindDirective' ||
+										attribute.type === 'SpreadAttribute'
+								),
+								context
+							),
+							'value',
+							false,
+							true
+						)
+					)
+				)
+			);
+		} else if (value) {
+			select_with_value = true;
+			const left = b.id('$$payload.select_value');
+			if (value.type === 'Attribute') {
+				state.template.push(
+					b.stmt(b.assignment('=', left, build_attribute_value(value.value, context)))
+				);
+			} else if (value.type === 'BindDirective') {
+				state.template.push(
+					b.stmt(
+						b.assignment(
+							'=',
+							left,
+							value.expression.type === 'SequenceExpression'
+								? b.call(value.expression.expressions[0])
+								: value.expression
+						)
+					)
+				);
+			}
 		}
+	}
+
+	if (
+		node.name === 'option' &&
+		!node.attributes.some(
+			(attribute) =>
+				attribute.type === 'SpreadAttribute' ||
+				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+					attribute.name === 'value')
+		)
+	) {
+		const inner_state = { ...state, template: [], init: [] };
+		process_children(trimmed, { ...context, state: inner_state });
 
+		state.template.push(
+			b.stmt(
+				b.call(
+					'$.valueless_option',
+					b.id('$$payload'),
+					b.thunk(b.block([...inner_state.init, ...build_template(inner_state.template)]))
+				)
+			)
+		);
+	} else if (body !== null) {
 		// if this is a `<textarea>` value or a contenteditable binding, we only add
 		// the body if the attribute/binding is falsy
 		const inner_state = { ...state, template: [], init: [] };
 		process_children(trimmed, { ...context, state: inner_state });
 
+		let id = /** @type {Expression} */ (body);
+
+		if (body.type !== 'Identifier') {
+			id = b.id(state.scope.generate('$$body'));
+			state.template.push(b.const(id, body));
+		}
+
 		// Use the body expression as the body if it's truthy, otherwise use the inner template
 		state.template.push(
 			b.if(
@@ -94,6 +170,12 @@ export function RegularElement(node, context) {
 				b.block([...inner_state.init, ...build_template(inner_state.template)])
 			)
 		);
+	} else {
+		process_children(trimmed, { ...context, state });
+	}
+
+	if (select_with_value) {
+		state.template.push(b.stmt(b.assignment('=', b.id('$$payload.select_value'), b.void0)));
 	}
 
 	if (!node_is_void) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index b0bcb8fd6f..7207564ef9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -202,6 +202,29 @@ export function build_element_attributes(node, context) {
 
 	if (has_spread) {
 		build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
+		if (node.name === 'option') {
+			context.state.template.push(
+				b.call(
+					'$.maybe_selected',
+					b.id('$$payload'),
+					b.member(
+						build_spread_object(
+							node,
+							node.attributes.filter(
+								(attribute) =>
+									attribute.type === 'Attribute' ||
+									attribute.type === 'BindDirective' ||
+									attribute.type === 'SpreadAttribute'
+							),
+							context
+						),
+						'value',
+						false,
+						true
+					)
+				)
+			);
+		}
 	} else {
 		const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
 
@@ -236,6 +259,16 @@ export function build_element_attributes(node, context) {
 					);
 				}
 
+				if (node.name === 'option' && name === 'value') {
+					context.state.template.push(
+						b.call(
+							'$.maybe_selected',
+							b.id('$$payload'),
+							literal_value != null ? b.literal(/** @type {any} */ (literal_value)) : b.void0
+						)
+					);
+				}
+
 				continue;
 			}
 
@@ -260,6 +293,10 @@ export function build_element_attributes(node, context) {
 					b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
 				);
 			}
+
+			if (name === 'value' && node.name === 'option') {
+				context.state.template.push(b.call('$.maybe_selected', b.id('$$payload'), value));
+			}
 		}
 	}
 
@@ -274,7 +311,7 @@ export function build_element_attributes(node, context) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {AST.Attribute} attribute
+ * @param {AST.Attribute | AST.BindDirective} attribute
  */
 function get_attribute_name(element, attribute) {
 	let name = attribute.name;
@@ -286,6 +323,36 @@ function get_attribute_name(element, attribute) {
 	return name;
 }
 
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {ComponentContext} context
+ */
+export function build_spread_object(element, attributes, context) {
+	return b.object(
+		attributes.map((attribute) => {
+			if (attribute.type === 'Attribute') {
+				const name = get_attribute_name(element, attribute);
+				const value = build_attribute_value(
+					attribute.value,
+					context,
+					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
+				);
+				return b.prop('init', b.key(name), value);
+			} else if (attribute.type === 'BindDirective') {
+				const name = get_attribute_name(element, attribute);
+				const value =
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(attribute.expression.expressions[0])
+						: /** @type {Expression} */ (context.visit(attribute.expression));
+				return b.prop('init', b.key(name), value);
+			}
+
+			return b.spread(/** @type {Expression} */ (context.visit(attribute)));
+		})
+	);
+}
+
 /**
  *
  * @param {AST.RegularElement | AST.SvelteElement} element
@@ -336,21 +403,7 @@ function build_element_spread_attributes(
 		flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
 	}
 
-	const object = b.object(
-		attributes.map((attribute) => {
-			if (attribute.type === 'Attribute') {
-				const name = get_attribute_name(element, attribute);
-				const value = build_attribute_value(
-					attribute.value,
-					context,
-					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
-				);
-				return b.prop('init', b.key(name), value);
-			}
-
-			return b.spread(/** @type {Expression} */ (context.visit(attribute)));
-		})
-	);
+	const object = build_spread_object(element, attributes, context);
 
 	const css_hash =
 		element.metadata.scoped && context.state.analysis.css.hash
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 85c059e09b..2ca85fff44 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -535,3 +535,30 @@ export function derived(fn) {
 		return updated_value;
 	};
 }
+
+/**
+ *
+ * @param {Payload} payload
+ * @param {*} value
+ */
+export function maybe_selected(payload, value) {
+	return value === payload.select_value ? ' selected' : '';
+}
+
+/**
+ * @param {Payload} payload
+ * @param {() => void} children
+ * @returns {void}
+ */
+export function valueless_option(payload, children) {
+	var i = payload.out.length;
+
+	children();
+
+	var body = payload.out.slice(i);
+
+	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;
+	}
+}
diff --git a/packages/svelte/src/internal/server/payload.js b/packages/svelte/src/internal/server/payload.js
index 8df5787ba4..a31120ae16 100644
--- a/packages/svelte/src/internal/server/payload.js
+++ b/packages/svelte/src/internal/server/payload.js
@@ -18,6 +18,7 @@ export class Payload {
 	css = new Set();
 	out = '';
 	uid = () => '';
+	select_value = undefined;
 
 	head = new HeadPayload();
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
index 29ddac16ad..9d47f86aad 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
@@ -1,9 +1,9 @@
 import { test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<select>
-			<option value="[object Object]">wheeee</option>
+			<option selected value="[object Object]">wheeee</option>
 		</select>
 	`
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
index d0b46cffa6..6e1feb70fa 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
@@ -17,9 +17,9 @@ export default test({
 		return { tasks, selected: tasks[0] };
 	},
 
-	html: `
+	ssrHtml: `
 		<select>
-			<option value='[object Object]'>put your left leg in</option>
+			<option selected value='[object Object]'>put your left leg in</option>
 			<option value='[object Object]'>your left leg out</option>
 			<option value='[object Object]'>in, out, in, out</option>
 			<option value='[object Object]'>shake it all about</option>
@@ -36,7 +36,28 @@ export default test({
 		<p>shake it all about</p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	async test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
+				<option value='[object Object]'>your left leg out</option>
+				<option value='[object Object]'>in, out, in, out</option>
+				<option value='[object Object]'>shake it all about</option>
+			</select>
+
+			<label>
+				<input type='checkbox'> put your left leg in
+			</label>
+
+			<h2>Pending tasks</h2>
+			<p>put your left leg in</p>
+			<p>your left leg out</p>
+			<p>in, out, in, out</p>
+			<p>shake it all about</p>
+		`
+		);
 		const input = target.querySelector('input');
 		const select = target.querySelector('select');
 		const options = target.querySelectorAll('option');
@@ -57,7 +78,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value='[object Object]'>put your left leg in</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
 				<option value='[object Object]'>your left leg out</option>
 				<option value='[object Object]'>in, out, in, out</option>
 				<option value='[object Object]'>shake it all about</option>
@@ -94,7 +115,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value='[object Object]'>put your left leg in</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
 				<option value='[object Object]'>your left leg out</option>
 				<option value='[object Object]'>in, out, in, out</option>
 				<option value='[object Object]'>shake it all about</option>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
index 1fea6c08f4..dd88c10c71 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
@@ -6,17 +6,29 @@ export default test({
 		return { values: [1, 2, 3], foo: 2 };
 	},
 
-	html: `
+	ssrHtml: `
 		<select>
 			<option value="1">1</option>
-			<option value="2">2</option>
+			<option selected value="2">2</option>
 			<option value="3">3</option>
 		</select>
 
 		<p>foo: 2</p>
 	`,
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option value="1">1</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value="2">2</option>
+				<option value="3">3</option>
+			</select>
+
+			<p>foo: 2</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const options = [...target.querySelectorAll('option')];
@@ -36,7 +48,7 @@ export default test({
 			`
 			<select>
 				<option value="1">1</option>
-				<option value="2">2</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value="2">2</option>
 				<option value="3">3</option>
 			</select>
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
index 9c442aa329..033ae99bbc 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
@@ -1,15 +1,15 @@
 import { test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<select>
-			<option value='hullo'>Hullo</option>
+			<option selected value='hullo'>Hullo</option>
 			<option value='world'>World</option>
 		</select>
 
 		<select>
 			<option value='hullo'>Hullo</option>
-			<option value='world'>World</option>
+			<option selected value='world'>World</option>
 		</select>
 	`,
 
@@ -19,7 +19,21 @@ export default test({
 		};
 	},
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='hullo'>Hullo</option>
+				<option value='world'>World</option>
+			</select>
+
+			<select>
+				<option value='hullo'>Hullo</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='world'>World</option>
+			</select>
+		`
+		);
 		const selects = [...target.querySelectorAll('select')];
 
 		const change = new window.Event('change');
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
index cb5d26b913..3cc4992dcb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
@@ -8,7 +8,7 @@ export default test({
 
 		<select>
 			<option>a</option>
-			<option selected="">b</option>
+			<option selected>b</option>
 			<option>c</option>
 		</select>
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
index 176a1e0dfc..c19272fce0 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
@@ -1,12 +1,12 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<p>selected: b</p>
 
 		<select>
 			<option>a</option>
-			<option>b</option>
+			<option selected>b</option>
 			<option>c</option>
 		</select>
 
@@ -17,7 +17,21 @@ export default test({
 		return { selected: 'b' };
 	},
 
-	test({ assert, target }) {
+	test({ assert, target, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>selected: b</p>
+
+			<select>
+				<option>a</option>
+				<option${variant === 'hydrate' ? ' selected' : ''}>b</option>
+				<option>c</option>
+			</select>
+
+			<p>selected: b</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const options = [...target.querySelectorAll('option')];
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
index 5577ec2393..2507f5fc83 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
@@ -2,11 +2,11 @@ import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<p>selected: one</p>
 
 		<select>
-			<option>one</option>
+			<option selected>one</option>
 			<option>two</option>
 			<option>three</option>
 		</select>
@@ -18,7 +18,21 @@ export default test({
 		return { selected: 'one' };
 	},
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>selected: one</p>
+
+			<select>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
+				<option>two</option>
+				<option>three</option>
+			</select>
+
+			<p>selected: one</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 
@@ -40,7 +54,7 @@ export default test({
 			<p>selected: two</p>
 
 			<select>
-				<option>one</option>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
 				<option>two</option>
 				<option>three</option>
 			</select>
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
index 335c46d53d..4c94ea1e01 100644
--- a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
@@ -2,27 +2,28 @@ import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
-		<select>
-			<option value="a">A</option>
-			<option value="b">B</option>
-		</select>
-		selected: a
-	`,
-
-	test({ assert, target }) {
+	test({ assert, target, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
+				<option value="b">B</option>
+			</select>
+			selected: a
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const event = new window.Event('change');
 		select.value = 'b';
 		select.dispatchEvent(event);
 		flushSync();
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
 			<select>
-				<option value="a">A</option>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
 				<option value="b">B</option>
 			</select>
 			selected: b
diff --git a/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte b/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
index ff13af85c8..0886efd59c 100644
--- a/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
@@ -3,8 +3,14 @@
 	let checkbox = $state(true);
 	let radio_group = $state('a');
 	let checkbox_group = $state(['a']);
-	let select = $state('b');
+	// this will be ssrd
+	let select = $state('a');
 	let textarea = $state('textarea');
+
+	$effect(()=>{
+		// changing the value of `select` on mount
+		select = 'b';
+	})
 </script>
 
 <p>{JSON.stringify({ text, checkbox, radio_group, checkbox_group, select, textarea })}</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte
new file mode 100644
index 0000000000..a17413bd8d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<option {...props}>{@render props.children?.()}</option>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte
new file mode 100644
index 0000000000..e545833759
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Option from './Option.svelte';
+</script>
+<select value="dog">
+	<Option value="">--Please choose an option--</Option>
+	<Option value="dog">Dog</Option>
+	<Option value="cat">Cat</Option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte
new file mode 100644
index 0000000000..45ae9aefe0
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte
@@ -0,0 +1,13 @@
+<select value="dog">
+	<option>
+		{@render option("--Please choose an option--")}
+	</option>
+	<option>
+		{@render option("dog")}
+	</option>
+	<option>
+		{@render option("cat")}
+	</option>
+</select>
+
+{#snippet option(val)}{val}{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte
new file mode 100644
index 0000000000..2308a4e7a9
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte
@@ -0,0 +1,5 @@
+<select value="dog">
+	<option>--Please choose an option--</option>
+	<option>dog</option>
+	<option>cat</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte
new file mode 100644
index 0000000000..811d752d4e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte
@@ -0,0 +1,5 @@
+<select value="dog">
+	<option value="">--Please choose an option--</option>
+	<option value="dog">Dog</option>
+	<option value="cat">Cat</option>
+</select>
\ 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 a587c05e2c..0532ec5aa9 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">a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`;
+	$$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>`;
 }
\ No newline at end of file

From d4af83a0582e3e022c3eb8376e23638d30ac0b44 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 28 May 2025 18:33:55 -0400
Subject: [PATCH 094/259] chore: use dev: false in sandbox (#16022)

---
 playgrounds/sandbox/run.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 93d01a4b10..2029937f52 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -73,7 +73,7 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		}
 
 		const compiled = compile(source, {
-			dev: true,
+			dev: false,
 			filename: input,
 			generate,
 			runes: argv.values.runes
@@ -90,7 +90,7 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		// generate with fragments: 'tree'
 		if (generate === 'client') {
 			const compiled = compile(source, {
-				dev: true,
+				dev: false,
 				filename: input,
 				generate,
 				runes: argv.values.runes,
@@ -114,7 +114,7 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		const source = fs.readFileSync(input, 'utf-8');
 
 		const compiled = compileModule(source, {
-			dev: true,
+			dev: false,
 			filename: input,
 			generate
 		});

From 6351288c7b5c6f39aaca37cc522b742b3279d5a6 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 29 May 2025 00:57:41 +0200
Subject: [PATCH 095/259] fix: falsy attachments on components (#16021)

* fix: falsy attachments on components

* skip the noop if known to be a function

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/fuzzy-taxis-hunt.md                |  5 +++++
 .../client/visitors/shared/component.js       | 10 ++++++++-
 packages/svelte/src/compiler/phases/scope.js  | 21 ++++++++++++++++++-
 .../attachment-component-falsy/Child.svelte   |  5 +++++
 .../attachment-component-falsy/_config.js     |  5 +++++
 .../attachment-component-falsy/main.svelte    | 13 ++++++++++++
 6 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fuzzy-taxis-hunt.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte

diff --git a/.changeset/fuzzy-taxis-hunt.md b/.changeset/fuzzy-taxis-hunt.md
new file mode 100644
index 0000000000..5deda96ce5
--- /dev/null
+++ b/.changeset/fuzzy-taxis-hunt.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: falsy attachments on components
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 57402c2b4a..ff98d6d378 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
@@ -258,10 +258,18 @@ export function build_component(node, component_name, context, anchor = context.
 				}
 			}
 		} else if (attribute.type === 'AttachTag') {
+			const evaluated = context.state.scope.evaluate(attribute.expression);
+
 			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
 
 			if (attribute.metadata.expression.has_state) {
-				expression = b.arrow([b.id('$$node')], b.call(expression, b.id('$$node')));
+				expression = b.arrow(
+					[b.id('$$node')],
+					b.call(
+						evaluated.is_function ? expression : b.logical('||', expression, b.id('$.noop')),
+						b.id('$$node')
+					)
+				);
 			}
 
 			push_prop(b.prop('get', b.call('$.attachment'), expression, true));
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 75a26d487b..b4cdb6b446 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -20,6 +20,7 @@ const UNKNOWN = Symbol('unknown');
 /** Includes `BigInt` */
 export const NUMBER = Symbol('number');
 export const STRING = Symbol('string');
+export const FUNCTION = Symbol('string');
 
 /** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
 const globals = {
@@ -200,6 +201,13 @@ class Evaluation {
 	 */
 	is_number = true;
 
+	/**
+	 * True if the value is known to be a function
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_function = true;
+
 	/**
 	 * @readonly
 	 * @type {any}
@@ -209,7 +217,7 @@ class Evaluation {
 	/**
 	 *
 	 * @param {Scope} scope
-	 * @param {Expression} expression
+	 * @param {Expression | FunctionDeclaration} expression
 	 * @param {Set<any>} values
 	 */
 	constructor(scope, expression, values) {
@@ -500,6 +508,13 @@ class Evaluation {
 				break;
 			}
 
+			case 'ArrowFunctionExpression':
+			case 'FunctionExpression':
+			case 'FunctionDeclaration': {
+				this.values.add(FUNCTION);
+				break;
+			}
+
 			default: {
 				this.values.add(UNKNOWN);
 			}
@@ -516,6 +531,10 @@ class Evaluation {
 				this.is_number = false;
 			}
 
+			if (value !== FUNCTION) {
+				this.is_function = false;
+			}
+
 			if (value == null || value === UNKNOWN) {
 				this.is_defined = false;
 			}
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js
new file mode 100644
index 0000000000..27f013d6d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte
new file mode 100644
index 0000000000..993bcdd6a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	function attachment(){
+		console.log("up");
+	}
+
+	let enabled = $state(false);
+</script>
+
+<button onclick={() => enabled = !enabled}></button>
+
+<Child {@attach enabled && attachment} />

From 7433cb98e50e245779830617af03bda72f73eddb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 May 2025 22:22:34 -0400
Subject: [PATCH 096/259] Version Packages (#16023)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fuzzy-taxis-hunt.md     | 5 -----
 .changeset/new-turkeys-exercise.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/fuzzy-taxis-hunt.md
 delete mode 100644 .changeset/new-turkeys-exercise.md

diff --git a/.changeset/fuzzy-taxis-hunt.md b/.changeset/fuzzy-taxis-hunt.md
deleted file mode 100644
index 5deda96ce5..0000000000
--- a/.changeset/fuzzy-taxis-hunt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: falsy attachments on components
diff --git a/.changeset/new-turkeys-exercise.md b/.changeset/new-turkeys-exercise.md
deleted file mode 100644
index d00a5dd832..0000000000
--- a/.changeset/new-turkeys-exercise.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly mark <option> elements as selected during SSR
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 09533fc28d..7502eeb58e 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.6
+
+### Patch Changes
+
+- fix: falsy attachments on components ([#16021](https://github.com/sveltejs/svelte/pull/16021))
+
+- fix: correctly mark <option> elements as selected during SSR ([#16017](https://github.com/sveltejs/svelte/pull/16017))
+
 ## 5.33.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 07bbbe237b..2f103b690a 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.33.5",
+  "version": "5.33.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 697949b848..b5e01d3462 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.33.5';
+export const VERSION = '5.33.6';
 export const PUBLIC_VERSION = '5';

From f969628394fccc71e18c2c4538d54011e4a2de4a Mon Sep 17 00:00:00 2001
From: Lol Mettam <satch_man@mac.com>
Date: Thu, 29 May 2025 13:05:34 +0100
Subject: [PATCH 097/259] Update 04-svelte-body.md (#16027)

Add missing 'at' in sentence three of description.
---
 documentation/docs/05-special-elements/04-svelte-body.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/05-special-elements/04-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md
index d6536b0b74..c6828b98f7 100644
--- a/documentation/docs/05-special-elements/04-svelte-body.md
+++ b/documentation/docs/05-special-elements/04-svelte-body.md
@@ -8,7 +8,7 @@ title: <svelte:body>
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.
 
-As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
+As with `<svelte:window>` and `<svelte:document>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```svelte
 <svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />

From c53ef5ce60df6ffa130df53d29d161780ba75d11 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Thu, 29 May 2025 20:36:26 +0800
Subject: [PATCH 098/259] ci: use Node.js 24 (#16024)

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

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cf73a1f6cb..c0e1d36760 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,6 +28,8 @@ jobs:
             os: ubuntu-latest
           - node-version: 22
             os: ubuntu-latest
+          - node-version: 24
+            os: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4

From 3ea2dbc6a1eebb0bc7692893a134e636f2ab4e99 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 29 May 2025 14:44:05 +0200
Subject: [PATCH 099/259] fix: `bind:value` to select with stores (#16028)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/honest-crabs-try.md                         |  5 +++++
 .../3-transform/server/visitors/RegularElement.js      |  4 ++--
 .../samples/select-value-bind-store/_expected.html     |  1 +
 .../samples/select-value-bind-store/main.svelte        | 10 ++++++++++
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/honest-crabs-try.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte

diff --git a/.changeset/honest-crabs-try.md b/.changeset/honest-crabs-try.md
new file mode 100644
index 0000000000..d8020ecea9
--- /dev/null
+++ b/.changeset/honest-crabs-try.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: `bind:value` to select with stores
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 65959938ac..0779195e2e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -119,8 +119,8 @@ export function RegularElement(node, context) {
 							'=',
 							left,
 							value.expression.type === 'SequenceExpression'
-								? b.call(value.expression.expressions[0])
-								: value.expression
+								? /** @type {Expression} */ (context.visit(b.call(value.expression.expressions[0])))
+								: /** @type {Expression} */ (context.visit(value.expression))
 						)
 					)
 				);
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte
new file mode 100644
index 0000000000..cb3b554762
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { writable } from 'svelte/store';
+	const value = writable('dog');
+</script>
+
+<select bind:value={$value}>
+	<option value="">--Please choose an option--</option>
+	<option value="dog">Dog</option>
+	<option value="cat">Cat</option>
+</select>
\ No newline at end of file

From 0d67ff486532512129992050dffd4c1b774655dd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 14:47:38 +0200
Subject: [PATCH 100/259] Version Packages (#16029)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/honest-crabs-try.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/honest-crabs-try.md

diff --git a/.changeset/honest-crabs-try.md b/.changeset/honest-crabs-try.md
deleted file mode 100644
index d8020ecea9..0000000000
--- a/.changeset/honest-crabs-try.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: `bind:value` to select with stores
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7502eeb58e..e2bc73ea51 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.7
+
+### Patch Changes
+
+- fix: `bind:value` to select with stores ([#16028](https://github.com/sveltejs/svelte/pull/16028))
+
 ## 5.33.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2f103b690a..497a3de132 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.33.6",
+  "version": "5.33.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b5e01d3462..d36bf40db3 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.33.6';
+export const VERSION = '5.33.7';
 export const PUBLIC_VERSION = '5';

From c9ce4f439f4e8a2380aef3bd309f07335172317d Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 29 May 2025 16:48:30 +0200
Subject: [PATCH 101/259] fix: only `select_option` if `'value'` is in `next`
 (#16032)

---
 .changeset/smooth-weeks-hide.md               |  5 +++++
 .../client/dom/elements/attributes.js         |  2 +-
 .../spread-element-input-select/_config.js    | 20 +++++++++++++++++++
 .../spread-element-input-select/main.svelte   | 10 ++++++++++
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/smooth-weeks-hide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte

diff --git a/.changeset/smooth-weeks-hide.md b/.changeset/smooth-weeks-hide.md
new file mode 100644
index 0000000000..dc982561eb
--- /dev/null
+++ b/.changeset/smooth-weeks-hide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only `select_option` if `'value'` is in `next`
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 6cfc123cc2..fcce0b444f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -486,7 +486,7 @@ export function attribute_effect(
 
 		set_attributes(element, prev, next, css_hash, skip_warning);
 
-		if (inited && is_select) {
+		if (inited && is_select && 'value' in next) {
 			select_option(/** @type {HTMLSelectElement} */ (element), next.value, false);
 		}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
new file mode 100644
index 0000000000..71802ba6de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const select = target.querySelector('select');
+		ok(select);
+		const [option1, option2] = select;
+
+		assert.ok(option1.selected);
+		assert.ok(!option2.selected);
+
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.ok(option1.selected);
+		assert.ok(!option2.selected);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
new file mode 100644
index 0000000000..fb1f7ddf96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let { value = "Hello", spread = { disabled: false } } = $props();
+</script>
+
+<button onclick={()=> spread = { disabled: false }}></button>
+
+<select bind:value {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>

From 7a8cb378a154dfc6ab6f9ff319022c68c4ed2b68 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 10:51:17 -0400
Subject: [PATCH 102/259] Version Packages (#16033)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/smooth-weeks-hide.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/smooth-weeks-hide.md

diff --git a/.changeset/smooth-weeks-hide.md b/.changeset/smooth-weeks-hide.md
deleted file mode 100644
index dc982561eb..0000000000
--- a/.changeset/smooth-weeks-hide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: only `select_option` if `'value'` is in `next`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e2bc73ea51..76781a6e21 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.8
+
+### Patch Changes
+
+- fix: only `select_option` if `'value'` is in `next` ([#16032](https://github.com/sveltejs/svelte/pull/16032))
+
 ## 5.33.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 497a3de132..6cc425ed33 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.33.7",
+  "version": "5.33.8",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index d36bf40db3..c1bee97e6b 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.33.7';
+export const VERSION = '5.33.8';
 export const PUBLIC_VERSION = '5';

From 23d42fb8aca62455c401a917815744d083e0096e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 29 May 2025 11:18:51 -0400
Subject: [PATCH 103/259] fix: put expressions in effects unless known to be
 static (#15792)

* fix: put expressions in effects unless known to be static

* update test

* handle cycles

* fix
---
 .changeset/tender-apples-repair.md               |  5 +++++
 .../phases/2-analyze/visitors/Identifier.js      |  5 ++++-
 packages/svelte/src/compiler/phases/scope.js     | 16 +++++++++++++++-
 packages/svelte/src/compiler/types/index.d.ts    |  3 ++-
 .../samples/reactive-identifier/_config.js       | 13 +++++++++++++
 .../samples/reactive-identifier/main.svelte      | 13 +++++++++++++
 .../_expected/client/main.svelte.js              | 10 +++++++---
 7 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/tender-apples-repair.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte

diff --git a/.changeset/tender-apples-repair.md b/.changeset/tender-apples-repair.md
new file mode 100644
index 0000000000..0e600e6624
--- /dev/null
+++ b/.changeset/tender-apples-repair.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: put expressions in effects unless known to be static
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 89a81127c1..abf70769c0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -90,7 +90,10 @@ export function Identifier(node, context) {
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
-			context.state.expression.has_state ||= binding.kind !== 'normal';
+			context.state.expression.has_state ||=
+				binding.kind !== 'static' &&
+				!binding.is_function() &&
+				!context.state.scope.evaluate(node).is_known;
 		}
 
 		if (
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index b4cdb6b446..8b4967a82b 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -221,6 +221,8 @@ class Evaluation {
 	 * @param {Set<any>} values
 	 */
 	constructor(scope, expression, values) {
+		current_evaluations.set(expression, this);
+
 		this.values = values;
 
 		switch (expression.type) {
@@ -543,6 +545,8 @@ class Evaluation {
 		if (this.values.size > 1 || typeof this.value === 'symbol') {
 			this.is_known = false;
 		}
+
+		current_evaluations.delete(expression);
 	}
 }
 
@@ -734,10 +738,20 @@ export class Scope {
 	 * @param {Set<any>} [values]
 	 */
 	evaluate(expression, values = new Set()) {
+		const current = current_evaluations.get(expression);
+		if (current) return current;
+
 		return new Evaluation(this, expression, values);
 	}
 }
 
+/**
+ * Track which expressions are currently being evaluated — this allows
+ * us to prevent cyclical evaluations without passing the map around
+ * @type {Map<Expression | FunctionDeclaration, Evaluation>}
+ */
+const current_evaluations = new Map();
+
 /** @type {Record<BinaryOperator, (left: any, right: any) => any>} */
 const binary = {
 	'!=': (left, right) => left != right,
@@ -1139,7 +1153,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				const is_keyed =
 					node.key &&
 					(node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index);
-				scope.declare(b.id(node.index), is_keyed ? 'template' : 'normal', 'const', node);
+				scope.declare(b.id(node.index), is_keyed ? 'template' : 'static', 'const', node);
 			}
 			if (node.key) visit(node.key, { scope });
 
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 0da036242b..fdd6024726 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -265,7 +265,8 @@ export type BindingKind =
 	| 'snippet' // A snippet parameter
 	| 'store_sub' // A $store value
 	| 'legacy_reactive' // A `$:` declaration
-	| 'template'; // A binding declared in the template, e.g. in an `await` block or `const` tag
+	| 'template' // A binding declared in the template, e.g. in an `await` block or `const` tag
+	| 'static'; // A binding whose value is known to be static (i.e. each index)
 
 export type DeclarationKind =
 	| 'var'
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js
new file mode 100644
index 0000000000..de59e8c7c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from '../../../../src/index-client';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte
new file mode 100644
index 0000000000..aee0b15e1b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	let object = {
+		toString() {
+			return count;
+		}
+	};
+</script>
+
+<button onclick={() => count += 1}>
+	{object}
+</button>
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index 3a13fa7e15..28bb01fb18 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -9,10 +9,16 @@ export default function Main($$anchor) {
 	let y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
+
+	$.set_attribute(div, 'foobar', x);
+
 	var svg = $.sibling(div, 2);
+
+	$.set_attribute(svg, 'viewBox', x);
+
 	var custom_element = $.sibling(svg, 2);
 
-	$.template_effect(() => $.set_custom_element_data(custom_element, 'fooBar', x));
+	$.set_custom_element_data(custom_element, 'fooBar', x);
 
 	var div_1 = $.sibling(custom_element, 2);
 	var svg_1 = $.sibling(div_1, 2);
@@ -22,8 +28,6 @@ export default function Main($$anchor) {
 
 	$.template_effect(
 		($0, $1) => {
-			$.set_attribute(div, 'foobar', x);
-			$.set_attribute(svg, 'viewBox', x);
 			$.set_attribute(div_1, 'foobar', $0);
 			$.set_attribute(svg_1, 'viewBox', $1);
 		},

From b5b814c7de467a196fad8eda38513287374f77fe Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 12:24:35 -0400
Subject: [PATCH 104/259] Version Packages (#16034)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/tender-apples-repair.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/tender-apples-repair.md

diff --git a/.changeset/tender-apples-repair.md b/.changeset/tender-apples-repair.md
deleted file mode 100644
index 0e600e6624..0000000000
--- a/.changeset/tender-apples-repair.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: put expressions in effects unless known to be static
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 76781a6e21..70e9eb8198 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.9
+
+### Patch Changes
+
+- fix: put expressions in effects unless known to be static ([#15792](https://github.com/sveltejs/svelte/pull/15792))
+
 ## 5.33.8
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6cc425ed33..9f93133afe 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.33.8",
+  "version": "5.33.9",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c1bee97e6b..791919f991 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.33.8';
+export const VERSION = '5.33.9';
 export const PUBLIC_VERSION = '5';

From ff72dd27bce84f9321e2000d41033b8e5cccad9c Mon Sep 17 00:00:00 2001
From: Ray Thurn Void <53383860+raythurnvoid@users.noreply.github.com>
Date: Thu, 29 May 2025 20:03:50 +0100
Subject: [PATCH 105/259] fix: transitions might render animated elements
 without animation styles applied for the duration of some rendering frames
 when they start (#16035)

* fix: transitions might render animated elements without animation styles applied for the duration of some rendering frames when they starts

* add changeset

* Apply suggestions from code review

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/tiny-poems-scream.md                           | 5 +++++
 .../src/internal/client/dom/elements/transitions.js       | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tiny-poems-scream.md

diff --git a/.changeset/tiny-poems-scream.md b/.changeset/tiny-poems-scream.md
new file mode 100644
index 0000000000..813972867a
--- /dev/null
+++ b/.changeset/tiny-poems-scream.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use `fill: 'forwards'` on transition animations to prevent flicker
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index cc895cbccb..38100e982c 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -381,9 +381,15 @@ function animate(element, options, counterpart, t2, on_finish) {
 	// create a dummy animation that lasts as long as the delay (but with whatever devtools
 	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
 	// the CSS keyframes aren't created until the DOM is updated
-	var animation = element.animate(keyframes, { duration: delay });
+	//
+	// fill forwards to prevent the element from rendering without styles applied
+	// see https://github.com/sveltejs/svelte/issues/14732
+	var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
 
 	animation.onfinish = () => {
+		// remove dummy animation from the stack to prevent conflict with main animation
+		animation.cancel();
+
 		// for bidirectional transitions, we start from the current position,
 		// rather than doing a full intro/outro
 		var t1 = counterpart?.t() ?? 1 - t2;

From 2f90dd8246c380a2b8ff9c665d43fce470886af4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 15:15:02 -0400
Subject: [PATCH 106/259] Version Packages (#16037)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/tiny-poems-scream.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/tiny-poems-scream.md

diff --git a/.changeset/tiny-poems-scream.md b/.changeset/tiny-poems-scream.md
deleted file mode 100644
index 813972867a..0000000000
--- a/.changeset/tiny-poems-scream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use `fill: 'forwards'` on transition animations to prevent flicker
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 70e9eb8198..da35e7cd68 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.10
+
+### Patch Changes
+
+- fix: use `fill: 'forwards'` on transition animations to prevent flicker ([#16035](https://github.com/sveltejs/svelte/pull/16035))
+
 ## 5.33.9
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9f93133afe..d1cf6c428b 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.33.9",
+  "version": "5.33.10",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 791919f991..eef48b0cbb 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.33.9';
+export const VERSION = '5.33.10';
 export const PUBLIC_VERSION = '5';

From 54990f2329d3049be79284aa22947f6f85b1f90b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 30 May 2025 14:56:39 -0400
Subject: [PATCH 107/259] fix: use local mutable sources for props in legacy
 mode in case they are indirectly invalidated (#16038)

* fix: use local mutable sources for props in legacy mode in case they are indirectly invalidated

* rename test

* add another test

* fix

* more conservative

* Update .changeset/orange-tips-pull.md

* skip work in runes mode

* remove comment

* revert whitespace change
---
 .changeset/orange-tips-pull.md                |   5 +
 .../phases/2-analyze/visitors/EachBlock.js    |  47 +++++-
 .../3-transform/client/visitors/EachBlock.js  | 108 +++++-------
 packages/svelte/src/compiler/phases/scope.js  |   4 +-
 .../svelte/src/compiler/types/template.d.ts   |   5 +
 .../src/internal/client/reactivity/props.js   |   2 +-
 .../_config.js                                | 156 ++++++++++++++++++
 .../main.svelte                               |  25 +++
 .../_config.js                                |  22 ---
 .../main.svelte                               |   9 +-
 10 files changed, 288 insertions(+), 95 deletions(-)
 create mode 100644 .changeset/orange-tips-pull.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte

diff --git a/.changeset/orange-tips-pull.md b/.changeset/orange-tips-pull.md
new file mode 100644
index 0000000000..4d474dafaf
--- /dev/null
+++ b/.changeset/orange-tips-pull.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat transitive dependencies of each blocks as mutable in legacy mode if item is mutated
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index bd6c936f99..0ebfa563cf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -1,7 +1,8 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Binding } from '#compiler' */
 /** @import { Context } from '../types' */
 /** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
+import { extract_identifiers } from '../../../utils/ast.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
@@ -38,5 +39,49 @@ export function EachBlock(node, context) {
 	if (node.key) context.visit(node.key);
 	if (node.fallback) context.visit(node.fallback);
 
+	if (!context.state.analysis.runes) {
+		let mutated =
+			!!node.context &&
+			extract_identifiers(node.context).some((id) => {
+				const binding = context.state.scope.get(id.name);
+				return !!binding?.mutated;
+			});
+
+		// collect transitive dependencies...
+		for (const binding of node.metadata.expression.dependencies) {
+			collect_transitive_dependencies(binding, node.metadata.transitive_deps);
+		}
+
+		// ...and ensure they are marked as state, so they can be turned
+		// into mutable sources and invalidated
+		if (mutated) {
+			for (const binding of node.metadata.transitive_deps) {
+				if (
+					binding.kind === 'normal' &&
+					(binding.declaration_kind === 'const' ||
+						binding.declaration_kind === 'let' ||
+						binding.declaration_kind === 'var')
+				) {
+					binding.kind = 'state';
+				}
+			}
+		}
+	}
+
 	mark_subtree_dynamic(context.path);
 }
+
+/**
+ * @param {Binding} binding
+ * @param {Set<Binding>} bindings
+ * @returns {void}
+ */
+function collect_transitive_dependencies(binding, bindings) {
+	bindings.add(binding);
+
+	if (binding.kind === 'legacy_reactive') {
+		for (const dep of binding.legacy_dependencies) {
+			collect_transitive_dependencies(dep, bindings);
+		}
+	}
+}
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 5a944b6db3..6c651464f1 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
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Identifier, Pattern, SequenceExpression, Statement } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
@@ -106,16 +106,6 @@ export function EachBlock(node, context) {
 		}
 	}
 
-	// Legacy mode: find the parent each blocks which contain the arrays to invalidate
-	const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
-		const array = /** @type {Expression} */ (context.visit(block.expression));
-		const transitive_dependencies = build_transitive_dependencies(
-			block.metadata.expression.dependencies,
-			context
-		);
-		return [array, ...transitive_dependencies];
-	});
-
 	/** @type {Identifier | null} */
 	let collection_id = null;
 
@@ -129,18 +119,6 @@ export function EachBlock(node, context) {
 		}
 	}
 
-	if (collection_id) {
-		indirect_dependencies.push(b.call(collection_id));
-	} else {
-		indirect_dependencies.push(collection);
-
-		const transitive_dependencies = build_transitive_dependencies(
-			each_node_meta.expression.dependencies,
-			context
-		);
-		indirect_dependencies.push(...transitive_dependencies);
-	}
-
 	const child_state = {
 		...context.state,
 		transform: { ...context.state.transform },
@@ -181,19 +159,51 @@ export function EachBlock(node, context) {
 	/** @type {Statement[]} */
 	const declarations = [];
 
-	const invalidate = b.call(
-		'$.invalidate_inner_signals',
-		b.thunk(b.sequence(indirect_dependencies))
-	);
-
 	const invalidate_store = store_to_invalidate
 		? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
 		: undefined;
 
 	/** @type {Expression[]} */
 	const sequence = [];
-	if (!context.state.analysis.runes) sequence.push(invalidate);
-	if (invalidate_store) sequence.push(invalidate_store);
+
+	if (!context.state.analysis.runes) {
+		/** @type {Set<Identifier>} */
+		const transitive_deps = new Set();
+
+		if (collection_id) {
+			transitive_deps.add(collection_id);
+			child_state.transform[collection_id.name] = { read: b.call };
+		} else {
+			for (const binding of each_node_meta.transitive_deps) {
+				transitive_deps.add(binding.node);
+			}
+		}
+
+		for (const block of collect_parent_each_blocks(context)) {
+			for (const binding of block.metadata.transitive_deps) {
+				transitive_deps.add(binding.node);
+			}
+		}
+
+		if (transitive_deps.size > 0) {
+			const invalidate = b.call(
+				'$.invalidate_inner_signals',
+				b.thunk(
+					b.sequence(
+						[...transitive_deps].map(
+							(node) => /** @type {Expression} */ (context.visit({ ...node }, child_state))
+						)
+					)
+				)
+			);
+
+			sequence.push(invalidate);
+		}
+	}
+
+	if (invalidate_store) {
+		sequence.push(invalidate_store);
+	}
 
 	if (node.context?.type === 'Identifier') {
 		const binding = /** @type {Binding} */ (context.state.scope.get(node.context.name));
@@ -329,41 +339,3 @@ export function EachBlock(node, context) {
 function collect_parent_each_blocks(context) {
 	return /** @type {AST.EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
 }
-
-/**
- * @param {Set<Binding>} references
- * @param {ComponentContext} context
- */
-function build_transitive_dependencies(references, context) {
-	/** @type {Set<Binding>} */
-	const dependencies = new Set();
-
-	for (const ref of references) {
-		const deps = collect_transitive_dependencies(ref);
-		for (const dep of deps) {
-			dependencies.add(dep);
-		}
-	}
-
-	return [...dependencies].map((dep) => build_getter({ ...dep.node }, context.state));
-}
-
-/**
- * @param {Binding} binding
- * @param {Set<Binding>} seen
- * @returns {Binding[]}
- */
-function collect_transitive_dependencies(binding, seen = new Set()) {
-	if (binding.kind !== 'legacy_reactive') return [];
-
-	for (const dep of binding.legacy_dependencies) {
-		if (!seen.has(dep)) {
-			seen.add(dep);
-			for (const transitive_dep of collect_transitive_dependencies(dep, seen)) {
-				seen.add(transitive_dep);
-			}
-		}
-	}
-
-	return [...seen];
-}
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 8b4967a82b..8a2cc39ba7 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1169,7 +1169,9 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				contains_group_binding: false,
 				index: scope.root.unique('$$index'),
 				declarations: scope.declarations,
-				is_controlled: false
+				is_controlled: false,
+				// filled in during analysis
+				transitive_deps: new Set()
 			};
 		},
 
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index b51c9e9a8d..cefc7fa7a2 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -432,6 +432,11 @@ export namespace AST {
 			 * This saves us from creating an extra comment and insertion being faster.
 			 */
 			is_controlled: boolean;
+			/**
+			 * Bindings this each block transitively depends on. In legacy mode, we
+			 * invalidate these bindings when mutations happen to each block items
+			 */
+			transitive_deps: Set<Binding>;
 		};
 	}
 
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 77c58720e1..f3111361c0 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -335,7 +335,7 @@ export function prop(props, key, flags, fallback) {
 	}
 
 	// easy mode — prop is never written to
-	if ((flags & PROPS_IS_UPDATED) === 0) {
+	if ((flags & PROPS_IS_UPDATED) === 0 && runes) {
 		return getter;
 	}
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js
new file mode 100644
index 0000000000..d20e4a1e88
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js
@@ -0,0 +1,156 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return {
+			items: [
+				{ done: false, text: 'one' },
+				{ done: true, text: 'two' },
+				{ done: false, text: 'three' }
+			]
+		};
+	},
+
+	html: `
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox">
+			<input type="text" value=one><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox" checked="">
+			<input type="text" value=two><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text" value=three><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		/**
+		 * @param {number} i
+		 * @param {string} text
+		 */
+		function set_text(i, text) {
+			const input = /** @type {HTMLInputElement} */ (
+				target.querySelectorAll('input[type="text"]')[i]
+			);
+			input.value = text;
+			input.dispatchEvent(new window.Event('input'));
+		}
+
+		/**
+		 * @param {number} i
+		 * @param {boolean} done
+		 */
+		function set_done(i, done) {
+			const input = /** @type {HTMLInputElement} */ (
+				target.querySelectorAll('input[type="checkbox"]')[i]
+			);
+			input.checked = done;
+			input.dispatchEvent(new window.Event('change'));
+		}
+
+		component.filter = 'remaining';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>three</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:three</p>
+		`
+		);
+
+		set_text(1, 'four');
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:four</p>
+		`
+		);
+
+		assert.deepEqual(component.items, [
+			{ done: false, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		set_done(0, true);
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`
+		);
+
+		assert.deepEqual(component.items, [
+			{ done: true, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		component.filter = 'done';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>two</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte
new file mode 100644
index 0000000000..7e10199530
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let items;
+	export let filter = 'all';
+
+	$: done = items.filter(item => item.done);
+	$: remaining = items.filter(item => !item.done);
+
+	$: filtered = (
+		filter === 'all' ? items :
+		filter === 'done' ? done :
+		remaining
+	);
+
+	$: summary = items.map(i => `${i.done ? 'done' : 'remaining'}:${i.text}`).join(' / ');
+</script>
+
+{#each filtered as item}
+	<div>
+		<input type="checkbox" bind:checked={item.done}>
+		<input type="text" bind:value={item.text}>
+		<p>{item.text}</p>
+	</div>
+{/each}
+
+<p>{summary}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
index d20e4a1e88..c8019e11e9 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
@@ -2,16 +2,6 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	get props() {
-		return {
-			items: [
-				{ done: false, text: 'one' },
-				{ done: true, text: 'two' },
-				{ done: false, text: 'three' }
-			]
-		};
-	},
-
 	html: `
 		<div>
 			<input type="checkbox">
@@ -108,12 +98,6 @@ export default test({
 		`
 		);
 
-		assert.deepEqual(component.items, [
-			{ done: false, text: 'one' },
-			{ done: true, text: 'two' },
-			{ done: false, text: 'four' }
-		]);
-
 		set_done(0, true);
 		flushSync();
 
@@ -129,12 +113,6 @@ export default test({
 		`
 		);
 
-		assert.deepEqual(component.items, [
-			{ done: true, text: 'one' },
-			{ done: true, text: 'two' },
-			{ done: false, text: 'four' }
-		]);
-
 		component.filter = 'done';
 
 		assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
index 7e10199530..9ca7832a72 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
@@ -1,5 +1,10 @@
 <script>
-	export let items;
+	let items = [
+		{ done: false, text: 'one' },
+		{ done: true, text: 'two' },
+		{ done: false, text: 'three' }
+	];
+
 	export let filter = 'all';
 
 	$: done = items.filter(item => item.done);
@@ -22,4 +27,4 @@
 	</div>
 {/each}
 
-<p>{summary}</p>
\ No newline at end of file
+<p>{summary}</p>

From e5d0cd2eb47834bf7584a250e749a564c73a8f1d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 15:38:49 -0400
Subject: [PATCH 108/259] Version Packages (#16045)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/orange-tips-pull.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/orange-tips-pull.md

diff --git a/.changeset/orange-tips-pull.md b/.changeset/orange-tips-pull.md
deleted file mode 100644
index 4d474dafaf..0000000000
--- a/.changeset/orange-tips-pull.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: treat transitive dependencies of each blocks as mutable in legacy mode if item is mutated
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index da35e7cd68..4623f64766 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.11
+
+### Patch Changes
+
+- fix: treat transitive dependencies of each blocks as mutable in legacy mode if item is mutated ([#16038](https://github.com/sveltejs/svelte/pull/16038))
+
 ## 5.33.10
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index d1cf6c428b..2ee065730c 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.33.10",
+  "version": "5.33.11",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index eef48b0cbb..4cbf73e7f9 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.33.10';
+export const VERSION = '5.33.11';
 export const PUBLIC_VERSION = '5';

From b5fcd112c60012276e3416e65feae3ac16bfdaf1 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sun, 1 Jun 2025 00:53:48 -0700
Subject: [PATCH 109/259] fix: correctly transform reassignments to class
 fields in SSR mode (#16051)

* fix: correctly transform reassignments to class fields in SSR mode

* add test, fix more stuff

* fix
---
 .changeset/rude-drinks-relate.md              |  5 ++++
 .../server/visitors/AssignmentExpression.js   | 13 +++++++++--
 .../_expected/client/index.svelte.js          | 23 ++++++++++++++++++-
 .../_expected/server/index.svelte.js          | 23 ++++++++++++++++++-
 .../index.svelte                              |  7 ++++--
 5 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rude-drinks-relate.md

diff --git a/.changeset/rude-drinks-relate.md b/.changeset/rude-drinks-relate.md
new file mode 100644
index 0000000000..d0eab6ba11
--- /dev/null
+++ b/.changeset/rude-drinks-relate.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly transform reassignments to class fields in SSR mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 466682fb82..49a284d12b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -24,7 +24,12 @@ export function AssignmentExpression(node, context) {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
-	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+	if (
+		context.state.analysis.runes &&
+		left.type === 'MemberExpression' &&
+		left.object.type === 'ThisExpression' &&
+		!left.computed
+	) {
 		const name = get_name(left.property);
 		const field = name && context.state.state_fields.get(name);
 
@@ -44,7 +49,11 @@ function build_assignment(operator, left, right, context) {
 					/** @type {Expression} */ (context.visit(right))
 				);
 			}
-		} else if (field && (field.type === '$derived' || field.type === '$derived.by')) {
+		} else if (
+			field &&
+			(field.type === '$derived' || field.type === '$derived.by') &&
+			left.property.type === 'PrivateIdentifier'
+		) {
 			let value = /** @type {Expression} */ (
 				context.visit(build_assignment_value(operator, left, right))
 			);
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
index 2133974176..c9725d6718 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
@@ -5,7 +5,7 @@ export default function Class_state_field_constructor_assignment($$anchor, $$pro
 	$.push($$props, true);
 
 	class Foo {
-		#a = $.state();
+		#a = $.state(0);
 
 		get a() {
 			return $.get(this.#a);
@@ -16,10 +16,31 @@ export default function Class_state_field_constructor_assignment($$anchor, $$pro
 		}
 
 		#b = $.state();
+		#foo = $.derived(() => ({ bar: this.a * 2 }));
+
+		get foo() {
+			return $.get(this.#foo);
+		}
+
+		set foo(value) {
+			$.set(this.#foo, value);
+		}
+
+		#bar = $.derived(() => ({ baz: this.foo }));
+
+		get bar() {
+			return $.get(this.#bar);
+		}
+
+		set bar(value) {
+			$.set(this.#bar, value);
+		}
 
 		constructor() {
 			this.a = 1;
 			$.set(this.#b, 2);
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
index 2a115a4983..abfc264fea 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
@@ -4,12 +4,33 @@ export default function Class_state_field_constructor_assignment($$payload, $$pr
 	$.push();
 
 	class Foo {
-		a;
+		a = 0;
 		#b;
+		#foo = $.derived(() => ({ bar: this.a * 2 }));
+
+		get foo() {
+			return this.#foo();
+		}
+
+		set foo($$value) {
+			return this.#foo($$value);
+		}
+
+		#bar = $.derived(() => ({ baz: this.foo }));
+
+		get bar() {
+			return this.#bar();
+		}
+
+		set bar($$value) {
+			return this.#bar($$value);
+		}
 
 		constructor() {
 			this.a = 1;
 			this.#b = 2;
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
index a3ff5917e7..127cfd4d2a 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
@@ -1,11 +1,14 @@
 <script>
 	class Foo {
-		a = $state();
+		a = $state(0);
 		#b = $state();
-
+		foo = $derived({ bar: this.a * 2 });
+		bar = $derived({ baz: this.foo });
 		constructor() {
 			this.a = 1;
 			this.#b = 2;
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 </script>

From a65a4c09a81c27a3919c6fb5e6668d7229f2a9a8 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sun, 1 Jun 2025 13:49:02 -0700
Subject: [PATCH 110/259] remove site scripts (#16055)

---
 package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/package.json b/package.json
index 70e85438f0..62581782d7 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,10 @@
   },
   "scripts": {
     "build": "pnpm -r --filter=./packages/* build",
-    "build:sites": "pnpm -r --filter=./sites/* build",
-    "preview-site": "npm run build --prefix sites/svelte-5-preview",
     "check": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r check",
     "lint": "eslint && prettier --check .",
     "format": "prettier --write .",
     "test": "vitest run",
-    "test-output": "vitest run --coverage --reporter=json --outputFile=sites/svelte-5-preview/src/routes/status/results.json",
     "changeset:version": "changeset version && pnpm -r generate:version && git add --all",
     "changeset:publish": "changeset publish",
     "bench": "node --allow-natives-syntax ./benchmarking/run.js",

From 817509142301247c6d17eb0ff888d9a69f784f8a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Jun 2025 16:49:52 -0400
Subject: [PATCH 111/259] Version Packages (#16054)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/rude-drinks-relate.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/rude-drinks-relate.md

diff --git a/.changeset/rude-drinks-relate.md b/.changeset/rude-drinks-relate.md
deleted file mode 100644
index d0eab6ba11..0000000000
--- a/.changeset/rude-drinks-relate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly transform reassignments to class fields in SSR mode
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4623f64766..a7c08cc1aa 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.12
+
+### Patch Changes
+
+- fix: correctly transform reassignments to class fields in SSR mode ([#16051](https://github.com/sveltejs/svelte/pull/16051))
+
 ## 5.33.11
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2ee065730c..866a6ecc61 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.33.11",
+  "version": "5.33.12",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4cbf73e7f9..555ca54282 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.33.11';
+export const VERSION = '5.33.12';
 export const PUBLIC_VERSION = '5';

From 6a3066519cdcab1559dda6fc12707b48c5f5e823 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sun, 1 Jun 2025 17:27:52 -0700
Subject: [PATCH 112/259] fix: avoid recursion error in `EachBlock` visitor
 (#16058)

---
 .changeset/proud-pumpkins-train.md                           | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/EachBlock.js      | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/proud-pumpkins-train.md

diff --git a/.changeset/proud-pumpkins-train.md b/.changeset/proud-pumpkins-train.md
new file mode 100644
index 0000000000..11d09aeb80
--- /dev/null
+++ b/.changeset/proud-pumpkins-train.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid recursion error in `EachBlock` visitor
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index 0ebfa563cf..e6a83921b1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -77,6 +77,9 @@ export function EachBlock(node, context) {
  * @returns {void}
  */
 function collect_transitive_dependencies(binding, bindings) {
+	if (bindings.has(binding)) {
+		return;
+	}
 	bindings.add(binding);
 
 	if (binding.kind === 'legacy_reactive') {

From 194f5b34fd87153e6e93e3cd00a4de24a4f53861 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Jun 2025 20:42:52 -0400
Subject: [PATCH 113/259] Version Packages (#16059)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/proud-pumpkins-train.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/proud-pumpkins-train.md

diff --git a/.changeset/proud-pumpkins-train.md b/.changeset/proud-pumpkins-train.md
deleted file mode 100644
index 11d09aeb80..0000000000
--- a/.changeset/proud-pumpkins-train.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid recursion error in `EachBlock` visitor
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a7c08cc1aa..6cbd262955 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.13
+
+### Patch Changes
+
+- fix: avoid recursion error in `EachBlock` visitor ([#16058](https://github.com/sveltejs/svelte/pull/16058))
+
 ## 5.33.12
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 866a6ecc61..b9c087d774 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.33.12",
+  "version": "5.33.13",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 555ca54282..b876086212 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.33.12';
+export const VERSION = '5.33.13';
 export const PUBLIC_VERSION = '5';

From 77a5d68675beb2ad1d5b8c2813b1b1d6b61ad92e Mon Sep 17 00:00:00 2001
From: Jack Goodall <jack.goodall@epitech.eu>
Date: Mon, 2 Jun 2025 14:37:09 +0200
Subject: [PATCH 114/259] also mention that `:has` is scoped in the migration
 guide (#16061)

---
 documentation/docs/07-misc/07-v5-migration-guide.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index e502b7921a..c24c1febee 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -833,9 +833,9 @@ Svelte 5 is more strict about the HTML structure and will throw a compiler error
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### :is(...) and :where(...) are scoped
+### :is(...), :has(...), and :where(...) are scoped
 
-Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+Previously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.
 
 When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:
 

From b851b54e9de3239730284a42df992d0c22a61c22 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Jun 2025 09:08:49 -0400
Subject: [PATCH 115/259] Revert "feat: enable TS autocomplete for Svelte HTML
 element definitions" (#16063)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "feat: enable TS autocomplete for Svelte HTML element definitions (#15…"

This reverts commit 6928aaca06d8bcc37d17ce715ed04221d6eccc72.

* changeset
---
 .changeset/dry-squids-compete.md | 5 +++++
 packages/svelte/elements.d.ts    | 2 +-
 packages/svelte/svelte-html.d.ts | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/dry-squids-compete.md

diff --git a/.changeset/dry-squids-compete.md b/.changeset/dry-squids-compete.md
new file mode 100644
index 0000000000..a5edf0eae5
--- /dev/null
+++ b/.changeset/dry-squids-compete.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+Revert "feat: enable TS autocomplete for Svelte HTML element definitions"
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 0172b0e358..7a7889ad9e 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -2066,7 +2066,7 @@ export interface SvelteHTMLElements {
 		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
 	};
 
-	[name: string & {}]: { [name: string]: any };
+	[name: string]: { [name: string]: any };
 }
 
 export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 6e37cc93e8..5042eaa4b8 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -8,7 +8,7 @@ import * as svelteElements from './elements.js';
 /**
  * @internal do not use
  */
-type HTMLProps<Property extends keyof svelteElements.SvelteHTMLElements, Override> = Omit<
+type HTMLProps<Property extends string, Override> = Omit<
 	import('./elements.js').SvelteHTMLElements[Property],
 	keyof Override
 > &
@@ -250,7 +250,7 @@ declare global {
 			};
 			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
 
-			[name: string & {}]: { [name: string]: any };
+			[name: string]: { [name: string]: any };
 		}
 	}
 }

From 1b5f6af276ae1a8987968442625f10a38dbf57ba Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 2 Jun 2025 21:56:39 +0200
Subject: [PATCH 116/259] fix: destructuring snippet arguments (#16068)

---
 .changeset/violet-actors-teach.md                        | 5 +++++
 .../phases/3-transform/client/visitors/SnippetBlock.js   | 2 +-
 .../samples/snippet-destructure-array/_config.js         | 5 +++++
 .../samples/snippet-destructure-array/main.svelte        | 9 +++++++++
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-actors-teach.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte

diff --git a/.changeset/violet-actors-teach.md b/.changeset/violet-actors-teach.md
new file mode 100644
index 0000000000..39ce420226
--- /dev/null
+++ b/.changeset/violet-actors-teach.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: destructuring snippet arguments
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 0809aa21b2..203cf62b37 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -57,7 +57,7 @@ export function SnippetBlock(node, context) {
 		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
-			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression)));
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js
new file mode 100644
index 0000000000..05e3e80b79
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `a`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte
new file mode 100644
index 0000000000..37345c629e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let array = $state(['a', 'b', 'c'])
+</script>
+
+{#snippet content([x])}
+	{x}
+{/snippet}
+
+{@render content(array)}
\ No newline at end of file

From 335779dcf5f246fdfa01571fe5c03b8c9a09c351 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Jun 2025 16:00:25 -0400
Subject: [PATCH 117/259] Version Packages (#16064)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/dry-squids-compete.md  | 5 -----
 .changeset/violet-actors-teach.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/dry-squids-compete.md
 delete mode 100644 .changeset/violet-actors-teach.md

diff --git a/.changeset/dry-squids-compete.md b/.changeset/dry-squids-compete.md
deleted file mode 100644
index a5edf0eae5..0000000000
--- a/.changeset/dry-squids-compete.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"svelte": patch
----
-
-Revert "feat: enable TS autocomplete for Svelte HTML element definitions"
diff --git a/.changeset/violet-actors-teach.md b/.changeset/violet-actors-teach.md
deleted file mode 100644
index 39ce420226..0000000000
--- a/.changeset/violet-actors-teach.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: destructuring snippet arguments
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 6cbd262955..c272603457 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.14
+
+### Patch Changes
+
+- Revert "feat: enable TS autocomplete for Svelte HTML element definitions" ([#16063](https://github.com/sveltejs/svelte/pull/16063))
+
+- fix: destructuring snippet arguments ([#16068](https://github.com/sveltejs/svelte/pull/16068))
+
 ## 5.33.13
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b9c087d774..f097ef870c 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.33.13",
+  "version": "5.33.14",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b876086212..4c6213b0ce 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.33.13';
+export const VERSION = '5.33.14';
 export const PUBLIC_VERSION = '5';

From 2342c8719a555783ba1d6d4a6dec3c2e30dca8e0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Jun 2025 16:31:03 -0400
Subject: [PATCH 118/259] chore: better HTML normalization test helper (#16056)

* chore: better HTML normalization test helper

* simplify

* simplify/robustify

* tweak

* Apply suggestions from code review

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

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 packages/svelte/tests/html_equal.js           | 198 ++++++++++--------
 .../samples/binding-select/_config.js         |   4 +-
 .../samples/input-list/_config.js             |   4 +-
 .../samples/namespace-html/_config.js         |   2 +-
 .../samples/select-in-each/_config.js         |   4 +-
 .../svelte/tests/runtime-legacy/shared.ts     |   6 +-
 6 files changed, 118 insertions(+), 100 deletions(-)

diff --git a/packages/svelte/tests/html_equal.js b/packages/svelte/tests/html_equal.js
index 4c9e2a7253..6948d8db32 100644
--- a/packages/svelte/tests/html_equal.js
+++ b/packages/svelte/tests/html_equal.js
@@ -1,8 +1,20 @@
 import { assert } from 'vitest';
 
-/** @param {Element} node */
-function clean_children(node) {
+/**
+ * @param {Element} node
+ * @param {{ preserveComments: boolean }} opts
+ */
+function clean_children(node, opts) {
 	let previous = null;
+	let has_element_children = false;
+	let template =
+		node.nodeName === 'TEMPLATE' ? /** @type {HTMLTemplateElement} */ (node) : undefined;
+
+	if (template) {
+		const div = document.createElement('div');
+		div.append(template.content);
+		node = div;
+	}
 
 	// sort attributes
 	const attributes = Array.from(node.attributes).sort((a, b) => {
@@ -14,6 +26,11 @@ function clean_children(node) {
 	});
 
 	attributes.forEach((attr) => {
+		// Strip out the special onload/onerror hydration events from the test output
+		if ((attr.name === 'onload' || attr.name === 'onerror') && attr.value === 'this.__e=event') {
+			return;
+		}
+
 		node.setAttribute(attr.name, attr.value);
 	});
 
@@ -27,24 +44,43 @@ function clean_children(node) {
 				node.tagName !== 'tspan'
 			) {
 				node.removeChild(child);
+				continue;
 			}
 
-			text.data = text.data.replace(/[ \t\n\r\f]+/g, '\n');
+			text.data = text.data.replace(/[^\S]+/g, ' ');
 
 			if (previous && previous.nodeType === 3) {
 				const prev = /** @type {Text} */ (previous);
 
 				prev.data += text.data;
-				prev.data = prev.data.replace(/[ \t\n\r\f]+/g, '\n');
-
 				node.removeChild(text);
+
 				text = prev;
+				text.data = text.data.replace(/[^\S]+/g, ' ');
+
+				continue;
 			}
-		} else if (child.nodeType === 8) {
+		}
+
+		if (child.nodeType === 8 && !opts.preserveComments) {
 			// comment
-			// do nothing
-		} else {
-			clean_children(/** @type {Element} */ (child));
+			child.remove();
+			continue;
+		}
+
+		// add newlines for better readability and potentially recurse into children
+		if (child.nodeType === 1 || child.nodeType === 8) {
+			if (previous?.nodeType === 3) {
+				const prev = /** @type {Text} */ (previous);
+				prev.data = prev.data.replace(/^[^\S]+$/, '\n');
+			} else if (previous?.nodeType === 1 || previous?.nodeType === 8) {
+				node.insertBefore(document.createTextNode('\n'), child);
+			}
+
+			if (child.nodeType === 1) {
+				has_element_children = true;
+				clean_children(/** @type {Element} */ (child), opts);
+			}
 		}
 
 		previous = child;
@@ -53,37 +89,36 @@ function clean_children(node) {
 	// collapse whitespace
 	if (node.firstChild && node.firstChild.nodeType === 3) {
 		const text = /** @type {Text} */ (node.firstChild);
-		text.data = text.data.replace(/^[ \t\n\r\f]+/, '');
-		if (!text.data.length) node.removeChild(text);
+		text.data = text.data.trimStart();
 	}
 
 	if (node.lastChild && node.lastChild.nodeType === 3) {
 		const text = /** @type {Text} */ (node.lastChild);
-		text.data = text.data.replace(/[ \t\n\r\f]+$/, '');
-		if (!text.data.length) node.removeChild(text);
+		text.data = text.data.trimEnd();
+	}
+
+	// indent code for better readability
+	if (has_element_children && node.parentNode) {
+		node.innerHTML = `\n\  ${node.innerHTML.replace(/\n/g, '\n  ')}\n`;
+	}
+
+	if (template) {
+		template.innerHTML = node.innerHTML;
 	}
 }
 
 /**
  * @param {Window} window
  * @param {string} html
- * @param {{ removeDataSvelte?: boolean, preserveComments?: boolean }} param2
+ * @param {{ preserveComments?: boolean }} opts
  */
-export function normalize_html(
-	window,
-	html,
-	{ removeDataSvelte = false, preserveComments = false }
-) {
+export function normalize_html(window, html, { preserveComments = false } = {}) {
 	try {
 		const node = window.document.createElement('div');
-		node.innerHTML = html
-			.replace(/(<!(--)?.*?\2>)/g, preserveComments ? '$1' : '')
-			.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1')
-			.replace(/>[ \t\n\r\f]+</g, '><')
-			// Strip out the special onload/onerror hydration events from the test output
-			.replace(/\s?onerror="this.__e=event"|\s?onload="this.__e=event"/g, '')
-			.trim();
-		clean_children(node);
+
+		node.innerHTML = html.trim();
+		clean_children(node, { preserveComments });
+
 		return node.innerHTML;
 	} catch (err) {
 		throw new Error(`Failed to normalize HTML:\n${html}\nCause: ${err}`);
@@ -99,67 +134,52 @@ export function normalize_new_line(html) {
 }
 
 /**
- * @param {{ removeDataSvelte?: boolean }} options
+ * @param {string} actual
+ * @param {string} expected
+ * @param {string} [message]
  */
-export function setup_html_equal(options = {}) {
-	/**
-	 * @param {string} actual
-	 * @param {string} expected
-	 * @param {string} [message]
-	 */
-	const assert_html_equal = (actual, expected, message) => {
-		try {
-			assert.deepEqual(
-				normalize_html(window, actual, options),
-				normalize_html(window, expected, options),
-				message
-			);
-		} catch (e) {
-			if (Error.captureStackTrace)
-				Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
-			throw e;
-		}
-	};
-
-	/**
-	 *
-	 * @param {string} actual
-	 * @param {string} expected
-	 * @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2
-	 * @param {string} [message]
-	 */
-	const assert_html_equal_with_options = (
-		actual,
-		expected,
-		{ preserveComments, withoutNormalizeHtml },
-		message
-	) => {
-		try {
-			assert.deepEqual(
-				withoutNormalizeHtml
-					? normalize_new_line(actual.trim())
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
-					: normalize_html(window, actual.trim(), { ...options, preserveComments }),
-				withoutNormalizeHtml
-					? normalize_new_line(expected.trim())
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
-					: normalize_html(window, expected.trim(), { ...options, preserveComments }),
-				message
-			);
-		} catch (e) {
-			if (Error.captureStackTrace)
-				Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options);
-			throw e;
-		}
-	};
-
-	return {
-		assert_html_equal,
-		assert_html_equal_with_options
-	};
-}
+export const assert_html_equal = (actual, expected, message) => {
+	try {
+		assert.deepEqual(normalize_html(window, actual), normalize_html(window, expected), message);
+	} catch (e) {
+		if (Error.captureStackTrace)
+			Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
+		throw e;
+	}
+};
 
-// Common case without options
-export const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal();
+/**
+ *
+ * @param {string} actual
+ * @param {string} expected
+ * @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2
+ * @param {string} [message]
+ */
+export const assert_html_equal_with_options = (
+	actual,
+	expected,
+	{ preserveComments, withoutNormalizeHtml },
+	message
+) => {
+	try {
+		assert.deepEqual(
+			withoutNormalizeHtml
+				? normalize_new_line(actual.trim()).replace(
+						/(<!(--)?.*?\2>)/g,
+						preserveComments !== false ? '$1' : ''
+					)
+				: normalize_html(window, actual.trim(), { preserveComments }),
+			withoutNormalizeHtml
+				? normalize_new_line(expected.trim()).replace(
+						/(<!(--)?.*?\2>)/g,
+						preserveComments !== false ? '$1' : ''
+					)
+				: normalize_html(window, expected.trim(), { preserveComments }),
+			message
+		);
+	} catch (e) {
+		if (Error.captureStackTrace)
+			Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options);
+		throw e;
+	}
+};
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
index 2507f5fc83..996f68e39f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
@@ -25,7 +25,7 @@ export default test({
 			<p>selected: one</p>
 
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
 				<option>two</option>
 				<option>three</option>
 			</select>
@@ -54,7 +54,7 @@ export default test({
 			<p>selected: two</p>
 
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
 				<option>two</option>
 				<option>three</option>
 			</select>
diff --git a/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js b/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
index fe6a29207d..1e95aaafa6 100644
--- a/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
@@ -4,7 +4,9 @@ export default test({
 	html: `
 		<input list='suggestions'>
 		<datalist id='suggestions'>
-			<option value='foo'/><option value='bar'/><option value='baz'/>
+			<option value='foo'></option>
+			<option value='bar'></option>
+			<option value='baz'></option>
 		</datalist>
 	`
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js b/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
index 3be9f0e925..b7ecd04def 100644
--- a/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
@@ -9,7 +9,7 @@ export default test({
 
 		<math>
 			<mrow></mrow>
-		</svg>
+		</math>
 
 		<div class="hi">hi</div>
 	`,
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
index 4c94ea1e01..df03b7a053 100644
--- a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
@@ -7,7 +7,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
 				<option value="b">B</option>
 			</select>
 			selected: a
@@ -23,7 +23,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
 				<option value="b">B</option>
 			</select>
 			selected: b
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 690a7e3d98..c0d1177a82 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -7,7 +7,7 @@ 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 { setup_html_equal } from '../html_equal.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';
@@ -86,10 +86,6 @@ function unhandled_rejection_handler(err: Error) {
 
 const listeners = process.rawListeners('unhandledRejection');
 
-const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
-	removeDataSvelte: true
-});
-
 beforeAll(() => {
 	// @ts-expect-error TODO huh?
 	process.prependListener('unhandledRejection', unhandled_rejection_handler);

From 2d2772a4a15fbafcb101f55458ac6486f7853fd2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 6 Jun 2025 13:53:17 -0400
Subject: [PATCH 119/259] fix: invoke parent boundary of deriveds that throw
 (#16091)

* remove unused handle_error arguments

* move error handling code into separate module

* tidy up

* simplify

* remove unnecessary handle_error invocation

* WIP

* WIP

* WIP

* note to self

* WIP

* WIP

* unused

* WIP

* turns out we need this

* fix

* all tests passing

* unused

* unused

* tidy up

* unused

* unused

* tweak

* WIP

* tweak

* asked and answered

* tweak

* unused

* changeset

* lint
---
 .changeset/early-tips-prove.md                |   5 +
 .../client/visitors/SvelteBoundary.js         |  81 ++++----
 .../internal/client/dom/blocks/boundary.js    |  19 +-
 .../src/internal/client/error-handling.js     |  88 ++++++++
 .../src/internal/client/reactivity/effects.js |  25 ++-
 .../svelte/src/internal/client/runtime.js     | 194 +++---------------
 .../samples/error-boundary-12/_config.js      |   7 +-
 .../samples/error-boundary-12/main.svelte     |  10 +-
 .../samples/error-boundary-13/Child.svelte    |  13 +-
 .../samples/error-boundary-13/_config.js      |   2 +-
 .../samples/error-boundary-13/main.svelte     |  11 +-
 .../samples/error-boundary-18/_config.js      |   8 +-
 .../samples/error-boundary-18/main.svelte     |  12 +-
 13 files changed, 218 insertions(+), 257 deletions(-)
 create mode 100644 .changeset/early-tips-prove.md
 create mode 100644 packages/svelte/src/internal/client/error-handling.js

diff --git a/.changeset/early-tips-prove.md b/.changeset/early-tips-prove.md
new file mode 100644
index 0000000000..2df03126d8
--- /dev/null
+++ b/.changeset/early-tips-prove.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: invoke parent boundary of deriveds that throw
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 ec1c650814..1480648ce5 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 } from 'estree' */
+/** @import { BlockStatement, Statement, Expression, FunctionDeclaration, VariableDeclaration, ArrowFunctionExpression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -34,62 +34,61 @@ export function SvelteBoundary(node, context) {
 	const nodes = [];
 
 	/** @type {Statement[]} */
-	const external_statements = [];
+	const const_tags = [];
 
 	/** @type {Statement[]} */
-	const internal_statements = [];
+	const hoisted = [];
 
-	const snippets_visits = [];
+	// const tags need to live inside the boundary, but might also be referenced in hoisted snippets.
+	// to resolve this we cheat: we duplicate const tags inside snippets
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'ConstTag') {
+			context.visit(child, { ...context.state, init: const_tags });
+		}
+	}
 
-	// Capture the `failed` implicit snippet prop
 	for (const child of node.fragment.nodes) {
-		if (child.type === 'SnippetBlock' && child.expression.name === 'failed') {
-			// we need to delay the visit of the snippets in case they access a ConstTag that is declared
-			// after the snippets so that the visitor for the const tag can be updated
-			snippets_visits.push(() => {
-				/** @type {Statement[]} */
-				const init = [];
-				context.visit(child, { ...context.state, init });
-				props.properties.push(b.prop('init', child.expression, child.expression));
-				external_statements.push(...init);
-			});
-		} else if (child.type === 'ConstTag') {
+		if (child.type === 'ConstTag') {
+			continue;
+		}
+
+		if (child.type === 'SnippetBlock') {
 			/** @type {Statement[]} */
-			const init = [];
-			context.visit(child, { ...context.state, init });
-
-			if (dev) {
-				// In dev we must separate the declarations from the code
-				// that eagerly evaluate the expression...
-				for (const statement of init) {
-					if (statement.type === 'VariableDeclaration') {
-						external_statements.push(statement);
-					} else {
-						internal_statements.push(statement);
-					}
-				}
-			} else {
-				external_statements.push(...init);
+			const statements = [];
+
+			context.visit(child, { ...context.state, init: statements });
+
+			const snippet = /** @type {VariableDeclaration} */ (statements[0]);
+
+			const snippet_fn = dev
+				? // @ts-expect-error we know this shape is correct
+					snippet.declarations[0].init.arguments[1]
+				: snippet.declarations[0].init;
+
+			snippet_fn.body.body.unshift(
+				...const_tags.filter((node) => node.type === 'VariableDeclaration')
+			);
+
+			hoisted.push(snippet);
+
+			if (child.expression.name === 'failed') {
+				props.properties.push(b.prop('init', child.expression, child.expression));
 			}
-		} else {
-			nodes.push(child);
+
+			continue;
 		}
-	}
 
-	snippets_visits.forEach((visit) => visit());
+		nodes.push(child);
+	}
 
 	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
 
-	if (dev && internal_statements.length) {
-		block.body.unshift(...internal_statements);
-	}
+	block.body.unshift(...const_tags);
 
 	const boundary = b.stmt(
 		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
 	);
 
 	context.state.template.push_comment();
-	context.state.init.push(
-		external_statements.length > 0 ? b.block([...external_statements, boundary]) : boundary
-	);
+	context.state.init.push(hoisted.length > 0 ? b.block([...hoisted, boundary]) : boundary);
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 53060017b9..d7a53da1d1 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -2,14 +2,13 @@
 
 import { BOUNDARY_EFFECT, EFFECT_TRANSPARENT } from '#client/constants';
 import { component_context, set_component_context } from '../../context.js';
+import { invoke_error_boundary } from '../../error-handling.js';
 import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
 import {
 	active_effect,
 	active_reaction,
-	handle_error,
 	set_active_effect,
-	set_active_reaction,
-	reset_is_throwing_error
+	set_active_reaction
 } from '../../runtime.js';
 import {
 	hydrate_next,
@@ -80,11 +79,17 @@ export function boundary(node, props, boundary_fn) {
 				with_boundary(boundary, () => {
 					is_creating_fallback = false;
 					boundary_effect = branch(() => boundary_fn(anchor));
-					reset_is_throwing_error();
 				});
 			};
 
-			onerror?.(error, reset);
+			var previous_reaction = active_reaction;
+
+			try {
+				set_active_reaction(null);
+				onerror?.(error, reset);
+			} finally {
+				set_active_reaction(previous_reaction);
+			}
 
 			if (boundary_effect) {
 				destroy_effect(boundary_effect);
@@ -109,10 +114,9 @@ export function boundary(node, props, boundary_fn) {
 								);
 							});
 						} catch (error) {
-							handle_error(error, boundary, null, boundary.ctx);
+							invoke_error_boundary(error, /** @type {Effect} */ (boundary.parent));
 						}
 
-						reset_is_throwing_error();
 						is_creating_fallback = false;
 					});
 				});
@@ -124,7 +128,6 @@ export function boundary(node, props, boundary_fn) {
 		}
 
 		boundary_effect = branch(() => boundary_fn(anchor));
-		reset_is_throwing_error();
 	}, EFFECT_TRANSPARENT | BOUNDARY_EFFECT);
 
 	if (hydrating) {
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
new file mode 100644
index 0000000000..aeec1d8b47
--- /dev/null
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -0,0 +1,88 @@
+/** @import { Effect } from '#client' */
+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 { define_property } from '../shared/utils.js';
+import { active_effect } from './runtime.js';
+
+/**
+ * @param {unknown} error
+ */
+export function handle_error(error) {
+	var effect = /** @type {Effect} */ (active_effect);
+
+	if (DEV && error instanceof Error) {
+		adjust_error(error, effect);
+	}
+
+	if ((effect.f & EFFECT_RAN) === 0) {
+		// 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) {
+			throw error;
+		}
+
+		// @ts-expect-error
+		effect.fn(error);
+	} else {
+		// otherwise we bubble up the effect tree ourselves
+		invoke_error_boundary(error, effect);
+	}
+}
+
+/**
+ * @param {unknown} error
+ * @param {Effect | null} effect
+ */
+export function invoke_error_boundary(error, effect) {
+	while (effect !== null) {
+		if ((effect.f & BOUNDARY_EFFECT) !== 0) {
+			try {
+				// @ts-expect-error
+				effect.fn(error);
+				return;
+			} catch {}
+		}
+
+		effect = effect.parent;
+	}
+
+	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);
+
+	var indent = is_firefox ? '  ' : '\t';
+	var component_stack = `\n${indent}in ${effect.fn?.name || '<unknown>'}`;
+	var context = effect.ctx;
+
+	while (context !== null) {
+		component_stack += `\n${indent}in ${context.function?.[FILENAME].split('/').pop()}`;
+		context = context.p;
+	}
+
+	define_property(error, 'message', {
+		value: error.message + `\n${component_stack}\n`
+	});
+
+	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')
+		});
+	}
+}
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 36be1ecd04..54994b9bd1 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -332,16 +332,23 @@ export function render_effect(fn) {
  * @returns {Effect}
  */
 export function template_effect(fn, thunks = [], d = derived) {
-	const deriveds = thunks.map(d);
-	const effect = () => fn(...deriveds.map(get));
-
 	if (DEV) {
-		define_property(effect, 'name', {
-			value: '{expression}'
+		// 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);
 		});
 	}
 
-	return block(effect);
+	const deriveds = thunks.map(d);
+	return block(() => fn(...deriveds.map(get)));
 }
 
 /**
@@ -426,7 +433,11 @@ export function destroy_block_effect_children(signal) {
 export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
-	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
+	if (
+		(remove_dom || (effect.f & HEAD_EFFECT) !== 0) &&
+		effect.nodes_start !== null &&
+		effect.nodes_end !== null
+	) {
 		remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
 		removed = true;
 	}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index d790c0ad14..5920a05fc5 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1,4 +1,4 @@
-/** @import { ComponentContext, Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
+/** @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 {
@@ -22,14 +22,13 @@ import {
 	ROOT_EFFECT,
 	LEGACY_DERIVED_PROP,
 	DISCONNECTED,
-	BOUNDARY_EFFECT,
 	EFFECT_IS_UPDATING
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { internal_set, old_values } from './reactivity/sources.js';
 import { destroy_derived_effects, update_derived } from './reactivity/deriveds.js';
 import * as e from './errors.js';
-import { FILENAME } from '../../constants.js';
+
 import { tracing_mode_flag } from '../flags/index.js';
 import { tracing_expressions, get_stack } from './dev/tracing.js';
 import {
@@ -39,12 +38,7 @@ import {
 	set_component_context,
 	set_dev_current_component_function
 } from './context.js';
-import { is_firefox } from './dom/operations.js';
-
-// Used for DEV time error handling
-/** @param {WeakSet<Error>} value */
-const handled_errors = new WeakSet();
-let is_throwing_error = false;
+import { handle_error, invoke_error_boundary } from './error-handling.js';
 
 let is_flushing = false;
 
@@ -227,131 +221,6 @@ export function check_dirtiness(reaction) {
 	return false;
 }
 
-/**
- * @param {unknown} error
- * @param {Effect} effect
- */
-function propagate_error(error, effect) {
-	/** @type {Effect | null} */
-	var current = effect;
-
-	while (current !== null) {
-		if ((current.f & BOUNDARY_EFFECT) !== 0) {
-			try {
-				// @ts-expect-error
-				current.fn(error);
-				return;
-			} catch {
-				// Remove boundary flag from effect
-				current.f ^= BOUNDARY_EFFECT;
-			}
-		}
-
-		current = current.parent;
-	}
-
-	is_throwing_error = false;
-	throw error;
-}
-
-/**
- * @param {Effect} effect
- */
-function should_rethrow_error(effect) {
-	return (
-		(effect.f & DESTROYED) === 0 &&
-		(effect.parent === null || (effect.parent.f & BOUNDARY_EFFECT) === 0)
-	);
-}
-
-export function reset_is_throwing_error() {
-	is_throwing_error = false;
-}
-
-/**
- * @param {unknown} error
- * @param {Effect} effect
- * @param {Effect | null} previous_effect
- * @param {ComponentContext | null} component_context
- */
-export function handle_error(error, effect, previous_effect, component_context) {
-	if (is_throwing_error) {
-		if (previous_effect === null) {
-			is_throwing_error = false;
-		}
-
-		if (should_rethrow_error(effect)) {
-			throw error;
-		}
-
-		return;
-	}
-
-	if (previous_effect !== null) {
-		is_throwing_error = true;
-	}
-
-	if (DEV && component_context !== null && error instanceof Error && !handled_errors.has(error)) {
-		handled_errors.add(error);
-
-		const component_stack = [];
-
-		const effect_name = effect.fn?.name;
-
-		if (effect_name) {
-			component_stack.push(effect_name);
-		}
-
-		/** @type {ComponentContext | null} */
-		let current_context = component_context;
-
-		while (current_context !== null) {
-			/** @type {string} */
-			var filename = current_context.function?.[FILENAME];
-
-			if (filename) {
-				const file = filename.split('/').pop();
-				component_stack.push(file);
-			}
-
-			current_context = current_context.p;
-		}
-
-		const indent = is_firefox ? '  ' : '\t';
-		define_property(error, 'message', {
-			value:
-				error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
-		});
-		define_property(error, 'component_stack', {
-			value: component_stack
-		});
-
-		const stack = error.stack;
-
-		// Filter out internal files from callstack
-		if (stack) {
-			const lines = stack.split('\n');
-			const new_lines = [];
-			for (let i = 0; i < lines.length; i++) {
-				const line = lines[i];
-				if (line.includes('svelte/src/internal')) {
-					continue;
-				}
-				new_lines.push(line);
-			}
-			define_property(error, 'stack', {
-				value: new_lines.join('\n')
-			});
-		}
-	}
-
-	propagate_error(error, effect);
-
-	if (should_rethrow_error(effect)) {
-		throw error;
-	}
-}
-
 /**
  * @param {Value} signal
  * @param {Effect} effect
@@ -379,11 +248,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	}
 }
 
-/**
- * @template V
- * @param {Reaction} reaction
- * @returns {V}
- */
+/** @param {Reaction} reaction */
 export function update_reaction(reaction) {
 	var previous_deps = new_deps;
 	var previous_skipped_deps = skipped_deps;
@@ -473,6 +338,8 @@ export function update_reaction(reaction) {
 		}
 
 		return result;
+	} catch (error) {
+		handle_error(error);
 	} finally {
 		new_deps = previous_deps;
 		skipped_deps = previous_skipped_deps;
@@ -558,7 +425,6 @@ export function update_effect(effect) {
 	set_signal_status(effect, CLEAN);
 
 	var previous_effect = active_effect;
-	var previous_component_context = component_context;
 	var was_updating_effect = is_updating_effect;
 
 	active_effect = effect;
@@ -601,8 +467,6 @@ export function update_effect(effect) {
 		if (DEV) {
 			dev_effect_stack.push(effect);
 		}
-	} catch (error) {
-		handle_error(error, effect, previous_effect, previous_component_context || effect.ctx);
 	} finally {
 		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
@@ -637,14 +501,14 @@ function infinite_loop_guard() {
 		if (last_scheduled_effect !== null) {
 			if (DEV) {
 				try {
-					handle_error(error, last_scheduled_effect, null, null);
+					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 {
-				handle_error(error, last_scheduled_effect, null, null);
+				invoke_error_boundary(error, last_scheduled_effect);
 			}
 		} else {
 			if (DEV) {
@@ -701,27 +565,23 @@ function flush_queued_effects(effects) {
 		var effect = effects[i];
 
 		if ((effect.f & (DESTROYED | INERT)) === 0) {
-			try {
-				if (check_dirtiness(effect)) {
-					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 (check_dirtiness(effect)) {
+				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;
 					}
 				}
-			} catch (error) {
-				handle_error(error, effect, null, effect.ctx);
 			}
 		}
 	}
@@ -780,12 +640,8 @@ function process_effects(root) {
 			} else if (is_branch) {
 				effect.f ^= CLEAN;
 			} else {
-				try {
-					if (check_dirtiness(effect)) {
-						update_effect(effect);
-					}
-				} catch (error) {
-					handle_error(error, effect, null, effect.ctx);
+				if (check_dirtiness(effect)) {
+					update_effect(effect);
 				}
 			}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
index b3edfefa20..4e771dfafa 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
@@ -5,9 +5,8 @@ export default test({
 	test({ assert, target }) {
 		const btn = target.querySelector('button');
 
-		btn?.click();
-		flushSync();
-
-		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+		assert.throws(() => {
+			flushSync(() => btn?.click());
+		}, /kaboom/);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
index bae46c2590..d9dee1e2b0 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
@@ -1,20 +1,18 @@
 <script>
 	let count = $state(0);
 
-	const things = $derived.by(() => {
+	const d = $derived.by(() => {
 		if (count === 1) {
-			throw new Error('123')
+			throw new Error('kaboom')
 		}
-		return [1, 2 ,3]
+		return count
 	})
 </script>
 
 <button onclick={() => count++}>change</button>
 
 <svelte:boundary>
-	{#each things as thing}
-		<p>{thing}</p>
-	{/each}
+	{d}
 
 	{#snippet failed()}
 		<p>Error occured</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
index 6e607871d3..de482da985 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
@@ -1,7 +1,14 @@
 <script>
-	const { things } = $props();
+	const { count } = $props();
+
+	const d = $derived.by(() => {
+		if (count === 1) {
+			throw new Error('kaboom')
+		}
+		return count
+	});
 
 	$effect(() => {
-		things
-	})
+		d;
+	});
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
index b3edfefa20..3825dc7811 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
@@ -8,6 +8,6 @@ export default test({
 		btn?.click();
 		flushSync();
 
-		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occurred</p>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
index 65b71106fa..56e4846675 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
@@ -2,21 +2,14 @@
 	import Child from './Child.svelte';
 
 	let count = $state(0);
-
-	const things = $derived.by(() => {
-		if (count === 1) {
-			throw new Error('123')
-		}
-		return [1, 2 ,3]
-	})
 </script>
 
 <button onclick={() => count++}>change</button>
 
 <svelte:boundary>
-	<Child {things} />
+	<Child {count} />
 
 	{#snippet failed()}
-		<p>Error occured</p>
+		<p>Error occurred</p>
 	{/snippet}
 </svelte:boundary>
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 fedaaa9ad1..e092d0e7c7 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
@@ -5,11 +5,11 @@ export default test({
 	test({ assert, target }) {
 		let btn = target.querySelector('button');
 
-		btn?.click();
-		btn?.click();
-
 		assert.throws(() => {
-			flushSync();
+			flushSync(() => {
+				btn?.click();
+				btn?.click();
+			});
 		}, /test\n\n\tin {expression}\n/);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
index b9de7126db..e73dcacc8a 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
@@ -1,16 +1,18 @@
 <script>
 	let count = $state(0);
 
-	let test = $derived.by(() => {
+	function maybe_throw() {
 		if (count > 1) {
 			throw new Error('test');
 		}
-	});
+
+		return count;
+	}
 </script>
 
 <svelte:boundary onerror={(e) => { throw(e) }}>
-		<div>Count: {count}</div>
-		<button onclick={() => count++}>Increment</button>
-		{count} / {test}
+	<div>Count: {count}</div>
+	<button onclick={() => count++}>Increment</button>
+	{count} / {maybe_throw()}
 </svelte:boundary>
 

From 370b18f27854a1cb85451850be4d8272171bc91a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Jun 2025 17:01:36 -0400
Subject: [PATCH 120/259] Version Packages (#16094)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/early-tips-prove.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/early-tips-prove.md

diff --git a/.changeset/early-tips-prove.md b/.changeset/early-tips-prove.md
deleted file mode 100644
index 2df03126d8..0000000000
--- a/.changeset/early-tips-prove.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: invoke parent boundary of deriveds that throw
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index c272603457..15bff9ca5c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.15
+
+### Patch Changes
+
+- fix: invoke parent boundary of deriveds that throw ([#16091](https://github.com/sveltejs/svelte/pull/16091))
+
 ## 5.33.14
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index f097ef870c..125c993484 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.33.14",
+  "version": "5.33.15",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4c6213b0ce..1c279f4320 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.33.14';
+export const VERSION = '5.33.15';
 export const PUBLIC_VERSION = '5';

From 8faa178cd7fa1751e7c4890ad1869d9c66160fea Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 6 Jun 2025 23:02:07 +0200
Subject: [PATCH 121/259] fix: visit expression when destructuring state
 declarations (#16081)

---
 .changeset/hip-penguins-unite.md                            | 5 +++++
 .../3-transform/client/visitors/VariableDeclaration.js      | 2 +-
 .../samples/destructure-state-from-props/Child.svelte       | 6 ++++++
 .../samples/destructure-state-from-props/_config.js         | 5 +++++
 .../samples/destructure-state-from-props/main.svelte        | 5 +++++
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/hip-penguins-unite.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte

diff --git a/.changeset/hip-penguins-unite.md b/.changeset/hip-penguins-unite.md
new file mode 100644
index 0000000000..79fd69c24a
--- /dev/null
+++ b/.changeset/hip-penguins-unite.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: visit expression when destructuring state declarations
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 e717077917..b8d692698d 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
@@ -148,7 +148,7 @@ export function VariableDeclaration(node, context) {
 					const { inserts, paths } = extract_paths(declarator.id, tmp);
 
 					declarations.push(
-						b.declarator(tmp, value),
+						b.declarator(tmp, /** @type {Expression} */ (context.visit(value))),
 						...inserts.map(({ id, value }) => {
 							id.name = context.state.scope.generate('$$array');
 							context.state.transform[id.name] = { read: get_value };
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte
new file mode 100644
index 0000000000..0996a02b60
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { data } = $props();
+	let { foo } = $state(data);
+</script>
+
+{foo}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js
new file mode 100644
index 0000000000..345654535b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `bar`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte
new file mode 100644
index 0000000000..518f733144
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child data={{ foo: 'bar' }} />
\ No newline at end of file

From 8d8fdb8a567fd74f5a5e656cf07bb0e966703261 Mon Sep 17 00:00:00 2001
From: Christoph Sanz <22081130+christophsanz@users.noreply.github.com>
Date: Fri, 6 Jun 2025 23:25:51 +0200
Subject: [PATCH 122/259] fix: add `xmlns` attribute to HTMLAttributes type
 (#16080)

* Add `xmlns` attribute to HTMLAttributes type

The `xmlns` attribute is not only allowed on SVG elements, but on all HTML elements.

* move to DOMAttributes

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/metal-rivers-laugh.md | 5 +++++
 packages/svelte/elements.d.ts    | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/metal-rivers-laugh.md

diff --git a/.changeset/metal-rivers-laugh.md b/.changeset/metal-rivers-laugh.md
new file mode 100644
index 0000000000..2b6f47e84b
--- /dev/null
+++ b/.changeset/metal-rivers-laugh.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: move xmlns attribute from SVGAttributes to to DOMAttributes
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 7a7889ad9e..8a1bdd0e6d 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -463,6 +463,8 @@ export interface DOMAttributes<T extends EventTarget> {
 	'on:fullscreenerror'?: EventHandler<Event, T> | undefined | null;
 	onfullscreenerror?: EventHandler<Event, T> | undefined | null;
 	onfullscreenerrorcapture?: EventHandler<Event, T> | undefined | null;
+
+	xmlns?: string | undefined | null;
 }
 
 // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
@@ -1809,7 +1811,6 @@ export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DO
 	'xlink:type'?: string | undefined | null;
 	'xml:base'?: string | undefined | null;
 	'xml:lang'?: string | undefined | null;
-	xmlns?: string | undefined | null;
 	'xmlns:xlink'?: string | undefined | null;
 	'xml:space'?: string | undefined | null;
 	y1?: number | string | undefined | null;

From 2bbaaa361b73088a6075afe07d2cfd1e337cfbd8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Jun 2025 21:31:04 -0400
Subject: [PATCH 123/259] Version Packages (#16097)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/hip-penguins-unite.md | 5 -----
 .changeset/metal-rivers-laugh.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/hip-penguins-unite.md
 delete mode 100644 .changeset/metal-rivers-laugh.md

diff --git a/.changeset/hip-penguins-unite.md b/.changeset/hip-penguins-unite.md
deleted file mode 100644
index 79fd69c24a..0000000000
--- a/.changeset/hip-penguins-unite.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: visit expression when destructuring state declarations
diff --git a/.changeset/metal-rivers-laugh.md b/.changeset/metal-rivers-laugh.md
deleted file mode 100644
index 2b6f47e84b..0000000000
--- a/.changeset/metal-rivers-laugh.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: move xmlns attribute from SVGAttributes to to DOMAttributes
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 15bff9ca5c..e1992a82a1 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.16
+
+### Patch Changes
+
+- fix: visit expression when destructuring state declarations ([#16081](https://github.com/sveltejs/svelte/pull/16081))
+
+- fix: move xmlns attribute from SVGAttributes to to DOMAttributes ([#16080](https://github.com/sveltejs/svelte/pull/16080))
+
 ## 5.33.15
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 125c993484..2aa4bcde00 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.33.15",
+  "version": "5.33.16",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1c279f4320..5c3ea58b87 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.33.15';
+export const VERSION = '5.33.16';
 export const PUBLIC_VERSION = '5';

From 0741ee65d1eb757a6a5367ce2730cc6e88b441eb Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 7 Jun 2025 05:27:45 -0700
Subject: [PATCH 124/259] chore: update acorn parser `ecmaVersion` to parse
 import attributes (#16098)

* bump acorn parser version

* fix failing tests

* lint
---
 .changeset/brave-baboons-suffer.md                        | 5 +++++
 packages/svelte/src/compiler/phases/1-parse/acorn.js      | 4 ++--
 .../parser-legacy/samples/action-duplicate/output.json    | 8 ++++----
 .../parser-legacy/samples/action-with-call/output.json    | 4 ++--
 .../samples/action-with-identifier/output.json            | 4 ++--
 .../parser-legacy/samples/action-with-literal/output.json | 4 ++--
 .../svelte/tests/parser-legacy/samples/action/output.json | 4 ++--
 .../tests/parser-legacy/samples/animation/output.json     | 4 ++--
 .../samples/attribute-class-directive/output.json         | 4 ++--
 .../samples/attribute-with-whitespace/output.json         | 4 ++--
 .../parser-legacy/samples/binding-shorthand/output.json   | 4 ++--
 .../tests/parser-legacy/samples/binding/output.json       | 4 ++--
 .../parser-legacy/samples/dynamic-import/output.json      | 6 ++++--
 .../tests/parser-legacy/samples/event-handler/output.json | 4 ++--
 .../parser-legacy/samples/javascript-comments/output.json | 4 ++--
 .../svelte/tests/parser-legacy/samples/refs/output.json   | 4 ++--
 .../samples/transition-intro-no-params/output.json        | 2 +-
 .../parser-legacy/samples/transition-intro/output.json    | 2 +-
 18 files changed, 41 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/brave-baboons-suffer.md

diff --git a/.changeset/brave-baboons-suffer.md b/.changeset/brave-baboons-suffer.md
new file mode 100644
index 0000000000..27225f09e1
--- /dev/null
+++ b/.changeset/brave-baboons-suffer.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: update acorn parser `ecmaVersion` to parse import attributes
diff --git a/packages/svelte/src/compiler/phases/1-parse/acorn.js b/packages/svelte/src/compiler/phases/1-parse/acorn.js
index 36f7688c49..26a09abb66 100644
--- a/packages/svelte/src/compiler/phases/1-parse/acorn.js
+++ b/packages/svelte/src/compiler/phases/1-parse/acorn.js
@@ -36,7 +36,7 @@ export function parse(source, typescript, is_script) {
 		ast = parser.parse(source, {
 			onComment,
 			sourceType: 'module',
-			ecmaVersion: 13,
+			ecmaVersion: 16,
 			locations: true
 		});
 	} finally {
@@ -64,7 +64,7 @@ export function parse_expression_at(source, typescript, index) {
 	const ast = parser.parseExpressionAt(source, index, {
 		onComment,
 		sourceType: 'module',
-		ecmaVersion: 13,
+		ecmaVersion: 16,
 		locations: true
 	});
 
diff --git a/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json b/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
index 3dad9bb4e5..c6af77a47b 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
@@ -15,16 +15,16 @@
 						"end": 20,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"expression": null,
+						"modifiers": []
 					},
 					{
 						"start": 21,
 						"end": 34,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"expression": null,
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
index 66ce187c62..a10d4eccf0 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
@@ -15,7 +15,6 @@
 						"end": 39,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
 						"expression": {
 							"type": "CallExpression",
 							"start": 21,
@@ -66,7 +65,8 @@
 								}
 							],
 							"optional": false
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
index 39a6f5f647..e9a3e7e5da 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
@@ -15,7 +15,6 @@
 						"end": 28,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
 							"start": 20,
@@ -31,7 +30,8 @@
 								}
 							},
 							"name": "message"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
index 94c60b701a..94b60b9e5d 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
@@ -15,7 +15,6 @@
 						"end": 36,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
 						"expression": {
 							"type": "Literal",
 							"start": 21,
@@ -32,7 +31,8 @@
 							},
 							"value": "tooltip msg",
 							"raw": "'tooltip msg'"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action/output.json b/packages/svelte/tests/parser-legacy/samples/action/output.json
index d72bf7db10..f241c81a93 100644
--- a/packages/svelte/tests/parser-legacy/samples/action/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action/output.json
@@ -15,8 +15,8 @@
 						"end": 20,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"expression": null,
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/animation/output.json b/packages/svelte/tests/parser-legacy/samples/animation/output.json
index 0d82cb2bb9..bf4b43b875 100644
--- a/packages/svelte/tests/parser-legacy/samples/animation/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/animation/output.json
@@ -20,8 +20,8 @@
 								"end": 50,
 								"type": "Animation",
 								"name": "flip",
-								"modifiers": [],
-								"expression": null
+								"expression": null,
+								"modifiers": []
 							}
 						],
 						"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
index 9efe9acf8d..3cd54b6647 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
@@ -15,7 +15,6 @@
 						"end": 22,
 						"type": "Class",
 						"name": "foo",
-						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
 							"start": 16,
@@ -31,7 +30,8 @@
 								}
 							},
 							"name": "isFoo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
index 4d3a291808..2e45184be9 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
@@ -15,7 +15,6 @@
 						"end": 23,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
 							"start": 19,
@@ -31,7 +30,8 @@
 								}
 							},
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
index 6720146297..4289245705 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
@@ -22,13 +22,13 @@
 						"end": 46,
 						"type": "Binding",
 						"name": "foo",
-						"modifiers": [],
 						"expression": {
 							"start": 43,
 							"end": 46,
 							"type": "Identifier",
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/binding/output.json b/packages/svelte/tests/parser-legacy/samples/binding/output.json
index 4ce069bd37..5256ede7bb 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding/output.json
@@ -22,7 +22,6 @@
 						"end": 55,
 						"type": "Binding",
 						"name": "value",
-						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
 							"start": 50,
@@ -38,7 +37,8 @@
 								}
 							},
 							"name": "name"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
index a439b65dd0..ee19d58742 100644
--- a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
@@ -104,7 +104,8 @@
 						},
 						"value": "svelte",
 						"raw": "'svelte'"
-					}
+					},
+					"attributes": []
 				},
 				{
 					"type": "ExpressionStatement",
@@ -257,7 +258,8 @@
 															},
 															"value": "./foo.js",
 															"raw": "'./foo.js'"
-														}
+														},
+														"options": null
 													},
 													"property": {
 														"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/event-handler/output.json b/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
index 45b6256677..11ee562297 100644
--- a/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
@@ -15,7 +15,6 @@
 						"end": 45,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
 						"expression": {
 							"type": "ArrowFunctionExpression",
 							"start": 19,
@@ -100,7 +99,8 @@
 									}
 								}
 							}
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
index 15db05904c..42229b741f 100644
--- a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
@@ -22,7 +22,6 @@
 						"end": 692,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
 						"expression": {
 							"type": "ArrowFunctionExpression",
 							"start": 596,
@@ -137,7 +136,8 @@
 									"end": 594
 								}
 							]
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/refs/output.json b/packages/svelte/tests/parser-legacy/samples/refs/output.json
index e2bda741fa..7829a2787f 100644
--- a/packages/svelte/tests/parser-legacy/samples/refs/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/refs/output.json
@@ -22,7 +22,6 @@
 						"end": 53,
 						"type": "Binding",
 						"name": "this",
-						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
 							"start": 49,
@@ -38,7 +37,8 @@
 								}
 							},
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json b/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
index f30788d758..18860d615b 100644
--- a/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
@@ -15,8 +15,8 @@
 						"end": 12,
 						"type": "Transition",
 						"name": "fade",
-						"modifiers": [],
 						"expression": null,
+						"modifiers": [],
 						"intro": true,
 						"outro": false
 					}
diff --git a/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json b/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
index ae52f72c5d..973cfb7d33 100644
--- a/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
@@ -15,7 +15,6 @@
 						"end": 30,
 						"type": "Transition",
 						"name": "style",
-						"modifiers": [],
 						"expression": {
 							"type": "ObjectExpression",
 							"start": 16,
@@ -85,6 +84,7 @@
 								}
 							]
 						},
+						"modifiers": [],
 						"intro": true,
 						"outro": false
 					}

From d5c6991b3b53db59debbb55c7207c4eb20ed35db Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 7 Jun 2025 08:32:24 -0400
Subject: [PATCH 125/259] Version Packages (#16101)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/brave-baboons-suffer.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/brave-baboons-suffer.md

diff --git a/.changeset/brave-baboons-suffer.md b/.changeset/brave-baboons-suffer.md
deleted file mode 100644
index 27225f09e1..0000000000
--- a/.changeset/brave-baboons-suffer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: update acorn parser `ecmaVersion` to parse import attributes
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e1992a82a1..2d9df0740d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.17
+
+### Patch Changes
+
+- chore: update acorn parser `ecmaVersion` to parse import attributes ([#16098](https://github.com/sveltejs/svelte/pull/16098))
+
 ## 5.33.16
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2aa4bcde00..dcaf1b4dcf 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.33.16",
+  "version": "5.33.17",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 5c3ea58b87..3b86e8eed4 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.33.16';
+export const VERSION = '5.33.17';
 export const PUBLIC_VERSION = '5';

From 669a32a61505bca1672a1a5e050b2e13d150cd45 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 8 Jun 2025 13:00:57 +0200
Subject: [PATCH 126/259] fix: destructuring state in ssr (#16102)

---
 .changeset/silly-turkeys-confess.md                   |  5 +++++
 .../server/visitors/VariableDeclaration.js            |  6 +++++-
 .../samples/destructure-state-iterable/_expected.html |  1 +
 .../samples/destructure-state-iterable/main.svelte    | 11 +++++++++++
 .../samples/destructure-state/_expected.html          |  1 +
 .../samples/destructure-state/main.svelte             |  5 +++++
 6 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silly-turkeys-confess.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte

diff --git a/.changeset/silly-turkeys-confess.md b/.changeset/silly-turkeys-confess.md
new file mode 100644
index 0000000000..9bb677e52a
--- /dev/null
+++ b/.changeset/silly-turkeys-confess.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: destructuring state in ssr
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 1f0e6be77c..7c94595147 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -197,9 +197,13 @@ function create_state_declarators(declarator, scope, value) {
 	}
 
 	const tmp = b.id(scope.generate('tmp'));
-	const { paths } = extract_paths(declarator.id, tmp);
+	const { paths, inserts } = extract_paths(declarator.id, tmp);
 	return [
 		b.declarator(tmp, value), // TODO inject declarator for opts, so we can use it below
+		...inserts.map(({ id, value }) => {
+			id.name = scope.generate('$$array');
+			return b.declarator(id, value);
+		}),
 		...paths.map((path) => {
 			const value = path.expression;
 			return b.declarator(path.node, value);
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
new file mode 100644
index 0000000000..e3f755a08c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
@@ -0,0 +1 @@
+0, 1
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
new file mode 100644
index 0000000000..9414735f2f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let count = 0;
+	function* test(){
+		while (true) {
+			yield count++;
+		}
+	}
+	let [one, two] = $state(test())
+</script>
+
+{one}, {two}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
new file mode 100644
index 0000000000..213a5f5bf1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
@@ -0,0 +1 @@
+10, Admin
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
new file mode 100644
index 0000000000..422548cd14
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let [level, custom] = $state([10, "Admin"])
+</script>
+
+{level}, {custom}
\ No newline at end of file

From 5f62b9e4418df9e132163fa63c69f9211ce6aabc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 8 Jun 2025 07:06:53 -0400
Subject: [PATCH 127/259] chore: bump esrap (#16106)

* chore: bump esrap

* oops
---
 .changeset/fast-chicken-hammer.md |  5 +++++
 packages/svelte/package.json      |  2 +-
 pnpm-lock.yaml                    | 10 +++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fast-chicken-hammer.md

diff --git a/.changeset/fast-chicken-hammer.md b/.changeset/fast-chicken-hammer.md
new file mode 100644
index 0000000000..122ca0256d
--- /dev/null
+++ b/.changeset/fast-chicken-hammer.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: bump `esrap` dependency
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dcaf1b4dcf..024daa1c34 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -171,7 +171,7 @@
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.1",
-    "esrap": "^1.4.6",
+    "esrap": "^1.4.8",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d5db0fd8e..cfbc54df33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,8 +87,8 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^1.4.6
-        version: 1.4.6
+        specifier: ^1.4.8
+        version: 1.4.8
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -1261,8 +1261,8 @@ packages:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.4.6:
-    resolution: {integrity: sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==}
+  esrap@1.4.8:
+    resolution: {integrity: sha512-jlENbjZ7lqgJV9/OmgAtVqrFFMwsl70ctOgPIg5oTdQVGC13RSkMdtvAmu7ZTLax92c9ljnIG0xleEkdL69hwg==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -3622,7 +3622,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.4.6:
+  esrap@1.4.8:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 

From 26e328689950b390189c6da31c32283d217df4b4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 8 Jun 2025 07:14:01 -0400
Subject: [PATCH 128/259] Version Packages (#16107)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fast-chicken-hammer.md   | 5 -----
 .changeset/silly-turkeys-confess.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/fast-chicken-hammer.md
 delete mode 100644 .changeset/silly-turkeys-confess.md

diff --git a/.changeset/fast-chicken-hammer.md b/.changeset/fast-chicken-hammer.md
deleted file mode 100644
index 122ca0256d..0000000000
--- a/.changeset/fast-chicken-hammer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: bump `esrap` dependency
diff --git a/.changeset/silly-turkeys-confess.md b/.changeset/silly-turkeys-confess.md
deleted file mode 100644
index 9bb677e52a..0000000000
--- a/.changeset/silly-turkeys-confess.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: destructuring state in ssr
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 2d9df0740d..506f04c1c4 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.18
+
+### Patch Changes
+
+- chore: bump `esrap` dependency ([#16106](https://github.com/sveltejs/svelte/pull/16106))
+
+- fix: destructuring state in ssr ([#16102](https://github.com/sveltejs/svelte/pull/16102))
+
 ## 5.33.17
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 024daa1c34..0758158a40 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.33.17",
+  "version": "5.33.18",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 3b86e8eed4..2539247e01 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.33.17';
+export const VERSION = '5.33.18';
 export const PUBLIC_VERSION = '5';

From fd08cb03ded78206c7d1727199a7c37485260d67 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 9 Jun 2025 23:44:52 +0200
Subject: [PATCH 129/259] fix: reset `is_flushing` if `flushSync` is called and
 there's no scheduled effect (#16119)

---
 .changeset/flat-points-kick.md                |  5 ++++
 .../svelte/src/internal/client/runtime.js     |  7 ++++++
 .../flush-sync-no-scheduled/_config.js        | 16 +++++++++++++
 .../flush-sync-no-scheduled/main.svelte       | 23 +++++++++++++++++++
 4 files changed, 51 insertions(+)
 create mode 100644 .changeset/flat-points-kick.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte

diff --git a/.changeset/flat-points-kick.md b/.changeset/flat-points-kick.md
new file mode 100644
index 0000000000..f9c8b8762c
--- /dev/null
+++ b/.changeset/flat-points-kick.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 5920a05fc5..51402ac88c 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -688,6 +688,13 @@ export function flushSync(fn) {
 		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);
 		}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
new file mode 100644
index 0000000000..33a59dfbd3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
@@ -0,0 +1,16 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		const main = target.querySelector('main');
+		ok(main);
+		console.log(main.innerHTML);
+		assert.htmlEqual(main.innerHTML, `<div>true</div>`);
+		// we don't want to use flush sync (or tick that use it inside) since we are testing that calling `flushSync` once
+		// when there are no scheduled effects does not cause reactivity to break
+		btn?.click();
+		await Promise.resolve();
+		assert.htmlEqual(main.innerHTML, `<div>false</div> <div>false</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte
new file mode 100644
index 0000000000..448d495cf5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { flushSync } from 'svelte'
+	
+	let flag = $state(true)
+	let test = $state(true);	
+</script>
+
+<button onclick={()=>{
+	flushSync(() => {
+		test = !test
+	})
+		
+	flag = !flag;
+}}>switch</button>
+
+<main>
+	<div>{flag}</div>
+	
+	{#if !flag}
+		<div>{test} </div>
+	{/if}
+</main>
+

From cc8d2f6c80cdc9bf0f93c60771e153a3e6ddf0bc Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 10 Jun 2025 17:46:53 +0200
Subject: [PATCH 130/259] docs: add note on `Object.create` (#16124)

---
 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 e19e68f6a8..8e6c91fad7 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -20,7 +20,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...
 
 ```js
 let todos = $state([

From 17629a60dbaccb49bceb4fdc6fea7a735caf83d4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 11:47:52 -0400
Subject: [PATCH 131/259] Version Packages (#16121)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/flat-points-kick.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/flat-points-kick.md

diff --git a/.changeset/flat-points-kick.md b/.changeset/flat-points-kick.md
deleted file mode 100644
index f9c8b8762c..0000000000
--- a/.changeset/flat-points-kick.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 506f04c1c4..e91407ddf8 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.33.19
+
+### Patch Changes
+
+- fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect ([#16119](https://github.com/sveltejs/svelte/pull/16119))
+
 ## 5.33.18
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0758158a40..7dd4b08f3d 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.33.18",
+  "version": "5.33.19",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2539247e01..2c712391af 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.33.18';
+export const VERSION = '5.33.19';
 export const PUBLIC_VERSION = '5';

From 91272d702b9cafc310a0176e1e489bb487872fd9 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Tue, 10 Jun 2025 16:23:42 -0700
Subject: [PATCH 132/259] feat: add source name logging to `$inspect.trace`
 (#16060)

* init

* improve symbol logging

* doh

* remove proxy path name when reassigned to a source

* try this

* fix

* oops

* fix

* "unown" proxy when in another source declaration

* fix

* tag proxy version

* proxy bindable props

* tag iterables used in destructuring

* add changeset, fix failing tests

* add comments, minor tweak

* lint

* somehow forgot to add support for class fields

* more class fields

* tag_source -> tag, since it applies to deriveds as well

* private class fields

* this condition is impossible

* explicit type narrowing lets us avoid coercion

* simplify

* unused

* tweak

* oops, never meant to commit that

* minor tweaks

* fix private field tagging, only get `declaration` once

* fix state declarations in constructors

* fix

* tag `svelte/reactivity`, `svelte/motion` sources in DEV

* try fixing lint

* fix intellisense formatting

* actually fix lint

* replace tag_if_necessary with conditional tagging

* avoid [[object Object]] in labels

* remove PROXY_REMOVE_PATH

* simplify a bit

* simplify

* tweak

* tweak implementation

* tweak implementation

* tweak implementation

* hoist

* tweak

* fix

* WIP (reduce number of with_parent calls, move towards possibility of combining tag and tag_proxy)

* DRY out

* tweak labels

* remove PROXY_REMOVE_PATH (#16126)

* remove PROXY_REMOVE_PATH

* simplify a bit

* simplify

* tweak

* tweak implementation

* tweak implementation

* tweak implementation

* hoist

* tweak

* fix

* WIP (reduce number of with_parent calls, move towards possibility of combining tag and tag_proxy)

* DRY out

* come on this was just lazy

* fix tests

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/big-teachers-agree.md              |   5 +
 .../client/visitors/AssignmentExpression.js   |  19 ++-
 .../3-transform/client/visitors/ClassBody.js  |  29 +++--
 .../client/visitors/VariableDeclaration.js    |  57 +++++++--
 .../svelte/src/internal/client/constants.js   |   1 +
 .../svelte/src/internal/client/dev/tracing.js |  41 +++++-
 packages/svelte/src/internal/client/index.js  |   2 +-
 packages/svelte/src/internal/client/proxy.js  | 119 ++++++++++++++----
 .../src/internal/client/reactivity/sources.js |   6 +-
 .../src/internal/client/reactivity/types.d.ts |   1 +
 packages/svelte/src/motion/spring.js          |  17 ++-
 packages/svelte/src/motion/tweened.js         |  14 ++-
 .../src/reactivity/create-subscriber.js       |   6 +
 packages/svelte/src/reactivity/date.js        |   7 ++
 packages/svelte/src/reactivity/map.js         |  38 +++++-
 packages/svelte/src/reactivity/set.js         |  15 ++-
 .../src/reactivity/url-search-params.js       |   4 +-
 packages/svelte/src/reactivity/url.js         |  13 ++
 .../svelte/src/reactivity/window/index.js     |   7 +-
 packages/svelte/tests/helpers.js              |  41 ++++++
 .../samples/inspect-trace-nested/_config.js   |  35 ++----
 .../inspect-trace-reassignment/_config.js     |  40 ++----
 .../samples/inspect-trace/_config.js          |  44 +++----
 23 files changed, 409 insertions(+), 152 deletions(-)
 create mode 100644 .changeset/big-teachers-agree.md

diff --git a/.changeset/big-teachers-agree.md b/.changeset/big-teachers-agree.md
new file mode 100644
index 0000000000..f9044541d7
--- /dev/null
+++ b/.changeset/big-teachers-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add source name logging to `$inspect.trace`
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index a46b318601..ce190814f8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -67,11 +67,20 @@ function build_assignment(operator, left, right, context) {
 						in_constructor: rune !== '$derived' && rune !== '$derived.by'
 					};
 
-					return b.assignment(
-						operator,
-						b.member(b.this, field.key),
-						/** @type {Expression} */ (context.visit(right, child_state))
-					);
+					let value = /** @type {Expression} */ (context.visit(right, child_state));
+
+					if (dev) {
+						const declaration = context.path.findLast(
+							(parent) => parent.type === 'ClassDeclaration' || parent.type === 'ClassExpression'
+						);
+						value = b.call(
+							'$.tag',
+							value,
+							b.literal(`${declaration?.id?.name ?? '[class]'}.${name}`)
+						);
+					}
+
+					return b.assignment(operator, b.member(b.this, field.key), value);
 				}
 			}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 71a8fc3d05..e78a8824dd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -1,7 +1,9 @@
-/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
+/** @import { CallExpression, ClassBody, ClassDeclaration, ClassExpression, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
 /** @import { StateField } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as b from '#compiler/builders';
+import { dev } from '../../../../state.js';
+import { get_parent } from '../../../../utils/ast.js';
 import { get_name } from '../../../nodes.js';
 
 /**
@@ -50,6 +52,10 @@ export function ClassBody(node, context) {
 		}
 	}
 
+	const declaration = /** @type {ClassDeclaration | ClassExpression} */ (
+		get_parent(context.path, -1)
+	);
+
 	// Replace parts of the class body
 	for (const definition of node.body) {
 		if (definition.type !== 'PropertyDefinition') {
@@ -68,17 +74,26 @@ export function ClassBody(node, context) {
 		}
 
 		if (name[0] === '#') {
-			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			let value = definition.value
+				? /** @type {CallExpression} */ (context.visit(definition.value, child_state))
+				: undefined;
+
+			if (dev) {
+				value = b.call('$.tag', value, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
+			}
+
+			body.push(b.prop_def(definition.key, value));
 		} else if (field.node === definition) {
-			const member = b.member(b.this, field.key);
+			let call = /** @type {CallExpression} */ (context.visit(field.value, child_state));
 
+			if (dev) {
+				call = b.call('$.tag', call, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
+			}
+			const member = b.member(b.this, field.key);
 			const should_proxy = field.type === '$state' && true; // TODO
 
 			body.push(
-				b.prop_def(
-					field.key,
-					/** @type {CallExpression} */ (context.visit(field.value, child_state))
-				),
+				b.prop_def(field.key, call),
 
 				b.method('get', definition.key, [], [b.return(b.call('$.get', member))]),
 
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 b8d692698d..53f18d42e4 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
@@ -90,6 +90,10 @@ export function VariableDeclaration(node, context) {
 								should_proxy(initial, context.state.scope)
 							) {
 								initial = b.call('$.proxy', initial);
+
+								if (dev) {
+									initial = b.call('$.tag_proxy', initial, b.literal(id.name));
+								}
 							}
 
 							if (is_prop_source(binding, context.state)) {
@@ -128,12 +132,25 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-					if (rune === '$state' && should_proxy(value, context.state.scope)) {
+					const is_state = is_state_source(binding, context.state.analysis);
+					const is_proxy = should_proxy(value, context.state.scope);
+
+					if (rune === '$state' && is_proxy) {
 						value = b.call('$.proxy', value);
+
+						if (dev && !is_state) {
+							value = b.call('$.tag_proxy', value, b.literal(id.name));
+						}
 					}
-					if (is_state_source(binding, context.state.analysis)) {
+
+					if (is_state) {
 						value = b.call('$.state', value);
+
+						if (dev) {
+							value = b.call('$.tag', value, b.literal(id.name));
+						}
 					}
+
 					return value;
 				};
 
@@ -154,7 +171,11 @@ export function VariableDeclaration(node, context) {
 							context.state.transform[id.name] = { read: get_value };
 
 							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-							return b.declarator(id, b.call('$.derived', expression));
+							const call = b.call('$.derived', expression);
+							return b.declarator(
+								id,
+								dev ? b.call('$.tag', call, b.literal('[$state iterable]')) : call
+							);
 						}),
 						...paths.map((path) => {
 							const value = /** @type {Expression} */ (context.visit(path.expression));
@@ -176,8 +197,13 @@ export function VariableDeclaration(node, context) {
 				if (declarator.id.type === 'Identifier') {
 					let expression = /** @type {Expression} */ (context.visit(value));
 					if (rune === '$derived') expression = b.thunk(expression);
-
-					declarations.push(b.declarator(declarator.id, b.call('$.derived', expression)));
+					const call = b.call('$.derived', expression);
+					declarations.push(
+						b.declarator(
+							declarator.id,
+							dev ? b.call('$.tag', call, b.literal(declarator.id.name)) : call
+						)
+					);
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
 
@@ -189,8 +215,10 @@ export function VariableDeclaration(node, context) {
 
 						let expression = /** @type {Expression} */ (context.visit(value));
 						if (rune === '$derived') expression = b.thunk(expression);
-
-						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+						const call = b.call('$.derived', expression);
+						declarations.push(
+							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
+						);
 					}
 
 					const { inserts, paths } = extract_paths(declarator.id, rhs);
@@ -200,12 +228,23 @@ export function VariableDeclaration(node, context) {
 						context.state.transform[id.name] = { read: get_value };
 
 						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+						const call = b.call('$.derived', expression);
+						declarations.push(
+							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
+						);
 					}
 
 					for (const path of paths) {
 						const expression = /** @type {Expression} */ (context.visit(path.expression));
-						declarations.push(b.declarator(path.node, b.call('$.derived', b.thunk(expression))));
+						const call = b.call('$.derived', b.thunk(expression));
+						declarations.push(
+							b.declarator(
+								path.node,
+								dev
+									? b.call('$.tag', call, b.literal(/** @type {Identifier} */ (path.node).name))
+									: call
+							)
+						);
 					}
 				}
 
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 7e5196c606..98cef658bf 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -25,3 +25,4 @@ export const EFFECT_IS_UPDATING = 1 << 21;
 export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
+export const PROXY_PATH_SYMBOL = Symbol('proxy path');
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index ad80e75c3d..18b99c31b0 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, STATE_SYMBOL } from '#client/constants';
+import { DERIVED, 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';
 
@@ -43,11 +43,15 @@ function log_entry(signal, entry) {
 	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
+	const style = dirty
+		? 'color: CornflowerBlue; font-weight: bold'
+		: 'color: grey; font-weight: normal';
 
 	// eslint-disable-next-line no-console
 	console.groupCollapsed(
-		`%c${type}`,
-		dirty ? 'color: CornflowerBlue; font-weight: bold' : 'color: grey; font-weight: bold',
+		signal.label ? `%c${type}%c ${signal.label}` : `%c${type}%c`,
+		style,
+		dirty ? 'font-weight: normal' : style,
 		typeof value === 'object' && value !== null && STATE_SYMBOL in value
 			? snapshot(value, true)
 			: value
@@ -177,3 +181,34 @@ export function get_stack(label) {
 	}
 	return error;
 }
+
+/**
+ * @param {Value} source
+ * @param {string} label
+ */
+export function tag(source, label) {
+	source.label = label;
+	tag_proxy(source.v, label);
+
+	return source;
+}
+
+/**
+ * @param {unknown} value
+ * @param {string} label
+ */
+export function tag_proxy(value, label) {
+	// @ts-expect-error
+	value?.[PROXY_PATH_SYMBOL]?.(label);
+	return value;
+}
+
+/**
+ * @param {unknown} value
+ */
+export function label(value) {
+	if (typeof value === 'symbol') return `Symbol(${value.description})`;
+	if (typeof value === 'function') return '<function>';
+	if (typeof value === 'object' && value) return '<object>';
+	return String(value);
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 71c06d7b1b..60f9af9120 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -7,7 +7,7 @@ export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
 export { create_ownership_validator } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
-export { trace } from './dev/tracing.js';
+export { trace, tag, tag_proxy } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
 export { validate_snippet_args } from './dev/validation.js';
 export { await_block as await } from './dom/blocks/await.js';
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index fd5706eaf2..4870506699 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -9,12 +9,15 @@ import {
 	object_prototype
 } from '../shared/utils.js';
 import { state as source, set } from './reactivity/sources.js';
-import { STATE_SYMBOL } from '#client/constants';
+import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
-import { get_stack } from './dev/tracing.js';
+import { get_stack, tag } from './dev/tracing.js';
 import { tracing_mode_flag } from '../flags/index.js';
 
+// TODO move all regexes into shared module?
+const regex_is_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
+
 /**
  * @template T
  * @param {T} value
@@ -61,6 +64,21 @@ export function proxy(value) {
 		sources.set('length', source(/** @type {any[]} */ (value).length, stack));
 	}
 
+	/** Used in dev for $inspect.trace() */
+	var path = '';
+
+	/** @param {string} new_path */
+	function update_path(new_path) {
+		path = new_path;
+
+		tag(version, `${path} version`);
+
+		// rename all child sources and child proxies
+		for (const [prop, source] of sources) {
+			tag(source, get_label(path, prop));
+		}
+	}
+
 	return new Proxy(/** @type {any} */ (value), {
 		defineProperty(_, prop, descriptor) {
 			if (
@@ -76,17 +94,20 @@ export function proxy(value) {
 				e.state_descriptors_fixed();
 			}
 
-			var s = sources.get(prop);
+			with_parent(() => {
+				var s = sources.get(prop);
 
-			if (s === undefined) {
-				s = with_parent(() => source(descriptor.value, stack));
-				sources.set(prop, s);
-			} else {
-				set(
-					s,
-					with_parent(() => proxy(descriptor.value))
-				);
-			}
+				if (s === undefined) {
+					s = source(descriptor.value, stack);
+					sources.set(prop, s);
+
+					if (DEV && typeof prop === 'string') {
+						tag(s, get_label(path, prop));
+					}
+				} else {
+					set(s, descriptor.value, true);
+				}
+			});
 
 			return true;
 		},
@@ -96,11 +117,13 @@ export function proxy(value) {
 
 			if (s === undefined) {
 				if (prop in target) {
-					sources.set(
-						prop,
-						with_parent(() => source(UNINITIALIZED, stack))
-					);
+					const s = with_parent(() => source(UNINITIALIZED, stack));
+					sources.set(prop, s);
 					update_version(version);
+
+					if (DEV) {
+						tag(s, get_label(path, prop));
+					}
 				}
 			} else {
 				// When working with arrays, we need to also ensure we update the length when removing
@@ -125,12 +148,26 @@ export function proxy(value) {
 				return value;
 			}
 
+			if (DEV && prop === PROXY_PATH_SYMBOL) {
+				return update_path;
+			}
+
 			var s = sources.get(prop);
 			var exists = prop in target;
 
 			// create a source, but only if it's an own property and not a prototype property
 			if (s === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
-				s = with_parent(() => source(proxy(exists ? target[prop] : UNINITIALIZED), stack));
+				s = with_parent(() => {
+					var p = proxy(exists ? target[prop] : UNINITIALIZED);
+					var s = source(p, stack);
+
+					if (DEV) {
+						tag(s, get_label(path, prop));
+					}
+
+					return s;
+				});
+
 				sources.set(prop, s);
 			}
 
@@ -178,7 +215,17 @@ export function proxy(value) {
 				(active_effect !== null && (!has || get_descriptor(target, prop)?.writable))
 			) {
 				if (s === undefined) {
-					s = with_parent(() => source(has ? proxy(target[prop]) : UNINITIALIZED, stack));
+					s = with_parent(() => {
+						var p = has ? proxy(target[prop]) : UNINITIALIZED;
+						var s = source(p, stack);
+
+						if (DEV) {
+							tag(s, get_label(path, prop));
+						}
+
+						return s;
+					});
+
 					sources.set(prop, s);
 				}
 
@@ -207,6 +254,10 @@ export function proxy(value) {
 						// the value of the original item at that index.
 						other_s = with_parent(() => source(UNINITIALIZED, stack));
 						sources.set(i + '', other_s);
+
+						if (DEV) {
+							tag(other_s, get_label(path, i));
+						}
 					}
 				}
 			}
@@ -217,19 +268,23 @@ export function proxy(value) {
 			// object property before writing to that property.
 			if (s === undefined) {
 				if (!has || get_descriptor(target, prop)?.writable) {
-					s = with_parent(() => source(undefined, stack));
-					set(
-						s,
-						with_parent(() => proxy(value))
-					);
+					s = with_parent(() => {
+						var s = source(undefined, stack);
+						set(s, proxy(value));
+						return s;
+					});
+
 					sources.set(prop, s);
+
+					if (DEV) {
+						tag(s, get_label(path, prop));
+					}
 				}
 			} else {
 				has = s.v !== UNINITIALIZED;
-				set(
-					s,
-					with_parent(() => proxy(value))
-				);
+
+				var p = with_parent(() => proxy(value));
+				set(s, p);
 			}
 
 			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
@@ -282,6 +337,16 @@ export function proxy(value) {
 	});
 }
 
+/**
+ * @param {string} path
+ * @param {string | symbol} prop
+ */
+function get_label(path, prop) {
+	if (typeof prop === 'symbol') return `${path}[Symbol(${prop.description ?? ''})]`;
+	if (regex_is_valid_identifier.test(prop)) return `${path}.${prop}`;
+	return /^\d+$/.test(prop) ? `${path}[${prop}]` : `${path}['${prop}']`;
+}
+
 /**
  * @param {Source<number>} signal
  * @param {1 | -1} [d]
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 9d2ad2baee..ad7566f772 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -31,7 +31,7 @@ import {
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
-import { get_stack } from '../dev/tracing.js';
+import { get_stack, tag_proxy } from '../dev/tracing.js';
 import { component_context, is_runes } from '../context.js';
 import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
@@ -141,6 +141,10 @@ export function set(source, value, should_proxy = false) {
 
 	let new_value = should_proxy ? proxy(value) : value;
 
+	if (DEV) {
+		tag_proxy(new_value, /** @type {string} */ (source.label));
+	}
+
 	return internal_set(source, new_value);
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 5ef0097649..c445ade846 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -21,6 +21,7 @@ export interface Value<V = unknown> extends Signal {
 	updated?: Error | null;
 	trace_need_increase?: boolean;
 	trace_v?: V;
+	label?: string;
 	debug?: null | (() => void);
 }
 
diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js
index 1c8e5f15c0..0f3bc6fb9f 100644
--- a/packages/svelte/src/motion/spring.js
+++ b/packages/svelte/src/motion/spring.js
@@ -7,8 +7,10 @@ import { raf } from '../internal/client/timing.js';
 import { is_date } from './utils.js';
 import { set, source } from '../internal/client/reactivity/sources.js';
 import { render_effect } from '../internal/client/reactivity/effects.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { deferred, noop } from '../internal/shared/utils.js';
+import { DEV } from 'esm-env';
 
 /**
  * @template T
@@ -172,8 +174,8 @@ export class Spring {
 	#damping = source(0.8);
 	#precision = source(0.01);
 
-	#current = source(/** @type {T} */ (undefined));
-	#target = source(/** @type {T} */ (undefined));
+	#current;
+	#target;
 
 	#last_value = /** @type {T} */ (undefined);
 	#last_time = 0;
@@ -192,11 +194,20 @@ export class Spring {
 	 * @param {SpringOpts} [options]
 	 */
 	constructor(value, options = {}) {
-		this.#current.v = this.#target.v = value;
+		this.#current = DEV ? tag(source(value), 'Spring.current') : source(value);
+		this.#target = DEV ? tag(source(value), 'Spring.target') : source(value);
 
 		if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1);
 		if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1);
 		if (typeof options.precision === 'number') this.#precision.v = options.precision;
+
+		if (DEV) {
+			tag(this.#stiffness, 'Spring.stiffness');
+			tag(this.#damping, 'Spring.damping');
+			tag(this.#precision, 'Spring.precision');
+			tag(this.#current, 'Spring.current');
+			tag(this.#target, 'Spring.target');
+		}
 	}
 
 	/**
diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js
index 31cddf8f30..09bd06c325 100644
--- a/packages/svelte/src/motion/tweened.js
+++ b/packages/svelte/src/motion/tweened.js
@@ -7,7 +7,9 @@ import { loop } from '../internal/client/loop.js';
 import { linear } from '../easing/index.js';
 import { is_date } from './utils.js';
 import { set, source } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get, render_effect } from 'svelte/internal/client';
+import { DEV } from 'esm-env';
 
 /**
  * @template T
@@ -175,8 +177,8 @@ export function tweened(value, defaults = {}) {
  * @since 5.8.0
  */
 export class Tween {
-	#current = source(/** @type {T} */ (undefined));
-	#target = source(/** @type {T} */ (undefined));
+	#current;
+	#target;
 
 	/** @type {TweenedOptions<T>} */
 	#defaults;
@@ -189,8 +191,14 @@ export class Tween {
 	 * @param {TweenedOptions<T>} options
 	 */
 	constructor(value, options = {}) {
-		this.#current.v = this.#target.v = value;
+		this.#current = source(value);
+		this.#target = source(value);
 		this.#defaults = options;
+
+		if (DEV) {
+			tag(this.#current, 'Tween.current');
+			tag(this.#target, 'Tween.target');
+		}
 	}
 
 	/**
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 63deca62ea..491ffb45cb 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -1,7 +1,9 @@
 import { get, tick, untrack } from '../internal/client/runtime.js';
 import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
 import { source } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { increment } from './utils.js';
+import { DEV } from 'esm-env';
 
 /**
  * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
@@ -51,6 +53,10 @@ export function createSubscriber(start) {
 	/** @type {(() => void) | void} */
 	let stop;
 
+	if (DEV) {
+		tag(version, 'createSubscriber version');
+	}
+
 	return () => {
 		if (effect_tracking()) {
 			get(version);
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 721673bc36..4176f0ceec 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -1,7 +1,9 @@
 /** @import { Source } from '#client' */
 import { derived } from '../internal/client/index.js';
 import { source, set } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
+import { DEV } from 'esm-env';
 
 var inited = false;
 
@@ -49,6 +51,11 @@ export class SvelteDate extends Date {
 	constructor(...params) {
 		// @ts-ignore
 		super(...params);
+
+		if (DEV) {
+			tag(this.#time, 'SvelteDate.#time');
+		}
+
 		if (!inited) this.#init();
 	}
 
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
index 3ae8fe5ad1..eed163dbf2 100644
--- a/packages/svelte/src/reactivity/map.js
+++ b/packages/svelte/src/reactivity/map.js
@@ -1,6 +1,7 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
 import { set, source } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
@@ -62,8 +63,13 @@ export class SvelteMap extends Map {
 	constructor(value) {
 		super();
 
-		// If the value is invalid then the native exception will fire here
-		if (DEV) value = new Map(value);
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Map(value);
+
+			tag(this.#version, 'SvelteMap version');
+			tag(this.#size, 'SvelteMap.size');
+		}
 
 		if (value) {
 			for (var [key, v] of value) {
@@ -82,6 +88,11 @@ export class SvelteMap extends Map {
 			var ret = super.get(key);
 			if (ret !== undefined) {
 				s = source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -113,6 +124,11 @@ export class SvelteMap extends Map {
 			var ret = super.get(key);
 			if (ret !== undefined) {
 				s = source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -138,7 +154,13 @@ export class SvelteMap extends Map {
 		var version = this.#version;
 
 		if (s === undefined) {
-			sources.set(key, source(0));
+			s = source(0);
+
+			if (DEV) {
+				tag(s, `SvelteMap get(${label(key)})`);
+			}
+
+			sources.set(key, s);
 			set(this.#size, super.size);
 			increment(version);
 		} else if (prev_res !== value) {
@@ -197,12 +219,18 @@ export class SvelteMap extends Map {
 		if (this.#size.v !== sources.size) {
 			for (var key of super.keys()) {
 				if (!sources.has(key)) {
-					sources.set(key, source(0));
+					var s = source(0);
+
+					if (DEV) {
+						tag(s, `SvelteMap get(${label(key)})`);
+					}
+
+					sources.set(key, s);
 				}
 			}
 		}
 
-		for (var [, s] of this.#sources) {
+		for ([, s] of this.#sources) {
 			get(s);
 		}
 	}
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index 4a0b4dfdb3..fd22014cb3 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -1,6 +1,7 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
 import { source, set } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
@@ -56,8 +57,13 @@ export class SvelteSet extends Set {
 	constructor(value) {
 		super();
 
-		// If the value is invalid then the native exception will fire here
-		if (DEV) value = new Set(value);
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Set(value);
+
+			tag(this.#version, 'SvelteSet version');
+			tag(this.#size, 'SvelteSet.size');
+		}
 
 		if (value) {
 			for (var element of value) {
@@ -111,6 +117,11 @@ export class SvelteSet extends Set {
 			}
 
 			s = source(true);
+
+			if (DEV) {
+				tag(s, `SvelteSet has(${label(value)})`);
+			}
+
 			sources.set(value, s);
 		}
 
diff --git a/packages/svelte/src/reactivity/url-search-params.js b/packages/svelte/src/reactivity/url-search-params.js
index c1a8275f15..c77ff9c822 100644
--- a/packages/svelte/src/reactivity/url-search-params.js
+++ b/packages/svelte/src/reactivity/url-search-params.js
@@ -1,4 +1,6 @@
+import { DEV } from 'esm-env';
 import { source } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { get_current_url } from './url.js';
 import { increment } from './utils.js';
@@ -32,7 +34,7 @@ export const REPLACE = Symbol();
  * ```
  */
 export class SvelteURLSearchParams extends URLSearchParams {
-	#version = source(0);
+	#version = DEV ? tag(source(0), 'SvelteURLSearchParams version') : source(0);
 	#url = get_current_url();
 
 	#updating = false;
diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js
index 879006f057..56732a0402 100644
--- a/packages/svelte/src/reactivity/url.js
+++ b/packages/svelte/src/reactivity/url.js
@@ -1,4 +1,6 @@
+import { DEV } from 'esm-env';
 import { source, set } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { REPLACE, SvelteURLSearchParams } from './url-search-params.js';
 
@@ -56,6 +58,17 @@ export class SvelteURL extends URL {
 		url = new URL(url, base);
 		super(url);
 
+		if (DEV) {
+			tag(this.#protocol, 'SvelteURL.protocol');
+			tag(this.#username, 'SvelteURL.username');
+			tag(this.#password, 'SvelteURL.password');
+			tag(this.#hostname, 'SvelteURL.hostname');
+			tag(this.#port, 'SvelteURL.port');
+			tag(this.#pathname, 'SvelteURL.pathname');
+			tag(this.#hash, 'SvelteURL.hash');
+			tag(this.#search, 'SvelteURL.search');
+		}
+
 		current_url = this;
 		this.#searchParams = new SvelteURLSearchParams(url.searchParams);
 		current_url = null;
diff --git a/packages/svelte/src/reactivity/window/index.js b/packages/svelte/src/reactivity/window/index.js
index 8c50a5c440..d4fcf29e4e 100644
--- a/packages/svelte/src/reactivity/window/index.js
+++ b/packages/svelte/src/reactivity/window/index.js
@@ -1,8 +1,9 @@
-import { BROWSER } from 'esm-env';
+import { BROWSER, DEV } from 'esm-env';
 import { on } from '../../events/index.js';
 import { ReactiveValue } from '../reactive-value.js';
 import { get } from '../../internal/client/index.js';
 import { set, source } from '../../internal/client/reactivity/sources.js';
+import { tag } from '../../internal/client/dev/tracing.js';
 
 /**
  * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
@@ -147,6 +148,10 @@ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
 		if (BROWSER) {
 			this.#update();
 		}
+
+		if (DEV) {
+			tag(this.#dpr, 'window.devicePixelRatio');
+		}
 	}
 
 	get current() {
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index e62b662372..2d825dbb7c 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -192,3 +192,44 @@ if (typeof window !== 'undefined') {
 }
 
 export const fragments = /** @type {'html' | 'tree'} */ (process.env.FRAGMENTS) ?? 'html';
+
+/**
+ * @param {any[]} logs
+ */
+export function normalise_trace_logs(logs) {
+	let normalised = [];
+
+	logs = logs.slice();
+
+	while (logs.length > 0) {
+		const log = logs.shift();
+
+		if (log instanceof Error) {
+			continue;
+		}
+
+		if (typeof log === 'string' && log.includes('%c')) {
+			const split = log.split('%c');
+
+			const first = /** @type {string} */ (split.shift()).trim();
+			if (first) normalised.push({ log: first });
+
+			while (split.length > 0) {
+				const log = /** @type {string} */ (split.shift()).trim();
+				const highlighted = logs.shift() === 'color: CornflowerBlue; font-weight: bold';
+
+				// omit timings, as they will differ between runs
+				if (/\(.+ms\)/.test(log)) continue;
+
+				normalised.push({
+					log,
+					highlighted
+				});
+			}
+		} else {
+			normalised.push({ log });
+		}
+	}
+
+	return normalised;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js
index f54f78f5c1..5957d2cc6a 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js
@@ -1,29 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
-
-/**
- * @param {any[]} logs
- */
-function normalise_trace_logs(logs) {
-	let normalised = [];
-	for (let i = 0; i < logs.length; i++) {
-		const log = logs[i];
-
-		if (typeof log === 'string' && log.includes('%c')) {
-			const split = log.split('%c');
-			normalised.push({
-				log: (split[0].length !== 0 ? split[0] : split[1]).trim(),
-				highlighted: logs[i + 1] === 'color: CornflowerBlue; font-weight: bold'
-			});
-			i++;
-		} else if (log instanceof Error) {
-			continue;
-		} else {
-			normalised.push({ log });
-		}
-	}
-	return normalised;
-}
+import { normalise_trace_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -34,10 +11,11 @@ export default test({
 		// initial log, everything is highlighted
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'iife', highlighted: false },
+			{ log: 'iife' },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 0 },
-			{ log: 'effect', highlighted: false }
+			{ log: 'effect' }
 		]);
 
 		logs.length = 0;
@@ -47,10 +25,11 @@ export default test({
 		flushSync();
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'iife', highlighted: false },
+			{ log: 'iife' },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 1 },
-			{ log: 'effect', highlighted: false }
+			{ log: 'effect' }
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
index c9a66289a1..683f55f321 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
@@ -1,29 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
-
-/**
- * @param {any[]} logs
- */
-function normalise_trace_logs(logs) {
-	let normalised = [];
-	for (let i = 0; i < logs.length; i++) {
-		const log = logs[i];
-
-		if (typeof log === 'string' && log.includes('%c')) {
-			const split = log.split('%c');
-			normalised.push({
-				log: (split[0].length !== 0 ? split[0] : split[1]).trim(),
-				highlighted: logs[i + 1] === 'color: CornflowerBlue; font-weight: bold'
-			});
-			i++;
-		} else if (log instanceof Error) {
-			continue;
-		} else {
-			normalised.push({ log });
-		}
-	}
-	return normalised;
-}
+import { normalise_trace_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -34,8 +11,9 @@ export default test({
 		// initial log, everything is highlighted
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
 			{ log: false }
 		]);
 
@@ -52,20 +30,26 @@ export default test({
 		// checked changed, effect reassign state, values should be correct and be correctly highlighted
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
 			{ log: true },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 1 },
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
 			{ log: true },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 2 },
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
 			{ log: true },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 3 }
 		]);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
index efa5985e4e..8e9204c90f 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
@@ -1,29 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
-
-/**
- * @param {any[]} logs
- */
-function normalise_trace_logs(logs) {
-	let normalised = [];
-	for (let i = 0; i < logs.length; i++) {
-		const log = logs[i];
-
-		if (typeof log === 'string' && log.includes('%c')) {
-			const split = log.split('%c');
-			normalised.push({
-				log: (split[0].length !== 0 ? split[0] : split[1]).trim(),
-				highlighted: logs[i + 1] === 'color: CornflowerBlue; font-weight: bold'
-			});
-			i++;
-		} else if (log instanceof Error) {
-			continue;
-		} else {
-			normalised.push({ log });
-		}
-	}
-	return normalised;
-}
+import { normalise_trace_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -34,12 +11,15 @@ export default test({
 		// initial log, everything is highlighted
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
 			{ log: 0 },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 0 },
 			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
 			{ log: false }
 		]);
 
@@ -52,12 +32,15 @@ export default test({
 		// count changed, derived and state are highlighted, last state is not
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
 			{ log: 2 },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 1 },
 			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
 			{ log: false }
 		]);
 
@@ -70,12 +53,15 @@ export default test({
 		// checked changed, last state is highlighted, first two are not
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$derived', highlighted: false },
+			{ log: 'double', highlighted: false },
 			{ log: 2 },
 			{ log: '$state', highlighted: false },
+			{ log: 'count', highlighted: false },
 			{ log: 1 },
 			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
 			{ log: true }
 		]);
 
@@ -87,10 +73,12 @@ export default test({
 		// count change and derived it's >=4, checked is not in the dependencies anymore
 
 		assert.deepEqual(normalise_trace_logs(logs), [
-			{ log: 'effect', highlighted: false },
+			{ log: 'effect' },
 			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
 			{ log: 4 },
 			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
 			{ log: 2 }
 		]);
 	}

From 90807ca18d3f488e606bafa0c585c462056c1280 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 11 Jun 2025 17:17:24 +0200
Subject: [PATCH 133/259] fix: properly hydrate dynamic css props components
 and remove element removal (#16118)

---
 .changeset/twelve-foxes-smell.md              |  5 ++++
 .../3-transform/client/visitors/Component.js  | 29 +++++--------------
 .../client/visitors/shared/component.js       | 17 +++++++----
 .../internal/client/dom/blocks/css-props.js   |  4 ---
 .../css-props-dynamic-component/A.svelte      |  7 +++++
 .../css-props-dynamic-component/B.svelte      |  7 +++++
 .../css-props-dynamic-component/_config.js    | 16 ++++++++++
 .../css-props-dynamic-component/main.svelte   | 11 +++++++
 8 files changed, 66 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/twelve-foxes-smell.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte
 create mode 100644 packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte
 create mode 100644 packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte

diff --git a/.changeset/twelve-foxes-smell.md b/.changeset/twelve-foxes-smell.md
new file mode 100644
index 0000000000..1f3be888d8
--- /dev/null
+++ b/.changeset/twelve-foxes-smell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly hydrate dynamic css props components and remove element removal
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
index 783bc38e3c..d58a24b455 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -1,7 +1,6 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '#compiler/builders';
+import { regex_is_valid_identifier } from '../../../patterns.js';
 import { build_component } from './shared/component.js';
 
 /**
@@ -9,24 +8,12 @@ import { build_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	if (node.metadata.dynamic) {
-		// Handle dynamic references to what seems like static inline components
-		const component = build_component(node, '$$component', context, b.id('$$anchor'));
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.component',
-					context.state.node,
-					// TODO use untrack here to not update when binding changes?
-					// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
-					b.thunk(/** @type {Expression} */ (context.visit(b.member_id(node.name)))),
-					b.arrow([b.id('$$anchor'), b.id('$$component')], b.block([component]))
-				)
-			)
-		);
-		return;
-	}
-
-	const component = build_component(node, node.name, context);
+	const component = build_component(
+		node,
+		// if it's not dynamic we will just use the node name, if it is dynamic we will use the node name
+		// only if it's a valid identifier, otherwise we will use a default name
+		!node.metadata.dynamic || regex_is_valid_identifier.test(node.name) ? node.name : '$$component',
+		context
+	);
 	context.state.init.push(component);
 }
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 ff98d6d378..a1c4025d60 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
@@ -13,10 +13,13 @@ import { determine_slot } from '../../../../../utils/slot.js';
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {string} component_name
  * @param {ComponentContext} context
- * @param {Expression} anchor
  * @returns {Statement}
  */
-export function build_component(node, component_name, context, anchor = context.state.node) {
+export function build_component(node, component_name, context) {
+	/**
+	 * @type {Expression}
+	 */
+	const anchor = context.state.node;
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
 	/** @type {Array<() => void>} */
@@ -411,7 +414,7 @@ export function build_component(node, component_name, context, anchor = context.
 			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
 			// will be handled separately through the `$.component` function, and then the component name will
 			// always be referenced through just the identifier here.
-			node.type === 'SvelteComponent'
+			node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)
 				? component_name
 				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
 			node_id,
@@ -429,14 +432,18 @@ export function build_component(node, component_name, context, anchor = context.
 
 	const statements = [...snippet_declarations];
 
-	if (node.type === 'SvelteComponent') {
+	if (node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)) {
 		const prev = fn;
 
 		fn = (node_id) => {
 			return b.call(
 				'$.component',
 				node_id,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				b.thunk(
+					/** @type {Expression} */ (
+						context.visit(node.type === 'Component' ? b.member_id(node.name) : node.expression)
+					)
+				),
 				b.arrow(
 					[b.id('$$anchor'), b.id(component_name)],
 					b.block([...binding_initializers, b.stmt(prev(b.id('$$anchor')))])
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index ecbcfd3e83..ef36198753 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -26,8 +26,4 @@ export function css_props(element, get_styles) {
 			}
 		}
 	});
-
-	teardown(() => {
-		element.remove();
-	});
 }
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte
new file mode 100644
index 0000000000..694b26f231
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte
@@ -0,0 +1,7 @@
+<div>a</div>
+
+<style>
+	div{
+		color: var(--prop);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte
new file mode 100644
index 0000000000..06f28c4f75
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte
@@ -0,0 +1,7 @@
+<div>b</div>
+
+<style>
+	div{
+		color: var(--prop);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js
new file mode 100644
index 0000000000..7629633835
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../assert';
+import { flushSync } from 'svelte';
+
+export default test({
+	warnings: [],
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		let div = /** @type {HTMLElement} */ (target.querySelector('div'));
+		assert.equal(getComputedStyle(div).color, 'rgb(255, 0, 0)');
+		flushSync(() => {
+			btn?.click();
+		});
+		div = /** @type {HTMLElement} */ (target.querySelector('div'));
+		assert.equal(getComputedStyle(div).color, 'rgb(255, 0, 0)');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte
new file mode 100644
index 0000000000..055ce57da5
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import A from "./B.svelte";
+	import B from "./A.svelte";
+	let value = $state(0);
+
+	let Comp = $derived(value % 2 === 0 ? A : B);
+</script>
+
+<button onclick={()=>value++}>click</button>
+
+<Comp --prop="red"/>
\ No newline at end of file

From 292af8d38a53295b60ba66eb41a89edd2b1cabec Mon Sep 17 00:00:00 2001
From: "L." <h4ckedneko@gmail.com>
Date: Wed, 11 Jun 2025 23:53:14 +0800
Subject: [PATCH 134/259] feat: add `command` and `commandfor` to
 `HTMLButtonAttributes` (#16117)

* feat: add `command` and `commandfor` to `HTMLButtonAttributes`

* Update .changeset/empty-cherries-act.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/empty-cherries-act.md |  5 +++++
 packages/svelte/elements.d.ts    | 11 +++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 .changeset/empty-cherries-act.md

diff --git a/.changeset/empty-cherries-act.md b/.changeset/empty-cherries-act.md
new file mode 100644
index 0000000000..62758f6e81
--- /dev/null
+++ b/.changeset/empty-cherries-act.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `command` and `commandfor` to `HTMLButtonAttributes`
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 8a1bdd0e6d..076cc71b38 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -926,6 +926,17 @@ export interface HTMLButtonAttributes extends HTMLAttributes<HTMLButtonElement>
 	value?: string | string[] | number | undefined | null;
 	popovertarget?: string | undefined | null;
 	popovertargetaction?: 'toggle' | 'show' | 'hide' | undefined | null;
+	command?:
+		| 'show-modal'
+		| 'close'
+		| 'request-close'
+		| 'show-popover'
+		| 'hide-popover'
+		| 'toggle-popover'
+		| (string & {})
+		| undefined
+		| null;
+	commandfor?: string | undefined | null;
 }
 
 export interface HTMLCanvasAttributes extends HTMLAttributes<HTMLCanvasElement> {

From 438349eb88335fce7f199aac0b95ef05bfb7f453 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 11 Jun 2025 18:44:22 -0400
Subject: [PATCH 135/259] fix: better `$inspect.trace()` output (#16131)

* remove code thatcan't be reached and would error if it could

* tidy up types, fix duplication

* this seems needless

* better naming

* tidy up

* reorder

* this code doesn't appear to do anything useful, and no tests fail without it

* unused

* WIP

* revert part of #14811. it makes no sense to show the initial value, it just makes things inconsistent with deriveds. personally i find it more confusing anyway

* explanatory comment on both sides

* make things a bit more self-explanatory

* simplify

* missing type

* only log UpdatedAt for dirty signals

* changeset

* lint

* Revert "unused"

This reverts commit a95b6258004716f4838f05249b7fe718f0ccec2b.

* complete revert

* ok it works now
---
 .changeset/strong-clouds-switch.md            |  5 ++
 .../svelte/src/internal/client/dev/tracing.js | 74 +++++++------------
 .../src/internal/client/dom/blocks/each.js    |  2 +-
 .../src/internal/client/reactivity/sources.js | 12 ++-
 .../src/internal/client/reactivity/types.d.ts | 18 +++--
 .../svelte/src/internal/client/runtime.js     | 50 +++++++------
 .../svelte/tests/runtime-legacy/shared.ts     |  2 +-
 .../samples/inspect-trace-each/Entry.svelte   |  8 ++
 .../samples/inspect-trace-each/_config.js     | 40 ++++++++++
 .../samples/inspect-trace-each/main.svelte    | 11 +++
 .../inspect-trace-reassignment/_config.js     |  4 +-
 11 files changed, 143 insertions(+), 83 deletions(-)
 create mode 100644 .changeset/strong-clouds-switch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte

diff --git a/.changeset/strong-clouds-switch.md b/.changeset/strong-clouds-switch.md
new file mode 100644
index 0000000000..9444d3f164
--- /dev/null
+++ b/.changeset/strong-clouds-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better `$inspect.trace()` output
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 18b99c31b0..5834f5bffd 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -6,40 +6,26 @@ import { DERIVED, 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';
 
-/** @type { any } */
+/**
+ * @typedef {{
+ *   traces: Error[];
+ * }} TraceEntry
+ */
+
+/** @type {{ reaction: Reaction | null, entries: Map<Value, TraceEntry> } | null} */
 export let tracing_expressions = null;
 
 /**
- * @param { Value } signal
- * @param { { read: Error[] } } [entry]
+ * @param {Value} signal
+ * @param {TraceEntry} [entry]
  */
 function log_entry(signal, entry) {
-	const debug = signal.debug;
-	const value = signal.trace_need_increase ? signal.trace_v : signal.v;
+	const value = signal.v;
 
 	if (value === UNINITIALIZED) {
 		return;
 	}
 
-	if (debug) {
-		var previous_captured_signals = captured_signals;
-		var captured = new Set();
-		set_captured_signals(captured);
-		try {
-			untrack(() => {
-				debug();
-			});
-		} finally {
-			set_captured_signals(previous_captured_signals);
-		}
-		if (captured.size > 0) {
-			for (const dep of captured) {
-				log_entry(dep);
-			}
-			return;
-		}
-	}
-
 	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
@@ -69,17 +55,15 @@ function log_entry(signal, entry) {
 		console.log(signal.created);
 	}
 
-	if (signal.updated) {
+	if (dirty && signal.updated) {
 		// eslint-disable-next-line no-console
 		console.log(signal.updated);
 	}
 
-	const read = entry?.read;
-
-	if (read && read.length > 0) {
-		for (var stack of read) {
+	if (entry) {
+		for (var trace of entry.traces) {
 			// eslint-disable-next-line no-console
-			console.log(stack);
+			console.log(trace);
 		}
 	}
 
@@ -94,6 +78,7 @@ function log_entry(signal, entry) {
  */
 export function trace(label, fn) {
 	var previously_tracing_expressions = tracing_expressions;
+
 	try {
 		tracing_expressions = { entries: new Map(), reaction: active_reaction };
 
@@ -101,39 +86,32 @@ export function trace(label, fn) {
 		var value = fn();
 		var time = (performance.now() - start).toFixed(2);
 
+		var prefix = untrack(label);
+
 		if (!effect_tracking()) {
 			// eslint-disable-next-line no-console
-			console.log(`${label()} %cran outside of an effect (${time}ms)`, 'color: grey');
+			console.log(`${prefix} %cran outside of an effect (${time}ms)`, 'color: grey');
 		} else if (tracing_expressions.entries.size === 0) {
 			// eslint-disable-next-line no-console
-			console.log(`${label()} %cno reactive dependencies (${time}ms)`, 'color: grey');
+			console.log(`${prefix} %cno reactive dependencies (${time}ms)`, 'color: grey');
 		} else {
 			// eslint-disable-next-line no-console
-			console.group(`${label()} %c(${time}ms)`, 'color: grey');
+			console.group(`${prefix} %c(${time}ms)`, 'color: grey');
 
 			var entries = tracing_expressions.entries;
 
+			untrack(() => {
+				for (const [signal, traces] of entries) {
+					log_entry(signal, traces);
+				}
+			});
+
 			tracing_expressions = null;
 
-			for (const [signal, entry] of entries) {
-				log_entry(signal, entry);
-			}
 			// eslint-disable-next-line no-console
 			console.groupEnd();
 		}
 
-		if (previously_tracing_expressions !== null && tracing_expressions !== null) {
-			for (const [signal, entry] of tracing_expressions.entries) {
-				var prev_entry = previously_tracing_expressions.get(signal);
-
-				if (prev_entry === undefined) {
-					previously_tracing_expressions.set(signal, entry);
-				} else {
-					prev_entry.read.push(...entry.read);
-				}
-			}
-		}
-
 		return value;
 	} finally {
 		tracing_expressions = previously_tracing_expressions;
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 2997664fa2..954dcb2214 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -527,7 +527,7 @@ function create_item(
 	if (DEV && reactive) {
 		// For tracing purposes, we need to link the source signal we create with the
 		// collection + index so that tracing works as intended
-		/** @type {Value} */ (v).debug = () => {
+		/** @type {Value} */ (v).trace = () => {
 			var collection_index = typeof i === 'number' ? index : i.v;
 			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 			get_collection()[collection_index];
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index ad7566f772..40a3e4e77f 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -37,6 +37,8 @@ import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
 
 export let inspect_effects = new Set();
+
+/** @type {Map<Source, any>} */
 export const old_values = new Map();
 
 /**
@@ -66,7 +68,9 @@ export function source(v, stack) {
 
 	if (DEV && tracing_mode_flag) {
 		signal.created = stack ?? get_stack('CreatedAt');
-		signal.debug = null;
+		signal.updated = null;
+		signal.set_during_effect = false;
+		signal.trace = null;
 	}
 
 	return signal;
@@ -168,9 +172,9 @@ export function internal_set(source, value) {
 
 		if (DEV && tracing_mode_flag) {
 			source.updated = get_stack('UpdatedAt');
-			if (active_effect != null) {
-				source.trace_need_increase = true;
-				source.trace_v ??= old_value;
+
+			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 c445ade846..756bb98f09 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -16,13 +16,21 @@ export interface Value<V = unknown> extends Signal {
 	rv: number;
 	/** The latest value for this signal */
 	v: V;
-	/** Dev only */
+
+	// dev-only
+	/** A label (e.g. the `foo` in `let foo = $state(...)`) used for `$inspect.trace()` */
+	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;
-	trace_need_increase?: boolean;
-	trace_v?: V;
-	label?: string;
-	debug?: null | (() => void);
+	/**
+	 * 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
+	 */
+	set_during_effect?: boolean;
+	/** A function that retrieves the underlying source, used for each block item signals */
+	trace?: null | (() => void);
 }
 
 export interface Reaction extends Signal {
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 51402ac88c..9544060959 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -39,6 +39,7 @@ import {
 	set_dev_current_component_function
 } from './context.js';
 import { handle_error, invoke_error_boundary } from './error-handling.js';
+import { snapshot } from '../shared/clone.js';
 
 let is_flushing = false;
 
@@ -447,19 +448,13 @@ export function update_effect(effect) {
 		effect.teardown = typeof teardown === 'function' ? teardown : null;
 		effect.wv = write_version;
 
-		var deps = effect.deps;
-
-		// In DEV, we need to handle a case where $inspect.trace() might
-		// incorrectly state a source dependency has not changed when it has.
-		// That's beacuse that source was changed by the same effect, causing
-		// the versions to match. We can avoid this by incrementing the version
-		if (DEV && tracing_mode_flag && (effect.f & DIRTY) !== 0 && deps !== null) {
-			for (let i = 0; i < deps.length; i++) {
-				var dep = deps[i];
-				if (dep.trace_need_increase) {
+		// In DEV, increment versions of any sources that were written to during the effect,
+		// so that they are correctly marked as dirty when the effect re-runs
+		if (DEV && tracing_mode_flag && (effect.f & DIRTY) !== 0 && effect.deps !== null) {
+			for (var dep of effect.deps) {
+				if (dep.set_during_effect) {
 					dep.wv = increment_write_version();
-					dep.trace_need_increase = undefined;
-					dep.trace_v = undefined;
+					dep.set_during_effect = false;
 				}
 			}
 		}
@@ -775,22 +770,33 @@ export function get(signal) {
 	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.debug) {
-			signal.debug();
-		} else if (signal.created) {
-			var entry = tracing_expressions.entries.get(signal);
-
-			if (entry === undefined) {
-				entry = { read: [] };
-				tracing_expressions.entries.set(signal, entry);
-			}
+		if (signal.trace) {
+			signal.trace();
+		} else {
+			var trace = get_stack('TracedAt');
 
-			entry.read.push(get_stack('TracedAt'));
+			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];
+
+				// 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);
+				}
+			}
 		}
 	}
 
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index c0d1177a82..11ea9f6dda 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -3,7 +3,7 @@ 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 } from 'svelte';
+import { flushSync, hydrate, mount, unmount, untrack } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
 import { compile_directory, fragments } from '../helpers.js';
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte
new file mode 100644
index 0000000000..a22f006dcc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { entry } = $props();
+
+	$effect(() => {
+		$inspect.trace('effect');
+		entry;
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js
new file mode 100644
index 0000000000..94cd9d8aaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js
@@ -0,0 +1,40 @@
+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: '$state', highlighted: true },
+			{ log: 'array', highlighted: false },
+			{ log: [{ id: 1, hi: true }] },
+			// this _doesn't_ appear in the browser, but it does appear during tests
+			// and i cannot for the life of me figure out why. this does at least
+			// test that we don't log `array[0].id` etc
+			{ log: '$state', highlighted: true },
+			{ log: 'array[0]', highlighted: false },
+			{ log: { id: 1, hi: true } }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'array', highlighted: false },
+			{ log: [{ id: 1, hi: false }] },
+			{ log: '$state', highlighted: false },
+			{ log: 'array[0]', highlighted: false },
+			{ log: { id: 1, hi: false } }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte
new file mode 100644
index 0000000000..e89ee7d9bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Entry from './Entry.svelte';
+
+	let array = $state([{ id: 1, hi: true }]);
+</script>
+
+<button onclick={() => array = [{ id: 1, hi: false}]}>update</button>
+
+{#each array as entry (entry.id)}
+	<Entry {entry} />
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
index 683f55f321..b4f2cf3691 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
@@ -36,14 +36,14 @@ export default test({
 			{ log: true },
 			{ log: '$state', highlighted: true },
 			{ log: 'count', highlighted: false },
-			{ log: 1 },
+			{ log: 2 },
 			{ log: 'effect' },
 			{ log: '$state', highlighted: false },
 			{ log: 'checked', highlighted: false },
 			{ log: true },
 			{ log: '$state', highlighted: true },
 			{ log: 'count', highlighted: false },
-			{ log: 2 },
+			{ log: 3 },
 			{ log: 'effect' },
 			{ log: '$state', highlighted: false },
 			{ log: 'checked', highlighted: false },

From ee25c15a9605176f60665ade76e4061fbbea4efd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 19:03:55 -0400
Subject: [PATCH 136/259] Version Packages (#16128)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/big-teachers-agree.md   |  5 -----
 .changeset/empty-cherries-act.md   |  5 -----
 .changeset/strong-clouds-switch.md |  5 -----
 .changeset/twelve-foxes-smell.md   |  5 -----
 packages/svelte/CHANGELOG.md       | 14 ++++++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 7 files changed, 16 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/big-teachers-agree.md
 delete mode 100644 .changeset/empty-cherries-act.md
 delete mode 100644 .changeset/strong-clouds-switch.md
 delete mode 100644 .changeset/twelve-foxes-smell.md

diff --git a/.changeset/big-teachers-agree.md b/.changeset/big-teachers-agree.md
deleted file mode 100644
index f9044541d7..0000000000
--- a/.changeset/big-teachers-agree.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: add source name logging to `$inspect.trace`
diff --git a/.changeset/empty-cherries-act.md b/.changeset/empty-cherries-act.md
deleted file mode 100644
index 62758f6e81..0000000000
--- a/.changeset/empty-cherries-act.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add `command` and `commandfor` to `HTMLButtonAttributes`
diff --git a/.changeset/strong-clouds-switch.md b/.changeset/strong-clouds-switch.md
deleted file mode 100644
index 9444d3f164..0000000000
--- a/.changeset/strong-clouds-switch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: better `$inspect.trace()` output
diff --git a/.changeset/twelve-foxes-smell.md b/.changeset/twelve-foxes-smell.md
deleted file mode 100644
index 1f3be888d8..0000000000
--- a/.changeset/twelve-foxes-smell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: properly hydrate dynamic css props components and remove element removal
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e91407ddf8..34e1c2fc6e 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.34.0
+
+### Minor Changes
+
+- feat: add source name logging to `$inspect.trace` ([#16060](https://github.com/sveltejs/svelte/pull/16060))
+
+### Patch Changes
+
+- fix: add `command` and `commandfor` to `HTMLButtonAttributes` ([#16117](https://github.com/sveltejs/svelte/pull/16117))
+
+- fix: better `$inspect.trace()` output ([#16131](https://github.com/sveltejs/svelte/pull/16131))
+
+- fix: properly hydrate dynamic css props components and remove element removal ([#16118](https://github.com/sveltejs/svelte/pull/16118))
+
 ## 5.33.19
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 7dd4b08f3d..e412a5a741 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.33.19",
+  "version": "5.34.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2c712391af..42f59dffad 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.33.19';
+export const VERSION = '5.34.0';
 export const PUBLIC_VERSION = '5';

From e8a7c426d4f80afca31821997ef412824831328b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 11 Jun 2025 19:38:10 -0400
Subject: [PATCH 137/259] remove errant log

---
 .../runtime-runes/samples/flush-sync-no-scheduled/_config.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
index 33a59dfbd3..85e06fa8ec 100644
--- a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
@@ -5,7 +5,6 @@ export default test({
 		const btn = target.querySelector('button');
 		const main = target.querySelector('main');
 		ok(main);
-		console.log(main.innerHTML);
 		assert.htmlEqual(main.innerHTML, `<div>true</div>`);
 		// we don't want to use flush sync (or tick that use it inside) since we are testing that calling `flushSync` once
 		// when there are no scheduled effects does not cause reactivity to break

From f5a020d56bdf07cba501895a496c036172a6d995 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 11 Jun 2025 20:26:45 -0400
Subject: [PATCH 138/259] fix: correctly tag private class state fields
 (#16132)

---
 .changeset/three-steaks-wash.md               |  5 +++
 .../3-transform/client/visitors/ClassBody.js  |  2 +-
 .../samples/inspect-trace-class/_config.js    | 31 +++++++++++++++++++
 .../samples/inspect-trace-class/main.svelte   | 28 +++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/three-steaks-wash.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte

diff --git a/.changeset/three-steaks-wash.md b/.changeset/three-steaks-wash.md
new file mode 100644
index 0000000000..caf0ea2bfe
--- /dev/null
+++ b/.changeset/three-steaks-wash.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly tag private class state fields
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index e78a8824dd..5bd9add2a5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -78,7 +78,7 @@ export function ClassBody(node, context) {
 				? /** @type {CallExpression} */ (context.visit(definition.value, child_state))
 				: undefined;
 
-			if (dev) {
+			if (dev && field.node === definition) {
 				value = b.call('$.tag', value, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
 			}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js
new file mode 100644
index 0000000000..98b3fb6cbc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js
@@ -0,0 +1,31 @@
+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: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 0 }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 1 }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte
new file mode 100644
index 0000000000..56bd497e09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#count;
+
+		constructor() {
+			this.#count = $state(0);
+		}
+
+		get count() {
+			return this.#count;
+		}
+
+		increment = () => {
+			this.#count += 1;
+		}
+	}
+
+	const counter = new Counter();
+
+	$effect(() => {
+		$inspect.trace('effect');
+		counter.count;
+	});
+</script>
+
+<button onclick={counter.increment}>
+	clicks: {counter.count}
+</button>

From f0497b15ee48b477f5213faff335a68e960e8f7d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 20:55:51 -0400
Subject: [PATCH 139/259] Version Packages (#16133)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/three-steaks-wash.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/three-steaks-wash.md

diff --git a/.changeset/three-steaks-wash.md b/.changeset/three-steaks-wash.md
deleted file mode 100644
index caf0ea2bfe..0000000000
--- a/.changeset/three-steaks-wash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly tag private class state fields
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 34e1c2fc6e..23d834108a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.34.1
+
+### Patch Changes
+
+- fix: correctly tag private class state fields ([#16132](https://github.com/sveltejs/svelte/pull/16132))
+
 ## 5.34.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e412a5a741..83d5b8c3e6 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.34.0",
+  "version": "5.34.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 42f59dffad..2d603694d2 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.34.0';
+export const VERSION = '5.34.1';
 export const PUBLIC_VERSION = '5';

From 6a7df1cce82e2f7df21f056d89458d2fb47530cc Mon Sep 17 00:00:00 2001
From: "Lyu, Wei-Da" <36730922+jasonlyu123@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:59:20 +0800
Subject: [PATCH 140/259] fix: add missing typings for some dimension bindings
 (#16142)

* fix: typings for dimension bindings

* tweak description
---
 .changeset/clever-cats-invent.md | 5 +++++
 packages/svelte/elements.d.ts    | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/clever-cats-invent.md

diff --git a/.changeset/clever-cats-invent.md b/.changeset/clever-cats-invent.md
new file mode 100644
index 0000000000..589b7d3eae
--- /dev/null
+++ b/.changeset/clever-cats-invent.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add missing typings for some dimension bindings
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 076cc71b38..fe4078f56a 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -844,6 +844,10 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	readonly 'bind:borderBoxSize'?: Array<ResizeObserverSize> | undefined | null;
 	readonly 'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
 	readonly 'bind:focused'?: boolean | undefined | null;
+	readonly 'bind:clientWidth'?: number | undefined | null;
+	readonly 'bind:clientHeight'?: number | undefined | null;
+	readonly 'bind:offsetWidth'?: number | undefined | null;
+	readonly 'bind:offsetHeight'?: number | undefined | null;
 
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;

From 36315fece462cf1a2afc4f1d44f9f527df3ae7db Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sat, 14 Jun 2025 04:18:52 -0700
Subject: [PATCH 141/259] fix: prune typescript class field declarations
 (#16154)

* fix: prune typescript class field declarations

* add test
---
 .changeset/neat-lemons-occur.md                     |  5 +++++
 .../phases/1-parse/remove_typescript_nodes.js       | 13 +++++++++++++
 .../runtime-runes/samples/typescript/main.svelte    |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 .changeset/neat-lemons-occur.md

diff --git a/.changeset/neat-lemons-occur.md b/.changeset/neat-lemons-occur.md
new file mode 100644
index 0000000000..53d77ed764
--- /dev/null
+++ b/.changeset/neat-lemons-occur.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prune typescript class field declarations
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index aba94ee20d..cb498c3c13 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -115,6 +115,19 @@ const visitors = {
 	TSDeclareFunction() {
 		return b.empty;
 	},
+	ClassBody(node, context) {
+		const body = [];
+		for (const _child of node.body) {
+			const child = context.visit(_child);
+			if (child.type !== 'PropertyDefinition' || !child.declare) {
+				body.push(child);
+			}
+		}
+		return {
+			...node,
+			body
+		};
+	},
 	ClassDeclaration(node, context) {
 		if (node.declare) {
 			return b.empty;
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index d1b6452df4..4fc7c4ec38 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -14,6 +14,7 @@
 
 	class Foo<T> {
 		public name: string;
+		declare bar: string;
 		x = 'x' as const;
 		constructor(name: string) {
 			this.name = name;

From da63318191f85baf302e494615f23b46f74908f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Jun 2025 08:31:00 -0400
Subject: [PATCH 142/259] Version Packages (#16147)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/clever-cats-invent.md | 5 -----
 .changeset/neat-lemons-occur.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/clever-cats-invent.md
 delete mode 100644 .changeset/neat-lemons-occur.md

diff --git a/.changeset/clever-cats-invent.md b/.changeset/clever-cats-invent.md
deleted file mode 100644
index 589b7d3eae..0000000000
--- a/.changeset/clever-cats-invent.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add missing typings for some dimension bindings
diff --git a/.changeset/neat-lemons-occur.md b/.changeset/neat-lemons-occur.md
deleted file mode 100644
index 53d77ed764..0000000000
--- a/.changeset/neat-lemons-occur.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prune typescript class field declarations
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 23d834108a..563086d8d9 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.34.2
+
+### Patch Changes
+
+- fix: add missing typings for some dimension bindings ([#16142](https://github.com/sveltejs/svelte/pull/16142))
+
+- fix: prune typescript class field declarations ([#16154](https://github.com/sveltejs/svelte/pull/16154))
+
 ## 5.34.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 83d5b8c3e6..2e4234fcaf 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.34.1",
+  "version": "5.34.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2d603694d2..c1df14d295 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.34.1';
+export const VERSION = '5.34.2';
 export const PUBLIC_VERSION = '5';

From 113a3daab2a2742127a5857b76d1314deb260e03 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sat, 14 Jun 2025 17:14:39 +0200
Subject: [PATCH 143/259] fix: don't define `error.message` if it's not
 configurable (#16149)

* fix: don't define `error.message` if it's not configurable

* fix: print console.error with updated stack

* fix: revert second `console.error`
---
 .changeset/unlucky-plants-jump.md                     |  5 +++++
 packages/svelte/src/internal/client/error-handling.js |  8 +++++++-
 .../samples/non-configurable-errors/_config.js        |  8 ++++++++
 .../samples/non-configurable-errors/main.svelte       | 11 +++++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/unlucky-plants-jump.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte

diff --git a/.changeset/unlucky-plants-jump.md b/.changeset/unlucky-plants-jump.md
new file mode 100644
index 0000000000..814cb99b69
--- /dev/null
+++ b/.changeset/unlucky-plants-jump.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't define `error.message` if it's not configurable
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index aeec1d8b47..99f3ed6cd4 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -3,7 +3,7 @@ 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 { define_property } from '../shared/utils.js';
+import { define_property, get_descriptor } from '../shared/utils.js';
 import { active_effect } from './runtime.js';
 
 /**
@@ -63,6 +63,12 @@ function adjust_error(error, effect) {
 	if (adjusted_errors.has(error)) return;
 	adjusted_errors.add(error);
 
+	const message_descriptor = get_descriptor(error, 'message');
+
+	// if the message was already changed and it's not configurable we can't change it
+	// or it will throw a different error swallowing the original error
+	if (message_descriptor && !message_descriptor.configurable) return;
+
 	var indent = is_firefox ? '  ' : '\t';
 	var component_stack = `\n${indent}in ${effect.fn?.name || '<unknown>'}`;
 	var context = effect.ctx;
diff --git a/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js
new file mode 100644
index 0000000000..5bbe4483d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	error: 'test'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte
new file mode 100644
index 0000000000..f71a5e6c43
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	class CustomError extends Error {
+	  constructor() {
+	    super();
+	    Object.defineProperty(this, "message", {
+			value: "test"
+		});
+	  }
+	}
+	throw new CustomError()
+</script>

From 92ea58bee6f27dde6b1d29527c0e2f97047219f0 Mon Sep 17 00:00:00 2001
From: Matei Trandafir <catalin_trand2@yahoo.com>
Date: Sat, 14 Jun 2025 18:15:19 +0300
Subject: [PATCH 144/259] fix: don't eagerly execute deriveds on resume
 (#16150)

* Add failing test

* Add {@const} test case

* Fix the bug

* Add yet another test case

* Better fix

* Changeset

* simplify

* this appears to be unnecessary

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/poor-pumpkins-exercise.md          |  5 ++++
 .../src/internal/client/reactivity/effects.js | 13 ++++-------
 .../if-nested-template/Component.svelte       |  7 ++++++
 .../samples/if-nested-template/_config.js     | 17 ++++++++++++++
 .../samples/if-nested-template/main.svelte    | 23 +++++++++++++++++++
 5 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/poor-pumpkins-exercise.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte

diff --git a/.changeset/poor-pumpkins-exercise.md b/.changeset/poor-pumpkins-exercise.md
new file mode 100644
index 0000000000..cd5d08a9b5
--- /dev/null
+++ b/.changeset/poor-pumpkins-exercise.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't eagerly execute deriveds on resume
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 54994b9bd1..625c0d1822 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -329,6 +329,7 @@ export function render_effect(fn) {
 /**
  * @param {(...expressions: any) => void | (() => void)} fn
  * @param {Array<() => any>} thunks
+ * @param {<T>(fn: () => T) => Derived<T>} d
  * @returns {Effect}
  */
 export function template_effect(fn, thunks = [], d = derived) {
@@ -598,15 +599,11 @@ function resume_children(effect, local) {
 	if ((effect.f & INERT) === 0) return;
 	effect.f ^= INERT;
 
-	// Ensure the effect is marked as clean again so that any dirty child
-	// effects can schedule themselves for execution
-	if ((effect.f & CLEAN) === 0) {
-		effect.f ^= CLEAN;
-	}
-
 	// If a dependency of this effect changed while it was paused,
-	// schedule the effect to update
-	if (check_dirtiness(effect)) {
+	// schedule the effect to update. we don't use `check_dirtiness`
+	// 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);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte b/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte
new file mode 100644
index 0000000000..b4281bbcbd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { value } = $props()
+
+	const text = $derived(value.toString())
+
+	$effect(() => console.log(text))
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js b/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js
new file mode 100644
index 0000000000..673f668916
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		flushSync(() => btn1?.click());
+		assert.htmlEqual(div.innerHTML, '123 123');
+		assert.equal(div.inert, true);
+
+		flushSync(() => btn2?.click());
+		assert.htmlEqual(div.innerHTML, '');
+		assert.deepEqual(logs, ['123']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte
new file mode 100644
index 0000000000..04afa7d664
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Component from './Component.svelte';
+
+	let outer = $state(true);
+	let inner = $state(123);
+
+	function outro() {
+		return { duration: 100 };
+	}
+</script>
+
+{#if outer}
+	<div out:outro>
+		{#if inner}
+			{@const text = inner.toString()}
+			{text} {inner.toString()}
+			<Component value={inner} />
+		{/if}
+	</div>
+{/if}
+
+<button onclick={() => { outer = false; inner = undefined; }}>Set both to falsy</button>
+<button onclick={() => { outer = true }}>Set outer to truthy</button>

From 6636f748ae770e905ca9e88e9a921b4bc854164c Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Sat, 14 Jun 2025 18:19:42 +0300
Subject: [PATCH 145/259] fix: prevent memory leaking signals in legacy mode
 (#16145)

* fix: prevent memory leaking signals in legacy mode

* format

* fix

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/soft-oranges-approve.md                        | 5 +++++
 packages/svelte/src/internal/client/dom/blocks/await.js   | 6 ++++--
 packages/svelte/src/internal/client/dom/blocks/each.js    | 2 +-
 packages/svelte/src/internal/client/reactivity/sources.js | 4 ++--
 packages/svelte/src/legacy/legacy-client.js               | 2 +-
 5 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/soft-oranges-approve.md

diff --git a/.changeset/soft-oranges-approve.md b/.changeset/soft-oranges-approve.md
new file mode 100644
index 0000000000..f759c128c0
--- /dev/null
+++ b/.changeset/soft-oranges-approve.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent memory leaking signals in legacy mode
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 99bdc0000c..47df5fc9a5 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -58,8 +58,10 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 	/** @type {Effect | null} */
 	var catch_effect;
 
-	var input_source = (runes ? source : mutable_source)(/** @type {V} */ (undefined));
-	var error_source = (runes ? source : mutable_source)(undefined);
+	var input_source = runes
+		? source(/** @type {V} */ (undefined))
+		: mutable_source(/** @type {V} */ (undefined), false, false);
+	var error_source = runes ? source(undefined) : mutable_source(undefined, false, false);
 	var resolved = false;
 
 	/**
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 954dcb2214..b638a6d2da 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -521,7 +521,7 @@ function create_item(
 	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
 	var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
 
-	var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
+	var v = reactive ? (mutable ? mutable_source(value, false, false) : source(value)) : value;
 	var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
 
 	if (DEV && reactive) {
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 40a3e4e77f..56f4138252 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -97,7 +97,7 @@ export function state(v, stack) {
  * @returns {Source<V>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function mutable_source(initial_value, immutable = false) {
+export function mutable_source(initial_value, immutable = false, trackable = true) {
 	const s = source(initial_value);
 	if (!immutable) {
 		s.equals = safe_equals;
@@ -105,7 +105,7 @@ export function mutable_source(initial_value, immutable = false) {
 
 	// bind the signal to the component context, in case we need to
 	// track updates to trigger beforeUpdate/afterUpdate callbacks
-	if (legacy_mode_flag && component_context !== null && component_context.l !== null) {
+	if (legacy_mode_flag && trackable && component_context !== null && component_context.l !== null) {
 		(component_context.l.s ??= []).push(s);
 	}
 
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index bb9a5a9c03..45c478ecab 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -82,7 +82,7 @@ class Svelte4Component {
 		 * @param {unknown} value
 		 */
 		var add_source = (key, value) => {
-			var s = mutable_source(value);
+			var s = mutable_source(value, false, false);
 			sources.set(key, s);
 			return s;
 		};

From 5c5536eaa158b4404f49ede3401e7cdee99be165 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Sat, 14 Jun 2025 18:48:32 +0300
Subject: [PATCH 146/259] docs: clarify style precedence (#16158)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 documentation/docs/03-template-syntax/17-style.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
index 749376c6e2..aa61cdcde3 100644
--- a/documentation/docs/03-template-syntax/17-style.md
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -34,8 +34,10 @@ To mark a style as important, use the `|important` modifier:
 <div style:color|important="red">...</div>
 ```
 
-When `style:` directives are combined with `style` attributes, the directives will take precedence:
+When `style:` directives are combined with `style` attributes, the directives will take precedence,
+even over `!important` properties:
 
 ```svelte
-<div style="color: blue;" style:color="red">This will be red</div>
+<div style:color="red" style="color: blue">This will be red</div>
+<div style:color="red" style="color: blue !important">This will still be red</div>
 ```

From 546608636a0018a78c3441adb60246c49fa86468 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Jun 2025 11:48:47 -0400
Subject: [PATCH 147/259] Version Packages (#16157)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/poor-pumpkins-exercise.md |  5 -----
 .changeset/soft-oranges-approve.md   |  5 -----
 .changeset/unlucky-plants-jump.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/poor-pumpkins-exercise.md
 delete mode 100644 .changeset/soft-oranges-approve.md
 delete mode 100644 .changeset/unlucky-plants-jump.md

diff --git a/.changeset/poor-pumpkins-exercise.md b/.changeset/poor-pumpkins-exercise.md
deleted file mode 100644
index cd5d08a9b5..0000000000
--- a/.changeset/poor-pumpkins-exercise.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"svelte": patch
----
-
-fix: don't eagerly execute deriveds on resume
diff --git a/.changeset/soft-oranges-approve.md b/.changeset/soft-oranges-approve.md
deleted file mode 100644
index f759c128c0..0000000000
--- a/.changeset/soft-oranges-approve.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent memory leaking signals in legacy mode
diff --git a/.changeset/unlucky-plants-jump.md b/.changeset/unlucky-plants-jump.md
deleted file mode 100644
index 814cb99b69..0000000000
--- a/.changeset/unlucky-plants-jump.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't define `error.message` if it's not configurable
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 563086d8d9..020942f5fd 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.34.3
+
+### Patch Changes
+
+- fix: don't eagerly execute deriveds on resume ([#16150](https://github.com/sveltejs/svelte/pull/16150))
+
+- fix: prevent memory leaking signals in legacy mode ([#16145](https://github.com/sveltejs/svelte/pull/16145))
+
+- fix: don't define `error.message` if it's not configurable ([#16149](https://github.com/sveltejs/svelte/pull/16149))
+
 ## 5.34.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2e4234fcaf..d2fbdb32f7 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.34.2",
+  "version": "5.34.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c1df14d295..01888eaa78 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.34.2';
+export const VERSION = '5.34.3';
 export const PUBLIC_VERSION = '5';

From c91e69b15b4c36c245f1777e19570cb3337f7ad2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 15 Jun 2025 15:35:21 -0400
Subject: [PATCH 148/259] chore: remove some unnecessary code (#16160)

---
 .../svelte/src/internal/client/reactivity/effects.js     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 625c0d1822..03d073781d 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -599,15 +599,6 @@ 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 `check_dirtiness`
-	// 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) {

From 931f211b253e13d7bb8fe6db441cdc3800da5f3a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 15 Jun 2025 15:40:31 -0400
Subject: [PATCH 149/259] chore: fix `$.attachment` prop (#16172)

---
 .../phases/3-transform/client/visitors/shared/component.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a1c4025d60..19ed9cdeb8 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
@@ -275,7 +275,7 @@ export function build_component(node, component_name, context) {
 				);
 			}
 
-			push_prop(b.prop('get', b.call('$.attachment'), expression, true));
+			push_prop(b.prop('init', b.call('$.attachment'), expression, true));
 		}
 	}
 

From 7e588857c2b92a98ebc25237112e29f6f8988992 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 16 Jun 2025 17:49:43 +0200
Subject: [PATCH 150/259] fix: don't set state withing `with_parent` in proxy
 (#16176)

Closes #16164

We can't set everywhere within with_parent otherwise if it's the first time we are reading a derived it could look like we are setting state in a derived (which you are not).
---
 .changeset/beige-plants-laugh.md              |  5 ++++
 packages/svelte/src/internal/client/proxy.js  | 27 ++++++++-----------
 .../samples/proxy-set-with-parent/_config.js  |  5 ++++
 .../samples/proxy-set-with-parent/main.svelte | 15 +++++++++++
 4 files changed, 36 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/beige-plants-laugh.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte

diff --git a/.changeset/beige-plants-laugh.md b/.changeset/beige-plants-laugh.md
new file mode 100644
index 0000000000..d0c771736a
--- /dev/null
+++ b/.changeset/beige-plants-laugh.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't set state withing `with_parent` in proxy
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 4870506699..60eba6aa87 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -93,21 +93,19 @@ export function proxy(value) {
 				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
 				e.state_descriptors_fixed();
 			}
-
-			with_parent(() => {
-				var s = sources.get(prop);
-
-				if (s === undefined) {
-					s = source(descriptor.value, stack);
+			var s = sources.get(prop);
+			if (s === undefined) {
+				s = with_parent(() => {
+					var s = source(descriptor.value, stack);
 					sources.set(prop, s);
-
 					if (DEV && typeof prop === 'string') {
 						tag(s, get_label(path, prop));
 					}
-				} else {
-					set(s, descriptor.value, true);
-				}
-			});
+					return s;
+				});
+			} else {
+				set(s, descriptor.value, true);
+			}
 
 			return true;
 		},
@@ -268,11 +266,8 @@ export function proxy(value) {
 			// object property before writing to that property.
 			if (s === undefined) {
 				if (!has || get_descriptor(target, prop)?.writable) {
-					s = with_parent(() => {
-						var s = source(undefined, stack);
-						set(s, proxy(value));
-						return s;
-					});
+					s = with_parent(() => source(undefined, stack));
+					set(s, proxy(value));
 
 					sources.set(prop, s);
 
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js
new file mode 100644
index 0000000000..2e4a27cf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte
new file mode 100644
index 0000000000..7450eff3fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	function with_writes(initialState) {
+	  const derive = $state(initialState)
+	  return derive
+	}
+
+	let data = $state({ example: 'Example' })
+	let my_derived = $derived(with_writes({ example: data.example }))
+
+	$effect(() => {
+		my_derived.example = 'Bar'
+	});
+</script>
+
+<input bind:value={data.example} />

From d99d87251905abd57404f46f16df4d299ddf9d3b Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Mon, 16 Jun 2025 23:54:12 -0600
Subject: [PATCH 151/259] fix: Make docs example not infinitely recurse
 (#16183)

---
 documentation/docs/07-misc/02-testing.md | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index 64bf49d77a..db99b70770 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -129,12 +129,12 @@ test('Effect', () => {
 		// effects normally run after a microtask,
 		// use flushSync to execute all pending effects synchronously
 		flushSync();
-		expect(log.value).toEqual([0]);
+		expect(log).toEqual([0]);
 
 		count = 1;
 		flushSync();
 
-		expect(log.value).toEqual([0, 1]);
+		expect(log).toEqual([0, 1]);
 	});
 
 	cleanup();
@@ -148,17 +148,13 @@ test('Effect', () => {
  */
 export function logger(getValue) {
 	/** @type {any[]} */
-	let log = $state([]);
+	let log = [];
 
 	$effect(() => {
 		log.push(getValue());
 	});
 
-	return {
-		get value() {
-			return log;
-		}
-	};
+	return log;
 }
 ```
 

From b224c3fb4b019880a20f4286e60f078e1dcbacc0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 17 Jun 2025 12:43:52 -0400
Subject: [PATCH 152/259] fix: coarse reactivity, alternative approach (#16100)

Make sure we track statically visible dependencies and untrack indirect dependencies

Fixes #14351

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/popular-dancers-switch.md          |  5 ++
 .../src/compiler/phases/1-parse/state/tag.js  | 29 +++++++--
 .../visitors/AssignmentExpression.js          |  4 ++
 .../phases/2-analyze/visitors/AwaitBlock.js   |  5 +-
 .../phases/2-analyze/visitors/ConstTag.js     |  5 +-
 .../phases/2-analyze/visitors/HtmlTag.js      |  2 +-
 .../phases/2-analyze/visitors/Identifier.js   |  1 +
 .../phases/2-analyze/visitors/IfBlock.js      |  8 ++-
 .../phases/2-analyze/visitors/KeyBlock.js     |  3 +-
 .../2-analyze/visitors/MemberExpression.js    |  5 +-
 .../phases/2-analyze/visitors/RenderTag.js    |  2 +-
 .../2-analyze/visitors/UpdateExpression.js    |  4 ++
 .../2-analyze/visitors/shared/function.js     | 10 ++++
 .../3-transform/client/visitors/AttachTag.js  | 13 +---
 .../3-transform/client/visitors/AwaitBlock.js |  5 +-
 .../3-transform/client/visitors/ConstTag.js   | 24 ++++----
 .../3-transform/client/visitors/EachBlock.js  | 21 ++++---
 .../3-transform/client/visitors/HtmlTag.js    |  4 +-
 .../3-transform/client/visitors/IfBlock.js    |  5 +-
 .../3-transform/client/visitors/KeyBlock.js   |  3 +-
 .../client/visitors/RegularElement.js         |  2 +-
 .../3-transform/client/visitors/RenderTag.js  | 12 +++-
 .../client/visitors/TitleElement.js           |  3 +-
 .../client/visitors/shared/element.js         |  6 +-
 .../client/visitors/shared/fragment.js        | 28 ++++-----
 .../client/visitors/shared/utils.js           | 59 ++++++++++++++++---
 packages/svelte/src/compiler/phases/nodes.js  |  5 +-
 packages/svelte/src/compiler/types/index.d.ts |  8 ++-
 .../svelte/src/compiler/types/template.d.ts   | 21 +++++++
 .../block-expression-assign/_config.js        | 12 ++++
 .../block-expression-assign/main.svelte       | 45 ++++++++++++++
 .../block-expression-fn-call/_config.js       | 12 ++++
 .../block-expression-fn-call/main.svelte      | 36 +++++++++++
 .../block-expression-member-access/_config.js | 12 ++++
 .../main.svelte                               | 46 +++++++++++++++
 .../Item.svelte                               |  4 +-
 .../main.svelte                               |  4 +-
 .../purity/_expected/client/index.svelte.js   |  6 +-
 38 files changed, 392 insertions(+), 87 deletions(-)
 create mode 100644 .changeset/popular-dancers-switch.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte

diff --git a/.changeset/popular-dancers-switch.md b/.changeset/popular-dancers-switch.md
new file mode 100644
index 0000000000..b8c26c210e
--- /dev/null
+++ b/.changeset/popular-dancers-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use compiler-driven reactivity in legacy mode template expressions
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 4153463c83..5d77d6a8f4 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -63,7 +63,10 @@ function open(parser) {
 			end: -1,
 			test: read_expression(parser),
 			consequent: create_fragment(),
-			alternate: null
+			alternate: null,
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		parser.allow_whitespace();
@@ -244,7 +247,10 @@ function open(parser) {
 			error: null,
 			pending: null,
 			then: null,
-			catch: null
+			catch: null,
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		if (parser.eat('then')) {
@@ -326,7 +332,10 @@ function open(parser) {
 			start,
 			end: -1,
 			expression,
-			fragment: create_fragment()
+			fragment: create_fragment(),
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		parser.stack.push(block);
@@ -461,7 +470,10 @@ function next(parser) {
 				elseif: true,
 				test: expression,
 				consequent: create_fragment(),
-				alternate: null
+				alternate: null,
+				metadata: {
+					expression: create_expression_metadata()
+				}
 			});
 
 			parser.stack.push(child);
@@ -624,7 +636,10 @@ function special(parser) {
 			type: 'HtmlTag',
 			start,
 			end: parser.index,
-			expression
+			expression,
+			metadata: {
+				expression: create_expression_metadata()
+			}
 		});
 
 		return;
@@ -699,6 +714,9 @@ function special(parser) {
 				declarations: [{ type: 'VariableDeclarator', id, init, start: id.start, end: init.end }],
 				start: start + 2, // start at const, not at @const
 				end: parser.index - 1
+			},
+			metadata: {
+				expression: create_expression_metadata()
 			}
 		});
 	}
@@ -725,6 +743,7 @@ function special(parser) {
 			end: parser.index,
 			expression: /** @type {AST.RenderTag['expression']} */ (expression),
 			metadata: {
+				expression: create_expression_metadata(),
 				dynamic: false,
 				arguments: [],
 				path: [],
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
index 673c79f2df..39358f72fc 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
@@ -23,5 +23,9 @@ export function AssignmentExpression(node, context) {
 		}
 	}
 
+	if (context.state.expression) {
+		context.state.expression.has_assignment = true;
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
index a71f325154..5aa04ba3b9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
@@ -41,5 +41,8 @@ export function AwaitBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
+	if (node.pending) context.visit(node.pending);
+	if (node.then) context.visit(node.then);
+	if (node.catch) context.visit(node.catch);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
index f723f8447c..d5f5f7b2e0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
@@ -32,5 +32,8 @@ export function ConstTag(node, context) {
 		e.const_tag_invalid_placement(node);
 	}
 
-	context.next();
+	const declaration = node.declaration.declarations[0];
+
+	context.visit(declaration.id);
+	context.visit(declaration.init, { ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
index c89b11ad36..7b0e501760 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -15,5 +15,5 @@ export function HtmlTag(node, context) {
 	// unfortunately this is necessary in order to fix invalid HTML
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index abf70769c0..cced326f9b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -90,6 +90,7 @@ export function Identifier(node, context) {
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
+			context.state.expression.references.add(binding);
 			context.state.expression.has_state ||=
 				binding.kind !== 'static' &&
 				!binding.is_function() &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
index a65771bcfc..dcdae3587f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
@@ -17,5 +17,11 @@ export function IfBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.test, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	context.visit(node.consequent);
+	if (node.alternate) context.visit(node.alternate);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
index 88bb6a98e7..09e604ea66 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
@@ -16,5 +16,6 @@ export function KeyBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
+	context.visit(node.fragment);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 245a164c71..0a3b386198 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -15,8 +15,9 @@ export function MemberExpression(node, context) {
 		}
 	}
 
-	if (context.state.expression && !is_pure(node, context)) {
-		context.state.expression.has_state = true;
+	if (context.state.expression) {
+		context.state.expression.has_member_expression = true;
+		context.state.expression.has_state ||= !is_pure(node, context);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
index a8c9d408bd..1230ef6b04 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -54,7 +54,7 @@ export function RenderTag(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.visit(callee);
+	context.visit(callee, { ...context.state, expression: node.metadata.expression });
 
 	for (const arg of expression.arguments) {
 		const metadata = create_expression_metadata();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
index 13f4b9019e..ed48e026ac 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
@@ -21,5 +21,9 @@ export function UpdateExpression(node, context) {
 		}
 	}
 
+	if (context.state.expression) {
+		context.state.expression.has_assignment = true;
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
index c892efd421..1776167850 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
@@ -13,6 +13,16 @@ export function visit_function(node, context) {
 		scope: context.state.scope
 	};
 
+	if (context.state.expression) {
+		for (const [name] of context.state.scope.references) {
+			const binding = context.state.scope.get(name);
+
+			if (binding && binding.scope.function_depth < context.state.scope.function_depth) {
+				context.state.expression.references.add(binding);
+			}
+		}
+	}
+
 	context.next({
 		...context.state,
 		function_depth: context.state.function_depth + 1,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
index 062604cacc..8b1570c7dc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
@@ -1,21 +1,14 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.AttachTag} node
  * @param {ComponentContext} context
  */
 export function AttachTag(node, context) {
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.attach',
-				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression)))
-			)
-		)
-	);
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	context.state.init.push(b.stmt(b.call('$.attach', context.state.node, b.thunk(expression))));
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index 30e370327f..7873cf3ddb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -1,10 +1,11 @@
-/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
+/** @import { BlockStatement, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
@@ -14,7 +15,7 @@ export function AwaitBlock(node, context) {
 	context.state.template.push_comment();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
-	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
+	const expression = b.thunk(build_expression(context, node.expression, node.metadata.expression));
 
 	let then_block;
 	let catch_block;
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 2f3c0b3d0e..c1be1e3220 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -1,4 +1,4 @@
-/** @import { Expression, Pattern } from 'estree' */
+/** @import { Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -6,6 +6,7 @@ import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -15,15 +16,8 @@ export function ConstTag(node, context) {
 	const declaration = node.declaration.declarations[0];
 	// TODO we can almost certainly share some code with $derived(...)
 	if (declaration.id.type === 'Identifier') {
-		context.state.init.push(
-			b.const(
-				declaration.id,
-				create_derived(
-					context.state,
-					b.thunk(/** @type {Expression} */ (context.visit(declaration.init)))
-				)
-			)
-		);
+		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))));
 
 		context.state.transform[declaration.id.name] = { read: get_value };
 
@@ -48,13 +42,15 @@ export function ConstTag(node, context) {
 
 		// TODO optimise the simple `{ x } = y` case — we can just return `y`
 		// instead of destructuring it only to return a new object
+		const init = build_expression(
+			{ ...context, state: child_state },
+			declaration.init,
+			node.metadata.expression
+		);
 		const fn = b.arrow(
 			[],
 			b.block([
-				b.const(
-					/** @type {Pattern} */ (context.visit(declaration.id, child_state)),
-					/** @type {Expression} */ (context.visit(declaration.init, child_state))
-				),
+				b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
 				b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
 			])
 		);
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 6c651464f1..201c4b278f 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
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, Identifier, Pattern, SequenceExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
@@ -12,8 +12,8 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { build_getter } from '../utils.js';
 import { get_value } from './shared/declarations.js';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -24,11 +24,18 @@ export function EachBlock(node, context) {
 
 	// expression should be evaluated in the parent scope, not the scope
 	// created by the each block itself
-	const collection = /** @type {Expression} */ (
-		context.visit(node.expression, {
-			...context.state,
-			scope: /** @type {Scope} */ (context.state.scope.parent)
-		})
+	const parent_scope_state = {
+		...context.state,
+		scope: /** @type {Scope} */ (context.state.scope.parent)
+	};
+
+	const collection = build_expression(
+		{
+			...context,
+			state: parent_scope_state
+		},
+		node.expression,
+		node.metadata.expression
 	);
 
 	if (!each_node_meta.is_controlled) {
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 405b400b42..fb59967996 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
@@ -1,8 +1,8 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
@@ -11,7 +11,7 @@ import * as b from '#compiler/builders';
 export function HtmlTag(node, context) {
 	context.state.template.push_comment();
 
-	const expression = /** @type {Expression} */ (context.visit(node.expression));
+	const expression = build_expression(context, node.expression, node.metadata.expression);
 
 	const is_svg = context.state.metadata.namespace === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
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 3702a47bc9..deab040e50 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
@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
@@ -31,6 +32,8 @@ export function IfBlock(node, context) {
 		statements.push(b.var(b.id(alternate_id), b.arrow(alternate_args, alternate)));
 	}
 
+	const test = build_expression(context, node.test, node.metadata.expression);
+
 	/** @type {Expression[]} */
 	const args = [
 		node.elseif ? b.id('$$anchor') : context.state.node,
@@ -38,7 +41,7 @@ export function IfBlock(node, context) {
 			[b.id('$$render')],
 			b.block([
 				b.if(
-					/** @type {Expression} */ (context.visit(node.test)),
+					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
 				)
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 5e63f7e872..2f17479c7e 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
@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.KeyBlock} node
@@ -10,7 +11,7 @@ import * as b from '#compiler/builders';
 export function KeyBlock(node, context) {
 	context.state.template.push_comment();
 
-	const key = /** @type {Expression} */ (context.visit(node.expression));
+	const key = build_expression(context, node.expression, node.metadata.expression);
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
 	context.state.init.push(
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 e823792993..1aefff0db0 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
@@ -331,7 +331,7 @@ export function RegularElement(node, context) {
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
-		const { value } = build_template_chunk(trimmed, context.visit, child_state);
+		const { value } = build_template_chunk(trimmed, context, child_state);
 		const empty_string = value.type === 'Literal' && value.value === '';
 
 		if (!empty_string) {
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 fec7b5762a..c3615d9d50 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
@@ -3,6 +3,7 @@
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -19,7 +20,10 @@ export function RenderTag(node, context) {
 	/** @type {Expression[]} */
 	let args = [];
 	for (let i = 0; i < raw_args.length; i++) {
-		let thunk = b.thunk(/** @type {Expression} */ (context.visit(raw_args[i])));
+		let thunk = b.thunk(
+			build_expression(context, /** @type {Expression} */ (raw_args[i]), node.metadata.arguments[i])
+		);
+
 		const { has_call } = node.metadata.arguments[i];
 
 		if (has_call) {
@@ -31,7 +35,11 @@ export function RenderTag(node, context) {
 		}
 	}
 
-	let snippet_function = /** @type {Expression} */ (context.visit(callee));
+	let snippet_function = build_expression(
+		context,
+		/** @type {Expression} */ (callee),
+		node.metadata.expression
+	);
 
 	if (node.metadata.dynamic) {
 		// If we have a chain expression then ensure a nullish snippet function gets turned into an empty one
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index 7bfdaf1850..e6f4202a01 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -10,8 +10,7 @@ import { build_template_chunk } from './shared/utils.js';
 export function TitleElement(node, context) {
 	const { has_state, value } = build_template_chunk(
 		/** @type {any} */ (node.fragment.nodes),
-		context.visit,
-		context.state
+		context
 	);
 
 	const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value));
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 67de25b770..10f942b7d4 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
@@ -7,7 +7,7 @@ import { is_ignored } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
-import { build_template_chunk, get_expression_id } from './utils.js';
+import { build_expression, build_template_chunk, get_expression_id } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -121,7 +121,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 			return { value: b.literal(chunk.data), has_state: false };
 		}
 
-		let expression = /** @type {Expression} */ (context.visit(chunk.expression));
+		let expression = build_expression(context, chunk.expression, chunk.metadata.expression);
 
 		return {
 			value: memoize(expression, chunk.metadata.expression),
@@ -129,7 +129,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 		};
 	}
 
-	return build_template_chunk(value, context.visit, context.state, memoize);
+	return build_template_chunk(value, context, context.state, memoize);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 7af2c2d4aa..62d07014ee 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -16,8 +16,8 @@ import { build_template_chunk } from './utils.js';
  * @param {boolean} is_element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, is_element, { visit, state }) {
-	const within_bound_contenteditable = state.metadata.bound_contenteditable;
+export function process_children(nodes, initial, is_element, context) {
+	const within_bound_contenteditable = context.state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
 
@@ -48,8 +48,8 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		let id = expression;
 
 		if (id.type !== 'Identifier') {
-			id = b.id(state.scope.generate(name));
-			state.init.push(b.var(id, expression));
+			id = b.id(context.state.scope.generate(name));
+			context.state.init.push(b.var(id, expression));
 		}
 
 		prev = () => id;
@@ -64,13 +64,13 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	function flush_sequence(sequence) {
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			state.template.push_text(sequence);
+			context.state.template.push_text(sequence);
 			return;
 		}
 
-		state.template.push_text([{ type: 'Text', data: ' ', raw: ' ', start: -1, end: -1 }]);
+		context.state.template.push_text([{ type: 'Text', data: ' ', raw: ' ', start: -1, end: -1 }]);
 
-		const { has_state, value } = build_template_chunk(sequence, visit, state);
+		const { has_state, value } = build_template_chunk(sequence, context);
 
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
@@ -80,9 +80,9 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		const update = b.stmt(b.call('$.set_text', id, value));
 
 		if (has_state && !within_bound_contenteditable) {
-			state.update.push(update);
+			context.state.update.push(update);
 		} else {
-			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			context.state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
 		}
 	}
 
@@ -95,18 +95,18 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 				sequence = [];
 			}
 
-			let child_state = state;
+			let child_state = context.state;
 
-			if (is_static_element(node, state)) {
+			if (is_static_element(node, context.state)) {
 				skipped += 1;
 			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
-				child_state = { ...state, node: id };
+				child_state = { ...context.state, node: id };
 			}
 
-			visit(node, child_state);
+			context.visit(node, child_state);
 		}
 	}
 
@@ -118,7 +118,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	// traverse to the last (n - 1) one when hydrating
 	if (skipped > 1) {
 		skipped -= 1;
-		state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
+		context.state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
 	}
 }
 
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 ebf88e878f..15982899c9 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
@@ -1,6 +1,6 @@
-/** @import { AssignmentExpression, Expression, ExpressionStatement, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression } from 'estree' */
+/** @import { AssignmentExpression, Expression, ExpressionStatement, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression, Pattern } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
-/** @import { ComponentClientTransformState, Context } from '../../types' */
+/** @import { ComponentClientTransformState, ComponentContext, Context } from '../../types' */
 import { walk } from 'zimmerframe';
 import { object } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
@@ -8,7 +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 } from '../../../../../state.js';
-import { create_derived } from '../../utils.js';
+import { build_getter, create_derived } from '../../utils.js';
 
 /**
  * @param {ComponentClientTransformState} state
@@ -31,15 +31,15 @@ export function get_expression_id(expressions, value) {
 
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
- * @param {(node: AST.SvelteNode, state: any) => any} visit
+ * @param {ComponentContext} context
  * @param {ComponentClientTransformState} state
  * @param {(value: Expression, metadata: ExpressionMetadata) => Expression} memoize
  * @returns {{ value: Expression, has_state: boolean }}
  */
 export function build_template_chunk(
 	values,
-	visit,
-	state,
+	context,
+	state = context.state,
 	memoize = (value, metadata) =>
 		metadata.has_call ? get_expression_id(state.expressions, value) : value
 ) {
@@ -66,7 +66,7 @@ export function build_template_chunk(
 			state.scope.get('undefined')
 		) {
 			let value = memoize(
-				/** @type {Expression} */ (visit(node.expression, state)),
+				build_expression(context, node.expression, node.metadata.expression, state),
 				node.metadata.expression
 			);
 
@@ -360,3 +360,48 @@ export function validate_mutation(node, context, expression) {
 		loc && b.literal(loc.column)
 	);
 }
+
+/**
+ *
+ * @param {ComponentContext} context
+ * @param {Expression} expression
+ * @param {ExpressionMetadata} metadata
+ */
+export function build_expression(context, expression, metadata, state = context.state) {
+	const value = /** @type {Expression} */ (context.visit(expression, state));
+
+	if (context.state.analysis.runes) {
+		return value;
+	}
+
+	if (!metadata.has_call && !metadata.has_member_expression && !metadata.has_assignment) {
+		return value;
+	}
+
+	// Legacy reactivity is coarse-grained, looking at the statically visible dependencies. Replicate that here
+	const sequence = b.sequence([]);
+
+	for (const binding of metadata.references) {
+		if (binding.kind === 'normal' && binding.declaration_kind !== 'import') {
+			continue;
+		}
+
+		var getter = build_getter({ ...binding.node }, state);
+
+		if (
+			binding.kind === 'bindable_prop' ||
+			binding.kind === 'template' ||
+			binding.declaration_kind === 'import' ||
+			binding.node.name === '$$props' ||
+			binding.node.name === '$$restProps'
+		) {
+			getter = b.call('$.deep_read_state', getter);
+		}
+
+		sequence.expressions.push(getter);
+	}
+
+	sequence.expressions.push(b.call('$.untrack', b.thunk(value)));
+
+	return sequence;
+}
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 2043747ed0..c35f194b75 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -62,8 +62,11 @@ export function create_attribute(name, start, end, value) {
 export function create_expression_metadata() {
 	return {
 		dependencies: new Set(),
+		references: new Set(),
 		has_state: false,
-		has_call: false
+		has_call: false,
+		has_member_expression: false,
+		has_assignment: false
 	};
 }
 
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index fdd6024726..558ee558f7 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -279,12 +279,18 @@ export type DeclarationKind =
 	| 'synthetic';
 
 export interface ExpressionMetadata {
-	/** All the bindings that are referenced inside this expression */
+	/** All the bindings that are referenced eagerly (not inside functions) in this expression */
 	dependencies: Set<Binding>;
+	/** All the bindings that are referenced inside this expression, including inside functions */
+	references: Set<Binding>;
 	/** True if the expression references state directly, or _might_ (via member/call expressions) */
 	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 includes a member expression */
+	has_member_expression: boolean;
+	/** True if the expression includes an assignment or an update */
+	has_assignment: boolean;
 }
 
 export interface StateField {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index cefc7fa7a2..2a7ec7b5c6 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -135,6 +135,10 @@ export namespace AST {
 	export interface HtmlTag extends BaseNode {
 		type: 'HtmlTag';
 		expression: Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** An HTML comment */
@@ -151,6 +155,10 @@ export namespace AST {
 		declaration: VariableDeclaration & {
 			declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
 		};
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** A `{@debug ...}` tag */
@@ -165,6 +173,7 @@ export namespace AST {
 		expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			dynamic: boolean;
 			arguments: ExpressionMetadata[];
 			path: SvelteNode[];
@@ -447,6 +456,10 @@ export namespace AST {
 		test: Expression;
 		consequent: Fragment;
 		alternate: Fragment | null;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** An `{#await ...}` block */
@@ -461,12 +474,20 @@ export namespace AST {
 		pending: Fragment | null;
 		then: Fragment | null;
 		catch: Fragment | null;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	export interface KeyBlock extends BaseNode {
 		type: 'KeyBlock';
 		expression: Expression;
 		fragment: Fragment;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	export interface SnippetBlock extends BaseNode {
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js
new file mode 100644
index 0000000000..15adef2c9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> [0,0,0,0,0,0,0,0,0]`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> [0,0,0,0,0,0,0,0,0]`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte
new file mode 100644
index 0000000000..67190669ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte
@@ -0,0 +1,45 @@
+<script>
+    let a = 0, b = 0, c = 0, d = 0, e = 0, f = 0, g = 0, h = 0, i = 0;
+    function inc() {
+        a++;
+        b++;
+        c++;
+        d++;
+        e++;
+        f++;
+        g++;
+        h++;
+        i++;
+    }
+</script>
+
+{#if a = 0}{/if}
+
+{#each [b = 0] as x}{x,''}{/each}
+
+{#key c = 0}{/key}
+
+{#await d = 0}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render (e = 0, snip)()}
+
+{@html f = 0, ''}
+
+<div {@attach !!(g = 0)}></div>
+
+{#key 1}
+    {@const x = (h = 0)}
+    {x, ''}
+{/key}
+
+{#if 1}
+    {@const x = (i = 0)}
+    {x, ''}
+{/if}
+
+<button on:click={inc}>inc</button>
+[{a},{b},{c},{d},{e},{f},{g},{h},{i}]
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js
new file mode 100644
index 0000000000..523dcd625d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 12 - 12`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 13 - 12`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte
new file mode 100644
index 0000000000..37838f091f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte
@@ -0,0 +1,36 @@
+<script>
+    let count1 = 1;
+    let count2 = 1;
+    function fn(ret) {
+        if (count1 > 100) return ret;
+        count1++;
+        count2++;
+        return ret;
+    }
+</script>
+
+{#if fn(false)}{:else if fn(true)}{/if}
+
+{#each fn([]) as x}{x, ''}{/each}
+
+{#key fn(1)}{/key}
+
+{#await fn(Promise.resolve())}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render fn(snip)()}
+
+{@html fn('')}
+
+<div {@attach fn(() => {})}></div>
+
+{#key 1}
+    {@const x = fn('')}
+    {x}
+{/key}
+
+<button data-foo={fn(true)} on:click={() => count1++}>{fn('inc')}</button>
+{count1} - {count2}
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js
new file mode 100644
index 0000000000..0e1a5a8150
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 10 - 10`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 11 - 10`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte
new file mode 100644
index 0000000000..4041be4f6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte
@@ -0,0 +1,46 @@
+<script>
+    let count1 = 1;
+    let count2 = 1;
+    function fn(ret) {
+        if (count1 > 100) return ret;
+        count1++;
+        count2++;
+        return ret;
+    }
+
+    const obj = {
+        get true() { return fn(true) },
+        get false() { return fn(false) },
+        get array() { return fn([]) },
+        get string() { return fn('') },
+        get promise() { return fn(Promise.resolve()) },
+        get snippet() { return fn(snip) },
+        get attachment() { return fn(() => {}) },
+    }
+</script>
+
+{#if obj.false}{:else if obj.true}{/if}
+
+{#each obj.array as x}{x, ''}{/each}
+
+{#key obj.string}{/key}
+
+{#await obj.promise}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render obj.snippet()}
+
+{@html obj.string}
+
+<div {@attach obj.attachment}></div>
+
+{#key 1}
+    {@const x = obj.string}
+    {x}
+{/key}
+
+<button on:click={() => count1++}>inc</button>
+{count1} - {count2}
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
index b2e6cd046c..4127e857d5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
@@ -5,7 +5,7 @@
 	export let index;
 	export let n;
 
-	function logRender () {
+	function logRender (n) {
 		order.push(`${index}: render ${n}`);
 		return index;
 	}
@@ -24,5 +24,5 @@
 </script>
 
 <li>
-	{logRender()}
+	{logRender(n)}
 </li>
diff --git a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
index b05b1476fd..51dee3bc0c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
@@ -5,7 +5,7 @@
 
 	export let n = 0;
 
-	function logRender () {
+	function logRender (n) {
 		order.push(`parent: render ${n}`);
 		return 'parent';
 	}
@@ -23,7 +23,7 @@
 	})
 </script>
 
-{logRender()}
+{logRender(n)}
 <ul>
 	{#each [1,2,3] as index}
 		<Item {index} {n} />
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index a351851875..da6fdf44d8 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -8,11 +8,13 @@ export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = '0';
+	p.textContent = (
+		$.untrack(() => Math.max(0, Math.min(0, 100)))
+	);
 
 	var p_1 = $.sibling(p, 2);
 
-	p_1.textContent = location.href;
+	p_1.textContent = ($.untrack(() => location.href));
 
 	var node = $.sibling(p_1, 2);
 

From 0524d16215a1d7dd1079ea1d63080a05cd84d948 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 17 Jun 2025 13:07:28 -0400
Subject: [PATCH 153/259] Version Packages (#16181)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/beige-plants-laugh.md     | 5 -----
 .changeset/popular-dancers-switch.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/beige-plants-laugh.md
 delete mode 100644 .changeset/popular-dancers-switch.md

diff --git a/.changeset/beige-plants-laugh.md b/.changeset/beige-plants-laugh.md
deleted file mode 100644
index d0c771736a..0000000000
--- a/.changeset/beige-plants-laugh.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't set state withing `with_parent` in proxy
diff --git a/.changeset/popular-dancers-switch.md b/.changeset/popular-dancers-switch.md
deleted file mode 100644
index b8c26c210e..0000000000
--- a/.changeset/popular-dancers-switch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use compiler-driven reactivity in legacy mode template expressions
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 020942f5fd..1814d59fb3 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.34.4
+
+### Patch Changes
+
+- fix: don't set state withing `with_parent` in proxy ([#16176](https://github.com/sveltejs/svelte/pull/16176))
+
+- fix: use compiler-driven reactivity in legacy mode template expressions ([#16100](https://github.com/sveltejs/svelte/pull/16100))
+
 ## 5.34.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index d2fbdb32f7..89c627dc0e 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.34.3",
+  "version": "5.34.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 01888eaa78..0fa8576105 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.34.3';
+export const VERSION = '5.34.4';
 export const PUBLIC_VERSION = '5';

From 061ab31d23b2bf882b490024deac9b433d74e048 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 17 Jun 2025 23:07:21 +0200
Subject: [PATCH 154/259] fix: ensure sources within nested effects still
 register correctly (#16193)

* fix: ensure sources within nested effects still register correctly

When an effect creates another effect and a proxy property is read that wasn't before, the proxy will have logic where it creates the new signal in its original reaction context. But it did not have logic to correctly handle the `reaction_sources` array which prevents effects/deriveds rerunning when state created inside themselves is read and then changed inside them: Since `reaction_sources` wasn't take the reaction context into account, false positives could occur where nested effects would not register the sources as dependencies.

Fixes #15870

* oops forgot to push this
---
 .changeset/rich-emus-study.md                 |  5 +++
 packages/svelte/src/internal/client/proxy.js  |  1 +
 .../src/internal/client/reactivity/sources.js |  2 +-
 .../svelte/src/internal/client/runtime.js     | 12 +++----
 packages/svelte/tests/signals/test.ts         | 35 +++++++++++++++++++
 5 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/rich-emus-study.md

diff --git a/.changeset/rich-emus-study.md b/.changeset/rich-emus-study.md
new file mode 100644
index 0000000000..dcadafacb1
--- /dev/null
+++ b/.changeset/rich-emus-study.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure sources within nested effects still register correctly
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 60eba6aa87..d9063aee34 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -44,6 +44,7 @@ export function proxy(value) {
 	var reaction = active_reaction;
 
 	/**
+	 * Executes the proxy in the context of the reaction it was originally created in, if any
 	 * @template T
 	 * @param {() => T} fn
 	 */
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 56f4138252..4959bc1abc 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -138,7 +138,7 @@ export function set(source, value, should_proxy = false) {
 		!untracking &&
 		is_runes() &&
 		(active_reaction.f & (DERIVED | BLOCK_EFFECT)) !== 0 &&
-		!reaction_sources?.includes(source)
+		!(reaction_sources?.[1].includes(source) && reaction_sources[0] === active_reaction)
 	) {
 		e.state_unsafe_mutation();
 	}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 9544060959..56bc157f33 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -84,8 +84,8 @@ export function set_active_effect(effect) {
 
 /**
  * When sources are created within a reaction, reading and writing
- * them should not cause a re-run
- * @type {null | Source[]}
+ * them within that reaction should not cause a re-run
+ * @type {null | [active_reaction: Reaction, sources: Source[]]}
  */
 export let reaction_sources = null;
 
@@ -93,9 +93,9 @@ export let reaction_sources = null;
 export function push_reaction_value(value) {
 	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
 		if (reaction_sources === null) {
-			reaction_sources = [value];
+			reaction_sources = [active_reaction, [value]];
 		} else {
-			reaction_sources.push(value);
+			reaction_sources[1].push(value);
 		}
 	}
 }
@@ -234,7 +234,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	for (var i = 0; i < reactions.length; i++) {
 		var reaction = reactions[i];
 
-		if (reaction_sources?.includes(signal)) continue;
+		if (reaction_sources?.[1].includes(signal) && reaction_sources[0] === active_reaction) continue;
 
 		if ((reaction.f & DERIVED) !== 0) {
 			schedule_possible_effect_self_invalidation(/** @type {Derived} */ (reaction), effect, false);
@@ -724,7 +724,7 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (!reaction_sources?.includes(signal)) {
+		if (!reaction_sources?.[1].includes(signal) || reaction_sources[0] !== active_reaction) {
 			var deps = active_reaction.deps;
 			if (signal.rv < read_version) {
 				signal.rv = read_version;
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 8421ae4a7c..78d7919e0f 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -1021,6 +1021,41 @@ describe('signals', () => {
 		};
 	});
 
+	test('nested effects depend on state of upper effects', () => {
+		const logs: number[] = [];
+
+		user_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(() => {
+				logs.push($.get(raw));
+			});
+
+			user_effect(() => {
+				logs.push(proxied.current);
+			});
+
+			// Important so that the updating effect is not running
+			// together with the reading effects
+			flushSync();
+
+			user_effect(() => {
+				$.untrack(() => {
+					set(raw, $.get(raw) + 1);
+					proxied.current += 1;
+				});
+			});
+		});
+
+		return () => {
+			flushSync();
+			assert.deepEqual(logs, [0, 0, 1, 1]);
+		};
+	});
+
 	test('proxy version state does not trigger self-dependency guard', () => {
 		return () => {
 			const s = proxy({ a: { b: 1 } });

From 838f881550e98d5fd6492f4a0d083d264dd9d376 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Wed, 18 Jun 2025 00:12:40 +0300
Subject: [PATCH 155/259] fix: avoid shadowing a variable in dynamic components
 (#16185)

* fix: avoid shadowing a variable in dynamic components

* split component name and intermediate name

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/short-mails-know.md                |  5 +++++
 .../3-transform/client/visitors/Component.js  |  8 +------
 .../client/visitors/shared/component.js       | 21 +++++++++++++------
 .../samples/dynamic-component-nested/A.svelte |  5 +++++
 .../dynamic-component-nested/_config.js       |  8 +++++++
 .../dynamic-component-nested/main.svelte      |  9 ++++++++
 6 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/short-mails-know.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte

diff --git a/.changeset/short-mails-know.md b/.changeset/short-mails-know.md
new file mode 100644
index 0000000000..0b8b62d575
--- /dev/null
+++ b/.changeset/short-mails-know.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid shadowing a variable in dynamic components
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
index d58a24b455..9b86557536 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -8,12 +8,6 @@ import { build_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	const component = build_component(
-		node,
-		// if it's not dynamic we will just use the node name, if it is dynamic we will use the node name
-		// only if it's a valid identifier, otherwise we will use a default name
-		!node.metadata.dynamic || regex_is_valid_identifier.test(node.name) ? node.name : '$$component',
-		context
-	);
+	const component = build_component(node, node.name, context);
 	context.state.init.push(component);
 }
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 19ed9cdeb8..cb6e4de478 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
@@ -52,6 +52,15 @@ export function build_component(node, component_name, context) {
 	/** @type {ExpressionStatement[]} */
 	const binding_initializers = [];
 
+	const is_component_dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
+	// The variable name used for the component inside $.component()
+	const intermediate_name =
+		node.type === 'Component' && node.metadata.dynamic
+			? context.state.scope.generate(node.name)
+			: '$$component';
+
 	/**
 	 * If this component has a slot property, it is a named slot within another component. In this case
 	 * the slot scope applies to the component itself, too, and not just its children.
@@ -199,7 +208,7 @@ export function build_component(node, component_name, context) {
 							b.call(
 								'$$ownership_validator.binding',
 								b.literal(binding.node.name),
-								b.id(component_name),
+								b.id(is_component_dynamic ? intermediate_name : component_name),
 								b.thunk(expression)
 							)
 						)
@@ -414,8 +423,8 @@ export function build_component(node, component_name, context) {
 			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
 			// will be handled separately through the `$.component` function, and then the component name will
 			// always be referenced through just the identifier here.
-			node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)
-				? component_name
+			is_component_dynamic
+				? intermediate_name
 				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
 			node_id,
 			props_expression
@@ -432,7 +441,7 @@ export function build_component(node, component_name, context) {
 
 	const statements = [...snippet_declarations];
 
-	if (node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)) {
+	if (is_component_dynamic) {
 		const prev = fn;
 
 		fn = (node_id) => {
@@ -441,11 +450,11 @@ export function build_component(node, component_name, context) {
 				node_id,
 				b.thunk(
 					/** @type {Expression} */ (
-						context.visit(node.type === 'Component' ? b.member_id(node.name) : node.expression)
+						context.visit(node.type === 'Component' ? b.member_id(component_name) : node.expression)
 					)
 				),
 				b.arrow(
-					[b.id('$$anchor'), b.id(component_name)],
+					[b.id('$$anchor'), b.id(intermediate_name)],
 					b.block([...binding_initializers, b.stmt(prev(b.id('$$anchor')))])
 				)
 			);
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
new file mode 100644
index 0000000000..d37c929273
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { children } = $props()
+</script>
+
+{@render children()}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
new file mode 100644
index 0000000000..cd1fa2b1b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'test');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
new file mode 100644
index 0000000000..d0646b319b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+
+	const B = $derived(A);
+</script>
+
+<B>
+	<B>test</B>
+</B>

From a5f500e7c03320aa236122f1c0d06f7d886110df Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 17 Jun 2025 23:13:27 +0200
Subject: [PATCH 156/259] fix: keep spread non-delegated event handlers up to
 date (#16180)

* fix: keep spread non-delegated event handlers up to date

#15961 introduced a regression where non-delegated events that were spread and updated were not getting updated. This fixes that by ensuring prev is actually updated to the most recent value

* fix
---
 .changeset/odd-readers-laugh.md               |  5 ++++
 .../client/dom/elements/attributes.js         |  8 +++---
 .../event-attribute-spread-update/_config.js  | 18 +++++++++++++
 .../event-attribute-spread-update/main.svelte | 27 +++++++++++++++++++
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/odd-readers-laugh.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte

diff --git a/.changeset/odd-readers-laugh.md b/.changeset/odd-readers-laugh.md
new file mode 100644
index 0000000000..e1401fdf10
--- /dev/null
+++ b/.changeset/odd-readers-laugh.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: keep spread non-delegated event handlers up to date
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index fcce0b444f..a663450b4a 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -483,8 +483,8 @@ export function attribute_effect(
 
 	block(() => {
 		var next = fn(...deriveds.map(get));
-
-		set_attributes(element, prev, next, css_hash, skip_warning);
+		/** @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, false);
@@ -501,9 +501,11 @@ export function attribute_effect(
 				if (effects[symbol]) destroy_effect(effects[symbol]);
 				effects[symbol] = branch(() => attach(element, () => n));
 			}
+
+			current[symbol] = n;
 		}
 
-		prev = next;
+		prev = current;
 	});
 
 	if (is_select) {
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js
new file mode 100644
index 0000000000..af03eed4c9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [change, increment] = target.querySelectorAll('button');
+
+		increment.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<button>change handlers</button><button>1 / 1</button>');
+
+		change.click();
+		flushSync();
+		increment.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<button>change handlers</button><button>3 / 3</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte
new file mode 100644
index 0000000000..32d4b242cc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let delegated = $state(0);
+	let non_delegated = $state(0);
+	let attrs = $state({
+		onclick: () => {
+			delegated += 1;
+		},
+		onclickcapture: () => {
+			non_delegated += 1;
+		}
+	});
+</script>
+
+<button
+	onclick={() =>
+		(attrs = {
+			onclick: () => {
+				delegated += 2;
+			},
+			onclickcapture: () => {
+				non_delegated += 2;
+			}
+		})}
+>
+	change handlers
+</button>
+<button {...attrs}>{delegated} / {non_delegated}</button>

From 579d0e663664d30c206ed955bbfbc396063dbad4 Mon Sep 17 00:00:00 2001
From: floriskn <48930050+floriskn@users.noreply.github.com>
Date: Tue, 17 Jun 2025 23:16:07 +0200
Subject: [PATCH 157/259] fix: ensure undefined attributes are removed during
 hydration (#16178)

* fix: ensure undefined attributes are removed during hydration

Attributes that are `undefined` on the client should be removed during hydration,
even if their value hasn't changed compared to `prev_value`.

* Create plenty-wasps-sleep.md

* added test

* Update .changeset/plenty-wasps-sleep.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/plenty-wasps-sleep.md                      |  5 +++++
 .../src/internal/client/dom/elements/attributes.js    |  6 +++++-
 .../samples/removes-undefined-attributes/_config.js   | 11 +++++++++++
 .../removes-undefined-attributes/_expected.html       |  1 +
 .../samples/removes-undefined-attributes/main.svelte  |  9 +++++++++
 5 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/plenty-wasps-sleep.md
 create mode 100644 packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html
 create mode 100644 packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte

diff --git a/.changeset/plenty-wasps-sleep.md b/.changeset/plenty-wasps-sleep.md
new file mode 100644
index 0000000000..aba96bc419
--- /dev/null
+++ b/.changeset/plenty-wasps-sleep.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove undefined attributes on hydration
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index a663450b4a..2d3d6a921d 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -345,7 +345,11 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
 		}
 
 		var prev_value = current[key];
-		if (value === prev_value) continue;
+
+		// Skip if value is unchanged, unless it's `undefined` and the element still has the attribute
+		if (value === prev_value && !(value === undefined && element.hasAttribute(key))) {
+			continue;
+		}
 
 		current[key] = value;
 
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js
new file mode 100644
index 0000000000..bc74f23aac
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html
new file mode 100644
index 0000000000..cc789c8f51
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html
@@ -0,0 +1 @@
+<!--[--><div></div><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte
new file mode 100644
index 0000000000..1a587eeeeb
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const { browser } = $props();
+
+	const attributes = {
+		"data-test": browser ? undefined : ""
+	};
+</script>
+
+<div {...attributes}></div>

From de90fc8dceae076f7fc0e5adf7fa72e0b6360479 Mon Sep 17 00:00:00 2001
From: Ray Thurn Void <53383860+raythurnvoid@users.noreply.github.com>
Date: Tue, 17 Jun 2025 22:42:39 +0100
Subject: [PATCH 158/259] Test array sort in effect to prevent regressions of
 this use-case (#16175)

---
 .../samples/array-sort-in-effect/_config.js   | 52 +++++++++++++++++++
 .../samples/array-sort-in-effect/main.svelte  | 21 ++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js
new file mode 100644
index 0000000000..cbac36fee8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js
@@ -0,0 +1,52 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	/**
+	 * Ensure that sorting an array inside an $effect works correctly
+	 * and re-runs when the array changes (e.g., when items are added).
+	 */
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		// initial render — array should be sorted
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>50</p>
+				<p>100</p>
+			`
+		);
+
+		// add first item (20); effect should re-run and sort the array
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>20</p>
+				<p>50</p>
+				<p>100</p>
+			`
+		);
+
+		// add second item (80); effect should re-run and sort the array
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>20</p>
+				<p>50</p>
+				<p>80</p>
+				<p>100</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte
new file mode 100644
index 0000000000..c529f67cf4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let arr = $state([100, 0, 50]);
+	let nextValues = [20, 80];
+	let valueIndex = 0;
+
+	$effect(() => {
+		arr.sort((a, b) => a - b);
+	});
+
+	function addItem() {
+		if (valueIndex < nextValues.length) {
+			arr.push(nextValues[valueIndex]);
+			valueIndex++;
+		}
+	}
+</script>
+
+<button onclick={addItem}>add item</button>
+{#each arr as x}
+	<p>{x}</p>
+{/each}

From 402434e6cde008d5c7b1b8e95f72850139ad3d07 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 17 Jun 2025 17:46:58 -0400
Subject: [PATCH 159/259] Version Packages (#16195)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/odd-readers-laugh.md  |  5 -----
 .changeset/plenty-wasps-sleep.md |  5 -----
 .changeset/rich-emus-study.md    |  5 -----
 .changeset/short-mails-know.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/odd-readers-laugh.md
 delete mode 100644 .changeset/plenty-wasps-sleep.md
 delete mode 100644 .changeset/rich-emus-study.md
 delete mode 100644 .changeset/short-mails-know.md

diff --git a/.changeset/odd-readers-laugh.md b/.changeset/odd-readers-laugh.md
deleted file mode 100644
index e1401fdf10..0000000000
--- a/.changeset/odd-readers-laugh.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: keep spread non-delegated event handlers up to date
diff --git a/.changeset/plenty-wasps-sleep.md b/.changeset/plenty-wasps-sleep.md
deleted file mode 100644
index aba96bc419..0000000000
--- a/.changeset/plenty-wasps-sleep.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: remove undefined attributes on hydration
diff --git a/.changeset/rich-emus-study.md b/.changeset/rich-emus-study.md
deleted file mode 100644
index dcadafacb1..0000000000
--- a/.changeset/rich-emus-study.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure sources within nested effects still register correctly
diff --git a/.changeset/short-mails-know.md b/.changeset/short-mails-know.md
deleted file mode 100644
index 0b8b62d575..0000000000
--- a/.changeset/short-mails-know.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid shadowing a variable in dynamic components
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 1814d59fb3..618a25c638 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.34.5
+
+### Patch Changes
+
+- fix: keep spread non-delegated event handlers up to date ([#16180](https://github.com/sveltejs/svelte/pull/16180))
+
+- fix: remove undefined attributes on hydration ([#16178](https://github.com/sveltejs/svelte/pull/16178))
+
+- fix: ensure sources within nested effects still register correctly ([#16193](https://github.com/sveltejs/svelte/pull/16193))
+
+- fix: avoid shadowing a variable in dynamic components ([#16185](https://github.com/sveltejs/svelte/pull/16185))
+
 ## 5.34.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 89c627dc0e..4ace75f3c4 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.34.4",
+  "version": "5.34.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 0fa8576105..bffca48eec 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.34.4';
+export const VERSION = '5.34.5';
 export const PUBLIC_VERSION = '5';

From 2b20a2d16b4536b37c3725754d5acda29797f427 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Wed, 18 Jun 2025 00:53:35 +0300
Subject: [PATCH 160/259] fix: match class and style directives against
 attribute selector (#16179)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/fair-laws-appear.md                |  5 +++++
 .../phases/2-analyze/css/css-prune.js         | 17 ++++++++++------
 .../expected.css                              |  2 ++
 .../input.svelte                              |  7 +++++++
 .../css/samples/class-directive/_config.js    | 20 +++++++++++++++++++
 .../css/samples/class-directive/expected.css  |  3 +++
 .../css/samples/class-directive/input.svelte  |  7 +++++++
 7 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fair-laws-appear.md
 create mode 100644 packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css
 create mode 100644 packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/class-directive/_config.js
 create mode 100644 packages/svelte/tests/css/samples/class-directive/expected.css
 create mode 100644 packages/svelte/tests/css/samples/class-directive/input.svelte

diff --git a/.changeset/fair-laws-appear.md b/.changeset/fair-laws-appear.md
new file mode 100644
index 0000000000..9a1149ff27
--- /dev/null
+++ b/.changeset/fair-laws-appear.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: match class and style directives against attribute selector
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index fbe6ca1cd3..b9a5688a87 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -532,12 +532,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 			}
 
 			case 'ClassSelector': {
-				if (
-					!attribute_matches(element, 'class', name, '~=', false) &&
-					!element.attributes.some(
-						(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
-					)
-				) {
+				if (!attribute_matches(element, 'class', name, '~=', false)) {
 					return false;
 				}
 
@@ -633,6 +628,16 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type === 'SpreadAttribute') return true;
 		if (attribute.type === 'BindDirective' && attribute.name === name) return true;
 
+		// match attributes against the corresponding directive but bail out on exact matching
+		if (attribute.type === 'StyleDirective' && name.toLowerCase() === 'style') return true;
+		if (attribute.type === 'ClassDirective' && name.toLowerCase() === 'class') {
+			if (operator == '~=') {
+				if (attribute.name === expected_value) return true;
+			} else {
+				return true;
+			}
+		}
+
 		if (attribute.type !== 'Attribute') continue;
 		if (attribute.name.toLowerCase() !== name.toLowerCase()) continue;
 
diff --git a/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css
new file mode 100644
index 0000000000..4b5e4bfd09
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css
@@ -0,0 +1,2 @@
+	span[class].svelte-xyz { color: green }
+	div[style].svelte-xyz { color: green }
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte
new file mode 100644
index 0000000000..2f9ab202ca
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte
@@ -0,0 +1,7 @@
+<span class:foo={true}></span>
+<div style:--foo="bar"></div>
+
+<style>
+	span[class] { color: green }
+	div[style] { color: green }
+</style>
diff --git a/packages/svelte/tests/css/samples/class-directive/_config.js b/packages/svelte/tests/css/samples/class-directive/_config.js
new file mode 100644
index 0000000000..28e9fbc815
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',
+			start: {
+				line: 6,
+				column: 2,
+				character: 115
+			},
+			end: {
+				line: 6,
+				column: 8,
+				character: 121
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/class-directive/expected.css b/packages/svelte/tests/css/samples/class-directive/expected.css
new file mode 100644
index 0000000000..1d7d3d4dee
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/expected.css
@@ -0,0 +1,3 @@
+  .first.svelte-xyz { color: green }
+  .second.svelte-xyz { color: green }
+  /* (unused) .third { color: red }*/
diff --git a/packages/svelte/tests/css/samples/class-directive/input.svelte b/packages/svelte/tests/css/samples/class-directive/input.svelte
new file mode 100644
index 0000000000..cf00335964
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/input.svelte
@@ -0,0 +1,7 @@
+<div class:first={true} class:second={true}></div>
+
+<style>
+  .first { color: green }
+  .second { color: green }
+  .third { color: red }
+</style>
\ No newline at end of file

From d941cf5d3be93243f7c13333bafbf362bbfd1d54 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 18 Jun 2025 11:24:09 -0400
Subject: [PATCH 161/259] Version Packages (#16196)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fair-laws-appear.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/fair-laws-appear.md

diff --git a/.changeset/fair-laws-appear.md b/.changeset/fair-laws-appear.md
deleted file mode 100644
index 9a1149ff27..0000000000
--- a/.changeset/fair-laws-appear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: match class and style directives against attribute selector
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 618a25c638..7dfcfb9039 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.34.6
+
+### Patch Changes
+
+- fix: match class and style directives against attribute selector ([#16179](https://github.com/sveltejs/svelte/pull/16179))
+
 ## 5.34.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4ace75f3c4..0971b05228 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.34.5",
+  "version": "5.34.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index bffca48eec..98a526d8bd 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.34.5';
+export const VERSION = '5.34.6';
 export const PUBLIC_VERSION = '5';

From 659198a95c0f547061600487c45131b00368bd2a Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Thu, 19 Jun 2025 13:19:51 +0300
Subject: [PATCH 162/259] fix: address css class matching regression (#16204)

* fix: address css class matching regression

* address feedback

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/big-carpets-stare.md               |  5 +++++
 .../phases/2-analyze/css/css-prune.js         | 21 +++++++++++++------
 .../css/samples/class-directive/_config.js    | 10 ++++-----
 .../css/samples/class-directive/expected.css  |  6 ++++--
 .../css/samples/class-directive/input.svelte  |  8 ++++---
 5 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/big-carpets-stare.md

diff --git a/.changeset/big-carpets-stare.md b/.changeset/big-carpets-stare.md
new file mode 100644
index 0000000000..eabe29bb88
--- /dev/null
+++ b/.changeset/big-carpets-stare.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: address css class matching regression
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index b9a5688a87..79e8fbb02c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -628,10 +628,11 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type === 'SpreadAttribute') return true;
 		if (attribute.type === 'BindDirective' && attribute.name === name) return true;
 
+		const name_lower = name.toLowerCase();
 		// match attributes against the corresponding directive but bail out on exact matching
-		if (attribute.type === 'StyleDirective' && name.toLowerCase() === 'style') return true;
-		if (attribute.type === 'ClassDirective' && name.toLowerCase() === 'class') {
-			if (operator == '~=') {
+		if (attribute.type === 'StyleDirective' && name_lower === 'style') return true;
+		if (attribute.type === 'ClassDirective' && name_lower === 'class') {
+			if (operator === '~=') {
 				if (attribute.name === expected_value) return true;
 			} else {
 				return true;
@@ -639,13 +640,21 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		}
 
 		if (attribute.type !== 'Attribute') continue;
-		if (attribute.name.toLowerCase() !== name.toLowerCase()) continue;
+		if (attribute.name.toLowerCase() !== name_lower) continue;
 
 		if (attribute.value === true) return operator === null;
 		if (expected_value === null) return true;
 
 		if (is_text_attribute(attribute)) {
-			return test_attribute(operator, expected_value, case_insensitive, attribute.value[0].data);
+			const matches = test_attribute(
+				operator,
+				expected_value,
+				case_insensitive,
+				attribute.value[0].data
+			);
+			// continue if we still may match against a class/style directive
+			if (!matches && (name_lower === 'class' || name_lower === 'style')) continue;
+			return matches;
 		}
 
 		const chunks = get_attribute_chunks(attribute.value);
@@ -654,7 +663,7 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		/** @type {string[]} */
 		let prev_values = [];
 		for (const chunk of chunks) {
-			const current_possible_values = get_possible_values(chunk, name === 'class');
+			const current_possible_values = get_possible_values(chunk, name_lower === 'class');
 
 			// impossible to find out all combinations
 			if (!current_possible_values) return true;
diff --git a/packages/svelte/tests/css/samples/class-directive/_config.js b/packages/svelte/tests/css/samples/class-directive/_config.js
index 28e9fbc815..abeb8b6329 100644
--- a/packages/svelte/tests/css/samples/class-directive/_config.js
+++ b/packages/svelte/tests/css/samples/class-directive/_config.js
@@ -4,16 +4,16 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',
+			message: 'Unused CSS selector ".forth"\nhttps://svelte.dev/e/css_unused_selector',
 			start: {
-				line: 6,
+				line: 8,
 				column: 2,
-				character: 115
+				character: 190
 			},
 			end: {
-				line: 6,
+				line: 8,
 				column: 8,
-				character: 121
+				character: 196
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/class-directive/expected.css b/packages/svelte/tests/css/samples/class-directive/expected.css
index 1d7d3d4dee..b3a74baee5 100644
--- a/packages/svelte/tests/css/samples/class-directive/expected.css
+++ b/packages/svelte/tests/css/samples/class-directive/expected.css
@@ -1,3 +1,5 @@
-  .first.svelte-xyz { color: green }
+
+  .zero.first.svelte-xyz { color: green }
   .second.svelte-xyz { color: green }
-  /* (unused) .third { color: red }*/
+  .third.svelte-xyz { color: green }
+  /* (unused) .forth { color: red }*/
diff --git a/packages/svelte/tests/css/samples/class-directive/input.svelte b/packages/svelte/tests/css/samples/class-directive/input.svelte
index cf00335964..70075f89d4 100644
--- a/packages/svelte/tests/css/samples/class-directive/input.svelte
+++ b/packages/svelte/tests/css/samples/class-directive/input.svelte
@@ -1,7 +1,9 @@
-<div class:first={true} class:second={true}></div>
+<div class="zero" class:first={true}></div>
+<div class:second={true} class:third={true}></div>
 
 <style>
-  .first { color: green }
+  .zero.first { color: green }
   .second { color: green }
-  .third { color: red }
+  .third { color: green }
+  .forth { color: red }
 </style>
\ No newline at end of file

From 669a2233eef99e7a300e7e3d68a869e0a0db76af Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 19 Jun 2025 09:19:10 -0400
Subject: [PATCH 163/259] Version Packages (#16205)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/big-carpets-stare.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/big-carpets-stare.md

diff --git a/.changeset/big-carpets-stare.md b/.changeset/big-carpets-stare.md
deleted file mode 100644
index eabe29bb88..0000000000
--- a/.changeset/big-carpets-stare.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: address css class matching regression
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7dfcfb9039..b29ecc3fe3 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.34.7
+
+### Patch Changes
+
+- fix: address css class matching regression ([#16204](https://github.com/sveltejs/svelte/pull/16204))
+
 ## 5.34.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0971b05228..bdf7576e22 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.34.6",
+  "version": "5.34.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 98a526d8bd..748cc3ddd6 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.34.6';
+export const VERSION = '5.34.7';
 export const PUBLIC_VERSION = '5';

From 4db4ee53305dbf1f29d2f6ddadb5201a4854c590 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Mon, 23 Jun 2025 13:18:14 +0300
Subject: [PATCH 164/259] chore: rid of nodeType magic numbers (#16208)

* chore: rid of nodeType magic numbers

* lint

---------

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .../svelte/src/internal/client/constants.js   |  5 +++++
 .../src/internal/client/dev/elements.js       |  7 ++++---
 .../src/internal/client/dom/blocks/each.js    |  4 ++--
 .../src/internal/client/dom/blocks/html.js    |  6 +++++-
 .../src/internal/client/dom/blocks/snippet.js |  4 ++--
 .../client/dom/blocks/svelte-element.js       |  4 ++--
 .../internal/client/dom/blocks/svelte-head.js |  5 +++--
 .../src/internal/client/dom/hydration.js      |  5 +++--
 .../src/internal/client/dom/operations.js     |  9 ++++-----
 .../src/internal/client/dom/template.js       |  7 ++++---
 packages/svelte/src/internal/client/render.js |  5 +++--
 packages/svelte/tests/html_equal.js           | 19 ++++++++++---------
 .../svelte/tests/runtime-browser/assert.js    |  5 ++++-
 .../samples/template/_config.js               |  3 ++-
 14 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 98cef658bf..3ca915f98e 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -26,3 +26,8 @@ export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 export const PROXY_PATH_SYMBOL = Symbol('proxy path');
+
+export const ELEMENT_NODE = 1;
+export const TEXT_NODE = 3;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_FRAGMENT_NODE = 11;
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index 62ac09d784..f70f893d1e 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -1,4 +1,5 @@
 /** @import { SourceLocation } from '#client' */
+import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE } from '#client/constants';
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
 import { hydrating } from '../dom/hydration.js';
 
@@ -12,7 +13,7 @@ export function add_locations(fn, filename, locations) {
 	return (/** @type {any[]} */ ...args) => {
 		const dom = fn(...args);
 
-		var node = hydrating ? dom : dom.nodeType === 11 ? dom.firstChild : dom;
+		var node = hydrating ? dom : dom.nodeType === DOCUMENT_FRAGMENT_NODE ? dom.firstChild : dom;
 		assign_locations(node, filename, locations);
 
 		return dom;
@@ -45,13 +46,13 @@ function assign_locations(node, filename, locations) {
 	var depth = 0;
 
 	while (node && i < locations.length) {
-		if (hydrating && node.nodeType === 8) {
+		if (hydrating && node.nodeType === COMMENT_NODE) {
 			var comment = /** @type {Comment} */ (node);
 			if (comment.data === HYDRATION_START || comment.data === HYDRATION_START_ELSE) depth += 1;
 			else if (comment.data[0] === HYDRATION_END) depth -= 1;
 		}
 
-		if (depth === 0 && node.nodeType === 1) {
+		if (depth === 0 && node.nodeType === ELEMENT_NODE) {
 			assign_location(/** @type {Element} */ (node), filename, locations[i++]);
 		}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index b638a6d2da..7b12be58e8 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -34,7 +34,7 @@ import {
 } from '../../reactivity/effects.js';
 import { source, mutable_source, internal_set } from '../../reactivity/sources.js';
 import { array_from, is_array } from '../../../shared/utils.js';
-import { INERT } from '#client/constants';
+import { COMMENT_NODE, INERT } from '#client/constants';
 import { queue_micro_task } from '../task.js';
 import { active_effect, get } from '../../runtime.js';
 import { DEV } from 'esm-env';
@@ -183,7 +183,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 			for (var i = 0; i < length; i++) {
 				if (
-					hydrate_node.nodeType === 8 &&
+					hydrate_node.nodeType === COMMENT_NODE &&
 					/** @type {Comment} */ (hydrate_node).data === HYDRATION_END
 				) {
 					// The server rendered fewer items than expected,
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index 92c8243478..d7190abc66 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -10,6 +10,7 @@ import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../context.js';
 import { get_first_child, get_next_sibling } from '../operations.js';
 import { active_effect } from '../../runtime.js';
+import { COMMENT_NODE } from '#client/constants';
 
 /**
  * @param {Element} element
@@ -67,7 +68,10 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
 			var next = hydrate_next();
 			var last = next;
 
-			while (next !== null && (next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')) {
+			while (
+				next !== null &&
+				(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
+			) {
 				last = next;
 				next = /** @type {TemplateNode} */ (get_next_sibling(next));
 			}
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index c6dce26bfe..32d88d4c60 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,7 +1,7 @@
 /** @import { Snippet } from 'svelte' */
 /** @import { Effect, TemplateNode } from '#client' */
 /** @import { Getters } from '#shared' */
-import { EFFECT_TRANSPARENT } from '#client/constants';
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { branch, block, destroy_effect, teardown } from '../../reactivity/effects.js';
 import {
 	dev_current_component_function,
@@ -102,7 +102,7 @@ export function createRawSnippet(fn) {
 			var fragment = create_fragment_from_html(html);
 			element = /** @type {Element} */ (get_first_child(fragment));
 
-			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== 1)) {
+			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== ELEMENT_NODE)) {
 				w.invalid_raw_snippet_render();
 			}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 43f669e844..ffa57b2d8b 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -20,7 +20,7 @@ import { current_each_item, set_current_each_item } from './each.js';
 import { active_effect } from '../../runtime.js';
 import { component_context } from '../../context.js';
 import { DEV } from 'esm-env';
-import { EFFECT_TRANSPARENT } from '#client/constants';
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
 import { is_raw_text_element } from '../../../../utils.js';
 
@@ -51,7 +51,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 	/** @type {null | Element} */
 	var element = null;
 
-	if (hydrating && hydrate_node.nodeType === 1) {
+	if (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {
 		element = /** @type {Element} */ (hydrate_node);
 		hydrate_next();
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index db2a0c4ef1..66d3371836 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -2,7 +2,7 @@
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { create_text, get_first_child, get_next_sibling } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
-import { HEAD_EFFECT } from '#client/constants';
+import { COMMENT_NODE, HEAD_EFFECT } from '#client/constants';
 import { HYDRATION_START } from '../../../../constants.js';
 
 /**
@@ -37,7 +37,8 @@ export function head(render_fn) {
 
 		while (
 			head_anchor !== null &&
-			(head_anchor.nodeType !== 8 || /** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
+			(head_anchor.nodeType !== COMMENT_NODE ||
+				/** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
 		) {
 			head_anchor = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
 		}
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index ab3256da82..1f80b7922b 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -1,5 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 
+import { COMMENT_NODE } from '#client/constants';
 import {
 	HYDRATION_END,
 	HYDRATION_ERROR,
@@ -87,7 +88,7 @@ export function remove_nodes() {
 	var node = hydrate_node;
 
 	while (true) {
-		if (node.nodeType === 8) {
+		if (node.nodeType === COMMENT_NODE) {
 			var data = /** @type {Comment} */ (node).data;
 
 			if (data === HYDRATION_END) {
@@ -109,7 +110,7 @@ export function remove_nodes() {
  * @param {TemplateNode} node
  */
 export function read_hydration_instruction(node) {
-	if (!node || node.nodeType !== 8) {
+	if (!node || node.nodeType !== COMMENT_NODE) {
 		w.hydration_mismatch();
 		throw HYDRATION_ERROR;
 	}
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 97062f04e3..4b35f0802f 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -3,6 +3,7 @@ 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';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -113,7 +114,7 @@ export function child(node, is_text) {
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
 		child = hydrate_node.appendChild(create_text());
-	} else if (is_text && child.nodeType !== 3) {
+	} else if (is_text && child.nodeType !== TEXT_NODE) {
 		var text = create_text();
 		child?.before(text);
 		set_hydrate_node(text);
@@ -143,7 +144,7 @@ export function first_child(fragment, is_text) {
 
 	// if an {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
-	if (is_text && hydrate_node?.nodeType !== 3) {
+	if (is_text && hydrate_node?.nodeType !== TEXT_NODE) {
 		var text = create_text();
 
 		hydrate_node?.before(text);
@@ -174,11 +175,9 @@ export function sibling(node, count = 1, is_text = false) {
 		return next_sibling;
 	}
 
-	var type = next_sibling?.nodeType;
-
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
-	if (is_text && type !== 3) {
+	if (is_text && next_sibling?.nodeType !== TEXT_NODE) {
 		var text = create_text();
 		// If the next sibling is `null` and we're handling text then it's because
 		// the SSR content was empty for the text, so we need to generate a new text
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 0b77ab1396..ebbf0039b2 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -20,6 +20,7 @@ import {
 	TEMPLATE_USE_MATHML,
 	TEMPLATE_USE_SVG
 } from '../../../constants.js';
+import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, TEXT_NODE } from '#client/constants';
 
 /**
  * @param {TemplateNode} start
@@ -264,7 +265,7 @@ function run_scripts(node) {
 	// scripts were SSR'd, in which case they will run
 	if (hydrating) return node;
 
-	const is_fragment = node.nodeType === 11;
+	const is_fragment = node.nodeType === DOCUMENT_FRAGMENT_NODE;
 	const scripts =
 		/** @type {HTMLElement} */ (node).tagName === 'SCRIPT'
 			? [/** @type {HTMLScriptElement} */ (node)]
@@ -305,7 +306,7 @@ export function text(value = '') {
 
 	var node = hydrate_node;
 
-	if (node.nodeType !== 3) {
+	if (node.nodeType !== TEXT_NODE) {
 		// if an {expression} is empty during SSR, we need to insert an empty text node
 		node.before((node = create_text()));
 		set_hydrate_node(node);
@@ -360,7 +361,7 @@ export function props_id() {
 	if (
 		hydrating &&
 		hydrate_node &&
-		hydrate_node.nodeType === 8 &&
+		hydrate_node.nodeType === COMMENT_NODE &&
 		hydrate_node.textContent?.startsWith(`#`)
 	) {
 		const id = hydrate_node.textContent.substring(1);
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 3256fe8274..ff6844453d 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -30,6 +30,7 @@ import * as w from './warnings.js';
 import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
 import { is_passive_event } from '../../utils.js';
+import { COMMENT_NODE } from './constants.js';
 
 /**
  * This is normally true — block effects should run their intro transitions —
@@ -107,7 +108,7 @@ export function hydrate(component, options) {
 		var anchor = /** @type {TemplateNode} */ (get_first_child(target));
 		while (
 			anchor &&
-			(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
+			(anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
 		) {
 			anchor = /** @type {TemplateNode} */ (get_next_sibling(anchor));
 		}
@@ -124,7 +125,7 @@ export function hydrate(component, options) {
 
 		if (
 			hydrate_node === null ||
-			hydrate_node.nodeType !== 8 ||
+			hydrate_node.nodeType !== COMMENT_NODE ||
 			/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
 		) {
 			w.hydration_mismatch();
diff --git a/packages/svelte/tests/html_equal.js b/packages/svelte/tests/html_equal.js
index 6948d8db32..b637e4d538 100644
--- a/packages/svelte/tests/html_equal.js
+++ b/packages/svelte/tests/html_equal.js
@@ -1,3 +1,4 @@
+import { COMMENT_NODE, ELEMENT_NODE, TEXT_NODE } from '#client/constants';
 import { assert } from 'vitest';
 
 /**
@@ -35,7 +36,7 @@ function clean_children(node, opts) {
 	});
 
 	for (let child of [...node.childNodes]) {
-		if (child.nodeType === 3) {
+		if (child.nodeType === TEXT_NODE) {
 			let text = /** @type {Text} */ (child);
 
 			if (
@@ -49,7 +50,7 @@ function clean_children(node, opts) {
 
 			text.data = text.data.replace(/[^\S]+/g, ' ');
 
-			if (previous && previous.nodeType === 3) {
+			if (previous && previous.nodeType === TEXT_NODE) {
 				const prev = /** @type {Text} */ (previous);
 
 				prev.data += text.data;
@@ -62,22 +63,22 @@ function clean_children(node, opts) {
 			}
 		}
 
-		if (child.nodeType === 8 && !opts.preserveComments) {
+		if (child.nodeType === COMMENT_NODE && !opts.preserveComments) {
 			// comment
 			child.remove();
 			continue;
 		}
 
 		// add newlines for better readability and potentially recurse into children
-		if (child.nodeType === 1 || child.nodeType === 8) {
-			if (previous?.nodeType === 3) {
+		if (child.nodeType === ELEMENT_NODE || child.nodeType === COMMENT_NODE) {
+			if (previous?.nodeType === TEXT_NODE) {
 				const prev = /** @type {Text} */ (previous);
 				prev.data = prev.data.replace(/^[^\S]+$/, '\n');
-			} else if (previous?.nodeType === 1 || previous?.nodeType === 8) {
+			} else if (previous?.nodeType === ELEMENT_NODE || previous?.nodeType === COMMENT_NODE) {
 				node.insertBefore(document.createTextNode('\n'), child);
 			}
 
-			if (child.nodeType === 1) {
+			if (child.nodeType === ELEMENT_NODE) {
 				has_element_children = true;
 				clean_children(/** @type {Element} */ (child), opts);
 			}
@@ -87,12 +88,12 @@ function clean_children(node, opts) {
 	}
 
 	// collapse whitespace
-	if (node.firstChild && node.firstChild.nodeType === 3) {
+	if (node.firstChild && node.firstChild.nodeType === TEXT_NODE) {
 		const text = /** @type {Text} */ (node.firstChild);
 		text.data = text.data.trimStart();
 	}
 
-	if (node.lastChild && node.lastChild.nodeType === 3) {
+	if (node.lastChild && node.lastChild.nodeType === TEXT_NODE) {
 		const text = /** @type {Text} */ (node.lastChild);
 		text.data = text.data.trimEnd();
 	}
diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js
index fb460c722a..48bde01410 100644
--- a/packages/svelte/tests/runtime-browser/assert.js
+++ b/packages/svelte/tests/runtime-browser/assert.js
@@ -1,5 +1,8 @@
 /** @import { assert } from 'vitest' */
 /** @import { CompileOptions, Warning } from '#compiler' */
+
+import { ELEMENT_NODE } from '#client/constants';
+
 /**
  * @param {any} a
  * @param {any} b
@@ -102,7 +105,7 @@ function normalize_children(node) {
 	}
 
 	for (let child of [...node.childNodes]) {
-		if (child.nodeType === 1 /* Element */) {
+		if (child.nodeType === ELEMENT_NODE) {
 			normalize_children(child);
 		}
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/template/_config.js b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
index f827168542..7576b6fbb8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/template/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
@@ -1,3 +1,4 @@
+import { COMMENT_NODE } from '#client/constants';
 import { ok, test } from '../../test';
 
 export default test({
@@ -41,7 +42,7 @@ export default test({
 		// get all childNodes of template3 except comments
 		let childNodes = [];
 		for (const node of template3.content.childNodes) {
-			if (node.nodeType !== 8) {
+			if (node.nodeType !== COMMENT_NODE) {
 				childNodes.push(/** @type {Element} */ (node));
 			}
 		}

From c4b32c2bffed5668a1d1383ca7311e43e6376e27 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 23 Jun 2025 12:56:36 +0200
Subject: [PATCH 165/259] fix: untrack `$inspect.with` and add check for unsafe
 mutation (#16209)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/clever-dodos-jam.md                |  5 +++++
 .../98-reference/.generated/client-errors.md  |  2 +-
 .../svelte/messages/client-errors/errors.md   |  2 +-
 .../svelte/src/internal/client/dev/inspect.js |  6 +++++-
 packages/svelte/src/internal/client/errors.js |  4 ++--
 .../src/internal/client/reactivity/sources.js |  6 ++++--
 .../inspect-state-unsafe-mutation/_config.js  |  9 +++++++++
 .../inspect-state-unsafe-mutation/main.svelte | 10 ++++++++++
 .../samples/inspect-with-untracked/_config.js | 20 +++++++++++++++++++
 .../inspect-with-untracked/main.svelte        | 13 ++++++++++++
 10 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/clever-dodos-jam.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte

diff --git a/.changeset/clever-dodos-jam.md b/.changeset/clever-dodos-jam.md
new file mode 100644
index 0000000000..bdeb979184
--- /dev/null
+++ b/.changeset/clever-dodos-jam.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: untrack `$inspect.with` and add check for unsafe mutation
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 32348bb781..111b0b8940 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -125,7 +125,7 @@ Cannot set prototype of `$state` object
 ### state_unsafe_mutation
 
 ```
-Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
 This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index c4e68f8fee..6d96770eba 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -82,7 +82,7 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 ## state_unsafe_mutation
 
-> Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+> Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 
 This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
 
diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js
index e13ef470cf..e15c66901c 100644
--- a/packages/svelte/src/internal/client/dev/inspect.js
+++ b/packages/svelte/src/internal/client/dev/inspect.js
@@ -1,6 +1,7 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { inspect_effect, validate_effect } from '../reactivity/effects.js';
+import { untrack } from '../runtime.js';
 
 /**
  * @param {() => any[]} get_value
@@ -28,7 +29,10 @@ export function inspect(get_value, inspector = console.log) {
 		}
 
 		if (value !== UNINITIALIZED) {
-			inspector(initial ? 'init' : 'update', ...snapshot(value, true));
+			var snap = snapshot(value, true);
+			untrack(() => {
+				inspector(initial ? 'init' : 'update', ...snap);
+			});
 		}
 
 		initial = false;
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 429dd99da9..962593b48d 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -307,12 +307,12 @@ export function state_prototype_fixed() {
 }
 
 /**
- * Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+ * Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
  * @returns {never}
  */
 export function state_unsafe_mutation() {
 	if (DEV) {
-		const error = new Error(`state_unsafe_mutation\nUpdating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
+		const error = new Error(`state_unsafe_mutation\nUpdating state inside \`$derived(...)\`, \`$inspect(...)\` or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
 
 		error.name = 'Svelte error';
 		throw error;
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 4959bc1abc..0db3530232 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -135,9 +135,11 @@ export function mutate(source, value) {
 export function set(source, value, should_proxy = false) {
 	if (
 		active_reaction !== null &&
-		!untracking &&
+		// since we are untracking the function inside `$inspect.with` we need to add this check
+		// 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)) !== 0 &&
+		(active_reaction.f & (DERIVED | BLOCK_EFFECT | INSPECT_EFFECT)) !== 0 &&
 		!(reaction_sources?.[1].includes(source) && reaction_sources[0] === active_reaction)
 	) {
 		e.state_unsafe_mutation();
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
new file mode 100644
index 0000000000..7e8fcd2d48
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
@@ -0,0 +1,9 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	error: 'state_unsafe_mutation'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte
new file mode 100644
index 0000000000..3361087ff7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let a = $state(0);
+
+	let b = $state(0);
+
+	$inspect(a).with((...args)=>{
+		console.log(...args);
+		b++;
+	});
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js
new file mode 100644
index 0000000000..cdb242c416
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, target, logs }) {
+		const [a, b] = target.querySelectorAll('button');
+		assert.deepEqual(logs, ['init', 0]);
+		flushSync(() => {
+			b?.click();
+		});
+		assert.deepEqual(logs, ['init', 0]);
+		flushSync(() => {
+			a?.click();
+		});
+		assert.deepEqual(logs, ['init', 0, 'update', 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte
new file mode 100644
index 0000000000..5bcf2bd348
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let a = $state(0);
+
+	let b = $state(0);
+
+	$inspect(a).with((...args)=>{
+		console.log(...args);
+		b;
+	});
+</script>
+
+<button onclick={()=>a++}></button>
+<button onclick={()=>b++}></button>
\ No newline at end of file

From 2af7ba21563f1b7f011ffa9f0c08e4acb473eef3 Mon Sep 17 00:00:00 2001
From: Fedor Nezhivoi <gyzerok@users.noreply.github.com>
Date: Tue, 24 Jun 2025 20:05:24 +0700
Subject: [PATCH 166/259] fix: lift unsafe_state_mutation constraints for
 SvelteSet and SvelteMap created inside the derived (#16221)

Co-authored-by: Fedor Nezhivoi <f.nezhivoi@corp.vk.com>
---
 .changeset/fair-bats-visit.md                 |  5 ++++
 packages/svelte/src/reactivity/date.js        |  4 +--
 packages/svelte/src/reactivity/map.js         |  6 ++---
 packages/svelte/src/reactivity/set.js         |  6 ++---
 .../src/reactivity/url-search-params.js       |  4 +--
 packages/svelte/src/reactivity/url.js         | 18 ++++++-------
 .../side-effect-derived-array/_config.js      | 23 ++++++++++++++++
 .../side-effect-derived-array/main.svelte     | 25 +++++++++++++++++
 .../side-effect-derived-date/_config.js       | 23 ++++++++++++++++
 .../side-effect-derived-date/main.svelte      | 27 +++++++++++++++++++
 .../side-effect-derived-map/_config.js        | 23 ++++++++++++++++
 .../side-effect-derived-map/main.svelte       | 27 +++++++++++++++++++
 .../side-effect-derived-object/_config.js     | 23 ++++++++++++++++
 .../side-effect-derived-object/main.svelte    | 25 +++++++++++++++++
 .../side-effect-derived-primitive/_config.js  | 23 ++++++++++++++++
 .../side-effect-derived-primitive/main.svelte | 25 +++++++++++++++++
 .../side-effect-derived-set/_config.js        | 23 ++++++++++++++++
 .../side-effect-derived-set/main.svelte       | 27 +++++++++++++++++++
 .../_config.js                                | 23 ++++++++++++++++
 .../main.svelte                               | 27 +++++++++++++++++++
 .../side-effect-derived-url/_config.js        | 23 ++++++++++++++++
 .../side-effect-derived-url/main.svelte       | 27 +++++++++++++++++++
 22 files changed, 418 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/fair-bats-visit.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte

diff --git a/.changeset/fair-bats-visit.md b/.changeset/fair-bats-visit.md
new file mode 100644
index 0000000000..bc0a426395
--- /dev/null
+++ b/.changeset/fair-bats-visit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+lift unsafe_state_mutation constraints for SvelteSet, SvelteMap, SvelteDate, SvelteURL and SvelteURLSearchParams created inside the derived
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 4176f0ceec..8e2b5d41ab 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -1,6 +1,6 @@
 /** @import { Source } from '#client' */
 import { derived } from '../internal/client/index.js';
-import { source, set } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
 import { DEV } from 'esm-env';
@@ -40,7 +40,7 @@ var inited = false;
  * ```
  */
 export class SvelteDate extends Date {
-	#time = source(super.getTime());
+	#time = state(super.getTime());
 
 	/** @type {Map<keyof Date, Source<unknown>>} */
 	#deriveds = new Map();
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
index eed163dbf2..cd2fac163f 100644
--- a/packages/svelte/src/reactivity/map.js
+++ b/packages/svelte/src/reactivity/map.js
@@ -1,6 +1,6 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, source, state } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
@@ -54,8 +54,8 @@ import { increment } from './utils.js';
 export class SvelteMap extends Map {
 	/** @type {Map<K, Source<number>>} */
 	#sources = new Map();
-	#version = source(0);
-	#size = source(0);
+	#version = state(0);
+	#size = state(0);
 
 	/**
 	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index fd22014cb3..8a656c2bc1 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -1,6 +1,6 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { source, set } from '../internal/client/reactivity/sources.js';
+import { source, set, state } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
@@ -48,8 +48,8 @@ var inited = false;
 export class SvelteSet extends Set {
 	/** @type {Map<T, Source<boolean>>} */
 	#sources = new Map();
-	#version = source(0);
-	#size = source(0);
+	#version = state(0);
+	#size = state(0);
 
 	/**
 	 * @param {Iterable<T> | null | undefined} [value]
diff --git a/packages/svelte/src/reactivity/url-search-params.js b/packages/svelte/src/reactivity/url-search-params.js
index c77ff9c822..389da7cdb6 100644
--- a/packages/svelte/src/reactivity/url-search-params.js
+++ b/packages/svelte/src/reactivity/url-search-params.js
@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { source } from '../internal/client/reactivity/sources.js';
+import { state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { get_current_url } from './url.js';
@@ -34,7 +34,7 @@ export const REPLACE = Symbol();
  * ```
  */
 export class SvelteURLSearchParams extends URLSearchParams {
-	#version = DEV ? tag(source(0), 'SvelteURLSearchParams version') : source(0);
+	#version = DEV ? tag(state(0), 'SvelteURLSearchParams version') : state(0);
 	#url = get_current_url();
 
 	#updating = false;
diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js
index 56732a0402..dfede23f6e 100644
--- a/packages/svelte/src/reactivity/url.js
+++ b/packages/svelte/src/reactivity/url.js
@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { source, set } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { REPLACE, SvelteURLSearchParams } from './url-search-params.js';
@@ -40,14 +40,14 @@ export function get_current_url() {
  * ```
  */
 export class SvelteURL extends URL {
-	#protocol = source(super.protocol);
-	#username = source(super.username);
-	#password = source(super.password);
-	#hostname = source(super.hostname);
-	#port = source(super.port);
-	#pathname = source(super.pathname);
-	#hash = source(super.hash);
-	#search = source(super.search);
+	#protocol = state(super.protocol);
+	#username = state(super.username);
+	#password = state(super.password);
+	#hostname = state(super.hostname);
+	#port = state(super.port);
+	#pathname = state(super.pathname);
+	#hash = state(super.hash);
+	#search = state(super.search);
 	#searchParams;
 
 	/**
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte
new file mode 100644
index 0000000000..6468dbebc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state([]);
+	const throws = $derived.by(() => {
+		external.push(1);
+		return external;
+	});
+
+	let visibleInternal = $state(false)
+	const works = $derived.by(() => {
+		let internal = $state([]);
+		internal.push(1);
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte
new file mode 100644
index 0000000000..a3c6aa629f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteDate } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteDate();
+	const throws = $derived.by(() => {
+		external.setTime(12345);
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteDate();
+		internal.setTime(12345);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
new file mode 100644
index 0000000000..bdd5ccb75c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteMap } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteMap();
+	const throws = $derived.by(() => {
+		external.set(1, 1);
+		return external;
+	});
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteMap();
+		internal.set(1, 1);
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte
new file mode 100644
index 0000000000..2174bde59f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state({ v: 1 });
+	const throws = $derived.by(() => {
+		external.v = 2;
+		return external;
+	});
+
+	let visibleInternal = $state(false)
+	const works = $derived.by(() => {
+		let internal = $state({ v: 1 });
+		internal.v = 2;
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte
new file mode 100644
index 0000000000..21de8b9d91
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state(1);
+	const throws = $derived.by(() => {
+		external = 2;
+		return external;
+	});
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = $state(1);
+		internal = 2;
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
new file mode 100644
index 0000000000..8564f6e7c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteSet();
+	const throws = $derived.by(() => {
+		external.add(1);
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteSet();
+		internal.add(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte
new file mode 100644
index 0000000000..014a1e4e6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteURLSearchParams();
+	const throws = $derived.by(() => {
+		external.append('foo', 'bar')
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteURLSearchParams();
+		internal.append('foo', 'bar')
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte
new file mode 100644
index 0000000000..69ead384c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteURL } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteURL('https://svelte.dev');
+	const throws = $derived.by(() => {
+		external.host = 'kit.svelte.dev'
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteURL('https://svelte.dev');
+		internal.host = 'kit.svelte.dev'
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+

From 922bee9a6d44c2a0313766a9a996411acf451408 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 25 Jun 2025 11:35:03 +0200
Subject: [PATCH 167/259] fix: use fine grained for template if the component
 is not explicitly in legacy mode (#16232)

* fix: use fine grained for template if the component is not explicitly in legacy mode

* chore: add comment

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

* fix: add `LabeledStatement` to `instance.ast` check

* fix: spread `keys`

* fix: snapshots

* fix: use `compileOption.runes` if defined + add other tests

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/cold-dingos-dream.md               |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    | 23 +++++++++++++++++++
 .../client/visitors/shared/utils.js           |  5 +++-
 .../svelte/src/compiler/phases/types.d.ts     |  1 +
 .../svelte/tests/runtime-legacy/shared.ts     |  5 +++-
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               |  8 +++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               |  9 ++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               |  9 ++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               |  9 ++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               |  9 ++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               | 10 ++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../_config.js                                | 17 ++++++++++++++
 .../main.svelte                               | 12 ++++++++++
 .../test.svelte.js                            |  9 ++++++++
 .../samples/legacy-runes-ambiguous/_config.js | 17 ++++++++++++++
 .../legacy-runes-ambiguous/main.svelte        |  7 ++++++
 .../legacy-runes-ambiguous/test.svelte.js     |  9 ++++++++
 .../purity/_expected/client/index.svelte.js   |  6 ++---
 30 files changed, 320 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cold-dingos-dream.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js

diff --git a/.changeset/cold-dingos-dream.md b/.changeset/cold-dingos-dream.md
new file mode 100644
index 0000000000..c48414abc2
--- /dev/null
+++ b/.changeset/cold-dingos-dream.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use fine grained for template if the component is not explicitly in legacy mode
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index fded183b86..80adc10c1a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -431,6 +431,29 @@ export function analyze_component(root, source, options) {
 		template,
 		elements: [],
 		runes,
+		// if we are not in runes mode but we have no reserved references ($$props, $$restProps)
+		// and no `export let` we might be in a wannabe runes component that is using runes in an external
+		// module...we need to fallback to the runic behavior
+		maybe_runes:
+			!runes &&
+			// if they explicitly disabled runes, use the legacy behavior
+			options.runes !== false &&
+			![...module.scope.references.keys()].some((name) =>
+				['$$props', '$$restProps'].includes(name)
+			) &&
+			!instance.ast.body.some(
+				(node) =>
+					node.type === 'LabeledStatement' ||
+					(node.type === 'ExportNamedDeclaration' &&
+						((node.declaration &&
+							node.declaration.type === 'VariableDeclaration' &&
+							node.declaration.kind === 'let') ||
+							node.specifiers.some(
+								(specifier) =>
+									specifier.local.type === 'Identifier' &&
+									instance.scope.get(specifier.local.name)?.declaration_kind === 'let'
+							)))
+			),
 		tracing: false,
 		classes: new Map(),
 		immutable: runes || options.immutable,
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 15982899c9..c861a51b7d 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
@@ -370,7 +370,10 @@ export function validate_mutation(node, context, expression) {
 export function build_expression(context, expression, metadata, state = context.state) {
 	const value = /** @type {Expression} */ (context.visit(expression, state));
 
-	if (context.state.analysis.runes) {
+	// Components not explicitly in legacy mode might be expected to be in runes mode (especially since we didn't
+	// adjust this behavior until recently, which broke people's existing components), so we also bail in this case.
+	// Kind of an in-between-mode.
+	if (context.state.analysis.runes || context.state.analysis.maybe_runes) {
 		return value;
 	}
 
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 67cbd75ff8..8fa4bff619 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -51,6 +51,7 @@ export interface ComponentAnalysis extends Analysis {
 	/** Used for CSS pruning and scoping */
 	elements: Array<AST.RegularElement | AST.SvelteElement>;
 	runes: boolean;
+	maybe_runes: boolean;
 	tracing: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 11ea9f6dda..126992a0c0 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -158,7 +158,10 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		...config.compileOptions,
 		immutable: config.immutable,
 		accessors: 'accessors' in config ? config.accessors : true,
-		runes
+		runes:
+			config.compileOptions && 'runes' in config.compileOptions
+				? config.compileOptions.runes
+				: runes
 	};
 
 	// load_compiled can be used for debugging a test. It means the compiler will not run on the input
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte
new file mode 100644
index 0000000000..cb5837dcd6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options runes={false} />
+<script>
+	import { get, set } from "./test.svelte.js";
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte
new file mode 100644
index 0000000000..a7370b48d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$$props;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte
new file mode 100644
index 0000000000..ccf9bd2864
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$$restProps;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js
new file mode 100644
index 0000000000..2d72de6d13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte
new file mode 100644
index 0000000000..49aef81518
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	export const x = 42;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte
new file mode 100644
index 0000000000..f7cd0ede2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$: console.log("");
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte
new file mode 100644
index 0000000000..36becde4a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	export let x = 42;
+</script>
+
+{x}
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte
new file mode 100644
index 0000000000..1449b7d582
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	let x = 42;
+
+	export { x };
+</script>
+
+{x}
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js
new file mode 100644
index 0000000000..2d72de6d13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte
new file mode 100644
index 0000000000..698a852ac9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index da6fdf44d8..a351851875 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -8,13 +8,11 @@ export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = (
-		$.untrack(() => Math.max(0, Math.min(0, 100)))
-	);
+	p.textContent = '0';
 
 	var p_1 = $.sibling(p, 2);
 
-	p_1.textContent = ($.untrack(() => location.href));
+	p_1.textContent = location.href;
 
 	var node = $.sibling(p_1, 2);
 

From 777e67b9487ffbc8f433e50752243fcb51d22392 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:38:03 +0200
Subject: [PATCH 168/259] Version Packages (#16216)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/clever-dodos-jam.md  |  5 -----
 .changeset/cold-dingos-dream.md |  5 -----
 .changeset/fair-bats-visit.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/clever-dodos-jam.md
 delete mode 100644 .changeset/cold-dingos-dream.md
 delete mode 100644 .changeset/fair-bats-visit.md

diff --git a/.changeset/clever-dodos-jam.md b/.changeset/clever-dodos-jam.md
deleted file mode 100644
index bdeb979184..0000000000
--- a/.changeset/clever-dodos-jam.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: untrack `$inspect.with` and add check for unsafe mutation
diff --git a/.changeset/cold-dingos-dream.md b/.changeset/cold-dingos-dream.md
deleted file mode 100644
index c48414abc2..0000000000
--- a/.changeset/cold-dingos-dream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use fine grained for template if the component is not explicitly in legacy mode
diff --git a/.changeset/fair-bats-visit.md b/.changeset/fair-bats-visit.md
deleted file mode 100644
index bc0a426395..0000000000
--- a/.changeset/fair-bats-visit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-lift unsafe_state_mutation constraints for SvelteSet, SvelteMap, SvelteDate, SvelteURL and SvelteURLSearchParams created inside the derived
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b29ecc3fe3..e254be754f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.34.8
+
+### Patch Changes
+
+- fix: untrack `$inspect.with` and add check for unsafe mutation ([#16209](https://github.com/sveltejs/svelte/pull/16209))
+
+- fix: use fine grained for template if the component is not explicitly in legacy mode ([#16232](https://github.com/sveltejs/svelte/pull/16232))
+
+- lift unsafe_state_mutation constraints for SvelteSet, SvelteMap, SvelteDate, SvelteURL and SvelteURLSearchParams created inside the derived ([#16221](https://github.com/sveltejs/svelte/pull/16221))
+
 ## 5.34.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index bdf7576e22..17a3e980c4 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.34.7",
+  "version": "5.34.8",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 748cc3ddd6..ec0126b17d 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.34.7';
+export const VERSION = '5.34.8';
 export const PUBLIC_VERSION = '5';

From facf528cb8a7289c8b3eaf036949a515f5ad2108 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Wed, 25 Jun 2025 20:35:48 +0200
Subject: [PATCH 169/259] docs: Simplify TS config docs (#16236)

* Simplify TypeScript config requirements

Assignments are allowed in the constructor from 5.31.0 onward, so retaining the classes via ES2015 should be enough.

* Add  back a little bit of detail.
---
 documentation/docs/07-misc/03-typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index fbf8817069..ff33885fb8 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -83,7 +83,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 When using TypeScript, make sure your `tsconfig.json` is setup correctly.
 
-- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler
+- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions
 - Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
 - Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. 
 

From 0b2b9c724fef657af9371089e468d5c49c209e36 Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Wed, 25 Jun 2025 21:38:26 +0300
Subject: [PATCH 170/259] chore: adjust linting (#16231)

* chore: adjust linting

* more nice treeshaking failure message

* lint
---
 .prettierignore                               |  4 +-
 eslint.config.js                              |  1 +
 .../svelte/scripts/check-treeshakeability.js  | 50 ++++++++++---------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index d5c124353c..72cd10aca8 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,6 +7,7 @@ packages/**/config/*.js
 
 # packages/svelte
 packages/svelte/messages/**/*.md
+packages/svelte/scripts/_bundle.js
 packages/svelte/src/compiler/errors.js
 packages/svelte/src/compiler/warnings.js
 packages/svelte/src/internal/client/errors.js
@@ -25,8 +26,7 @@ packages/svelte/tests/hydration/samples/*/_expected.html
 packages/svelte/tests/hydration/samples/*/_override.html
 packages/svelte/types
 packages/svelte/compiler/index.js
-playgrounds/sandbox/input/**.svelte
-playgrounds/sandbox/output
+playgrounds/sandbox/src/*
 
 # sites/svelte.dev
 sites/svelte.dev/static/svelte-app.json
diff --git a/eslint.config.js b/eslint.config.js
index d6c977a36a..d7044fc9f1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -87,6 +87,7 @@ export default [
 			'**/*.d.ts',
 			'**/tests',
 			'packages/svelte/scripts/process-messages/templates/*.js',
+			'packages/svelte/scripts/_bundle.js',
 			'packages/svelte/src/compiler/errors.js',
 			'packages/svelte/src/internal/client/errors.js',
 			'packages/svelte/src/internal/client/warnings.js',
diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js
index 1501ee6954..e883496fe2 100644
--- a/packages/svelte/scripts/check-treeshakeability.js
+++ b/packages/svelte/scripts/check-treeshakeability.js
@@ -118,36 +118,40 @@ const bundle = await bundle_code(
 	).js.code
 );
 
-if (!bundle.includes('hydrate_node') && !bundle.includes('hydrate_next')) {
-	// eslint-disable-next-line no-console
-	console.error(`✅ Hydration code treeshakeable`);
-} else {
-	failed = true;
-	// eslint-disable-next-line no-console
-	console.error(`❌ Hydration code not treeshakeable`);
-}
+/**
+ * @param {string} case_name
+ * @param {string[]} strings
+ */
+function check_bundle(case_name, ...strings) {
+	for (const string of strings) {
+		const index = bundle.indexOf(string);
+		if (index >= 0) {
+			// eslint-disable-next-line no-console
+			console.error(`❌ ${case_name} not treeshakeable`);
+			failed = true;
 
-if (!bundle.includes('component_context.l')) {
-	// eslint-disable-next-line no-console
-	console.error(`✅ Legacy code treeshakeable`);
-} else {
-	failed = true;
+			let lines = bundle.slice(index - 500, index + 500).split('\n');
+			const target_line = lines.findIndex((line) => line.includes(string));
+			// mark the failed line
+			lines = lines
+				.map((line, i) => (i === target_line ? `> ${line}` : `| ${line}`))
+				.slice(target_line - 5, target_line + 6);
+			// eslint-disable-next-line no-console
+			console.error('The first failed line:\n' + lines.join('\n'));
+			return;
+		}
+	}
 	// eslint-disable-next-line no-console
-	console.error(`❌ Legacy code not treeshakeable`);
+	console.error(`✅ ${case_name} treeshakeable`);
 }
 
-if (!bundle.includes(`'CreatedAt'`)) {
-	// eslint-disable-next-line no-console
-	console.error(`✅ $inspect.trace code treeshakeable`);
-} else {
-	failed = true;
-	// eslint-disable-next-line no-console
-	console.error(`❌ $inspect.trace code not treeshakeable`);
-}
+check_bundle('Hydration code', 'hydrate_node', 'hydrate_next');
+check_bundle('Legacy code', 'component_context.l');
+check_bundle('$inspect.trace', `'CreatedAt'`);
 
 if (failed) {
 	// eslint-disable-next-line no-console
-	console.error(bundle);
+	console.error('Full bundle at', path.resolve('scripts/_bundle.js'));
 	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 

From da2feafe6765d2278ff053f62e6603a60b06833e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Jun 2025 14:40:52 -0400
Subject: [PATCH 171/259] chore: silence some pesky logs (#16241)

---
 .../samples/inspect-state-unsafe-mutation/_config.js        | 6 +++++-
 .../legacy-runes-ambiguous-export-labeled/_config.js        | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
index 7e8fcd2d48..dcf3a8bc3d 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
@@ -5,5 +5,9 @@ export default test({
 	compileOptions: {
 		dev: true
 	},
-	error: 'state_unsafe_mutation'
+
+	error: 'state_unsafe_mutation',
+
+	// silence the logs
+	test({ logs }) {}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
index 904fea3f65..c4cff665d2 100644
--- a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
@@ -6,7 +6,7 @@ export default test({
 	compileOptions: {
 		runes: undefined
 	},
-	async test({ assert, target }) {
+	async test({ assert, target, logs }) {
 		const p = target.querySelector('p');
 		const btn = target.querySelector('button');
 		flushSync(() => {

From 213274a75ecc71dd86a31ba2dab4f594fc2cd265 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 26 Jun 2025 18:23:10 -0400
Subject: [PATCH 172/259] chore: reduce some select.value indirection (#16250)

---
 .../client/visitors/RegularElement.js         | 21 ++++++++-----------
 .../client/visitors/shared/utils.js           | 14 -------------
 2 files changed, 9 insertions(+), 26 deletions(-)

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 1aefff0db0..b0f285eb41 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
@@ -25,7 +25,6 @@ import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
 	build_template_chunk,
-	build_update_assignment,
 	get_expression_id,
 	memoize_expression
 } from './shared/utils.js';
@@ -657,17 +656,15 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 	}
 
 	if (has_state) {
-		const id = state.scope.generate(`${node_id.name}_value`);
-		build_update_assignment(
-			state,
-			id,
-			// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
-			// that means the value should be set to the empty string. To be able to do that when the value is
-			// initially undefined, we need to set a value that is guaranteed to be different.
-			element === 'option' ? b.object([]) : undefined,
-			value,
-			update
-		);
+		const id = b.id(state.scope.generate(`${node_id.name}_value`));
+
+		// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
+		// that means the value should be set to the empty string. To be able to do that when the value is
+		// initially undefined, we need to set a value that is guaranteed to be different.
+		const init = element === 'option' ? b.object([]) : undefined;
+
+		state.init.push(b.var(id, init));
+		state.update.push(b.if(b.binary('!==', id, b.assignment('=', id, value)), b.block([update])));
 	} else {
 		state.init.push(update);
 	}
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 c861a51b7d..0bd9bfb128 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
@@ -165,20 +165,6 @@ export function parse_directive_name(name) {
 	return expression;
 }
 
-/**
- * @param {ComponentClientTransformState} state
- * @param {string} id
- * @param {Expression | undefined} init
- * @param {Expression} value
- * @param {ExpressionStatement} update
- */
-export function build_update_assignment(state, id, init, value, update) {
-	state.init.push(b.var(id, init));
-	state.update.push(
-		b.if(b.binary('!==', b.id(id), b.assignment('=', b.id(id), value)), b.block([update]))
-	);
-}
-
 /**
  * Serializes `bind:this` for components and elements.
  * @param {Identifier | MemberExpression | SequenceExpression} expression

From 32481bece6018887bd6291b80a4133ebc0a601eb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 26 Jun 2025 19:59:30 -0400
Subject: [PATCH 173/259] chore: simplify `<select>` initialization (#16251)

* initialize option values before initing select values

* simplify init_select

* simplify

* tweak

* tidy up

* tweak

* on second thoughts just simplify it here
---
 .../client/visitors/RegularElement.js         | 46 ++++++++--------
 .../client/dom/elements/attributes.js         | 12 ++--
 .../client/dom/elements/bindings/select.js    | 55 +++++++------------
 3 files changed, 50 insertions(+), 63 deletions(-)

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 b0f285eb41..ae8680f594 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
@@ -22,12 +22,7 @@ import {
 	build_set_style
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import {
-	build_render_statement,
-	build_template_chunk,
-	get_expression_id,
-	memoize_expression
-} from './shared/utils.js';
+import { build_render_statement, build_template_chunk, get_expression_id } from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 
 /**
@@ -199,16 +194,16 @@ export function RegularElement(node, context) {
 
 	const node_id = context.state.node;
 
+	/** If true, needs `__value` for inputs */
+	const needs_special_value_handling =
+		node.name === 'option' ||
+		node.name === 'select' ||
+		bindings.has('group') ||
+		bindings.has('checked');
+
 	if (has_spread) {
 		build_attribute_effect(attributes, class_directives, style_directives, context, node, node_id);
 	} else {
-		/** If true, needs `__value` for inputs */
-		const needs_special_value_handling =
-			node.name === 'option' ||
-			node.name === 'select' ||
-			bindings.has('group') ||
-			bindings.has('checked');
-
 		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
 			if (is_event_attribute(attribute)) {
 				visit_event_attribute(attribute, context);
@@ -216,7 +211,6 @@ export function RegularElement(node, context) {
 			}
 
 			if (needs_special_value_handling && attribute.name === 'value') {
-				build_element_special_value_attribute(node.name, node_id, attribute, context);
 				continue;
 			}
 
@@ -391,6 +385,15 @@ export function RegularElement(node, context) {
 		context.state.update.push(b.stmt(b.assignment('=', dir, dir)));
 	}
 
+	if (!has_spread && needs_special_value_handling) {
+		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
+			if (attribute.name === 'value') {
+				build_element_special_value_attribute(node.name, node_id, attribute, context);
+				break;
+			}
+		}
+	}
+
 	context.state.template.pop_element();
 }
 
@@ -621,12 +624,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
-			? // if is a select with value we will also invoke `init_select` which need a reference before the template effect so we memoize separately
-				is_select_with_value
-				? memoize_expression(state, value)
-				: get_expression_id(state.expressions, value)
-			: value
+		metadata.has_call ? get_expression_id(state.expressions, value) : value
 	);
 
 	const evaluated = context.state.scope.evaluate(value);
@@ -651,10 +649,6 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 			: inner_assignment
 	);
 
-	if (is_select_with_value) {
-		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
-	}
-
 	if (has_state) {
 		const id = b.id(state.scope.generate(`${node_id.name}_value`));
 
@@ -668,4 +662,8 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 	} else {
 		state.init.push(update);
 	}
+
+	if (is_select_with_value) {
+		state.init.push(b.stmt(b.call('$.init_select', node_id)));
+	}
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 2d3d6a921d..5db685cf3e 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -20,7 +20,7 @@ import { clsx } from '../../../shared/attributes.js';
 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 } from '../../reactivity/effects.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';
 
@@ -513,10 +513,12 @@ export function attribute_effect(
 	});
 
 	if (is_select) {
-		init_select(
-			/** @type {HTMLSelectElement} */ (element),
-			() => /** @type {Record<string | symbol, any>} */ (prev).value
-		);
+		var select = /** @type {HTMLSelectElement} */ (element);
+
+		effect(() => {
+			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value);
+			init_select(select);
+		});
 	}
 
 	inited = true;
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index e3263c65af..5e89686d86 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -1,6 +1,5 @@
-import { effect } from '../../../reactivity/effects.js';
+import { effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
-import { untrack } from '../../../runtime.js';
 import { is } from '../../../proxy.js';
 import { is_array } from '../../../../shared/utils.js';
 import * as w from '../../../warnings.js';
@@ -51,40 +50,29 @@ export function select_option(select, value, mounting) {
  * current selection to the dom when it changes. Such
  * changes could for example occur when options are
  * inside an `#each` block.
- * @template V
  * @param {HTMLSelectElement} select
- * @param {() => V} [get_value]
  */
-export function init_select(select, get_value) {
-	let mounting = true;
-	effect(() => {
-		if (get_value) {
-			select_option(select, untrack(get_value), mounting);
-		}
-		mounting = false;
+export function init_select(select) {
+	var observer = new MutationObserver(() => {
+		// @ts-ignore
+		select_option(select, select.__value);
+		// Deliberately don't update the potential binding value,
+		// the model should be preserved unless explicitly changed
+	});
+
+	observer.observe(select, {
+		// Listen to option element changes
+		childList: true,
+		subtree: true, // because of <optgroup>
+		// Listen to option element value attribute changes
+		// (doesn't get notified of select value changes,
+		// because that property is not reflected as an attribute)
+		attributes: true,
+		attributeFilter: ['value']
+	});
 
-		var observer = new MutationObserver(() => {
-			// @ts-ignore
-			var value = select.__value;
-			select_option(select, value);
-			// Deliberately don't update the potential binding value,
-			// the model should be preserved unless explicitly changed
-		});
-
-		observer.observe(select, {
-			// Listen to option element changes
-			childList: true,
-			subtree: true, // because of <optgroup>
-			// Listen to option element value attribute changes
-			// (doesn't get notified of select value changes,
-			// because that property is not reflected as an attribute)
-			attributes: true,
-			attributeFilter: ['value']
-		});
-
-		return () => {
-			observer.disconnect();
-		};
+	teardown(() => {
+		observer.disconnect();
 	});
 }
 
@@ -136,7 +124,6 @@ export function bind_select_value(select, get, set = get) {
 		mounting = false;
 	});
 
-	// don't pass get_value, we already initialize it in the effect above
 	init_select(select);
 }
 

From 7019894fd9231cefcc0b4bbd13b6a2d8bb90ccb3 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 28 Jun 2025 01:37:23 +0200
Subject: [PATCH 174/259] fix: ensure unowned deriveds can add themselves as
 reactions while connected (#16249)

an unowned derived should still add itself as a reaction while it is properly connected, which means it can be cleaned up correctly - and this connection is indicated by it having reactions.

Fixes #15829 and potentially #15853
---
 .changeset/little-kings-smoke.md              |  5 +++
 .../svelte/src/internal/client/runtime.js     |  7 +++-
 packages/svelte/tests/signals/test.ts         | 39 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/little-kings-smoke.md

diff --git a/.changeset/little-kings-smoke.md b/.changeset/little-kings-smoke.md
new file mode 100644
index 0000000000..1e7f82352a
--- /dev/null
+++ b/.changeset/little-kings-smoke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure unowned deriveds can add themselves as reactions while connected
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 56bc157f33..d057bfdf0d 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -294,7 +294,12 @@ export function update_reaction(reaction) {
 				reaction.deps = deps = new_deps;
 			}
 
-			if (!skip_reaction) {
+			if (
+				!skip_reaction ||
+				// Deriveds that already have reactions can cleanup, so we still add them as reactions
+				((flags & DERIVED) !== 0 &&
+					/** @type {import('#client').Derived} */ (reaction).reactions !== null)
+			) {
 				for (i = skipped_deps; i < deps.length; i++) {
 					(deps[i].reactions ??= []).push(reaction);
 				}
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 78d7919e0f..719c936df0 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -112,6 +112,45 @@ describe('signals', () => {
 		};
 	});
 
+	test('unowned deriveds are not added as reactions but trigger effects', () => {
+		var obj = state<any>(undefined);
+
+		class C1 {
+			#v = state(0);
+			get v() {
+				return $.get(this.#v);
+			}
+			set v(v: number) {
+				set(this.#v, v);
+			}
+		}
+
+		return () => {
+			let d = derived(() => $.get(obj)?.v || '-');
+
+			const log: number[] = [];
+			assert.equal($.get(d), '-');
+
+			let destroy = effect_root(() => {
+				render_effect(() => {
+					log.push($.get(d));
+				});
+			});
+
+			set(obj, new C1());
+			flushSync();
+			assert.equal($.get(d), '-');
+			$.get(obj).v = 1;
+			flushSync();
+			assert.equal($.get(d), 1);
+			assert.deepEqual(log, ['-', 1]);
+			destroy();
+			// ensure we're not leaking reactions
+			assert.equal(obj.reactions, null);
+			assert.equal(d.reactions, null);
+		};
+	});
+
 	test('derived from state', () => {
 		const log: number[] = [];
 

From cf9f8c9c6b59544e0106634606d09a5e1a93375b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 28 Jun 2025 10:35:51 +0200
Subject: [PATCH 175/259] Version Packages (#16257)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/little-kings-smoke.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/little-kings-smoke.md

diff --git a/.changeset/little-kings-smoke.md b/.changeset/little-kings-smoke.md
deleted file mode 100644
index 1e7f82352a..0000000000
--- a/.changeset/little-kings-smoke.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure unowned deriveds can add themselves as reactions while connected
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e254be754f..ef64091ca3 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.34.9
+
+### Patch Changes
+
+- fix: ensure unowned deriveds can add themselves as reactions while connected ([#16249](https://github.com/sveltejs/svelte/pull/16249))
+
 ## 5.34.8
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 17a3e980c4..1d26663143 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.34.8",
+  "version": "5.34.9",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ec0126b17d..1c0aed6e87 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.34.8';
+export const VERSION = '5.34.9';
 export const PUBLIC_VERSION = '5';

From e896c55b6cc1ec9064cd32ec097ea31d717e29e4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 30 Jun 2025 08:59:35 -0400
Subject: [PATCH 176/259] chore: bump esrap (#16240)

* chore: bump esrap

* regenerate
---
 packages/svelte/package.json                  |   4 +-
 .../svelte/scripts/process-messages/index.js  | 318 +++++++++---------
 packages/svelte/src/compiler/errors.js        |   6 +-
 packages/svelte/src/compiler/index.js         |   3 +-
 packages/svelte/src/compiler/legacy.js        |   1 +
 .../src/compiler/phases/1-parse/acorn.js      |  61 +++-
 .../src/compiler/phases/1-parse/index.js      |   2 +
 .../compiler/phases/1-parse/read/context.js   |  11 +-
 .../phases/1-parse/read/expression.js         |  24 +-
 .../compiler/phases/1-parse/read/script.js    |   2 +-
 .../src/compiler/phases/1-parse/state/tag.js  |   7 +-
 .../src/compiler/phases/2-analyze/index.js    |  14 +-
 .../3-transform/client/transform-client.js    |   3 +
 .../src/compiler/phases/3-transform/index.js  |  22 +-
 .../3-transform/server/transform-server.js    |   3 +
 .../svelte/src/compiler/phases/types.d.ts     |   2 +
 .../svelte/src/compiler/types/template.d.ts   |  15 +-
 .../svelte/src/compiler/utils/mapped_code.js  |   9 +-
 packages/svelte/src/compiler/warnings.js      |  21 +-
 packages/svelte/src/internal/client/errors.js |  24 +-
 .../svelte/src/internal/client/warnings.js    |  24 +-
 packages/svelte/src/internal/server/errors.js |   3 +
 packages/svelte/src/internal/shared/errors.js |   6 +
 .../svelte/src/internal/shared/warnings.js    |  10 +-
 packages/svelte/tests/parser-modern/test.ts   |   2 +
 .../_expected/client/index.svelte.js          |   1 +
 .../_expected/server/index.svelte.js          |   1 +
 .../_expected/client/main.svelte.js           |   1 +
 .../_expected/server/main.svelte.js           |   1 +
 .../_expected/client/index.svelte.js          |   2 +
 .../_expected/server/index.svelte.js          |   2 +
 .../_expected/client/index.svelte.js          |   1 +
 .../_expected/client/index.svelte.js          |   4 +-
 .../_expected/server/index.svelte.js          |   4 +-
 packages/svelte/types/index.d.ts              |  15 +-
 pnpm-lock.yaml                                |  10 +-
 36 files changed, 398 insertions(+), 241 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 1d26663143..2d88d2a051 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -164,14 +164,14 @@
   "dependencies": {
     "@ampproject/remapping": "^2.3.0",
     "@jridgewell/sourcemap-codec": "^1.5.0",
+    "@sveltejs/acorn-typescript": "^1.0.5",
     "@types/estree": "^1.0.5",
     "acorn": "^8.12.1",
-    "@sveltejs/acorn-typescript": "^1.0.5",
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.1",
-    "esrap": "^1.4.8",
+    "esrap": "^2.0.0",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js
index 81c59271de..e705a1c921 100644
--- a/packages/svelte/scripts/process-messages/index.js
+++ b/packages/svelte/scripts/process-messages/index.js
@@ -1,9 +1,14 @@
+/** @import { Node } from 'esrap/languages/ts' */
+/** @import * as ESTree from 'estree' */
+/** @import { AST } from 'svelte/compiler' */
+
 // @ts-check
 import process from 'node:process';
 import fs from 'node:fs';
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import * as esrap from 'esrap';
+import ts from 'esrap/languages/ts';
 
 const DIR = '../../documentation/docs/98-reference/.generated';
 
@@ -97,79 +102,49 @@ function run() {
 			.readFileSync(new URL(`./templates/${name}.js`, import.meta.url), 'utf-8')
 			.replace(/\r\n/g, '\n');
 
-		/**
-		 * @type {Array<{
-		 * 	type: string;
-		 * 	value: string;
-		 * 	start: number;
-		 * 	end: number
-		 * }>}
-		 */
+		/** @type {AST.JSComment[]} */
 		const comments = [];
 
-		let ast = acorn.parse(source, {
-			ecmaVersion: 'latest',
-			sourceType: 'module',
-			onComment: (block, value, start, end) => {
-				if (block && /\n/.test(value)) {
-					let a = start;
-					while (a > 0 && source[a - 1] !== '\n') a -= 1;
-
-					let b = a;
-					while (/[ \t]/.test(source[b])) b += 1;
-
-					const indentation = source.slice(a, b);
-					value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
-				}
+		let ast = /** @type {ESTree.Node} */ (
+			/** @type {unknown} */ (
+				acorn.parse(source, {
+					ecmaVersion: 'latest',
+					sourceType: 'module',
+					locations: true,
+					onComment: comments
+				})
+			)
+		);
 
-				comments.push({ type: block ? 'Block' : 'Line', value, start, end });
+		comments.forEach((comment) => {
+			if (comment.type === 'Block') {
+				comment.value = comment.value.replace(/^\t+/gm, '');
 			}
 		});
 
 		ast = walk(ast, null, {
-			_(node, { next }) {
-				let comment;
-
-				while (comments[0] && comments[0].start < node.start) {
-					comment = comments.shift();
-					// @ts-expect-error
-					(node.leadingComments ||= []).push(comment);
-				}
-
-				next();
-
-				if (comments[0]) {
-					const slice = source.slice(node.end, comments[0].start);
-
-					if (/^[,) \t]*$/.test(slice)) {
-						// @ts-expect-error
-						node.trailingComments = [comments.shift()];
-					}
-				}
-			},
-			// @ts-expect-error
 			Identifier(node, context) {
 				if (node.name === 'CODES') {
-					return {
+					/** @type {ESTree.ArrayExpression} */
+					const array = {
 						type: 'ArrayExpression',
 						elements: Object.keys(messages[name]).map((code) => ({
 							type: 'Literal',
 							value: code
 						}))
 					};
+
+					return array;
 				}
 			}
 		});
 
-		if (comments.length > 0) {
-			// @ts-expect-error
-			(ast.trailingComments ||= []).push(...comments);
-		}
+		const body = /** @type {ESTree.Program} */ (ast).body;
 
 		const category = messages[name];
 
 		// find the `export function CODE` node
-		const index = ast.body.findIndex((node) => {
+		const index = body.findIndex((node) => {
 			if (
 				node.type === 'ExportNamedDeclaration' &&
 				node.declaration &&
@@ -181,8 +156,19 @@ function run() {
 
 		if (index === -1) throw new Error(`missing export function CODE in ${name}.js`);
 
-		const template_node = ast.body[index];
-		ast.body.splice(index, 1);
+		const template_node = body[index];
+		body.splice(index, 1);
+
+		const jsdoc = /** @type {AST.JSComment} */ (
+			comments.findLast((comment) => comment.start < /** @type {number} */ (template_node.start))
+		);
+
+		const printed = esrap.print(
+			/** @type {Node} */ (ast),
+			ts({
+				comments: comments.filter((comment) => comment !== jsdoc)
+			})
+		);
 
 		for (const code in category) {
 			const { messages } = category[code];
@@ -203,7 +189,7 @@ function run() {
 				};
 			});
 
-			/** @type {import('estree').Expression} */
+			/** @type {ESTree.Expression} */
 			let message = { type: 'Literal', value: '' };
 			let prev_vars;
 
@@ -221,10 +207,10 @@ function run() {
 
 				const parts = text.split(/(%\w+%)/);
 
-				/** @type {import('estree').Expression[]} */
+				/** @type {ESTree.Expression[]} */
 				const expressions = [];
 
-				/** @type {import('estree').TemplateElement[]} */
+				/** @type {ESTree.TemplateElement[]} */
 				const quasis = [];
 
 				for (let i = 0; i < parts.length; i += 1) {
@@ -244,7 +230,7 @@ function run() {
 					}
 				}
 
-				/** @type {import('estree').Expression} */
+				/** @type {ESTree.Expression} */
 				const expression = {
 					type: 'TemplateLiteral',
 					expressions,
@@ -272,138 +258,140 @@ function run() {
 				prev_vars = vars;
 			}
 
-			const clone = walk(/** @type {import('estree').Node} */ (template_node), null, {
-				// @ts-expect-error Block is a block comment, which is not recognised
-				Block(node, context) {
-					if (!node.value.includes('PARAMETER')) return;
-
-					const value = /** @type {string} */ (node.value)
-						.split('\n')
-						.map((line) => {
-							if (line === ' * MESSAGE') {
-								return messages[messages.length - 1]
-									.split('\n')
-									.map((line) => ` * ${line}`)
-									.join('\n');
-							}
+			const clone = /** @type {ESTree.Statement} */ (
+				walk(/** @type {ESTree.Node} */ (template_node), null, {
+					FunctionDeclaration(node, context) {
+						if (node.id.name !== 'CODE') return;
 
-							if (line.includes('PARAMETER')) {
-								return vars
-									.map((name, i) => {
-										const optional = i >= group[0].vars.length;
+						const params = [];
 
-										return optional
-											? ` * @param {string | undefined | null} [${name}]`
-											: ` * @param {string} ${name}`;
-									})
-									.join('\n');
+						for (const param of node.params) {
+							if (param.type === 'Identifier' && param.name === 'PARAMETER') {
+								params.push(...vars.map((name) => ({ type: 'Identifier', name })));
+							} else {
+								params.push(param);
 							}
+						}
 
-							return line;
-						})
-						.filter((x) => x !== '')
-						.join('\n');
+						return /** @type {ESTree.FunctionDeclaration} */ ({
+							.../** @type {ESTree.FunctionDeclaration} */ (context.next()),
+							params,
+							id: {
+								...node.id,
+								name: code
+							}
+						});
+					},
+					TemplateLiteral(node, context) {
+						/** @type {ESTree.TemplateElement} */
+						let quasi = {
+							type: 'TemplateElement',
+							value: {
+								...node.quasis[0].value
+							},
+							tail: node.quasis[0].tail
+						};
 
-					if (value !== node.value) {
-						return { ...node, value };
-					}
-				},
-				FunctionDeclaration(node, context) {
-					if (node.id.name !== 'CODE') return;
+						/** @type {ESTree.TemplateLiteral} */
+						let out = {
+							type: 'TemplateLiteral',
+							quasis: [quasi],
+							expressions: []
+						};
 
-					const params = [];
+						for (let i = 0; i < node.expressions.length; i += 1) {
+							const q = structuredClone(node.quasis[i + 1]);
+							const e = node.expressions[i];
 
-					for (const param of node.params) {
-						if (param.type === 'Identifier' && param.name === 'PARAMETER') {
-							params.push(...vars.map((name) => ({ type: 'Identifier', name })));
-						} else {
-							params.push(param);
-						}
-					}
+							if (e.type === 'Literal' && e.value === 'CODE') {
+								quasi.value.raw += code + q.value.raw;
+								continue;
+							}
 
-					return /** @type {import('estree').FunctionDeclaration} */ ({
-						.../** @type {import('estree').FunctionDeclaration} */ (context.next()),
-						params,
-						id: {
-							...node.id,
-							name: code
-						}
-					});
-				},
-				TemplateLiteral(node, context) {
-					/** @type {import('estree').TemplateElement} */
-					let quasi = {
-						type: 'TemplateElement',
-						value: {
-							...node.quasis[0].value
-						},
-						tail: node.quasis[0].tail
-					};
+							if (e.type === 'Identifier' && e.name === 'MESSAGE') {
+								if (message.type === 'Literal') {
+									const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
+									quasi.value.raw += str + q.value.raw;
+									continue;
+								}
+
+								if (message.type === 'TemplateLiteral') {
+									const m = structuredClone(message);
+									quasi.value.raw += m.quasis[0].value.raw;
+									out.quasis.push(...m.quasis.slice(1));
+									out.expressions.push(...m.expressions);
+									quasi = m.quasis[m.quasis.length - 1];
+									quasi.value.raw += q.value.raw;
+									continue;
+								}
+							}
 
-					/** @type {import('estree').TemplateLiteral} */
-					let out = {
-						type: 'TemplateLiteral',
-						quasis: [quasi],
-						expressions: []
-					};
+							out.quasis.push((quasi = q));
+							out.expressions.push(/** @type {ESTree.Expression} */ (context.visit(e)));
+						}
 
-					for (let i = 0; i < node.expressions.length; i += 1) {
-						const q = structuredClone(node.quasis[i + 1]);
-						const e = node.expressions[i];
+						return out;
+					},
+					Literal(node) {
+						if (node.value === 'CODE') {
+							return {
+								type: 'Literal',
+								value: code
+							};
+						}
+					},
+					Identifier(node) {
+						if (node.name !== 'MESSAGE') return;
+						return message;
+					}
+				})
+			);
 
-						if (e.type === 'Literal' && e.value === 'CODE') {
-							quasi.value.raw += code + q.value.raw;
-							continue;
+			const jsdoc_clone = {
+				...jsdoc,
+				value: /** @type {string} */ (jsdoc.value)
+					.split('\n')
+					.map((line) => {
+						if (line === ' * MESSAGE') {
+							return messages[messages.length - 1]
+								.split('\n')
+								.map((line) => ` * ${line}`)
+								.join('\n');
 						}
 
-						if (e.type === 'Identifier' && e.name === 'MESSAGE') {
-							if (message.type === 'Literal') {
-								const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
-								quasi.value.raw += str + q.value.raw;
-								continue;
-							}
+						if (line.includes('PARAMETER')) {
+							return vars
+								.map((name, i) => {
+									const optional = i >= group[0].vars.length;
 
-							if (message.type === 'TemplateLiteral') {
-								const m = structuredClone(message);
-								quasi.value.raw += m.quasis[0].value.raw;
-								out.quasis.push(...m.quasis.slice(1));
-								out.expressions.push(...m.expressions);
-								quasi = m.quasis[m.quasis.length - 1];
-								quasi.value.raw += q.value.raw;
-								continue;
-							}
+									return optional
+										? ` * @param {string | undefined | null} [${name}]`
+										: ` * @param {string} ${name}`;
+								})
+								.join('\n');
 						}
 
-						out.quasis.push((quasi = q));
-						out.expressions.push(/** @type {import('estree').Expression} */ (context.visit(e)));
-					}
+						return line;
+					})
+					.filter((x) => x !== '')
+					.join('\n')
+			};
 
-					return out;
-				},
-				Literal(node) {
-					if (node.value === 'CODE') {
-						return {
-							type: 'Literal',
-							value: code
-						};
-					}
-				},
-				Identifier(node) {
-					if (node.name !== 'MESSAGE') return;
-					return message;
-				}
-			});
+			const block = esrap.print(
+				// @ts-expect-error some bullshit
+				/** @type {ESTree.Program} */ ({ ...ast, body: [clone] }),
+				ts({ comments: [jsdoc_clone] })
+			).code;
 
-			// @ts-expect-error
-			ast.body.push(clone);
-		}
+			printed.code += `\n\n${block}`;
 
-		const module = esrap.print(ast);
+			body.push(clone);
+		}
 
 		fs.writeFileSync(
 			dest,
 			`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
-				module.code,
+				printed.code,
 			'utf-8'
 		);
 	}
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 25e72340c6..e9fa33b054 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -15,10 +15,12 @@ class InternalCompileError extends Error {
 	constructor(code, message, position) {
 		super(message);
 		this.stack = ''; // avoid unnecessary noise; don't set it as a class property or it becomes enumerable
+
 		// We want to extend from Error so that various bundler plugins properly handle it.
 		// But we also want to share the same object shape with that of warnings, therefore
 		// we create an instance of the shared class an copy over its properties.
 		this.#diagnostic = new CompileDiagnostic(code, message, position);
+
 		Object.assign(this, this.#diagnostic);
 		this.name = 'CompileError';
 	}
@@ -816,7 +818,9 @@ export function bind_invalid_expression(node) {
  * @returns {never}
  */
 export function bind_invalid_name(node, name, explanation) {
-	e(node, 'bind_invalid_name', `${explanation ? `\`bind:${name}\` is not a valid binding. ${explanation}` : `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
+	e(node, 'bind_invalid_name', `${explanation
+		? `\`bind:${name}\` is not a valid binding. ${explanation}`
+		: `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 756a88a824..429c6b4a6f 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -3,7 +3,6 @@
 /** @import { AST } from './public.js' */
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { convert } from './legacy.js';
-import { parse as parse_acorn } from './phases/1-parse/acorn.js';
 import { parse as _parse } from './phases/1-parse/index.js';
 import { remove_typescript_nodes } from './phases/1-parse/remove_typescript_nodes.js';
 import { analyze_component, analyze_module } from './phases/2-analyze/index.js';
@@ -69,7 +68,7 @@ export function compileModule(source, options) {
 	const validated = validate_module_options(options, '');
 	state.reset(source, validated);
 
-	const analysis = analyze_module(parse_acorn(source, false), validated);
+	const analysis = analyze_module(source, validated);
 	return transform_module(analysis, source, validated);
 }
 
diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
index f6b7e4b054..85345bca4a 100644
--- a/packages/svelte/src/compiler/legacy.js
+++ b/packages/svelte/src/compiler/legacy.js
@@ -451,6 +451,7 @@ export function convert(source, ast) {
 			SpreadAttribute(node) {
 				return { ...node, type: 'Spread' };
 			},
+			// @ts-ignore
 			StyleSheet(node, context) {
 				return {
 					...node,
diff --git a/packages/svelte/src/compiler/phases/1-parse/acorn.js b/packages/svelte/src/compiler/phases/1-parse/acorn.js
index 26a09abb66..77ce4a461c 100644
--- a/packages/svelte/src/compiler/phases/1-parse/acorn.js
+++ b/packages/svelte/src/compiler/phases/1-parse/acorn.js
@@ -1,18 +1,32 @@
 /** @import { Comment, Program } from 'estree' */
+/** @import { AST } from '#compiler' */
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 
 const ParserWithTS = acorn.Parser.extend(tsPlugin());
 
+/**
+ * @typedef {Comment & {
+ *   start: number;
+ *   end: number;
+ * }} CommentWithLocation
+ */
+
 /**
  * @param {string} source
+ * @param {AST.JSComment[]} comments
  * @param {boolean} typescript
  * @param {boolean} [is_script]
  */
-export function parse(source, typescript, is_script) {
+export function parse(source, comments, typescript, is_script) {
 	const parser = typescript ? ParserWithTS : acorn.Parser;
-	const { onComment, add_comments } = get_comment_handlers(source);
+
+	const { onComment, add_comments } = get_comment_handlers(
+		source,
+		/** @type {CommentWithLocation[]} */ (comments)
+	);
+
 	// @ts-ignore
 	const parse_statement = parser.prototype.parseStatement;
 
@@ -53,13 +67,19 @@ export function parse(source, typescript, is_script) {
 
 /**
  * @param {string} source
+ * @param {Comment[]} comments
  * @param {boolean} typescript
  * @param {number} index
  * @returns {acorn.Expression & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }}
  */
-export function parse_expression_at(source, typescript, index) {
+export function parse_expression_at(source, comments, typescript, index) {
 	const parser = typescript ? ParserWithTS : acorn.Parser;
-	const { onComment, add_comments } = get_comment_handlers(source);
+
+	const { onComment, add_comments } = get_comment_handlers(
+		source,
+		/** @type {CommentWithLocation[]} */ (comments),
+		index
+	);
 
 	const ast = parser.parseExpressionAt(source, index, {
 		onComment,
@@ -78,26 +98,20 @@ export function parse_expression_at(source, typescript, index) {
  * to add them after the fact. They are needed in order to support `svelte-ignore` comments
  * in JS code and so that `prettier-plugin-svelte` doesn't remove all comments when formatting.
  * @param {string} source
+ * @param {CommentWithLocation[]} comments
+ * @param {number} index
  */
-function get_comment_handlers(source) {
-	/**
-	 * @typedef {Comment & {
-	 *   start: number;
-	 *   end: number;
-	 * }} CommentWithLocation
-	 */
-
-	/** @type {CommentWithLocation[]} */
-	const comments = [];
-
+function get_comment_handlers(source, comments, index = 0) {
 	return {
 		/**
 		 * @param {boolean} block
 		 * @param {string} value
 		 * @param {number} start
 		 * @param {number} end
+		 * @param {import('acorn').Position} [start_loc]
+		 * @param {import('acorn').Position} [end_loc]
 		 */
-		onComment: (block, value, start, end) => {
+		onComment: (block, value, start, end, start_loc, end_loc) => {
 			if (block && /\n/.test(value)) {
 				let a = start;
 				while (a > 0 && source[a - 1] !== '\n') a -= 1;
@@ -109,13 +123,26 @@ function get_comment_handlers(source) {
 				value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
 			}
 
-			comments.push({ type: block ? 'Block' : 'Line', value, start, end });
+			comments.push({
+				type: block ? 'Block' : 'Line',
+				value,
+				start,
+				end,
+				loc: {
+					start: /** @type {import('acorn').Position} */ (start_loc),
+					end: /** @type {import('acorn').Position} */ (end_loc)
+				}
+			});
 		},
 
 		/** @param {acorn.Node & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }} ast */
 		add_comments(ast) {
 			if (comments.length === 0) return;
 
+			comments = comments
+				.filter((comment) => comment.start >= index)
+				.map(({ type, value, start, end }) => ({ type, value, start, end }));
+
 			walk(ast, null, {
 				_(node, { next, path }) {
 					let comment;
diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index 6cc5b58aa6..b8ae8199eb 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -1,4 +1,5 @@
 /** @import { AST } from '#compiler' */
+/** @import { Comment } from 'estree' */
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
@@ -87,6 +88,7 @@ export class Parser {
 			type: 'Root',
 			fragment: create_fragment(),
 			options: null,
+			comments: [],
 			metadata: {
 				ts: this.ts
 			}
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/context.js b/packages/svelte/src/compiler/phases/1-parse/read/context.js
index b118901830..282288e2a2 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/context.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/context.js
@@ -59,7 +59,12 @@ export default function read_pattern(parser) {
 			space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
 
 		const expression = /** @type {any} */ (
-			parse_expression_at(`${space_with_newline}(${pattern_string} = 1)`, parser.ts, start - 1)
+			parse_expression_at(
+				`${space_with_newline}(${pattern_string} = 1)`,
+				parser.root.comments,
+				parser.ts,
+				start - 1
+			)
 		).left;
 
 		expression.typeAnnotation = read_type_annotation(parser);
@@ -96,13 +101,13 @@ function read_type_annotation(parser) {
 		// parameters as part of a sequence expression instead, and will then error on optional
 		// parameters (`?:`). Therefore replace that sequence with something that will not error.
 		parser.template.slice(parser.index).replace(/\?\s*:/g, ':');
-	let expression = parse_expression_at(template, parser.ts, a);
+	let expression = parse_expression_at(template, parser.root.comments, parser.ts, a);
 
 	// `foo: bar = baz` gets mangled — fix it
 	if (expression.type === 'AssignmentExpression') {
 		let b = expression.right.start;
 		while (template[b] !== '=') b -= 1;
-		expression = parse_expression_at(template.slice(0, b), parser.ts, a);
+		expression = parse_expression_at(template.slice(0, b), parser.root.comments, parser.ts, a);
 	}
 
 	// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/expression.js b/packages/svelte/src/compiler/phases/1-parse/read/expression.js
index a596cdf572..5d21f85792 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/expression.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/expression.js
@@ -34,12 +34,24 @@ export function get_loose_identifier(parser, opening_token) {
  */
 export default function read_expression(parser, opening_token, disallow_loose) {
 	try {
-		const node = parse_expression_at(parser.template, parser.ts, parser.index);
+		let comment_index = parser.root.comments.length;
+
+		const node = parse_expression_at(
+			parser.template,
+			parser.root.comments,
+			parser.ts,
+			parser.index
+		);
 
 		let num_parens = 0;
 
-		if (node.leadingComments !== undefined && node.leadingComments.length > 0) {
-			parser.index = node.leadingComments.at(-1).end;
+		let i = parser.root.comments.length;
+		while (i-- > comment_index) {
+			const comment = parser.root.comments[i];
+			if (comment.end < node.start) {
+				parser.index = comment.end;
+				break;
+			}
 		}
 
 		for (let i = parser.index; i < /** @type {number} */ (node.start); i += 1) {
@@ -47,9 +59,9 @@ export default function read_expression(parser, opening_token, disallow_loose) {
 		}
 
 		let index = /** @type {number} */ (node.end);
-		if (node.trailingComments !== undefined && node.trailingComments.length > 0) {
-			index = node.trailingComments.at(-1).end;
-		}
+
+		const last_comment = parser.root.comments.at(-1);
+		if (last_comment && last_comment.end > index) index = last_comment.end;
 
 		while (num_parens > 0) {
 			const char = parser.template[index];
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 6290127811..9ce449f200 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -34,7 +34,7 @@ export function read_script(parser, start, attributes) {
 	let ast;
 
 	try {
-		ast = acorn.parse(source, parser.ts, true);
+		ast = acorn.parse(source, parser.root.comments, parser.ts, true);
 	} catch (err) {
 		parser.acorn_error(err);
 	}
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 5d77d6a8f4..ba091ef7ec 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -398,7 +398,12 @@ function open(parser) {
 
 		let function_expression = matched
 			? /** @type {ArrowFunctionExpression} */ (
-					parse_expression_at(prelude + `${params} => {}`, parser.ts, params_start)
+					parse_expression_at(
+						prelude + `${params} => {}`,
+						parser.root.comments,
+						parser.ts,
+						params_start
+					)
 				)
 			: { params: [] };
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 80adc10c1a..be1f1ee5bb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,8 +1,9 @@
-/** @import { Expression, Node, Program } from 'estree' */
+/** @import { Comment, 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' */
 import { walk } from 'zimmerframe';
+import { parse } from '../1-parse/acorn.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { extract_identifiers } from '../../utils/ast.js';
@@ -231,11 +232,16 @@ function get_component_name(filename) {
 const RESERVED = ['$$props', '$$restProps', '$$slots'];
 
 /**
- * @param {Program} ast
+ * @param {string} source
  * @param {ValidatedModuleCompileOptions} options
  * @returns {Analysis}
  */
-export function analyze_module(ast, options) {
+export function analyze_module(source, options) {
+	/** @type {AST.JSComment[]} */
+	const comments = [];
+
+	const ast = parse(source, comments, false, false);
+
 	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
 
 	for (const [name, references] of scope.references) {
@@ -259,6 +265,7 @@ export function analyze_module(ast, options) {
 		runes: true,
 		immutable: true,
 		tracing: false,
+		comments,
 		classes: new Map()
 	};
 
@@ -429,6 +436,7 @@ export function analyze_component(root, source, options) {
 		module,
 		instance,
 		template,
+		comments: root.comments,
 		elements: [],
 		runes,
 		// if we are not in runes mode but we have no reserved references ($$props, $$restProps)
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 e2e006c14b..e85a35cf8e 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
@@ -362,6 +362,9 @@ export function client_component(analysis, options) {
 		.../** @type {ESTree.Statement[]} */ (template.body)
 	]);
 
+	// trick esrap into including comments
+	component_block.loc = instance.loc;
+
 	if (!analysis.runes) {
 		// Bind static exports to props so that people can access them with bind:x
 		for (const { name, alias } of analysis.exports) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/index.js b/packages/svelte/src/compiler/phases/3-transform/index.js
index f96fd64ec7..33665097ab 100644
--- a/packages/svelte/src/compiler/phases/3-transform/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/index.js
@@ -1,6 +1,8 @@
+/** @import { Node } from 'esrap/languages/ts' */
 /** @import { ValidatedCompileOptions, CompileResult, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { ComponentAnalysis, Analysis } from '../types' */
 import { print } from 'esrap';
+import ts from 'esrap/languages/ts';
 import { VERSION } from '../../../version.js';
 import { server_component, server_module } from './server/transform-server.js';
 import { client_component, client_module } from './client/transform-client.js';
@@ -34,7 +36,7 @@ export function transform_component(analysis, source, options) {
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
 
-	const js = print(program, {
+	const js = print(/** @type {Node} */ (program), ts({ comments: analysis.comments }), {
 		// include source content; makes it easier/more robust looking up the source map code
 		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
 		sourceMapContent: source,
@@ -93,13 +95,19 @@ export function transform_module(analysis, source, options) {
 		];
 	}
 
+	const js = print(/** @type {Node} */ (program), ts({ comments: analysis.comments }), {
+		// include source content; makes it easier/more robust looking up the source map code
+		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
+		sourceMapContent: source,
+		sourceMapSource: get_source_name(options.filename, undefined, 'input.svelte.js')
+	});
+
+	// prepend comment
+	js.code = `/* ${basename} generated by Svelte v${VERSION} */\n${js.code}`;
+	js.map.mappings = ';' + js.map.mappings;
+
 	return {
-		js: print(program, {
-			// include source content; makes it easier/more robust looking up the source map code
-			// (else esrap does return null for source and sourceMapContent which may trip up tooling)
-			sourceMapContent: source,
-			sourceMapSource: get_source_name(options.filename, undefined, 'input.svelte.js')
-		}),
+		js,
 		css: null,
 		metadata: {
 			runes: true
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 7a3d6bef6c..86346b864c 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
@@ -242,6 +242,9 @@ export function server_component(analysis, options) {
 		.../** @type {Statement[]} */ (template.body)
 	]);
 
+	// trick esrap into including comments
+	component_block.loc = instance.loc;
+
 	if (analysis.props_id) {
 		// need to be placed on first line of the component for hydration
 		component_block.body.unshift(
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 8fa4bff619..661f363991 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -2,6 +2,7 @@ import type { AST, Binding, StateField } from '#compiler';
 import type {
 	AssignmentExpression,
 	ClassBody,
+	Comment,
 	Identifier,
 	LabeledStatement,
 	Node,
@@ -37,6 +38,7 @@ export interface Analysis {
 	runes: boolean;
 	immutable: boolean;
 	tracing: boolean;
+	comments: AST.JSComment[];
 
 	classes: Map<ClassBody, Map<string, StateField>>;
 
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 2a7ec7b5c6..c9841e9d4e 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -72,6 +72,8 @@ export namespace AST {
 		instance: Script | null;
 		/** The parsed `<script module>` element, if exists */
 		module: Script | null;
+		/** Comments found in <script> and {expressions} */
+		comments: JSComment[];
 		/** @internal */
 		metadata: {
 			/** Whether the component was parsed with typescript */
@@ -537,6 +539,17 @@ export namespace AST {
 		attributes: Attribute[];
 	}
 
+	export interface JSComment {
+		type: 'Line' | 'Block';
+		value: string;
+		start: number;
+		end: number;
+		loc: {
+			start: { line: number; column: number };
+			end: { line: number; column: number };
+		};
+	}
+
 	export type AttributeLike = Attribute | SpreadAttribute | Directive;
 
 	export type Directive =
@@ -593,7 +606,7 @@ export namespace AST {
 		| AST.Comment
 		| Block;
 
-	export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node;
+	export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;
 
 	export type { _CSS as CSS };
 }
diff --git a/packages/svelte/src/compiler/utils/mapped_code.js b/packages/svelte/src/compiler/utils/mapped_code.js
index 089078af7f..f23e3be245 100644
--- a/packages/svelte/src/compiler/utils/mapped_code.js
+++ b/packages/svelte/src/compiler/utils/mapped_code.js
@@ -398,10 +398,13 @@ export function merge_with_preprocessor_map(result, options, source_name) {
 		// map may contain a different file name. Patch our map beforehand to align sources so merging
 		// with the preprocessor map works correctly.
 		result.map.sources = [file_basename];
-		result.map = apply_preprocessor_sourcemap(
-			file_basename,
+		Object.assign(
 			result.map,
-			/** @type {any} */ (options.sourcemap)
+			apply_preprocessor_sourcemap(
+				file_basename,
+				result.map,
+				/** @type {any} */ (options.sourcemap)
+			)
 		);
 		// After applying the preprocessor map, we need to do the inverse and make the sources
 		// relative to the input file again in case the output code is in a different directory.
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index 1226190891..8c03e12e71 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -1,12 +1,6 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
-import {
-	warnings,
-	ignore_stack,
-	ignore_map,
-	warning_filter
-} from './state.js';
-
+import { warnings, ignore_stack, ignore_map, warning_filter } from './state.js';
 import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
@@ -40,6 +34,7 @@ function w(node, code, message) {
 	const warning = new InternalCompileWarning(code, message, node && node.start !== undefined ? [node.start, node.end ?? node.start] : undefined);
 
 	if (!warning_filter(warning)) return;
+
 	warnings.push(warning);
 }
 
@@ -496,7 +491,9 @@ export function a11y_role_supports_aria_props_implicit(node, attribute, role, na
  * @param {string | undefined | null} [suggestion]
  */
 export function a11y_unknown_aria_attribute(node, attribute, suggestion) {
-	w(node, 'a11y_unknown_aria_attribute', `${suggestion ? `Unknown aria attribute 'aria-${attribute}'. Did you mean '${suggestion}'?` : `Unknown aria attribute 'aria-${attribute}'`}\nhttps://svelte.dev/e/a11y_unknown_aria_attribute`);
+	w(node, 'a11y_unknown_aria_attribute', `${suggestion
+		? `Unknown aria attribute 'aria-${attribute}'. Did you mean '${suggestion}'?`
+		: `Unknown aria attribute 'aria-${attribute}'`}\nhttps://svelte.dev/e/a11y_unknown_aria_attribute`);
 }
 
 /**
@@ -506,7 +503,9 @@ export function a11y_unknown_aria_attribute(node, attribute, suggestion) {
  * @param {string | undefined | null} [suggestion]
  */
 export function a11y_unknown_role(node, role, suggestion) {
-	w(node, 'a11y_unknown_role', `${suggestion ? `Unknown role '${role}'. Did you mean '${suggestion}'?` : `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
+	w(node, 'a11y_unknown_role', `${suggestion
+		? `Unknown role '${role}'. Did you mean '${suggestion}'?`
+		: `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
 }
 
 /**
@@ -534,7 +533,9 @@ export function legacy_code(node, code, suggestion) {
  * @param {string | undefined | null} [suggestion]
  */
 export function unknown_code(node, code, suggestion) {
-	w(node, 'unknown_code', `${suggestion ? `\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)` : `\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
+	w(node, 'unknown_code', `${suggestion
+		? `\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)`
+		: `\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 962593b48d..a0ac021c03 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -11,6 +11,7 @@ export function bind_invalid_checkbox_value() {
 		const error = new Error(`bind_invalid_checkbox_value\nUsing \`bind:value\` together with a checkbox input is not allowed. Use \`bind:checked\` instead\nhttps://svelte.dev/e/bind_invalid_checkbox_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_invalid_checkbox_value`);
@@ -29,6 +30,7 @@ export function bind_invalid_export(component, key, name) {
 		const error = new Error(`bind_invalid_export\nComponent ${component} has an export named \`${key}\` that a consumer component is trying to access using \`bind:${key}\`, which is disallowed. Instead, use \`bind:this\` (e.g. \`<${name} bind:this={component} />\`) and then access the property on the bound component instance (e.g. \`component.${key}\`)\nhttps://svelte.dev/e/bind_invalid_export`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_invalid_export`);
@@ -47,6 +49,7 @@ export function bind_not_bindable(key, component, name) {
 		const error = new Error(`bind_not_bindable\nA component is attempting to bind to a non-bindable property \`${key}\` belonging to ${component} (i.e. \`<${name} bind:${key}={...}>\`). To mark a property as bindable: \`let { ${key} = $bindable() } = $props()\`\nhttps://svelte.dev/e/bind_not_bindable`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_not_bindable`);
@@ -64,6 +67,7 @@ export function component_api_changed(method, component) {
 		const error = new Error(`component_api_changed\nCalling \`${method}\` on a component instance (of ${component}) is no longer valid in Svelte 5\nhttps://svelte.dev/e/component_api_changed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/component_api_changed`);
@@ -81,6 +85,7 @@ export function component_api_invalid_new(component, name) {
 		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working.\nhttps://svelte.dev/e/component_api_invalid_new`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/component_api_invalid_new`);
@@ -96,6 +101,7 @@ export function derived_references_self() {
 		const error = new Error(`derived_references_self\nA derived value cannot reference itself recursively\nhttps://svelte.dev/e/derived_references_self`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/derived_references_self`);
@@ -111,9 +117,12 @@ export function derived_references_self() {
  */
 export function each_key_duplicate(a, b, value) {
 	if (DEV) {
-		const error = new Error(`each_key_duplicate\n${value ? `Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}` : `Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
+		const error = new Error(`each_key_duplicate\n${value
+			? `Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}`
+			: `Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/each_key_duplicate`);
@@ -130,6 +139,7 @@ export function effect_in_teardown(rune) {
 		const error = new Error(`effect_in_teardown\n\`${rune}\` cannot be used inside an effect cleanup function\nhttps://svelte.dev/e/effect_in_teardown`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_in_teardown`);
@@ -145,6 +155,7 @@ export function effect_in_unowned_derived() {
 		const error = new Error(`effect_in_unowned_derived\nEffect cannot be created inside a \`$derived\` value that was not itself created inside an effect\nhttps://svelte.dev/e/effect_in_unowned_derived`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_in_unowned_derived`);
@@ -161,6 +172,7 @@ export function effect_orphan(rune) {
 		const error = new Error(`effect_orphan\n\`${rune}\` can only be used inside an effect (e.g. during component initialisation)\nhttps://svelte.dev/e/effect_orphan`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_orphan`);
@@ -176,6 +188,7 @@ export function effect_update_depth_exceeded() {
 		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`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_update_depth_exceeded`);
@@ -191,6 +204,7 @@ export function hydration_failed() {
 		const error = new Error(`hydration_failed\nFailed to hydrate the application\nhttps://svelte.dev/e/hydration_failed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/hydration_failed`);
@@ -206,6 +220,7 @@ export function invalid_snippet() {
 		const error = new Error(`invalid_snippet\nCould not \`{@render}\` snippet due to the expression being \`null\` or \`undefined\`. Consider using optional chaining \`{@render snippet?.()}\`\nhttps://svelte.dev/e/invalid_snippet`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/invalid_snippet`);
@@ -222,6 +237,7 @@ export function lifecycle_legacy_only(name) {
 		const error = new Error(`lifecycle_legacy_only\n\`${name}(...)\` cannot be used in runes mode\nhttps://svelte.dev/e/lifecycle_legacy_only`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/lifecycle_legacy_only`);
@@ -238,6 +254,7 @@ export function props_invalid_value(key) {
 		const error = new Error(`props_invalid_value\nCannot do \`bind:${key}={undefined}\` when \`${key}\` has a fallback value\nhttps://svelte.dev/e/props_invalid_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/props_invalid_value`);
@@ -254,6 +271,7 @@ export function props_rest_readonly(property) {
 		const error = new Error(`props_rest_readonly\nRest element properties of \`$props()\` such as \`${property}\` are readonly\nhttps://svelte.dev/e/props_rest_readonly`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/props_rest_readonly`);
@@ -270,6 +288,7 @@ export function rune_outside_svelte(rune) {
 		const error = new Error(`rune_outside_svelte\nThe \`${rune}\` rune is only available inside \`.svelte\` and \`.svelte.js/ts\` files\nhttps://svelte.dev/e/rune_outside_svelte`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/rune_outside_svelte`);
@@ -285,6 +304,7 @@ export function state_descriptors_fixed() {
 		const error = new Error(`state_descriptors_fixed\nProperty descriptors defined on \`$state\` objects must contain \`value\` and always be \`enumerable\`, \`configurable\` and \`writable\`.\nhttps://svelte.dev/e/state_descriptors_fixed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/state_descriptors_fixed`);
@@ -300,6 +320,7 @@ export function state_prototype_fixed() {
 		const error = new Error(`state_prototype_fixed\nCannot set prototype of \`$state\` object\nhttps://svelte.dev/e/state_prototype_fixed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/state_prototype_fixed`);
@@ -315,6 +336,7 @@ export function state_unsafe_mutation() {
 		const error = new Error(`state_unsafe_mutation\nUpdating state inside \`$derived(...)\`, \`$inspect(...)\` or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/state_unsafe_mutation`);
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index e07892a4b0..74f9041b91 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -25,7 +25,13 @@ export function assignment_value_stale(property, location) {
  */
 export function binding_property_non_reactive(binding, location) {
 	if (DEV) {
-		console.warn(`%c[svelte] binding_property_non_reactive\n%c${location ? `\`${binding}\` (${location}) is binding to a non-reactive property` : `\`${binding}\` is binding to a non-reactive property`}\nhttps://svelte.dev/e/binding_property_non_reactive`, bold, normal);
+		console.warn(
+			`%c[svelte] binding_property_non_reactive\n%c${location
+				? `\`${binding}\` (${location}) is binding to a non-reactive property`
+				: `\`${binding}\` is binding to a non-reactive property`}\nhttps://svelte.dev/e/binding_property_non_reactive`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/binding_property_non_reactive`);
 	}
@@ -76,7 +82,13 @@ export function hydration_attribute_changed(attribute, html, value) {
  */
 export function hydration_html_changed(location) {
 	if (DEV) {
-		console.warn(`%c[svelte] hydration_html_changed\n%c${location ? `The value of an \`{@html ...}\` block ${location} changed between server and client renders. The client value will be ignored in favour of the server value` : 'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'}\nhttps://svelte.dev/e/hydration_html_changed`, bold, normal);
+		console.warn(
+			`%c[svelte] hydration_html_changed\n%c${location
+				? `The value of an \`{@html ...}\` block ${location} changed between server and client renders. The client value will be ignored in favour of the server value`
+				: 'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'}\nhttps://svelte.dev/e/hydration_html_changed`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/hydration_html_changed`);
 	}
@@ -88,7 +100,13 @@ export function hydration_html_changed(location) {
  */
 export function hydration_mismatch(location) {
 	if (DEV) {
-		console.warn(`%c[svelte] hydration_mismatch\n%c${location ? `Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near ${location}` : 'Hydration failed because the initial UI does not match what was rendered on the server'}\nhttps://svelte.dev/e/hydration_mismatch`, bold, normal);
+		console.warn(
+			`%c[svelte] hydration_mismatch\n%c${location
+				? `Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near ${location}`
+				: 'Hydration failed because the initial UI does not match what was rendered on the server'}\nhttps://svelte.dev/e/hydration_mismatch`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/hydration_mismatch`);
 	}
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index 38c545c84e..e47530c9aa 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -1,5 +1,7 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
+
+
 /**
  * `%name%(...)` is not available on the server
  * @param {string} name
@@ -9,5 +11,6 @@ export function lifecycle_function_unavailable(name) {
 	const error = new Error(`lifecycle_function_unavailable\n\`${name}(...)\` is not available on the server\nhttps://svelte.dev/e/lifecycle_function_unavailable`);
 
 	error.name = 'Svelte error';
+
 	throw error;
 }
\ No newline at end of file
diff --git a/packages/svelte/src/internal/shared/errors.js b/packages/svelte/src/internal/shared/errors.js
index b8606fbf6f..6bcc35016a 100644
--- a/packages/svelte/src/internal/shared/errors.js
+++ b/packages/svelte/src/internal/shared/errors.js
@@ -11,6 +11,7 @@ export function invalid_default_snippet() {
 		const error = new Error(`invalid_default_snippet\nCannot use \`{@render children(...)}\` if the parent component uses \`let:\` directives. Consider using a named snippet instead\nhttps://svelte.dev/e/invalid_default_snippet`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/invalid_default_snippet`);
@@ -26,6 +27,7 @@ export function invalid_snippet_arguments() {
 		const error = new Error(`invalid_snippet_arguments\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \`{@render ...}\`\nhttps://svelte.dev/e/invalid_snippet_arguments`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/invalid_snippet_arguments`);
@@ -42,6 +44,7 @@ export function lifecycle_outside_component(name) {
 		const error = new Error(`lifecycle_outside_component\n\`${name}(...)\` can only be used during component initialisation\nhttps://svelte.dev/e/lifecycle_outside_component`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/lifecycle_outside_component`);
@@ -57,6 +60,7 @@ export function snippet_without_render_tag() {
 		const error = new Error(`snippet_without_render_tag\nAttempted to render a snippet without a \`{@render}\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \`{snippet}\` to \`{@render snippet()}\`.\nhttps://svelte.dev/e/snippet_without_render_tag`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/snippet_without_render_tag`);
@@ -73,6 +77,7 @@ export function store_invalid_shape(name) {
 		const error = new Error(`store_invalid_shape\n\`${name}\` is not a store with a \`subscribe\` method\nhttps://svelte.dev/e/store_invalid_shape`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/store_invalid_shape`);
@@ -88,6 +93,7 @@ export function svelte_element_invalid_this_value() {
 		const error = new Error(`svelte_element_invalid_this_value\nThe \`this\` prop on \`<svelte:element>\` must be a string, if defined\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);
diff --git a/packages/svelte/src/internal/shared/warnings.js b/packages/svelte/src/internal/shared/warnings.js
index 281be08382..0acca44184 100644
--- a/packages/svelte/src/internal/shared/warnings.js
+++ b/packages/svelte/src/internal/shared/warnings.js
@@ -25,11 +25,15 @@ export function dynamic_void_element_content(tag) {
  */
 export function state_snapshot_uncloneable(properties) {
 	if (DEV) {
-		console.warn(`%c[svelte] state_snapshot_uncloneable\n%c${properties
-			? `The following properties cannot be cloned with \`$state.snapshot\` — the return value contains the originals:
+		console.warn(
+			`%c[svelte] state_snapshot_uncloneable\n%c${properties
+				? `The following properties cannot be cloned with \`$state.snapshot\` — the return value contains the originals:
 
 ${properties}`
-			: 'Value cannot be cloned with `$state.snapshot` — the original value was returned'}\nhttps://svelte.dev/e/state_snapshot_uncloneable`, bold, normal);
+				: 'Value cannot be cloned with `$state.snapshot` — the original value was returned'}\nhttps://svelte.dev/e/state_snapshot_uncloneable`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/state_snapshot_uncloneable`);
 	}
diff --git a/packages/svelte/tests/parser-modern/test.ts b/packages/svelte/tests/parser-modern/test.ts
index b47d4a4879..279ba7bc08 100644
--- a/packages/svelte/tests/parser-modern/test.ts
+++ b/packages/svelte/tests/parser-modern/test.ts
@@ -21,6 +21,8 @@ const { test, run } = suite<ParserTest>(async (config, cwd) => {
 		)
 	);
 
+	delete actual.comments;
+
 	// run `UPDATE_SNAPSHOTS=true pnpm test parser` to update parser tests
 	if (process.env.UPDATE_SNAPSHOTS) {
 		fs.writeFileSync(`${cwd}/output.json`, JSON.stringify(actual, null, '\t'));
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index ba3f4b155a..a87a356d58 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -22,6 +22,7 @@ export default function Bind_component_snippet($$anchor) {
 		get value() {
 			return $.get(value);
 		},
+
 		set value($$value) {
 			$.set(value, $$value, true);
 		}
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 cadae2cf15..e2c0ee29a5 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
@@ -16,6 +16,7 @@ export default function Bind_component_snippet($$payload) {
 			get value() {
 				return value;
 			},
+
 			set value($$value) {
 				value = $$value;
 				$$settled = false;
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index 28bb01fb18..d84b674f88 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -6,6 +6,7 @@ var root = $.from_html(`<div></div> <svg></svg> <custom-element></custom-element
 export default function Main($$anchor) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
 	let x = 'test';
+
 	let y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
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 4ea5edb6a0..cf731d8187 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
@@ -3,6 +3,7 @@ import * as $ from 'svelte/internal/server';
 export default function Main($$payload) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
 	let x = 'test';
+
 	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>`;
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
index 762a23754c..218951b836 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
@@ -14,6 +14,7 @@ export default function Function_prop_no_getter($$anchor) {
 		onmousedown: () => $.set(count, $.get(count) + 1),
 		onmouseup,
 		onmouseenter: () => $.set(count, plusOne($.get(count)), true),
+
 		children: ($$anchor, $$slotProps) => {
 			$.next();
 
@@ -22,6 +23,7 @@ export default function Function_prop_no_getter($$anchor) {
 			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
 			$.append($$anchor, text);
 		},
+
 		$$slots: { default: true }
 	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
index 88f6f55ee7..7d37abd97b 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
@@ -13,9 +13,11 @@ export default function Function_prop_no_getter($$payload) {
 		onmousedown: () => count += 1,
 		onmouseup,
 		onmouseenter: () => count = plusOne(count),
+
 		children: ($$payload) => {
 			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
 		},
+
 		$$slots: { default: true }
 	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
index 792d5421e1..d4034dc55d 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
@@ -6,6 +6,7 @@ var root = $.from_tree(
 	[
 		['h1', null, 'hello'],
 		' ',
+
 		[
 			'div',
 			{ class: 'potato' },
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
index ebbe191dcb..0eab38919c 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -3,6 +3,4 @@ import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 import { random } from './module.svelte';
 
-export default function Imports_in_modules($$anchor) {
-	
-}
\ No newline at end of file
+export default function Imports_in_modules($$anchor) {}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
index 4cd6bc59d7..2ed863d68f 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
@@ -1,6 +1,4 @@
 import * as $ from 'svelte/internal/server';
 import { random } from './module.svelte';
 
-export default function Imports_in_modules($$payload) {
-	
-}
\ No newline at end of file
+export default function Imports_in_modules($$payload) {}
\ No newline at end of file
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 1a83e0d0f1..3401efac04 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1120,6 +1120,8 @@ declare module 'svelte/compiler' {
 			instance: Script | null;
 			/** The parsed `<script module>` element, if exists */
 			module: Script | null;
+			/** Comments found in <script> and {expressions} */
+			comments: JSComment[];
 		}
 
 		export interface SvelteOptions {
@@ -1437,6 +1439,17 @@ declare module 'svelte/compiler' {
 			attributes: Attribute[];
 		}
 
+		export interface JSComment {
+			type: 'Line' | 'Block';
+			value: string;
+			start: number;
+			end: number;
+			loc: {
+				start: { line: number; column: number };
+				end: { line: number; column: number };
+			};
+		}
+
 		export type AttributeLike = Attribute | SpreadAttribute | Directive;
 
 		export type Directive =
@@ -1493,7 +1506,7 @@ declare module 'svelte/compiler' {
 			| AST.Comment
 			| Block;
 
-		export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node;
+		export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;
 
 		export type { _CSS as CSS };
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfbc54df33..b7fb655b2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,8 +87,8 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^1.4.8
-        version: 1.4.8
+        specifier: ^2.0.0
+        version: 2.0.0
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -1261,8 +1261,8 @@ packages:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.4.8:
-    resolution: {integrity: sha512-jlENbjZ7lqgJV9/OmgAtVqrFFMwsl70ctOgPIg5oTdQVGC13RSkMdtvAmu7ZTLax92c9ljnIG0xleEkdL69hwg==}
+  esrap@2.0.0:
+    resolution: {integrity: sha512-zhw1TDqno99Ld5wOpe0t47rzVyxfGc1fvxNzPsqk4idUf5dcAePkAyfTceLJaSTytjiWDu26S5tI+grjvymXJA==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -3622,7 +3622,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.4.8:
+  esrap@2.0.0:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 

From 7c8be602be7c179a7f248aea078448413815e70a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 30 Jun 2025 11:49:51 -0400
Subject: [PATCH 177/259] move config into svelte.config.js (#16265)

---
 playgrounds/sandbox/svelte.config.js | 5 +++++
 playgrounds/sandbox/vite.config.js   | 9 +--------
 2 files changed, 6 insertions(+), 8 deletions(-)
 create mode 100644 playgrounds/sandbox/svelte.config.js

diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js
new file mode 100644
index 0000000000..65f739bdb6
--- /dev/null
+++ b/playgrounds/sandbox/svelte.config.js
@@ -0,0 +1,5 @@
+export default {
+	compilerOptions: {
+		hmr: true
+	}
+};
diff --git a/playgrounds/sandbox/vite.config.js b/playgrounds/sandbox/vite.config.js
index 51bfd0a212..5ce0204217 100644
--- a/playgrounds/sandbox/vite.config.js
+++ b/playgrounds/sandbox/vite.config.js
@@ -7,14 +7,7 @@ export default defineConfig({
 		minify: false
 	},
 
-	plugins: [
-		inspect(),
-		svelte({
-			compilerOptions: {
-				hmr: true
-			}
-		})
-	],
+	plugins: [inspect(), svelte()],
 
 	optimizeDeps: {
 		// svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change

From b6731456595ffc43620d76f2afb115a19bb7553f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 30 Jun 2025 15:47:25 -0400
Subject: [PATCH 178/259] feat: add `getAbortSignal()` (#16266)

* WIP getAbortSignal

* add test

* regenerate

* add error code

* changeset

* regenerate

* try this

* { stale: true }

* fix test

* lint

* abort synchronously in SSR

* make STALE_REACTION a `StaleReactionError extends Error`

* make non-optional

* Update packages/svelte/src/internal/server/abort-signal.js

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

---------

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>
---
 .changeset/short-fireants-flow.md             |  5 ++
 .../98-reference/.generated/client-errors.md  |  6 ++
 .../svelte/messages/client-errors/errors.md   |  4 ++
 packages/svelte/src/index-client.js           | 33 ++++++++-
 packages/svelte/src/index-server.js           |  2 +
 .../svelte/src/internal/client/constants.js   |  6 ++
 packages/svelte/src/internal/client/errors.js | 16 +++++
 .../internal/client/reactivity/deriveds.js    |  3 +-
 .../src/internal/client/reactivity/effects.js |  9 ++-
 .../src/internal/client/reactivity/types.d.ts |  2 +
 .../svelte/src/internal/client/runtime.js     |  8 ++-
 .../src/internal/server/abort-signal.js       | 13 ++++
 packages/svelte/src/internal/server/index.js  | 71 ++++++++++---------
 .../samples/get-abort-signal/_config.js       | 34 +++++++++
 .../samples/get-abort-signal/main.svelte      | 33 +++++++++
 packages/svelte/types/index.d.ts              | 24 +++++++
 16 files changed, 231 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/short-fireants-flow.md
 create mode 100644 packages/svelte/src/internal/server/abort-signal.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte

diff --git a/.changeset/short-fireants-flow.md b/.changeset/short-fireants-flow.md
new file mode 100644
index 0000000000..b9955ff577
--- /dev/null
+++ b/.changeset/short-fireants-flow.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add `getAbortSignal()`
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 111b0b8940..3f33e37d2e 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -74,6 +74,12 @@ Effect cannot be created inside a `$derived` value that was not itself created i
 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
 ```
 
+### get_abort_signal_outside_reaction
+
+```
+`getAbortSignal()` can only be called inside an effect or derived
+```
+
 ### hydration_failed
 
 ```
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 6d96770eba..47c2038d70 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -48,6 +48,10 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 > 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
 
+## get_abort_signal_outside_reaction
+
+> `getAbortSignal()` can only be called inside an effect or derived
+
 ## hydration_failed
 
 > Failed to hydrate the application
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index efd5628ae9..0d962aacd1 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -1,7 +1,7 @@
 /** @import { ComponentContext, ComponentContextLegacy } from '#client' */
 /** @import { EventDispatcher } from './index.js' */
 /** @import { NotFunction } from './internal/types.js' */
-import { untrack } from './internal/client/runtime.js';
+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';
@@ -44,6 +44,37 @@ if (DEV) {
 	throw_rune_error('$bindable');
 }
 
+/**
+ * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
+ *
+ * Must be called while a derived or effect is running.
+ *
+ * ```svelte
+ * <script>
+ * 	import { getAbortSignal } from 'svelte';
+ *
+ * 	let { id } = $props();
+ *
+ * 	async function getData(id) {
+ * 		const response = await fetch(`/items/${id}`, {
+ * 			signal: getAbortSignal()
+ * 		});
+ *
+ * 		return await response.json();
+ * 	}
+ *
+ * 	const data = $derived(await getData(id));
+ * </script>
+ * ```
+ */
+export function getAbortSignal() {
+	if (active_reaction === null) {
+		e.get_abort_signal_outside_reaction();
+	}
+
+	return (active_reaction.ac ??= new AbortController()).signal;
+}
+
 /**
  * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
  * Unlike `$effect`, the provided function only runs once.
diff --git a/packages/svelte/src/index-server.js b/packages/svelte/src/index-server.js
index 0f1aff8f5a..e5039cf150 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 { getAbortSignal } from './internal/server/abort-signal.js';
+
 export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
 
 export { createRawSnippet } from './internal/server/blocks/snippet.js';
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 3ca915f98e..dd3d1b2df6 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -27,6 +27,12 @@ export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 export const PROXY_PATH_SYMBOL = Symbol('proxy path');
 
+// allow users to ignore aborted signal errors if `reason.stale`
+export const STALE_REACTION = new (class StaleReactionError extends Error {
+	name = 'StaleReactionError';
+	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
+})();
+
 export const ELEMENT_NODE = 1;
 export const TEXT_NODE = 3;
 export const COMMENT_NODE = 8;
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index a0ac021c03..5c3f5340e1 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -195,6 +195,22 @@ export function effect_update_depth_exceeded() {
 	}
 }
 
+/**
+ * `getAbortSignal()` can only be called inside an effect or derived
+ * @returns {never}
+ */
+export function get_abort_signal_outside_reaction() {
+	if (DEV) {
+		const error = new Error(`get_abort_signal_outside_reaction\n\`getAbortSignal()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/get_abort_signal_outside_reaction`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/get_abort_signal_outside_reaction`);
+	}
+}
+
 /**
  * Failed to hydrate the application
  * @returns {never}
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index e9cea0df3e..d3123d24a1 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -53,7 +53,8 @@ export function derived(fn) {
 		rv: 0,
 		v: /** @type {V} */ (null),
 		wv: 0,
-		parent: parent_derived ?? active_effect
+		parent: parent_derived ?? active_effect,
+		ac: null
 	};
 
 	if (DEV && tracing_mode_flag) {
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 03d073781d..a2806bde81 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -32,7 +32,8 @@ import {
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_HAS_DERIVED,
-	BOUNDARY_EFFECT
+	BOUNDARY_EFFECT,
+	STALE_REACTION
 } from '#client/constants';
 import { set } from './sources.js';
 import * as e from '../errors.js';
@@ -106,7 +107,8 @@ function create_effect(type, fn, sync, push = true) {
 		prev: null,
 		teardown: null,
 		transitions: null,
-		wv: 0
+		wv: 0,
+		ac: null
 	};
 
 	if (DEV) {
@@ -397,6 +399,8 @@ export function destroy_effect_children(signal, remove_dom = false) {
 	signal.first = signal.last = null;
 
 	while (effect !== null) {
+		effect.ac?.abort(STALE_REACTION);
+
 		var next = effect.next;
 
 		if ((effect.f & ROOT_EFFECT) !== 0) {
@@ -478,6 +482,7 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.fn =
 		effect.nodes_start =
 		effect.nodes_end =
+		effect.ac =
 			null;
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 756bb98f09..88c84f27fe 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -40,6 +40,8 @@ export interface Reaction extends Signal {
 	fn: null | Function;
 	/** Signals that this signal reads from */
 	deps: null | Value[];
+	/** An AbortController that aborts when the signal is destroyed */
+	ac: null | AbortController;
 }
 
 export interface Derived<V = unknown> extends Value<V>, Reaction {
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index d057bfdf0d..3e70537d7c 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -22,7 +22,8 @@ import {
 	ROOT_EFFECT,
 	LEGACY_DERIVED_PROP,
 	DISCONNECTED,
-	EFFECT_IS_UPDATING
+	EFFECT_IS_UPDATING,
+	STALE_REACTION
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { internal_set, old_values } from './reactivity/sources.js';
@@ -276,6 +277,11 @@ export function update_reaction(reaction) {
 
 	reaction.f |= EFFECT_IS_UPDATING;
 
+	if (reaction.ac !== null) {
+		reaction.ac.abort(STALE_REACTION);
+		reaction.ac = null;
+	}
+
 	try {
 		var result = /** @type {Function} */ (0, reaction.fn)();
 		var deps = reaction.deps;
diff --git a/packages/svelte/src/internal/server/abort-signal.js b/packages/svelte/src/internal/server/abort-signal.js
new file mode 100644
index 0000000000..da579b2592
--- /dev/null
+++ b/packages/svelte/src/internal/server/abort-signal.js
@@ -0,0 +1,13 @@
+import { STALE_REACTION } from '#client/constants';
+
+/** @type {AbortController | null} */
+export let controller = null;
+
+export function abort() {
+	controller?.abort(STALE_REACTION);
+	controller = null;
+}
+
+export function getAbortSignal() {
+	return (controller ??= new AbortController()).signal;
+}
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 2ca85fff44..ceb516ebb0 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -18,6 +18,7 @@ import { validate_store } from '../shared/validate.js';
 import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
 import { reset_elements } from './dev.js';
 import { Payload } from './payload.js';
+import { abort } from './abort-signal.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
@@ -66,50 +67,54 @@ export let on_destroy = [];
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	const payload = new Payload(options.idPrefix ? options.idPrefix + '-' : '');
+	try {
+		const payload = new Payload(options.idPrefix ? options.idPrefix + '-' : '');
 
-	const prev_on_destroy = on_destroy;
-	on_destroy = [];
-	payload.out += BLOCK_OPEN;
+		const prev_on_destroy = on_destroy;
+		on_destroy = [];
+		payload.out += BLOCK_OPEN;
 
-	let reset_reset_element;
+		let reset_reset_element;
 
-	if (DEV) {
-		// prevent parent/child element state being corrupted by a bad render
-		reset_reset_element = reset_elements();
-	}
+		if (DEV) {
+			// prevent parent/child element state being corrupted by a bad render
+			reset_reset_element = reset_elements();
+		}
 
-	if (options.context) {
-		push();
-		/** @type {Component} */ (current_component).c = options.context;
-	}
+		if (options.context) {
+			push();
+			/** @type {Component} */ (current_component).c = options.context;
+		}
 
-	// @ts-expect-error
-	component(payload, options.props ?? {}, {}, {});
+		// @ts-expect-error
+		component(payload, options.props ?? {}, {}, {});
 
-	if (options.context) {
-		pop();
-	}
+		if (options.context) {
+			pop();
+		}
 
-	if (reset_reset_element) {
-		reset_reset_element();
-	}
+		if (reset_reset_element) {
+			reset_reset_element();
+		}
 
-	payload.out += BLOCK_CLOSE;
-	for (const cleanup of on_destroy) cleanup();
-	on_destroy = prev_on_destroy;
+		payload.out += 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 + payload.head.title;
 
-	for (const { hash, code } of payload.css) {
-		head += `<style id="${hash}">${code}</style>`;
-	}
+		for (const { hash, code } of payload.css) {
+			head += `<style id="${hash}">${code}</style>`;
+		}
 
-	return {
-		head,
-		html: payload.out,
-		body: payload.out
-	};
+		return {
+			head,
+			html: payload.out,
+			body: payload.out
+		};
+	} finally {
+		abort();
+	}
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js
new file mode 100644
index 0000000000..6a85e2615a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button><p>loading...</p>`,
+
+	async test({ assert, target, variant, logs }) {
+		await new Promise((f) => setTimeout(f, 50));
+
+		if (variant === 'hydrate') {
+			assert.deepEqual(logs, [
+				'aborted',
+				'StaleReactionError',
+				'The reaction that called `getAbortSignal()` was re-run or destroyed'
+			]);
+		}
+
+		logs.length = 0;
+
+		const [button] = target.querySelectorAll('button');
+
+		await new Promise((f) => setTimeout(f, 50));
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>0</p>');
+
+		button.click();
+		await new Promise((f) => setTimeout(f, 50));
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>2</p>');
+
+		assert.deepEqual(logs, [
+			'aborted',
+			'StaleReactionError',
+			'The reaction that called `getAbortSignal()` was re-run or destroyed'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte
new file mode 100644
index 0000000000..be5625125b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	let count = $state(0);
+
+	let delayed_count = $derived.by(async () => {
+		let c = count;
+
+		const signal = getAbortSignal();
+
+		await new Promise((f) => setTimeout(f));
+
+		if (signal.aborted) {
+			console.log('aborted', signal.reason.name, signal.reason.message);
+		}
+
+		return c;
+	});
+</script>
+
+<button onclick={async () => {
+	count += 1;
+	await Promise.resolve();
+	count += 1;
+}}>increment</button>
+
+{#await delayed_count}
+	<p>loading...</p>
+{:then count}
+	<p>{count}</p>
+{:catch error}
+	{console.log('this should never be rendered')}
+{/await}
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 3401efac04..432171ae0d 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -348,6 +348,30 @@ declare module 'svelte' {
 				 */
 				props: Props;
 			});
+	/**
+	 * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
+	 *
+	 * Must be called while a derived or effect is running.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { getAbortSignal } from 'svelte';
+	 *
+	 * 	let { id } = $props();
+	 *
+	 * 	async function getData(id) {
+	 * 		const response = await fetch(`/items/${id}`, {
+	 * 			signal: getAbortSignal()
+	 * 		});
+	 *
+	 * 		return await response.json();
+	 * 	}
+	 *
+	 * 	const data = $derived(await getData(id));
+	 * </script>
+	 * ```
+	 */
+	export function getAbortSignal(): AbortSignal;
 	/**
 	 * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
 	 * Unlike `$effect`, the provided function only runs once.

From eb530c82c4e8870194cb919be4bc76600f0e0231 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 30 Jun 2025 16:04:44 -0400
Subject: [PATCH 179/259] chore: move stuff from `analysis` into global
 compiler state (#16268)

* break out locator stuff from the rest of global state

* move some stuff around

* tighten up

* make runes globally available

* make component_name globally available

* unused
---
 packages/svelte/src/compiler/index.js         | 14 ++++----
 packages/svelte/src/compiler/migrate/index.js |  5 ++-
 .../src/compiler/phases/1-parse/index.js      |  3 ++
 .../src/compiler/phases/2-analyze/index.js    | 17 +++++++++
 .../svelte/src/compiler/phases/types.d.ts     |  3 ++
 packages/svelte/src/compiler/state.js         | 35 +++++++++++++------
 6 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 429c6b4a6f..9ba23c1485 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -20,9 +20,8 @@ export { default as preprocess } from './preprocess/index.js';
  */
 export function compile(source, options) {
 	source = remove_bom(source);
-	state.reset_warning_filter(options.warningFilter);
+	state.reset_warnings(options.warningFilter);
 	const validated = validate_component_options(options, '');
-	state.reset(source, validated);
 
 	let parsed = _parse(source);
 
@@ -64,9 +63,8 @@ export function compile(source, options) {
  */
 export function compileModule(source, options) {
 	source = remove_bom(source);
-	state.reset_warning_filter(options.warningFilter);
+	state.reset_warnings(options.warningFilter);
 	const validated = validate_module_options(options, '');
-	state.reset(source, validated);
 
 	const analysis = analyze_module(source, validated);
 	return transform_module(analysis, source, validated);
@@ -96,6 +94,7 @@ export function compileModule(source, options) {
  * @returns {Record<string, any>}
  */
 
+// TODO 6.0 remove unused `filename`
 /**
  * The parse function parses a component, returning only its abstract syntax tree.
  *
@@ -104,14 +103,15 @@ export function compileModule(source, options) {
  *
  * The `loose` option, available since 5.13.0, tries to always return an AST even if the input will not successfully compile.
  *
+ * The `filename` option is unused and will be removed in Svelte 6.0.
+ *
  * @param {string} source
  * @param {{ filename?: string; rootDir?: string; modern?: boolean; loose?: boolean }} [options]
  * @returns {AST.Root | LegacyRoot}
  */
-export function parse(source, { filename, rootDir, modern, loose } = {}) {
+export function parse(source, { modern, loose } = {}) {
 	source = remove_bom(source);
-	state.reset_warning_filter(() => false);
-	state.reset(source, { filename: filename ?? '(unknown)', rootDir });
+	state.reset_warnings(() => false);
 
 	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 5ca9adb98b..fdc9734f85 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_warning_filter } from '../state.js';
+import { reset, reset_warnings } from '../state.js';
 import {
 	extract_identifiers,
 	extract_all_identifiers_from_expression,
@@ -134,8 +134,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			return start + style_placeholder + end;
 		});
 
-		reset_warning_filter(() => false);
-		reset(source, { filename: filename ?? '(unknown)' });
+		reset_warnings(() => false);
 
 		let parsed = parse(source);
 
diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index b8ae8199eb..77cc2bf3fa 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -9,6 +9,7 @@ import { create_fragment } from './utils/create.js';
 import read_options from './read/options.js';
 import { is_reserved } from '../../../utils.js';
 import { disallow_children } from '../2-analyze/visitors/shared/special-element.js';
+import * as state from '../../state.js';
 
 const regex_position_indicator = / \(\d+:\d+\)$/;
 
@@ -301,6 +302,8 @@ export class Parser {
  * @returns {AST.Root}
  */
 export function parse(template, loose = false) {
+	state.set_source(template);
+
 	const parser = new Parser(template, loose);
 	return parser.root;
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index be1f1ee5bb..d73e273ec2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -76,6 +76,7 @@ import { UseDirective } from './visitors/UseDirective.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
 import is_reference from 'is-reference';
 import { mark_subtree_dynamic } from './visitors/shared/fragment.js';
+import * as state from '../../state.js';
 
 /**
  * @type {Visitors}
@@ -240,6 +241,7 @@ export function analyze_module(source, options) {
 	/** @type {AST.JSComment[]} */
 	const comments = [];
 
+	state.set_source(source);
 	const ast = parse(source, comments, false, false);
 
 	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
@@ -269,6 +271,13 @@ export function analyze_module(source, options) {
 		classes: new Map()
 	};
 
+	state.reset({
+		dev: options.dev,
+		filename: options.filename,
+		rootDir: options.rootDir,
+		runes: true
+	});
+
 	walk(
 		/** @type {Node} */ (ast),
 		{
@@ -506,6 +515,14 @@ export function analyze_component(root, source, options) {
 		snippets: new Set()
 	};
 
+	state.reset({
+		component_name: analysis.name,
+		dev: options.dev,
+		filename: options.filename,
+		rootDir: options.rootDir,
+		runes: true
+	});
+
 	if (!runes) {
 		// every exported `let` or `var` declaration becomes a prop, everything else becomes an export
 		for (const node of instance.ast.body) {
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 661f363991..dba2559a17 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -34,7 +34,9 @@ export interface ReactiveStatement {
  */
 export interface Analysis {
 	module: Js;
+	/** @deprecated use `component_name` from `state.js` instead */
 	name: string; // TODO should this be filename? it's used in `compileModule` as well as `compile`
+	/** @deprecated use `runes` from `state.js` instead */
 	runes: boolean;
 	immutable: boolean;
 	tracing: boolean;
@@ -90,6 +92,7 @@ export interface ComponentAnalysis extends Analysis {
 		keyframes: string[];
 		has_global: boolean;
 	};
+	/** @deprecated use `source` from `state.js` instead */
 	source: string;
 	undefined_exports: Map<string, Node>;
 	/**
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 1db3db917f..9095651ced 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -16,6 +16,8 @@ export let warnings = [];
  */
 export let filename;
 
+export let component_name = '<unknown>';
+
 /**
  * The original source code
  * @type {string}
@@ -28,8 +30,16 @@ export let source;
  */
 export let dev;
 
+export let runes = false;
+
 export let locator = getLocator('', { offsetLine: 1 });
 
+/** @param {string} value */
+export function set_source(value) {
+	source = value;
+	locator = getLocator(source, { offsetLine: 1 });
+}
+
 /**
  * @param {AST.SvelteNode & { start?: number | undefined }} node
  */
@@ -71,8 +81,9 @@ export function pop_ignore() {
  *
  * @param {(warning: Warning) => boolean} fn
  */
-export function reset_warning_filter(fn = () => true) {
+export function reset_warnings(fn = () => true) {
 	warning_filter = fn;
+	warnings = [];
 }
 
 /**
@@ -85,23 +96,27 @@ export function is_ignored(node, code) {
 }
 
 /**
- * @param {string} _source
- * @param {{ dev?: boolean; filename: string; rootDir?: string }} options
+ * @param {{
+ *   dev: boolean;
+ *   filename: string;
+ *   component_name?: string;
+ *   rootDir?: string;
+ *   runes: boolean;
+ * }} state
  */
-export function reset(_source, options) {
-	source = _source;
-	const root_dir = options.rootDir?.replace(/\\/g, '/');
-	filename = options.filename.replace(/\\/g, '/');
+export function reset(state) {
+	const root_dir = state.rootDir?.replace(/\\/g, '/');
+	filename = state.filename.replace(/\\/g, '/');
 
-	dev = !!options.dev;
+	dev = state.dev;
+	runes = state.runes;
+	component_name = state.component_name ?? '(unknown)';
 
 	if (typeof root_dir === 'string' && filename.startsWith(root_dir)) {
 		// make filename relative to rootDir
 		filename = filename.replace(root_dir, '').replace(/^[/\\]/, '');
 	}
 
-	locator = getLocator(source, { offsetLine: 1 });
-	warnings = [];
 	ignore_stack = [];
 	ignore_map.clear();
 }

From d427ffd8b96c5a5509ee602bd77d58a90f24e784 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Jul 2025 10:37:37 -0400
Subject: [PATCH 180/259] chore: encapsulate expression memoization (#16269)

* chore: encapsulate expression memoization

* add comment

* tweak

* use b.id
---
 .../3-transform/client/transform-client.js    |  4 +-
 .../phases/3-transform/client/types.d.ts      |  5 +-
 .../3-transform/client/visitors/Fragment.js   |  4 +-
 .../client/visitors/RegularElement.js         | 61 ++++++++++---------
 .../client/visitors/SvelteElement.js          |  6 +-
 .../client/visitors/shared/element.js         | 37 +++++------
 .../client/visitors/shared/utils.js           | 52 ++++++++++++----
 7 files changed, 99 insertions(+), 70 deletions(-)

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 e85a35cf8e..a9c0651e0f 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
@@ -168,9 +168,9 @@ export function client_component(analysis, options) {
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
 		update: /** @type {any} */ (null),
-		expressions: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
-		template: /** @type {any} */ (null)
+		template: /** @type {any} */ (null),
+		memoizer: /** @type {any} */ (null)
 	};
 
 	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 2388ee1b00..cf5c942268 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
@@ -12,6 +12,7 @@ import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
 import type { Template } from './transform-template/template.js';
+import type { Memoizer } from './visitors/shared/utils.js';
 
 export interface ClientTransformState extends TransformState {
 	/**
@@ -49,8 +50,8 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly update: Statement[];
 	/** Stuff that happens after the render effect (control blocks, dynamic elements, bindings, actions, etc) */
 	readonly after_update: Statement[];
-	/** Expressions used inside the render effect */
-	readonly expressions: Expression[];
+	/** Memoized expressions */
+	readonly memoizer: Memoizer;
 	/** The HTML template string */
 	readonly template: Template;
 	readonly metadata: {
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 4825184d31..7cd2bd90ed 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
@@ -6,7 +6,7 @@ import * as b from '#compiler/builders';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { transform_template } from '../transform-template/index.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement } from './shared/utils.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
 import { Template } from '../transform-template/template.js';
 
 /**
@@ -64,8 +64,8 @@ export function Fragment(node, context) {
 		...context.state,
 		init: [],
 		update: [],
-		expressions: [],
 		after_update: [],
+		memoizer: new Memoizer(),
 		template: new Template(),
 		transform: { ...context.state.transform },
 		metadata: {
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 ae8680f594..eed2a75506 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
@@ -22,7 +22,7 @@ import {
 	build_set_style
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement, build_template_chunk, get_expression_id } from './shared/utils.js';
+import { build_render_statement, build_template_chunk, Memoizer } from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 
 /**
@@ -253,8 +253,7 @@ export function RegularElement(node, context) {
 				const { value, has_state } = build_attribute_value(
 					attribute.value,
 					context,
-					(value, metadata) =>
-						metadata.has_call ? get_expression_id(context.state.expressions, value) : value
+					(value, metadata) => (metadata.has_call ? context.state.memoizer.add(value) : value)
 				);
 
 				const update = build_element_attribute_update(node, node_id, name, value, attributes);
@@ -455,11 +454,15 @@ function setup_select_synchronization(value_binding, context) {
 
 /**
  * @param {AST.ClassDirective[]} class_directives
- * @param {Expression[]} expressions
  * @param {ComponentContext} context
+ * @param {Memoizer} memoizer
  * @return {ObjectExpression | Identifier}
  */
-export function build_class_directives_object(class_directives, expressions, context) {
+export function build_class_directives_object(
+	class_directives,
+	context,
+	memoizer = context.state.memoizer
+) {
 	let properties = [];
 	let has_call_or_state = false;
 
@@ -471,38 +474,40 @@ export function build_class_directives_object(class_directives, expressions, con
 
 	const directives = b.object(properties);
 
-	return has_call_or_state ? get_expression_id(expressions, directives) : directives;
+	return has_call_or_state ? memoizer.add(directives) : directives;
 }
 
 /**
  * @param {AST.StyleDirective[]} style_directives
- * @param {Expression[]} expressions
  * @param {ComponentContext} context
- * @return {ObjectExpression | ArrayExpression}}
+ * @param {Memoizer} memoizer
+ * @return {ObjectExpression | ArrayExpression | Identifier}}
  */
-export function build_style_directives_object(style_directives, expressions, context) {
-	let normal_properties = [];
-	let important_properties = [];
+export function build_style_directives_object(
+	style_directives,
+	context,
+	memoizer = context.state.memoizer
+) {
+	const normal = b.object([]);
+	const important = b.object([]);
 
-	for (const directive of style_directives) {
+	let has_call_or_state = false;
+
+	for (const d of style_directives) {
 		const expression =
-			directive.value === true
-				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
-				: build_attribute_value(directive.value, context, (value, metadata) =>
-						metadata.has_call ? get_expression_id(expressions, value) : value
-					).value;
-		const property = b.init(directive.name, expression);
-
-		if (directive.modifiers.includes('important')) {
-			important_properties.push(property);
-		} else {
-			normal_properties.push(property);
-		}
+			d.value === true
+				? build_getter(b.id(d.name), context.state)
+				: build_attribute_value(d.value, context).value;
+
+		const object = d.modifiers.includes('important') ? important : normal;
+		object.properties.push(b.init(d.name, expression));
+
+		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
 	}
 
-	return important_properties.length
-		? b.array([b.object(normal_properties), b.object(important_properties)])
-		: b.object(normal_properties);
+	const directives = important.properties.length ? b.array([normal, important]) : normal;
+
+	return has_call_or_state ? memoizer.add(directives) : directives;
 }
 
 /**
@@ -624,7 +629,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 ? get_expression_id(state.expressions, value) : value
+		metadata.has_call ? state.memoizer.add(value) : value
 	);
 
 	const evaluated = context.state.scope.evaluate(value);
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 7381553dbe..6af5f5770e 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
@@ -10,7 +10,7 @@ import {
 	build_attribute_effect,
 	build_set_class
 } from './shared/element.js';
-import { build_render_statement } from './shared/utils.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -46,8 +46,8 @@ export function SvelteElement(node, context) {
 			node: element_id,
 			init: [],
 			update: [],
-			expressions: [],
-			after_update: []
+			after_update: [],
+			memoizer: new Memoizer()
 		}
 	};
 
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 10f942b7d4..d119b0457b 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
@@ -7,7 +7,7 @@ import { is_ignored } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
-import { build_expression, build_template_chunk, get_expression_id } from './utils.js';
+import { build_expression, build_template_chunk, Memoizer } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -28,18 +28,12 @@ export function build_attribute_effect(
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
 
-	/** @type {Expression[]} */
-	const expressions = [];
-
-	/** @param {Expression} value */
-	function memoize(value) {
-		return b.id(`$${expressions.push(value) - 1}`);
-	}
+	const memoizer = new Memoizer();
 
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
 			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
-				metadata.has_call ? memoize(value) : value
+				metadata.has_call ? memoizer.add(value) : value
 			);
 
 			if (
@@ -57,7 +51,7 @@ export function build_attribute_effect(
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
 			if (attribute.metadata.expression.has_call) {
-				value = memoize(value);
+				value = memoizer.add(value);
 			}
 
 			values.push(b.spread(value));
@@ -69,7 +63,7 @@ export function build_attribute_effect(
 			b.prop(
 				'init',
 				b.array([b.id('$.CLASS')]),
-				build_class_directives_object(class_directives, expressions, context)
+				build_class_directives_object(class_directives, context, memoizer)
 			)
 		);
 	}
@@ -79,21 +73,20 @@ export function build_attribute_effect(
 			b.prop(
 				'init',
 				b.array([b.id('$.STYLE')]),
-				build_style_directives_object(style_directives, expressions, context)
+				build_style_directives_object(style_directives, context, memoizer)
 			)
 		);
 	}
 
+	const ids = memoizer.apply();
+
 	context.state.init.push(
 		b.stmt(
 			b.call(
 				'$.attribute_effect',
 				element_id,
-				b.arrow(
-					expressions.map((_, i) => b.id(`$${i}`)),
-					b.object(values)
-				),
-				expressions.length > 0 && b.array(expressions.map((expression) => b.thunk(expression))),
+				b.arrow(ids, b.object(values)),
+				memoizer.sync_values(),
 				element.metadata.scoped &&
 					context.state.analysis.css.hash !== '' &&
 					b.literal(context.state.analysis.css.hash),
@@ -158,7 +151,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 			value = b.call('$.clsx', value);
 		}
 
-		return metadata.has_call ? get_expression_id(context.state.expressions, value) : value;
+		return metadata.has_call ? context.state.memoizer.add(value) : value;
 	});
 
 	/** @type {Identifier | undefined} */
@@ -171,7 +164,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 	let next;
 
 	if (class_directives.length) {
-		next = build_class_directives_object(class_directives, context.state.expressions, context);
+		next = build_class_directives_object(class_directives, context);
 		has_state ||= class_directives.some((d) => d.metadata.expression.has_state);
 
 		if (has_state) {
@@ -226,7 +219,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 ? get_expression_id(context.state.expressions, value) : value
+		metadata.has_call ? context.state.memoizer.add(value) : value
 	);
 
 	/** @type {Identifier | undefined} */
@@ -235,11 +228,11 @@ export function build_set_style(node_id, attribute, style_directives, context) {
 	/** @type {ObjectExpression | Identifier | undefined} */
 	let prev;
 
-	/** @type {ArrayExpression | ObjectExpression | undefined} */
+	/** @type {Expression | undefined} */
 	let next;
 
 	if (style_directives.length) {
-		next = build_style_directives_object(style_directives, context.state.expressions, context);
+		next = build_style_directives_object(style_directives, context);
 		has_state ||= style_directives.some((d) => d.metadata.expression.has_state);
 
 		if (has_state) {
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 0bd9bfb128..b80466ccc9 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
@@ -21,12 +21,41 @@ export function memoize_expression(state, value) {
 }
 
 /**
- * Pushes `value` into `expressions` and returns a new id
- * @param {Expression[]} expressions
- * @param {Expression} value
+ * A utility for extracting complex expressions (such as call expressions)
+ * from templates and replacing them with `$0`, `$1` etc
  */
-export function get_expression_id(expressions, value) {
-	return b.id(`$${expressions.push(value) - 1}`);
+export class Memoizer {
+	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	#sync = [];
+
+	/**
+	 * @param {Expression} expression
+	 */
+	add(expression) {
+		const id = b.id('#'); // filled in later
+
+		this.#sync.push({ id, expression });
+
+		return id;
+	}
+
+	apply() {
+		return this.#sync.map((memo, i) => {
+			memo.id.name = `$${i}`;
+			return memo.id;
+		});
+	}
+
+	deriveds(runes = true) {
+		return this.#sync.map((memo) =>
+			b.let(memo.id, b.call(runes ? '$.derived' : '$.derived_safe_equal', b.thunk(memo.expression)))
+		);
+	}
+
+	sync_values() {
+		if (this.#sync.length === 0) return;
+		return b.array(this.#sync.map((memo) => b.thunk(memo.expression)));
+	}
 }
 
 /**
@@ -40,8 +69,7 @@ export function build_template_chunk(
 	values,
 	context,
 	state = context.state,
-	memoize = (value, metadata) =>
-		metadata.has_call ? get_expression_id(state.expressions, value) : value
+	memoize = (value, metadata) => (metadata.has_call ? state.memoizer.add(value) : value)
 ) {
 	/** @type {Expression[]} */
 	const expressions = [];
@@ -128,18 +156,20 @@ 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();
+
 	return b.stmt(
 		b.call(
 			'$.template_effect',
 			b.arrow(
-				state.expressions.map((_, i) => b.id(`$${i}`)),
+				ids,
 				state.update.length === 1 && state.update[0].type === 'ExpressionStatement'
 					? state.update[0].expression
 					: b.block(state.update)
 			),
-			state.expressions.length > 0 &&
-				b.array(state.expressions.map((expression) => b.thunk(expression))),
-			state.expressions.length > 0 && !state.analysis.runes && b.id('$.derived_safe_equal')
+			values,
+			values && !state.analysis.runes && b.id('$.derived_safe_equal')
 		)
 	);
 }

From 11ec907fd57fec85e090d6a620743bd447f9d2ef Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 1 Jul 2025 14:20:19 -0400
Subject: [PATCH 181/259] chore: simplify props (#16270)

* simplify props

* simplify

* tweak

* reorder a bit

* simplify

* unused

* more

* more

* tweak

* also appears to be unnecessary

* changeset

* apparently this is also unnecessary

* explanatory comment
---
 .changeset/new-trees-behave.md                |   5 +
 .../svelte/src/internal/client/constants.js   |   2 -
 .../src/internal/client/reactivity/props.js   | 175 +++++++-----------
 .../svelte/src/internal/client/runtime.js     |  13 +-
 4 files changed, 73 insertions(+), 122 deletions(-)
 create mode 100644 .changeset/new-trees-behave.md

diff --git a/.changeset/new-trees-behave.md b/.changeset/new-trees-behave.md
new file mode 100644
index 0000000000..d5fab30f3e
--- /dev/null
+++ b/.changeset/new-trees-behave.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: simplify props
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index dd3d1b2df6..cd5e0d2244 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -15,8 +15,6 @@ export const DESTROYED = 1 << 14;
 export const EFFECT_RAN = 1 << 15;
 /** 'Transparent' effects do not create a transition boundary */
 export const EFFECT_TRANSPARENT = 1 << 16;
-/** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
-export const LEGACY_DERIVED_PROP = 1 << 17;
 export const INSPECT_EFFECT = 1 << 18;
 export const HEAD_EFFECT = 1 << 19;
 export const EFFECT_HAS_DERIVED = 1 << 20;
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index f3111361c0..f51291b1cc 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -8,12 +8,11 @@ import {
 	PROPS_IS_UPDATED
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../../shared/utils.js';
-import { mutable_source, set, source, update } from './sources.js';
+import { set, source, update } from './sources.js';
 import { derived, derived_safe_equal } from './deriveds.js';
-import { get, captured_signals, untrack } from '../runtime.js';
-import { safe_equals } from './equality.js';
+import { get, untrack } from '../runtime.js';
 import * as e from '../errors.js';
-import { LEGACY_DERIVED_PROP, LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
+import { LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
 import { legacy_mode_flag } from '../../flags/index.js';
@@ -260,89 +259,92 @@ function has_destroyed_component_ctx(current_value) {
  * @returns {(() => V | ((arg: V) => V) | ((arg: V, mutation: boolean) => V))}
  */
 export function prop(props, key, flags, fallback) {
-	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = !legacy_mode_flag || (flags & PROPS_IS_RUNES) !== 0;
 	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
-	var is_store_sub = false;
-	var prop_value;
-
-	if (bindable) {
-		[prop_value, is_store_sub] = capture_store_binding(() => /** @type {V} */ (props[key]));
-	} else {
-		prop_value = /** @type {V} */ (props[key]);
-	}
-
-	// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
-	// or `createClassComponent(Component, props)`
-	var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
-
-	var setter =
-		(bindable &&
-			(get_descriptor(props, key)?.set ??
-				(is_entry_props && key in props && ((v) => (props[key] = v))))) ||
-		undefined;
 
 	var fallback_value = /** @type {V} */ (fallback);
 	var fallback_dirty = true;
-	var fallback_used = false;
 
 	var get_fallback = () => {
-		fallback_used = true;
 		if (fallback_dirty) {
 			fallback_dirty = false;
-			if (lazy) {
-				fallback_value = untrack(/** @type {() => V} */ (fallback));
-			} else {
-				fallback_value = /** @type {V} */ (fallback);
-			}
+
+			fallback_value = lazy
+				? untrack(/** @type {() => V} */ (fallback))
+				: /** @type {V} */ (fallback);
 		}
 
 		return fallback_value;
 	};
 
-	if (prop_value === undefined && fallback !== undefined) {
-		if (setter && runes) {
-			e.props_invalid_value(key);
-		}
+	/** @type {((v: V) => void) | undefined} */
+	var setter;
 
-		prop_value = get_fallback();
-		if (setter) setter(prop_value);
+	if (bindable) {
+		// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+		// or `createClassComponent(Component, props)`
+		var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+
+		setter =
+			get_descriptor(props, key)?.set ??
+			(is_entry_props && key in props ? (v) => (props[key] = v) : undefined);
+	}
+
+	var initial_value;
+	var is_store_sub = false;
+
+	if (bindable) {
+		[initial_value, is_store_sub] = capture_store_binding(() => /** @type {V} */ (props[key]));
+	} else {
+		initial_value = /** @type {V} */ (props[key]);
+	}
+
+	if (initial_value === undefined && fallback !== undefined) {
+		initial_value = get_fallback();
+
+		if (setter) {
+			if (runes) e.props_invalid_value(key);
+			setter(initial_value);
+		}
 	}
 
 	/** @type {() => V} */
 	var getter;
+
 	if (runes) {
 		getter = () => {
 			var value = /** @type {V} */ (props[key]);
 			if (value === undefined) return get_fallback();
 			fallback_dirty = true;
-			fallback_used = false;
 			return value;
 		};
 	} else {
-		// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
-		// Replicate that behavior through using a derived
-		var derived_getter = (immutable ? derived : derived_safe_equal)(
-			() => /** @type {V} */ (props[key])
-		);
-		derived_getter.f |= LEGACY_DERIVED_PROP;
 		getter = () => {
-			var value = get(derived_getter);
-			if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
+			var value = /** @type {V} */ (props[key]);
+
+			if (value !== undefined) {
+				// in legacy mode, we don't revert to the fallback value
+				// if the prop goes from defined to undefined. The easiest
+				// way to model this is to make the fallback undefined
+				// as soon as the prop has a value
+				fallback_value = /** @type {V} */ (undefined);
+			}
+
 			return value === undefined ? fallback_value : value;
 		};
 	}
 
-	// easy mode — prop is never written to
-	if ((flags & PROPS_IS_UPDATED) === 0 && runes) {
+	// prop is never written to — we only need a getter
+	if ((flags & PROPS_IS_UPDATED) === 0) {
 		return getter;
 	}
 
-	// intermediate mode — prop is written to, but the parent component had
-	// `bind:foo` which means we can just call `$$props.foo = value` directly
+	// prop is written to, but the parent component had `bind:foo` which
+	// means we can just call `$$props.foo = value` directly
 	if (setter) {
 		var legacy_parent = props.$$legacy;
+
 		return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
 			if (arguments.length > 0) {
 				// We don't want to notify if the value was mutated and the parent is in runes mode.
@@ -352,82 +354,39 @@ export function prop(props, key, flags, fallback) {
 				if (!runes || !mutation || legacy_parent || is_store_sub) {
 					/** @type {Function} */ (setter)(mutation ? getter() : value);
 				}
+
 				return value;
-			} else {
-				return getter();
 			}
+
+			return getter();
 		};
 	}
 
-	// hard mode. this is where it gets ugly — the value in the child should
-	// synchronize with the parent, but it should also be possible to temporarily
-	// set the value to something else locally.
-	var from_child = false;
-	var was_from_child = false;
-
-	// The derived returns the current value. The underlying mutable
-	// source is written to from various places to persist this value.
-	var inner_current_value = mutable_source(prop_value);
-	var current_value = derived(() => {
-		var parent_value = getter();
-		var child_value = get(inner_current_value);
-
-		if (from_child) {
-			from_child = false;
-			was_from_child = true;
-			return child_value;
-		}
-
-		was_from_child = false;
-		return (inner_current_value.v = parent_value);
-	});
-
-	// Ensure we eagerly capture the initial value if it's bindable
-	if (bindable) {
-		get(current_value);
-	}
+	// prop is written to, but there's no binding, which means we
+	// create a derived that we can write to locally
+	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(getter);
 
-	if (!immutable) current_value.equals = safe_equals;
+	// Capture the initial value if it's bindable
+	if (bindable) get(d);
 
 	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
-		// legacy nonsense — need to ensure the source is invalidated when necessary
-		// also needed for when handling inspect logic so we can inspect the correct source signal
-		if (captured_signals !== null) {
-			// set this so that we don't reset to the parent value if `d`
-			// is invalidated because of `invalidate_inner_signals` (rather
-			// than because the parent or child value changed)
-			from_child = was_from_child;
-			// invoke getters so that signals are picked up by `invalidate_inner_signals`
-			getter();
-			get(inner_current_value);
-		}
-
 		if (arguments.length > 0) {
-			const new_value = mutation ? get(current_value) : runes && bindable ? proxy(value) : value;
-
-			if (!current_value.equals(new_value)) {
-				from_child = true;
-				set(inner_current_value, new_value);
-				// To ensure the fallback value is consistent when used with proxies, we
-				// update the local fallback_value, but only if the fallback is actively used
-				if (fallback_used && fallback_value !== undefined) {
-					fallback_value = new_value;
-				}
+			const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
 
-				if (has_destroyed_component_ctx(current_value)) {
-					return value;
-				}
+			set(d, new_value);
 
-				untrack(() => get(current_value)); // force a synchronisation immediately
+			if (fallback_value !== undefined) {
+				fallback_value = new_value;
 			}
 
 			return value;
 		}
 
-		if (has_destroyed_component_ctx(current_value)) {
-			return current_value.v;
+		// TODO is this still necessary post-#16263?
+		if (has_destroyed_component_ctx(d)) {
+			return d.v;
 		}
 
-		return get(current_value);
+		return get(d);
 	};
 }
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 3e70537d7c..5a798ba3e9 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -20,7 +20,6 @@ import {
 	STATE_SYMBOL,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
-	LEGACY_DERIVED_PROP,
 	DISCONNECTED,
 	EFFECT_IS_UPDATING,
 	STALE_REACTION
@@ -863,17 +862,7 @@ export function invalidate_inner_signals(fn) {
 	var captured = capture_signals(() => untrack(fn));
 
 	for (var signal of captured) {
-		// Go one level up because derived signals created as part of props in legacy mode
-		if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
-			for (const dep of /** @type {Derived} */ (signal).deps || []) {
-				if ((dep.f & DERIVED) === 0) {
-					// Use internal_set instead of set here and below to avoid mutation validation
-					internal_set(dep, dep.v);
-				}
-			}
-		} else {
-			internal_set(signal, signal.v);
-		}
+		internal_set(signal, signal.v);
 	}
 }
 

From 2f68131e9a780f139d6bdcf1b27854d850542671 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 1 Jul 2025 23:10:16 +0200
Subject: [PATCH 182/259] fix: revert props legacy mode regression (#16279)

#16270 removed a condition which seemed to keep passing the corresponding test, but it actually introduced a regression since the PROPS_IS_UPDATED is always set when accessors should be created, which is the case by default in legacy mode tests. Setting accessors to false in the test reveals the regression, so this reverts that part of the refactoring
---
 packages/svelte/src/internal/client/reactivity/props.js   | 8 +++++---
 .../runtime-legacy/samples/prop-no-change/_config.js      | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index f51291b1cc..3501bcd3c7 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -336,7 +336,7 @@ export function prop(props, key, flags, fallback) {
 	}
 
 	// prop is never written to — we only need a getter
-	if ((flags & PROPS_IS_UPDATED) === 0) {
+	if (runes && (flags & PROPS_IS_UPDATED) === 0) {
 		return getter;
 	}
 
@@ -362,8 +362,10 @@ export function prop(props, key, flags, fallback) {
 		};
 	}
 
-	// prop is written to, but there's no binding, which means we
-	// create a derived that we can write to locally
+	// Either prop is written to, but there's no binding, which means we
+	// create a derived that we can write to locally.
+	// Or we are in legacy mode where we always create a derived to replicate that
+	// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
 	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(getter);
 
 	// Capture the initial value if it's bindable
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js b/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
index 905c2a6226..84658336e2 100644
--- a/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
@@ -2,6 +2,7 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	accessors: false,
 	test({ assert, logs, target }) {
 		assert.deepEqual(logs, ['primitive', 'object']);
 		target.querySelector('button')?.click();

From 9dddb31b4a9260a520d19e2955393da0aa1d7f3b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 2 Jul 2025 08:07:08 -0400
Subject: [PATCH 183/259] Version Packages (#16276)

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

diff --git a/.changeset/new-trees-behave.md b/.changeset/new-trees-behave.md
deleted file mode 100644
index d5fab30f3e..0000000000
--- a/.changeset/new-trees-behave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: simplify props
diff --git a/.changeset/short-fireants-flow.md b/.changeset/short-fireants-flow.md
deleted file mode 100644
index b9955ff577..0000000000
--- a/.changeset/short-fireants-flow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: add `getAbortSignal()`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index ef64091ca3..7589eda728 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.35.0
+
+### Minor Changes
+
+- feat: add `getAbortSignal()` ([#16266](https://github.com/sveltejs/svelte/pull/16266))
+
+### Patch Changes
+
+- chore: simplify props ([#16270](https://github.com/sveltejs/svelte/pull/16270))
+
 ## 5.34.9
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2d88d2a051..e8c28aeaa1 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.34.9",
+  "version": "5.35.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1c0aed6e87..baa2dbd046 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.34.9';
+export const VERSION = '5.35.0';
 export const PUBLIC_VERSION = '5';

From 32882a956bc1283063d6da52401ac02b0aedefdb Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 2 Jul 2025 14:12:25 +0200
Subject: [PATCH 184/259] feat: add parent hierarchy to `__svelte_meta` objects
 at dev time (#16255)

* feat: add parent hierarchy to `__svelte_meta` objects at dev time

This adds a `parent` property to the `__svelte_meta` properties that are added to elements at dev time. This property represents the closest non-element parent the element is related to. For example for `{#if ...}<div>foo</div>{/if}` the `parent` of the div would be the line/column of the if block.
The parent is recursive and goes upwards (through component boundaries) until the root component is reached, which has no parent.

part of #11389

* oops

* Apply suggestions from code review

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

* tweak

* original component tag

* make render appear in tree, keep tree in sync when rerenders occur

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/hot-buses-end.md                   |   5 +
 .../3-transform/client/visitors/AwaitBlock.js |   8 +-
 .../3-transform/client/visitors/EachBlock.js  |   4 +-
 .../3-transform/client/visitors/IfBlock.js    |   4 +-
 .../3-transform/client/visitors/KeyBlock.js   |   8 +-
 .../3-transform/client/visitors/RenderTag.js  |  14 +-
 .../client/visitors/shared/component.js       |  10 +-
 .../client/visitors/shared/utils.js           |  35 +++-
 packages/svelte/src/compiler/state.js         |   3 +
 .../svelte/src/internal/client/context.js     |  40 +++-
 .../src/internal/client/dev/elements.js       |   2 +
 .../src/internal/client/dom/blocks/await.js   |  16 +-
 .../client/dom/blocks/svelte-element.js       |   3 +-
 packages/svelte/src/internal/client/index.js  |   2 +-
 .../src/internal/client/reactivity/effects.js |   8 +-
 .../src/internal/client/reactivity/types.d.ts |  10 +-
 .../svelte/src/internal/client/runtime.js     |   9 +-
 .../svelte/src/internal/client/types.d.ts     |   9 +
 .../samples/svelte-meta-parent/_config.js     | 186 ++++++++++++++++++
 .../samples/svelte-meta-parent/child.svelte   |   1 +
 .../samples/svelte-meta-parent/main.svelte    |  50 +++++
 .../svelte-meta-parent/passthrough.svelte     |   9 +
 22 files changed, 408 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/hot-buses-end.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte

diff --git a/.changeset/hot-buses-end.md b/.changeset/hot-buses-end.md
new file mode 100644
index 0000000000..dd5a28fca8
--- /dev/null
+++ b/.changeset/hot-buses-end.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add parent hierarchy to `__svelte_meta` objects
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index 7873cf3ddb..c550c8e17b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -5,7 +5,7 @@ import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
-import { build_expression } from './shared/utils.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
@@ -54,7 +54,7 @@ export function AwaitBlock(node, context) {
 	}
 
 	context.state.init.push(
-		b.stmt(
+		add_svelte_meta(
 			b.call(
 				'$.await',
 				context.state.node,
@@ -64,7 +64,9 @@ export function AwaitBlock(node, context) {
 					: b.null,
 				then_block,
 				catch_block
-			)
+			),
+			node,
+			'await'
 		)
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 201c4b278f..353927b865 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
@@ -13,7 +13,7 @@ import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { get_value } from './shared/declarations.js';
-import { build_expression } from './shared/utils.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -337,7 +337,7 @@ export function EachBlock(node, context) {
 		);
 	}
 
-	context.state.init.push(b.stmt(b.call('$.each', ...args)));
+	context.state.init.push(add_svelte_meta(b.call('$.each', ...args), node, 'each'));
 }
 
 /**
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 deab040e50..cfd2bb7b09 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
@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
-import { build_expression } from './shared/utils.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
@@ -74,7 +74,7 @@ export function IfBlock(node, context) {
 		args.push(b.id('$$elseif'));
 	}
 
-	statements.push(b.stmt(b.call('$.if', ...args)));
+	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
 
 	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 2f17479c7e..3add1fbe93 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
@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
-import { build_expression } from './shared/utils.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.KeyBlock} node
@@ -15,6 +15,10 @@ export function KeyBlock(node, context) {
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
 	context.state.init.push(
-		b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
+		add_svelte_meta(
+			b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)),
+			node,
+			'key'
+		)
 	);
 }
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 c3615d9d50..7f1a4ae7ba 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
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { build_expression } from './shared/utils.js';
+import { add_svelte_meta, build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -48,16 +48,22 @@ export function RenderTag(node, context) {
 		}
 
 		context.state.init.push(
-			b.stmt(b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args))
+			add_svelte_meta(
+				b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args),
+				node,
+				'render'
+			)
 		);
 	} else {
 		context.state.init.push(
-			b.stmt(
+			add_svelte_meta(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
 					snippet_function,
 					context.state.node,
 					...args
-				)
+				),
+				node,
+				'render'
 			)
 		);
 	}
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 cb6e4de478..aa3704b50b 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,7 +4,12 @@
 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 } from '../shared/utils.js';
+import {
+	build_bind_this,
+	memoize_expression,
+	validate_binding,
+	add_svelte_meta
+} 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';
@@ -483,7 +488,8 @@ export function build_component(node, component_name, context) {
 		);
 	} else {
 		context.state.template.push_comment();
-		statements.push(b.stmt(fn(anchor)));
+
+		statements.push(add_svelte_meta(fn(anchor), node, 'component', { componentTag: node.name }));
 	}
 
 	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 b80466ccc9..de74fede0c 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
@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, Expression, ExpressionStatement, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression, Pattern } from 'estree' */
+/** @import { AssignmentExpression, Expression, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression, ExpressionStatement } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext, Context } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -7,7 +7,7 @@ import * as b from '#compiler/builders';
 import { sanitize_template_string } from '../../../../../utils/sanitize_template_string.js';
 import { regex_is_valid_identifier } from '../../../../patterns.js';
 import is_reference from 'is-reference';
-import { dev, is_ignored, locator } from '../../../../../state.js';
+import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
 import { build_getter, create_derived } from '../../utils.js';
 
 /**
@@ -424,3 +424,34 @@ export function build_expression(context, expression, metadata, state = context.
 
 	return sequence;
 }
+
+/**
+ * Wraps a statement/expression with dev stack tracking in dev mode
+ * @param {Expression} expression - The function call to wrap (e.g., $.if, $.each, etc.)
+ * @param {{ start?: number }} node - AST node for location info
+ * @param {'component' | 'if' | 'each' | 'await' | 'key' | 'render'} type - Type of block/component
+ * @param {Record<string, number | string>} [additional] - Any additional properties to add to the dev stack entry
+ * @returns {ExpressionStatement} - Statement with or without dev stack wrapping
+ */
+export function add_svelte_meta(expression, node, type, additional) {
+	if (!dev) {
+		return b.stmt(expression);
+	}
+
+	const location = node.start !== undefined && locator(node.start);
+	if (!location) {
+		return b.stmt(expression);
+	}
+
+	return b.stmt(
+		b.call(
+			'$.add_svelte_meta',
+			b.arrow([], expression),
+			b.literal(type),
+			b.id(component_name),
+			b.literal(location.line),
+			b.literal(location.column),
+			additional && b.object(Object.entries(additional).map(([k, v]) => b.init(k, b.literal(v))))
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 9095651ced..5eb25dd6bb 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -16,6 +16,9 @@ export let warnings = [];
  */
 export let filename;
 
+/**
+ * The name of the component that is used in the `export default function ...` statement.
+ */
 export let component_name = '<unknown>';
 
 /**
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index 7c7213b7a2..e4220149ab 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -1,4 +1,4 @@
-/** @import { ComponentContext } from '#client' */
+/** @import { ComponentContext, DevStackEntry } from '#client' */
 
 import { DEV } from 'esm-env';
 import { lifecycle_outside_component } from '../shared/errors.js';
@@ -11,6 +11,7 @@ import {
 } from './runtime.js';
 import { effect, teardown } from './reactivity/effects.js';
 import { legacy_mode_flag } from '../flags/index.js';
+import { FILENAME } from '../../constants.js';
 
 /** @type {ComponentContext | null} */
 export let component_context = null;
@@ -20,6 +21,43 @@ export function set_component_context(context) {
 	component_context = context;
 }
 
+/** @type {DevStackEntry | null} */
+export let dev_stack = null;
+
+/** @param {DevStackEntry | null} stack */
+export function set_dev_stack(stack) {
+	dev_stack = stack;
+}
+
+/**
+ * Execute a callback with a new dev stack entry
+ * @param {() => any} callback - Function to execute
+ * @param {DevStackEntry['type']} type - Type of block/component
+ * @param {any} component - Component function
+ * @param {number} line - Line number
+ * @param {number} column - Column number
+ * @param {Record<string, any>} [additional] - Any additional properties to add to the dev stack entry
+ * @returns {any}
+ */
+export function add_svelte_meta(callback, type, component, line, column, additional) {
+	const parent = dev_stack;
+
+	dev_stack = {
+		type,
+		file: component[FILENAME],
+		line,
+		column,
+		parent,
+		...additional
+	};
+
+	try {
+		return callback();
+	} finally {
+		dev_stack = parent;
+	}
+}
+
 /**
  * The current component function. Different from current component context:
  * ```html
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index f70f893d1e..8dd54e0a2a 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -2,6 +2,7 @@
 import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE } from '#client/constants';
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
 import { hydrating } from '../dom/hydration.js';
+import { dev_stack } from '../context.js';
 
 /**
  * @param {any} fn
@@ -28,6 +29,7 @@ export function add_locations(fn, filename, locations) {
 function assign_location(element, filename, location) {
 	// @ts-expect-error
 	element.__svelte_meta = {
+		parent: dev_stack,
 		loc: { file: filename, line: location[0], column: location[1] }
 	};
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 47df5fc9a5..325224fff2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -16,9 +16,11 @@ import { queue_micro_task } from '../task.js';
 import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
 import {
 	component_context,
+	dev_stack,
 	is_runes,
 	set_component_context,
-	set_dev_current_component_function
+	set_dev_current_component_function,
+	set_dev_stack
 } from '../../context.js';
 
 const PENDING = 0;
@@ -45,6 +47,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 
 	/** @type {any} */
 	var component_function = DEV ? component_context?.function : null;
+	var dev_original_stack = DEV ? dev_stack : null;
 
 	/** @type {V | Promise<V> | typeof UNINITIALIZED} */
 	var input = UNINITIALIZED;
@@ -75,7 +78,10 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			set_active_effect(effect);
 			set_active_reaction(effect); // TODO do we need both?
 			set_component_context(active_component_context);
-			if (DEV) set_dev_current_component_function(component_function);
+			if (DEV) {
+				set_dev_current_component_function(component_function);
+				set_dev_stack(dev_original_stack);
+			}
 		}
 
 		try {
@@ -107,7 +113,11 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			}
 		} finally {
 			if (restore) {
-				if (DEV) set_dev_current_component_function(null);
+				if (DEV) {
+					set_dev_current_component_function(null);
+					set_dev_stack(null);
+				}
+
 				set_component_context(null);
 				set_active_reaction(null);
 				set_active_effect(null);
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index ffa57b2d8b..231a3621b1 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -18,7 +18,7 @@ import {
 import { set_should_intro } from '../../render.js';
 import { current_each_item, set_current_each_item } from './each.js';
 import { active_effect } from '../../runtime.js';
-import { component_context } from '../../context.js';
+import { component_context, dev_stack } from '../../context.js';
 import { DEV } from 'esm-env';
 import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
@@ -107,6 +107,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				if (DEV && location) {
 					// @ts-expect-error
 					element.__svelte_meta = {
+						parent: dev_stack,
 						loc: {
 							file: filename,
 							line: location[0],
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 60f9af9120..576a30fa77 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,6 +1,6 @@
 export { createAttachmentKey as attachment } from '../../attachments/index.js';
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
-export { push, pop } from './context.js';
+export { push, pop, add_svelte_meta } from './context.js';
 export { assign, assign_and, assign_or, assign_nullish } from './dev/assign.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index a2806bde81..a2de8940a6 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -41,7 +41,7 @@ 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 } from '../context.js';
+import { component_context, dev_current_component_function, dev_stack } from '../context.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -359,7 +359,11 @@ export function template_effect(fn, thunks = [], d = derived) {
  * @param {number} flags
  */
 export function block(fn, flags = 0) {
-	return create_effect(RENDER_EFFECT | BLOCK_EFFECT | flags, fn, true);
+	var effect = create_effect(RENDER_EFFECT | BLOCK_EFFECT | flags, fn, true);
+	if (DEV) {
+		effect.dev_stack = dev_stack;
+	}
+	return effect;
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 88c84f27fe..80c4155705 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -1,4 +1,10 @@
-import type { ComponentContext, Dom, Equals, TemplateNode, TransitionManager } from '#client';
+import type {
+	ComponentContext,
+	DevStackEntry,
+	Equals,
+	TemplateNode,
+	TransitionManager
+} from '#client';
 
 export interface Signal {
 	/** Flags bitmask */
@@ -80,6 +86,8 @@ export interface Effect extends Reaction {
 	parent: Effect | null;
 	/** Dev only */
 	component_function?: any;
+	/** Dev only. Only set for certain block effects. Contains a reference to the stack that represents the render tree */
+	dev_stack?: DevStackEntry | null;
 }
 
 export type Source<V = unknown> = Value<V>;
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 5a798ba3e9..8e6242447e 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -34,12 +34,13 @@ import { tracing_expressions, get_stack } from './dev/tracing.js';
 import {
 	component_context,
 	dev_current_component_function,
+	dev_stack,
 	is_runes,
 	set_component_context,
-	set_dev_current_component_function
+	set_dev_current_component_function,
+	set_dev_stack
 } from './context.js';
 import { handle_error, invoke_error_boundary } from './error-handling.js';
-import { snapshot } from '../shared/clone.js';
 
 let is_flushing = false;
 
@@ -444,6 +445,9 @@ export function update_effect(effect) {
 	if (DEV) {
 		var previous_component_fn = dev_current_component_function;
 		set_dev_current_component_function(effect.component_function);
+		var previous_stack = /** @type {any} */ (dev_stack);
+		// only block effects have a dev stack, keep the current one otherwise
+		set_dev_stack(effect.dev_stack ?? dev_stack);
 	}
 
 	try {
@@ -478,6 +482,7 @@ export function update_effect(effect) {
 
 		if (DEV) {
 			set_dev_current_component_function(previous_component_fn);
+			set_dev_stack(previous_stack);
 		}
 	}
 }
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index 9703c2aac1..0b7310e172 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -187,4 +187,13 @@ export type SourceLocation =
 	| [line: number, column: number]
 	| [line: number, column: number, SourceLocation[]];
 
+export interface DevStackEntry {
+	file: string;
+	type: 'component' | 'if' | 'each' | 'await' | 'key' | 'render';
+	line: number;
+	column: number;
+	parent: DevStackEntry | null;
+	componentTag?: string;
+}
+
 export * from './reactivity/types';
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js
new file mode 100644
index 0000000000..eba85d5098
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js
@@ -0,0 +1,186 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+	compileOptions: {
+		dev: true
+	},
+	html: `
+		<p>no parent</p>
+		<button>toggle</button>
+		<p>if</p>
+		<p>each</p>
+		<p>loading</p>
+		<p>key</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+	`,
+
+	async test({ target, assert }) {
+		function check() {
+			const [main, if_, each, await_, key, child1, child2, child3, child4, dynamic] =
+				target.querySelectorAll('p');
+
+			// @ts-expect-error
+			assert.deepEqual(main.__svelte_meta.parent, null);
+
+			// @ts-expect-error
+			assert.deepEqual(if_.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'if',
+				line: 12,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(each.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'each',
+				line: 16,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(await_.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'await',
+				line: 20,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(key.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'key',
+				line: 26,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child1.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 30,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child2.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 33,
+				column: 1,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'render',
+					line: 5,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 32,
+						column: 0,
+						parent: null
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child3.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 38,
+				column: 2,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'render',
+					line: 5,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 37,
+						column: 1,
+						parent: {
+							file: 'passthrough.svelte',
+							type: 'render',
+							line: 5,
+							column: 0,
+							parent: {
+								file: 'main.svelte',
+								type: 'component',
+								componentTag: 'Passthrough',
+								line: 36,
+								column: 0,
+								parent: null
+							}
+						}
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child4.__svelte_meta.parent, {
+				file: 'passthrough.svelte',
+				type: 'render',
+				line: 8,
+				column: 1,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'if',
+					line: 7,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 43,
+						column: 1,
+						parent: {
+							file: 'main.svelte',
+							type: 'if',
+							line: 42,
+							column: 0,
+							parent: null
+						}
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(dynamic.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'x.y',
+				line: 50,
+				column: 0,
+				parent: null
+			});
+		}
+
+		await tick();
+		check();
+
+		// Test that stack is kept when re-rendering
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+		button?.click();
+		await tick();
+		check();
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte
new file mode 100644
index 0000000000..0df6def593
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte
@@ -0,0 +1 @@
+<p>hi</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte
new file mode 100644
index 0000000000..b9bd46d8f7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte
@@ -0,0 +1,50 @@
+<script>
+	import Child from "./child.svelte";
+	import Passthrough from "./passthrough.svelte";
+	let x = { y: Child }
+	let key = 'test';
+	let show = $state(true);
+</script>
+
+<p>no parent</p>
+<button onclick={() => show = !show}>toggle</button>
+
+{#if true}
+	<p>if</p>
+{/if}
+
+{#each [1]}
+	<p>each</p>
+{/each}
+
+{#await Promise.resolve()}
+	<p>loading</p>
+{:then}
+	<p>await</p>
+{/await}
+
+{#key key}
+	<p>key</p>
+{/key} 
+
+<Child />
+
+<Passthrough>
+	<Child />
+</Passthrough>
+
+<Passthrough>
+	<Passthrough>
+		<Child />
+	</Passthrough>
+</Passthrough>
+
+{#if show}
+	<Passthrough>
+		{#snippet named()}
+			<p>hi</p>
+		{/snippet}
+	</Passthrough>
+{/if}
+
+<x.y />
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte
new file mode 100644
index 0000000000..70ba81a4c1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { children, named } = $props();
+</script>
+
+{@render children?.()}
+
+{#if true}
+	{@render named?.()}
+{/if}

From 49cba86e9b604f66bcd037e5eeb7a27788510b3b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 2 Jul 2025 11:19:51 -0400
Subject: [PATCH 185/259] chore: rename EFFECT_HAS_DERIVED to EFFECT_PRESERVED
 (#16283)

---
 packages/svelte/src/internal/client/constants.js           | 2 +-
 packages/svelte/src/internal/client/reactivity/deriveds.js | 4 ++--
 packages/svelte/src/internal/client/reactivity/effects.js  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index cd5e0d2244..38db28fecf 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -17,7 +17,7 @@ export const EFFECT_RAN = 1 << 15;
 export const EFFECT_TRANSPARENT = 1 << 16;
 export const INSPECT_EFFECT = 1 << 18;
 export const HEAD_EFFECT = 1 << 19;
-export const EFFECT_HAS_DERIVED = 1 << 20;
+export const EFFECT_PRESERVED = 1 << 20;
 export const EFFECT_IS_UPDATING = 1 << 21;
 
 export const STATE_SYMBOL = Symbol('$state');
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index d3123d24a1..fdfc13c0e2 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -1,6 +1,6 @@
 /** @import { Derived, Effect } from '#client' */
 import { DEV } from 'esm-env';
-import { CLEAN, DERIVED, DIRTY, EFFECT_HAS_DERIVED, MAYBE_DIRTY, UNOWNED } from '#client/constants';
+import { CLEAN, DERIVED, DIRTY, EFFECT_PRESERVED, MAYBE_DIRTY, UNOWNED } from '#client/constants';
 import {
 	active_reaction,
 	active_effect,
@@ -38,7 +38,7 @@ export function derived(fn) {
 	} else {
 		// Since deriveds are evaluated lazily, any effects created inside them are
 		// created too late to ensure that the parent effect is added to the tree
-		active_effect.f |= EFFECT_HAS_DERIVED;
+		active_effect.f |= EFFECT_PRESERVED;
 	}
 
 	/** @type {Derived<V>} */
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index a2de8940a6..702c410ce8 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -31,7 +31,7 @@ import {
 	INSPECT_EFFECT,
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
-	EFFECT_HAS_DERIVED,
+	EFFECT_PRESERVED,
 	BOUNDARY_EFFECT,
 	STALE_REACTION
 } from '#client/constants';
@@ -135,7 +135,7 @@ function create_effect(type, fn, sync, push = true) {
 		effect.first === null &&
 		effect.nodes_start === null &&
 		effect.teardown === null &&
-		(effect.f & (EFFECT_HAS_DERIVED | BOUNDARY_EFFECT)) === 0;
+		(effect.f & (EFFECT_PRESERVED | BOUNDARY_EFFECT)) === 0;
 
 	if (!inert && push) {
 		if (parent !== null) {

From 7914cb183554b16627bec40c8e91b163beaf0480 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 2 Jul 2025 12:16:53 -0400
Subject: [PATCH 186/259] chore: convert boundary implementation to a class
 (#16284)

* WIP class boundaries

* WIP

* WIP

* WIP

* unused

* unused

* unused
---
 .../internal/client/dom/blocks/boundary.js    | 233 +++++++++++-------
 .../src/internal/client/error-handling.js     |   4 +-
 .../src/internal/client/reactivity/effects.js |   1 +
 .../src/internal/client/reactivity/types.d.ts |   3 +
 4 files changed, 149 insertions(+), 92 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index d7a53da1d1..03cec4fd2f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,6 +1,5 @@
 /** @import { Effect, TemplateNode, } from '#client' */
-
-import { BOUNDARY_EFFECT, EFFECT_TRANSPARENT } from '#client/constants';
+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';
 import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
@@ -21,116 +20,170 @@ import {
 import { queue_micro_task } from '../task.js';
 
 /**
- * @param {Effect} boundary
- * @param {() => void} fn
+ * @typedef {{
+ * 	 onerror?: (error: unknown, reset: () => void) => void;
+ *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
+ * }} BoundaryProps
  */
-function with_boundary(boundary, fn) {
-	var previous_effect = active_effect;
-	var previous_reaction = active_reaction;
-	var previous_ctx = component_context;
-
-	set_active_effect(boundary);
-	set_active_reaction(boundary);
-	set_component_context(boundary.ctx);
-
-	try {
-		fn();
-	} finally {
-		set_active_effect(previous_effect);
-		set_active_reaction(previous_reaction);
-		set_component_context(previous_ctx);
-	}
-}
+
+var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
 
 /**
  * @param {TemplateNode} node
- * @param {{
- * 	 onerror?: (error: unknown, reset: () => void) => void,
- *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void
- * }} props
- * @param {((anchor: Node) => void)} boundary_fn
+ * @param {BoundaryProps} props
+ * @param {((anchor: Node) => void)} children
  * @returns {void}
  */
-export function boundary(node, props, boundary_fn) {
-	var anchor = node;
+export function boundary(node, props, children) {
+	new Boundary(node, props, children);
+}
+
+export class Boundary {
+	/** @type {TemplateNode} */
+	#anchor;
+
+	/** @type {TemplateNode} */
+	#hydrate_open;
+
+	/** @type {BoundaryProps} */
+	#props;
+
+	/** @type {((anchor: Node) => void)} */
+	#children;
 
 	/** @type {Effect} */
-	var boundary_effect;
-
-	block(() => {
-		var boundary = /** @type {Effect} */ (active_effect);
-		var hydrate_open = hydrate_node;
-		var is_creating_fallback = false;
-
-		// We re-use the effect's fn property to avoid allocation of an additional field
-		boundary.fn = (/** @type {unknown}} */ error) => {
-			var onerror = props.onerror;
-			let failed = props.failed;
-
-			// If we have nothing to capture the error, or if we hit an error while
-			// rendering the fallback, re-throw for another boundary to handle
-			if ((!onerror && !failed) || is_creating_fallback) {
-				throw error;
-			}
+	#effect;
 
-			var reset = () => {
-				pause_effect(boundary_effect);
+	/** @type {Effect | null} */
+	#main_effect = null;
 
-				with_boundary(boundary, () => {
-					is_creating_fallback = false;
-					boundary_effect = branch(() => boundary_fn(anchor));
-				});
-			};
+	/** @type {Effect | null} */
+	#failed_effect = null;
 
-			var previous_reaction = active_reaction;
+	#is_creating_fallback = false;
 
-			try {
-				set_active_reaction(null);
-				onerror?.(error, reset);
-			} finally {
-				set_active_reaction(previous_reaction);
+	/**
+	 * @param {TemplateNode} node
+	 * @param {BoundaryProps} props
+	 * @param {((anchor: Node) => void)} children
+	 */
+	constructor(node, props, children) {
+		this.#anchor = node;
+		this.#props = props;
+		this.#children = children;
+
+		this.#hydrate_open = hydrate_node;
+
+		this.#effect = block(() => {
+			/** @type {Effect} */ (active_effect).b = this;
+
+			if (hydrating) {
+				hydrate_next();
 			}
 
-			if (boundary_effect) {
-				destroy_effect(boundary_effect);
-			} else if (hydrating) {
-				set_hydrate_node(hydrate_open);
-				next();
-				set_hydrate_node(remove_nodes());
+			try {
+				this.#main_effect = branch(() => children(this.#anchor));
+			} catch (error) {
+				this.error(error);
 			}
+		}, flags);
 
-			if (failed) {
-				// Render the `failed` snippet in a microtask
-				queue_micro_task(() => {
-					with_boundary(boundary, () => {
-						is_creating_fallback = true;
-
-						try {
-							boundary_effect = branch(() => {
-								failed(
-									anchor,
-									() => error,
-									() => reset
-								);
-							});
-						} catch (error) {
-							invoke_error_boundary(error, /** @type {Effect} */ (boundary.parent));
-						}
-
-						is_creating_fallback = false;
-					});
+		if (hydrating) {
+			this.#anchor = hydrate_node;
+		}
+	}
+
+	/**
+	 * @param {() => Effect | null} fn
+	 */
+	#run(fn) {
+		var previous_effect = active_effect;
+		var previous_reaction = active_reaction;
+		var previous_ctx = component_context;
+
+		set_active_effect(this.#effect);
+		set_active_reaction(this.#effect);
+		set_component_context(this.#effect.ctx);
+
+		try {
+			return fn();
+		} finally {
+			set_active_effect(previous_effect);
+			set_active_reaction(previous_reaction);
+			set_component_context(previous_ctx);
+		}
+	}
+
+	/** @param {unknown} error */
+	error(error) {
+		var onerror = this.#props.onerror;
+		let failed = this.#props.failed;
+
+		const reset = () => {
+			if (this.#failed_effect !== null) {
+				pause_effect(this.#failed_effect, () => {
+					this.#failed_effect = null;
 				});
 			}
+
+			this.#main_effect = this.#run(() => {
+				this.#is_creating_fallback = false;
+				return branch(() => this.#children(this.#anchor));
+			});
 		};
 
-		if (hydrating) {
-			hydrate_next();
+		// If we have nothing to capture the error, or if we hit an error while
+		// rendering the fallback, re-throw for another boundary to handle
+		if (this.#is_creating_fallback || (!onerror && !failed)) {
+			throw error;
+		}
+
+		var previous_reaction = active_reaction;
+
+		try {
+			set_active_reaction(null);
+			onerror?.(error, reset);
+		} finally {
+			set_active_reaction(previous_reaction);
 		}
 
-		boundary_effect = branch(() => boundary_fn(anchor));
-	}, EFFECT_TRANSPARENT | BOUNDARY_EFFECT);
+		if (this.#main_effect) {
+			destroy_effect(this.#main_effect);
+			this.#main_effect = null;
+		}
 
-	if (hydrating) {
-		anchor = hydrate_node;
+		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(() => {
+					this.#is_creating_fallback = true;
+
+					try {
+						return branch(() => {
+							failed(
+								this.#anchor,
+								() => error,
+								() => reset
+							);
+						});
+					} catch (error) {
+						invoke_error_boundary(error, /** @type {Effect} */ (this.#effect.parent));
+						return null;
+					} finally {
+						this.#is_creating_fallback = false;
+					}
+				});
+			});
+		}
 	}
 }
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index 99f3ed6cd4..378f7408ef 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -1,4 +1,5 @@
 /** @import { 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';
@@ -39,8 +40,7 @@ export function invoke_error_boundary(error, effect) {
 	while (effect !== null) {
 		if ((effect.f & BOUNDARY_EFFECT) !== 0) {
 			try {
-				// @ts-expect-error
-				effect.fn(error);
+				/** @type {Boundary} */ (effect.b).error(error);
 				return;
 			} catch {}
 		}
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 702c410ce8..7570064c37 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -104,6 +104,7 @@ function create_effect(type, fn, sync, push = true) {
 		last: null,
 		next: null,
 		parent,
+		b: parent && parent.b,
 		prev: null,
 		teardown: null,
 		transitions: null,
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 80c4155705..90f922df68 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -5,6 +5,7 @@ import type {
 	TemplateNode,
 	TransitionManager
 } from '#client';
+import type { Boundary } from '../dom/blocks/boundary';
 
 export interface Signal {
 	/** Flags bitmask */
@@ -84,6 +85,8 @@ export interface Effect extends Reaction {
 	last: null | Effect;
 	/** Parent effect */
 	parent: Effect | null;
+	/** The boundary this effect belongs to */
+	b: Boundary | null;
 	/** Dev only */
 	component_function?: any;
 	/** Dev only. Only set for certain block effects. Contains a reference to the stack that represents the render tree */

From dde791311d3c6a7b28e276548e6beb45a9f2e798 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 2 Jul 2025 13:06:45 -0400
Subject: [PATCH 187/259] chore: minor tweaks (#16285)

---
 packages/svelte/src/internal/client/constants.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 38db28fecf..1cffa43940 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -15,17 +15,17 @@ export const DESTROYED = 1 << 14;
 export const EFFECT_RAN = 1 << 15;
 /** 'Transparent' effects do not create a transition boundary */
 export const EFFECT_TRANSPARENT = 1 << 16;
-export const INSPECT_EFFECT = 1 << 18;
-export const HEAD_EFFECT = 1 << 19;
-export const EFFECT_PRESERVED = 1 << 20;
-export const EFFECT_IS_UPDATING = 1 << 21;
+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 STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 export const PROXY_PATH_SYMBOL = Symbol('proxy path');
 
-// allow users to ignore aborted signal errors if `reason.stale`
+/** allow users to ignore aborted signal errors if `reason.name === 'StaleReactionError` */
 export const STALE_REACTION = new (class StaleReactionError extends Error {
 	name = 'StaleReactionError';
 	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';

From 5ebbedf2051715f1df10a884976d7d23b1d7f5fc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:18:28 +0200
Subject: [PATCH 188/259] Version Packages (#16281)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/hot-buses-end.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/hot-buses-end.md

diff --git a/.changeset/hot-buses-end.md b/.changeset/hot-buses-end.md
deleted file mode 100644
index dd5a28fca8..0000000000
--- a/.changeset/hot-buses-end.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-feat: add parent hierarchy to `__svelte_meta` objects
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7589eda728..fb5d43c9dd 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.35.1
+
+### Patch Changes
+
+- feat: add parent hierarchy to `__svelte_meta` objects ([#16255](https://github.com/sveltejs/svelte/pull/16255))
+
 ## 5.35.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e8c28aeaa1..b1e57b9829 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.0",
+  "version": "5.35.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index baa2dbd046..2efcf03eb1 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.0';
+export const VERSION = '5.35.1';
 export const PUBLIC_VERSION = '5';

From eeb32a50d14d2ac69970b0e207746092a34d2fc3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Jul 2025 11:47:26 -0400
Subject: [PATCH 189/259] fix: bump esrap (#16295)

---
 .changeset/fifty-hats-watch.md |  5 +++++
 packages/svelte/package.json   |  2 +-
 pnpm-lock.yaml                 | 10 +++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fifty-hats-watch.md

diff --git a/.changeset/fifty-hats-watch.md b/.changeset/fifty-hats-watch.md
new file mode 100644
index 0000000000..83bb72e735
--- /dev/null
+++ b/.changeset/fifty-hats-watch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: bump esrap
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b1e57b9829..b6776a8fbc 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -171,7 +171,7 @@
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.1",
-    "esrap": "^2.0.0",
+    "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7fb655b2d..87fb2b2667 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,8 +87,8 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -1261,8 +1261,8 @@ packages:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
 
-  esrap@2.0.0:
-    resolution: {integrity: sha512-zhw1TDqno99Ld5wOpe0t47rzVyxfGc1fvxNzPsqk4idUf5dcAePkAyfTceLJaSTytjiWDu26S5tI+grjvymXJA==}
+  esrap@2.1.0:
+    resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -3622,7 +3622,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@2.0.0:
+  esrap@2.1.0:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 

From 220e901a825a23df7c310cd5978d3141e573e645 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 3 Jul 2025 11:50:58 -0400
Subject: [PATCH 190/259] Version Packages (#16297)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/fifty-hats-watch.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/fifty-hats-watch.md

diff --git a/.changeset/fifty-hats-watch.md b/.changeset/fifty-hats-watch.md
deleted file mode 100644
index 83bb72e735..0000000000
--- a/.changeset/fifty-hats-watch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: bump esrap
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index fb5d43c9dd..ad72bfabb0 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.35.2
+
+### Patch Changes
+
+- fix: bump esrap ([#16295](https://github.com/sveltejs/svelte/pull/16295))
+
 ## 5.35.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b6776a8fbc..872c21a179 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.1",
+  "version": "5.35.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2efcf03eb1..47c354c7a2 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.1';
+export const VERSION = '5.35.2';
 export const PUBLIC_VERSION = '5';

From 432763a03ebcb4c03e7c5084cb52aac6f1afaa22 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Jul 2025 12:11:28 -0400
Subject: [PATCH 191/259] chore: `reaction_sources` -> `source_ownership`
 (#16287)

* reaction_sources -> source_ownership

* put equality statements first, it's faster
---
 .../src/internal/client/reactivity/sources.js |  4 +--
 .../svelte/src/internal/client/runtime.js     | 28 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 0db3530232..a86ccfee4f 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,
-	reaction_sources,
+	source_ownership,
 	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 &&
-		!(reaction_sources?.[1].includes(source) && reaction_sources[0] === active_reaction)
+		!(source_ownership?.reaction === active_reaction && source_ownership.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 8e6242447e..fce6c78b56 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -86,17 +86,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 | [active_reaction: Reaction, sources: Source[]]}
+ * @type {null | { reaction: Reaction, sources: Source[] }}
  */
-export let reaction_sources = null;
+export let source_ownership = null;
 
 /** @param {Value} value */
 export function push_reaction_value(value) {
 	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
-		if (reaction_sources === null) {
-			reaction_sources = [active_reaction, [value]];
+		if (source_ownership === null) {
+			source_ownership = { reaction: active_reaction, sources: [value] };
 		} else {
-			reaction_sources[1].push(value);
+			source_ownership.sources.push(value);
 		}
 	}
 }
@@ -235,7 +235,12 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	for (var i = 0; i < reactions.length; i++) {
 		var reaction = reactions[i];
 
-		if (reaction_sources?.[1].includes(signal) && reaction_sources[0] === active_reaction) continue;
+		if (
+			source_ownership?.reaction === active_reaction &&
+			source_ownership.sources.includes(signal)
+		) {
+			continue;
+		}
 
 		if ((reaction.f & DERIVED) !== 0) {
 			schedule_possible_effect_self_invalidation(/** @type {Derived} */ (reaction), effect, false);
@@ -257,7 +262,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 = reaction_sources;
+	var previous_reaction_sources = source_ownership;
 	var previous_component_context = component_context;
 	var previous_untracking = untracking;
 
@@ -270,7 +275,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;
 
-	reaction_sources = null;
+	source_ownership = null;
 	set_component_context(reaction.ctx);
 	untracking = false;
 	read_version++;
@@ -358,7 +363,7 @@ export function update_reaction(reaction) {
 		untracked_writes = previous_untracked_writes;
 		active_reaction = previous_reaction;
 		skip_reaction = previous_skip_reaction;
-		reaction_sources = previous_reaction_sources;
+		source_ownership = previous_reaction_sources;
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
 
@@ -739,7 +744,10 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (!reaction_sources?.[1].includes(signal) || reaction_sources[0] !== active_reaction) {
+		if (
+			source_ownership?.reaction !== active_reaction ||
+			!source_ownership?.sources.includes(signal)
+		) {
 			var deps = active_reaction.deps;
 			if (signal.rv < read_version) {
 				signal.rv = read_version;

From c3348aea06b5dcc13159b96053351f36d6cb6d71 Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Fri, 4 Jul 2025 17:54:37 +0300
Subject: [PATCH 192/259] fix: do not proxify the value assigned to a derived
 (#16302)

---
 .changeset/new-wolves-punch.md                |  5 ++++
 .../client/visitors/AssignmentExpression.js   |  1 +
 .../samples/writable-derived-4/_config.js     | 23 +++++++++++++++++++
 .../samples/writable-derived-4/main.svelte    |  9 ++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 .changeset/new-wolves-punch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte

diff --git a/.changeset/new-wolves-punch.md b/.changeset/new-wolves-punch.md
new file mode 100644
index 0000000000..c856038cbc
--- /dev/null
+++ b/.changeset/new-wolves-punch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not proxify the value assigned to a derived
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index ce190814f8..7d64d60bca 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -137,6 +137,7 @@ function build_assignment(operator, left, right, context) {
 				binding.kind !== 'prop' &&
 				binding.kind !== 'bindable_prop' &&
 				binding.kind !== 'raw_state' &&
+				binding.kind !== 'derived' &&
 				binding.kind !== 'store_sub' &&
 				context.state.analysis.runes &&
 				should_proxy(right, context.state.scope) &&
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js
new file mode 100644
index 0000000000..8d312ca73a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.getElementsByTagName('button');
+		const [div] = target.getElementsByTagName('div');
+
+		flushSync(() => btn1.click());
+		assert.equal(div.textContent, '1');
+		flushSync(() => btn2.click());
+		assert.equal(div.textContent, '1');
+		flushSync(() => btn3.click());
+		assert.equal(div.textContent, '2');
+
+		flushSync(() => btn1.click());
+		assert.equal(div.textContent, '2');
+		flushSync(() => btn2.click());
+		assert.equal(div.textContent, '2');
+		flushSync(() => btn3.click());
+		assert.equal(div.textContent, '3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte
new file mode 100644
index 0000000000..a24f69ba77
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let count = $derived({ value: 1 });
+</script>
+
+<button onclick={() => count.value++}>mutate</button>
+<button onclick={() => count = count}>assign self</button>
+<button onclick={() => count = {...count} }>assign copy</button>
+
+<div>{count.value}</div>

From 834cd91b367172859b26d35a23aad4e87800b881 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 6 Jul 2025 14:57:45 +0200
Subject: [PATCH 193/259] fix: account for mounting when `select_option` in
 `attribute_effect` (#16309)

---
 .changeset/curvy-carrots-prove.md                        | 5 +++++
 .../src/internal/client/dom/elements/attributes.js       | 5 +++--
 .../samples/select-spread-option-selected/_config.js     | 9 +++++++++
 .../samples/select-spread-option-selected/main.svelte    | 8 ++++++++
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/curvy-carrots-prove.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte

diff --git a/.changeset/curvy-carrots-prove.md b/.changeset/curvy-carrots-prove.md
new file mode 100644
index 0000000000..7723990179
--- /dev/null
+++ b/.changeset/curvy-carrots-prove.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for mounting when `select_option` in `attribute_effect`
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 5db685cf3e..c96338778f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -514,9 +514,10 @@ export function attribute_effect(
 
 	if (is_select) {
 		var select = /** @type {HTMLSelectElement} */ (element);
-
+		var mounting = true;
 		effect(() => {
-			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value);
+			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, mounting);
+			mounting = false;
 			init_select(select);
 		});
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js
new file mode 100644
index 0000000000..50da3ac095
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js
@@ -0,0 +1,9 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, instance }) {
+		const select = target.querySelector('select');
+		ok(select);
+		assert.equal(select.selectedIndex, 1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte
new file mode 100644
index 0000000000..e5fc6c5535
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let others = {onclick: ()=> {}}
+</script>
+
+<select {...others}>
+	<option>o1</option>
+	<option selected>o2</option>
+</select>

From 4a26edf54576152affe8649eca8c9b3d1a5b8015 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Jul 2025 10:17:17 -0400
Subject: [PATCH 194/259] chore: remove unused `mounting` variable from
 `select_option` call (#16312)

---
 .../svelte/src/internal/client/dom/elements/attributes.js  | 7 +++----
 .../src/internal/client/dom/elements/bindings/select.js    | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index c96338778f..66f484a59a 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -491,7 +491,7 @@ export function attribute_effect(
 		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, false);
+			select_option(/** @type {HTMLSelectElement} */ (element), next.value);
 		}
 
 		for (let symbol of Object.getOwnPropertySymbols(effects)) {
@@ -514,10 +514,9 @@ export function attribute_effect(
 
 	if (is_select) {
 		var select = /** @type {HTMLSelectElement} */ (element);
-		var mounting = true;
+
 		effect(() => {
-			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, mounting);
-			mounting = false;
+			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
 			init_select(select);
 		});
 	}
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 5e89686d86..e39fb865cd 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -9,9 +9,9 @@ import * as w from '../../../warnings.js';
  * @template V
  * @param {HTMLSelectElement} select
  * @param {V} value
- * @param {boolean} [mounting]
+ * @param {boolean} mounting
  */
-export function select_option(select, value, mounting) {
+export function select_option(select, value, mounting = false) {
 	if (select.multiple) {
 		// If value is null or undefined, keep the selection as is
 		if (value == undefined) {

From 63e48365fbad844f5a82cf5e5a994fdfd13f419b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 7 Jul 2025 10:53:41 -0400
Subject: [PATCH 195/259] Version Packages (#16303)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/curvy-carrots-prove.md | 5 -----
 .changeset/new-wolves-punch.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/curvy-carrots-prove.md
 delete mode 100644 .changeset/new-wolves-punch.md

diff --git a/.changeset/curvy-carrots-prove.md b/.changeset/curvy-carrots-prove.md
deleted file mode 100644
index 7723990179..0000000000
--- a/.changeset/curvy-carrots-prove.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: account for mounting when `select_option` in `attribute_effect`
diff --git a/.changeset/new-wolves-punch.md b/.changeset/new-wolves-punch.md
deleted file mode 100644
index c856038cbc..0000000000
--- a/.changeset/new-wolves-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: do not proxify the value assigned to a derived
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index ad72bfabb0..4f1be5e299 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.35.3
+
+### Patch Changes
+
+- fix: account for mounting when `select_option` in `attribute_effect` ([#16309](https://github.com/sveltejs/svelte/pull/16309))
+
+- fix: do not proxify the value assigned to a derived ([#16302](https://github.com/sveltejs/svelte/pull/16302))
+
 ## 5.35.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 872c21a179..30a8f8833a 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.2",
+  "version": "5.35.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 47c354c7a2..d98b622908 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.2';
+export const VERSION = '5.35.3';
 export const PUBLIC_VERSION = '5';

From cf2ff5e8dc908395853e3a7cc2022fe3552f7062 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Jul 2025 11:46:57 -0400
Subject: [PATCH 196/259] fix: abort and reschedule effect processing after
 state change in user effect (#16280)

* fix: abort and reschedule effect processing after state change in user effect

* failing test

* skip for now
---
 .changeset/cuddly-walls-tan.md                |  5 ++++
 .../svelte/src/internal/client/constants.js   |  1 +
 .../svelte/src/internal/client/context.js     |  4 ++--
 .../src/internal/client/reactivity/effects.js | 15 ++++++++----
 .../svelte/src/internal/client/runtime.js     | 15 +++++++++++-
 .../samples/effect-order-6/A.svelte           | 11 +++++++++
 .../samples/effect-order-6/B.svelte           |  9 ++++++++
 .../samples/effect-order-6/Child.svelte       | 20 ++++++++++++++++
 .../samples/effect-order-6/_config.js         | 13 +++++++++++
 .../samples/effect-order-6/main.svelte        | 23 +++++++++++++++++++
 .../samples/effect-order-7/A.svelte           |  9 ++++++++
 .../samples/effect-order-7/B.svelte           |  9 ++++++++
 .../samples/effect-order-7/Child.svelte       | 20 ++++++++++++++++
 .../samples/effect-order-7/_config.js         | 15 ++++++++++++
 .../samples/effect-order-7/main.svelte        | 22 ++++++++++++++++++
 15 files changed, 184 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/cuddly-walls-tan.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte

diff --git a/.changeset/cuddly-walls-tan.md b/.changeset/cuddly-walls-tan.md
new file mode 100644
index 0000000000..feececc052
--- /dev/null
+++ b/.changeset/cuddly-walls-tan.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: abort and reschedule effect processing after state change in user effect
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 1cffa43940..a5a8b42972 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -19,6 +19,7 @@ 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 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 e4220149ab..736b81c172 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -9,7 +9,7 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from './runtime.js';
-import { effect, teardown } from './reactivity/effects.js';
+import { create_user_effect, teardown } from './reactivity/effects.js';
 import { legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
 
@@ -191,7 +191,7 @@ export function pop(component) {
 					var component_effect = component_effects[i];
 					set_active_effect(component_effect.effect);
 					set_active_reaction(component_effect.reaction);
-					effect(component_effect.fn);
+					create_user_effect(component_effect.fn);
 				}
 			} finally {
 				set_active_effect(previous_effect);
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 7570064c37..df2afd3e38 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -33,7 +33,8 @@ import {
 	MAYBE_DIRTY,
 	EFFECT_PRESERVED,
 	BOUNDARY_EFFECT,
-	STALE_REACTION
+	STALE_REACTION,
+	USER_EFFECT
 } from '#client/constants';
 import { set } from './sources.js';
 import * as e from '../errors.js';
@@ -200,11 +201,17 @@ export function user_effect(fn) {
 			reaction: active_reaction
 		});
 	} else {
-		var signal = effect(fn);
-		return signal;
+		return create_user_effect(fn);
 	}
 }
 
+/**
+ * @param {() => void | (() => void)} fn
+ */
+export function create_user_effect(fn) {
+	return create_effect(EFFECT | USER_EFFECT, fn, false);
+}
+
 /**
  * Internal representation of `$effect.pre(...)`
  * @param {() => void | (() => void)} fn
@@ -217,7 +224,7 @@ export function user_pre_effect(fn) {
 			value: '$effect.pre'
 		});
 	}
-	return render_effect(fn);
+	return create_effect(RENDER_EFFECT | USER_EFFECT, fn, true);
 }
 
 /** @param {() => void | (() => void)} fn */
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index fce6c78b56..c00ade5587 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -22,7 +22,8 @@ import {
 	ROOT_EFFECT,
 	DISCONNECTED,
 	EFFECT_IS_UPDATING,
-	STALE_REACTION
+	STALE_REACTION,
+	USER_EFFECT
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { internal_set, old_values } from './reactivity/sources.js';
@@ -581,6 +582,8 @@ function flush_queued_effects(effects) {
 
 		if ((effect.f & (DESTROYED | INERT)) === 0) {
 			if (check_dirtiness(effect)) {
+				var wv = write_version;
+
 				update_effect(effect);
 
 				// Effects with no dependencies or teardown do not get added to the effect tree.
@@ -597,9 +600,19 @@ function flush_queued_effects(effects) {
 						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]);
+	}
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte
new file mode 100644
index 0000000000..2e789a0460
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte
@@ -0,0 +1,11 @@
+<script>
+	import B from './B.svelte';
+
+	let { boolean, closed } = $props();
+
+	$effect(() => {
+		console.log(boolean);
+	});
+</script>
+
+<B {closed} />
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte
new file mode 100644
index 0000000000..1fad19bc15
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { close } from './Child.svelte';
+
+	let { closed } = $props();
+
+	$effect(() => {
+		if (closed) close();
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/Child.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/Child.svelte
new file mode 100644
index 0000000000..b905b4b4d7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/Child.svelte
@@ -0,0 +1,20 @@
+<script module>
+	let object = $state();
+
+	export function open() {
+		object = { boolean: true };
+	}
+
+	export function close() {
+		object = undefined;
+	}
+</script>
+
+<script>
+	let { children } = $props();
+</script>
+
+{#if object?.boolean}
+	<!-- error occurs here, this is executed when the if should already make it falsy -->
+	{@render children(object.boolean)}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js
new file mode 100644
index 0000000000..8f9077e954
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [open, close] = target.querySelectorAll('button');
+
+		flushSync(() => open.click());
+		flushSync(() => close.click());
+
+		assert.deepEqual(logs, [true]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte
new file mode 100644
index 0000000000..eee487fa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import A from './A.svelte';
+	import Child, { open } from './Child.svelte';
+
+	let closed = $state(false);
+</script>
+
+<button onclick={open}>
+	open
+</button>
+
+<button onclick={() => closed = true}>
+	close
+</button>
+
+<hr>
+
+<Child>
+	{#snippet children(boolean)}
+		<A {closed} {boolean} />
+	{/snippet}
+</Child>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte
new file mode 100644
index 0000000000..54f4869d62
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte
@@ -0,0 +1,9 @@
+<script>
+	import B from './B.svelte';
+
+	let { boolean, closed } = $props();
+</script>
+
+<span>{boolean}</span>
+
+<B {closed} />
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte
new file mode 100644
index 0000000000..2a2e634db1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { close } from './Child.svelte';
+
+	let { closed } = $props();
+
+	$effect.pre(() => {
+		if (closed) close();
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/Child.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/Child.svelte
new file mode 100644
index 0000000000..9606fd8602
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/Child.svelte
@@ -0,0 +1,20 @@
+<script module>
+	let object = $state();
+
+	export function open() {
+		object = { nested: { boolean: true } };
+	}
+
+	export function close() {
+		object = undefined;
+	}
+</script>
+
+<script>
+	let { children } = $props();
+</script>
+
+{#if object?.nested}
+	<!-- error occurs here, this is executed when the if should already make it falsy -->
+	{@render children(object.nested)}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js
new file mode 100644
index 0000000000..29c33c7b18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true,
+
+	async test({ assert, target, logs }) {
+		const [open, close] = target.querySelectorAll('button');
+
+		flushSync(() => open.click());
+		flushSync(() => close.click());
+
+		assert.deepEqual(logs, [true]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte
new file mode 100644
index 0000000000..c9c45c50cf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import A from './A.svelte';
+	import Child, { open } from './Child.svelte';
+
+	let closed = $state(false);
+</script>
+
+<button onclick={open}>
+	open
+</button>
+
+<button onclick={() => closed = true}>
+	close
+</button>
+
+<hr>
+
+<Child>
+	{#snippet children(nested)}
+		<A {closed} boolean={nested.boolean} />
+	{/snippet}
+</Child>

From eb094ba059d262e5583108a85b0e549b95dbd344 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 7 Jul 2025 12:37:51 -0400
Subject: [PATCH 197/259] Version Packages (#16313)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/cuddly-walls-tan.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/cuddly-walls-tan.md

diff --git a/.changeset/cuddly-walls-tan.md b/.changeset/cuddly-walls-tan.md
deleted file mode 100644
index feececc052..0000000000
--- a/.changeset/cuddly-walls-tan.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: abort and reschedule effect processing after state change in user effect
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4f1be5e299..89ae380840 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.35.4
+
+### Patch Changes
+
+- fix: abort and reschedule effect processing after state change in user effect ([#16280](https://github.com/sveltejs/svelte/pull/16280))
+
 ## 5.35.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 30a8f8833a..aaf8f26fec 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.3",
+  "version": "5.35.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index d98b622908..c4111b9e8d 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.3';
+export const VERSION = '5.35.4';
 export const PUBLIC_VERSION = '5';

From 140462374a759d7c38262e9823a7db6c73bcc067 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Jul 2025 13:32:15 -0400
Subject: [PATCH 198/259] fix: re-evaluate derived props during teardown
 (#16278)

* Store deriveds old value before updating them for consistency with directly assigned sources when reading in teardown functions

* Add tests for derived old values in teardown functions

* Add tests for props old values in onDestroy hooks to prevent regressions

* Add changeset

* Update comment

* remove extraneous tests - these pass with or without the src change

* revert

* WIP

* simplify props

* simplify

* tweak

* reorder a bit

* simplify

* unused

* more

* more

* tweak

* also appears to be unnecessary

* changeset

* fix

* Update .changeset/light-rivers-jump.md

* easier debugging

* fix

* WIP

* fix

---------

Co-authored-by: raythurnvoid <53383860+raythurnvoid@users.noreply.github.com>
---
 .changeset/light-rivers-jump.md               |  5 ++
 .../internal/client/reactivity/deriveds.js    |  3 +-
 .../src/internal/client/reactivity/props.js   | 80 ++++++++++++++-----
 .../svelte/src/internal/client/runtime.js     | 44 +++++++++-
 .../derived-cleanup-old-value/_config.js      | 22 +++++
 .../derived-cleanup-old-value/main.svelte     | 20 +++++
 .../effect-teardown-derived/Component.svelte  | 15 ++++
 .../effect-teardown-derived/_config.js        | 17 ++++
 .../effect-teardown-derived/main.svelte       | 13 +++
 9 files changed, 194 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/light-rivers-jump.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte

diff --git a/.changeset/light-rivers-jump.md b/.changeset/light-rivers-jump.md
new file mode 100644
index 0000000000..2454d57156
--- /dev/null
+++ b/.changeset/light-rivers-jump.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: re-evaluate derived props during teardown
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index fdfc13c0e2..e563c77534 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -19,6 +19,7 @@ import { inspect_effects, set_inspect_effects } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
 import { tracing_mode_flag } from '../../flags/index.js';
 import { component_context } from '../context.js';
+import { UNINITIALIZED } from '../../../constants.js';
 
 /**
  * @template V
@@ -51,7 +52,7 @@ export function derived(fn) {
 		fn,
 		reactions: null,
 		rv: 0,
-		v: /** @type {V} */ (null),
+		v: /** @type {V} */ (UNINITIALIZED),
 		wv: 0,
 		parent: parent_derived ?? active_effect,
 		ac: null
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 3501bcd3c7..03daad5251 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -1,18 +1,26 @@
-/** @import { Derived, Source } from './types.js' */
+/** @import { ComponentContext } from '#client' */
+/** @import { Derived, 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
+	PROPS_IS_UPDATED,
+	UNINITIALIZED
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../../shared/utils.js';
 import { set, source, update } from './sources.js';
 import { derived, derived_safe_equal } from './deriveds.js';
-import { get, untrack } from '../runtime.js';
+import {
+	active_effect,
+	get,
+	is_destroying_effect,
+	set_active_effect,
+	untrack
+} from '../runtime.js';
 import * as e from '../errors.js';
-import { LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
+import { DESTROYED, LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
 import { legacy_mode_flag } from '../../flags/index.js';
@@ -92,7 +100,7 @@ export function rest_props(props, exclude, name) {
 
 /**
  * The proxy handler for legacy $$restProps and $$props
- * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number> }>}}
+ * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number>, parent_effect: Effect }>}}
  */
 const legacy_rest_props_handler = {
 	get(target, key) {
@@ -102,17 +110,25 @@ const legacy_rest_props_handler = {
 	},
 	set(target, key, value) {
 		if (!(key in target.special)) {
-			// Handle props that can temporarily get out of sync with the parent
-			/** @type {Record<string, (v?: unknown) => unknown>} */
-			target.special[key] = prop(
-				{
-					get [key]() {
-						return target.props[key];
-					}
-				},
-				/** @type {string} */ (key),
-				PROPS_IS_UPDATED
-			);
+			var previous_effect = active_effect;
+
+			try {
+				set_active_effect(target.parent_effect);
+
+				// Handle props that can temporarily get out of sync with the parent
+				/** @type {Record<string, (v?: unknown) => unknown>} */
+				target.special[key] = prop(
+					{
+						get [key]() {
+							return target.props[key];
+						}
+					},
+					/** @type {string} */ (key),
+					PROPS_IS_UPDATED
+				);
+			} finally {
+				set_active_effect(previous_effect);
+			}
 		}
 
 		target.special[key](value);
@@ -151,7 +167,19 @@ const legacy_rest_props_handler = {
  * @returns {Record<string, unknown>}
  */
 export function legacy_rest_props(props, exclude) {
-	return new Proxy({ props, exclude, special: {}, version: source(0) }, legacy_rest_props_handler);
+	return new Proxy(
+		{
+			props,
+			exclude,
+			special: {},
+			version: source(0),
+			// TODO this is only necessary because we need to track component
+			// destruction inside `prop`, because of `bind:this`, but it
+			// seems likely that we can simplify `bind:this` instead
+			parent_effect: /** @type {Effect} */ (active_effect)
+		},
+		legacy_rest_props_handler
+	);
 }
 
 /**
@@ -366,16 +394,24 @@ export function prop(props, key, flags, fallback) {
 	// create a derived that we can write to locally.
 	// Or we are in legacy mode where we always create a derived to replicate that
 	// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
-	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(getter);
+	var overridden = false;
+
+	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(() => {
+		overridden = false;
+		return getter();
+	});
 
 	// Capture the initial value if it's bindable
 	if (bindable) get(d);
 
+	var parent_effect = /** @type {Effect} */ (active_effect);
+
 	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
 		if (arguments.length > 0) {
 			const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
 
 			set(d, new_value);
+			overridden = true;
 
 			if (fallback_value !== undefined) {
 				fallback_value = new_value;
@@ -384,8 +420,12 @@ export function prop(props, key, flags, fallback) {
 			return value;
 		}
 
-		// TODO is this still necessary post-#16263?
-		if (has_destroyed_component_ctx(d)) {
+		// special case — avoid recalculating the derived if we're in a
+		// teardown function and the prop was overridden locally, or the
+		// component was already destroyed (this latter part is necessary
+		// because `bind:this` can read props after the component has
+		// been destroyed. TODO simplify `bind:this`
+		if ((is_destroying_effect && overridden) || (parent_effect.f & DESTROYED) !== 0) {
 			return d.v;
 		}
 
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index c00ade5587..28fcf26e83 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -27,7 +27,7 @@ import {
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { internal_set, old_values } from './reactivity/sources.js';
-import { destroy_derived_effects, update_derived } from './reactivity/deriveds.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';
@@ -42,6 +42,7 @@ import {
 	set_dev_stack
 } from './context.js';
 import { handle_error, invoke_error_boundary } from './error-handling.js';
+import { UNINITIALIZED } from '../../constants.js';
 
 let is_flushing = false;
 
@@ -795,7 +796,7 @@ export function get(signal) {
 		}
 	}
 
-	if (is_derived) {
+	if (is_derived && !is_destroying_effect) {
 		derived = /** @type {Derived} */ (signal);
 
 		if (check_dirtiness(derived)) {
@@ -836,13 +837,48 @@ export function get(signal) {
 		}
 	}
 
-	if (is_destroying_effect && old_values.has(signal)) {
-		return old_values.get(signal);
+	if (is_destroying_effect) {
+		if (old_values.has(signal)) {
+			return old_values.get(signal);
+		}
+
+		if (is_derived) {
+			derived = /** @type {Derived} */ (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)) {
+				value = execute_derived(derived);
+			}
+
+			old_values.set(derived, value);
+
+			return value;
+		}
 	}
 
 	return signal.v;
 }
 
+/** @param {Derived} derived */
+function depends_on_old_values(derived) {
+	if (derived.v === UNINITIALIZED) return true; // we don't know, so assume the worst
+	if (derived.deps === null) return false;
+
+	for (const dep of derived.deps) {
+		if (old_values.has(dep)) {
+			return true;
+		}
+
+		if ((dep.f & DERIVED) !== 0 && depends_on_old_values(/** @type {Derived} */ (dep))) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 /**
  * Like `get`, but checks for `undefined`. Used for `var` declarations because they can be accessed before being declared
  * @template V
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js
new file mode 100644
index 0000000000..694dccdcf8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs, target }) {
+		const [increment] = target.querySelectorAll('button');
+
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+
+		assert.deepEqual(logs, [
+			'count: 1',
+			'squared: 1',
+			'count: 2',
+			'squared: 4',
+			'count: 3',
+			'squared: 9',
+			'count: 4'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte
new file mode 100644
index 0000000000..a4c58a8e99
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let count = $state(1);
+	let squared = $derived(count * count);
+
+	$effect(() => {
+		console.log(`count: ${count}`);
+
+		return () => {
+			console.log(`squared: ${squared}`);
+		};
+	});
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+<p>count: {count}</p>
+
+{#if count % 2 === 0}
+	<p id="squared">squared: {squared}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte
new file mode 100644
index 0000000000..3c863c7fc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { message, count } = $props();
+
+	$effect(() => () => {
+		console.log(count, message);
+	});
+</script>
+
+<p>{count}</p>
+
+<!-- we need these so that the props are made into deriveds -->
+<button disabled onclick={() => {
+	count += 1;
+	message += '!';
+}}>update</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js
new file mode 100644
index 0000000000..1f6e5d1f7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [increment, toggle] = target.querySelectorAll('button');
+
+		flushSync(() => toggle.click());
+		assert.deepEqual(logs, [0, 'hello']);
+
+		flushSync(() => toggle.click());
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+
+		assert.deepEqual(logs, [0, 'hello', 1, 'hello']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte
new file mode 100644
index 0000000000..1a97d3e760
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let message = $state('hello');
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>{count}</button>
+<button onclick={() => message = message === 'hello' ? 'goodbye' : 'hello'}>{message}</button>
+
+{#if count < 2 && message === 'hello'}
+	<Component {count} {message} />
+{/if}

From c9098bcaa0cf7accf7de4a16f8b72671023e69e7 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 9 Jul 2025 15:32:18 +0200
Subject: [PATCH 199/259] fix: use `state` instead of `source` in reactive
 classes (#16239)

* fix: use `state` instead of `source` in reactive classes

* fix: use `active_reaction` as indication to use `source` or `state`

* fix: cleanup `#initial_reaction` on `teardown` to free memory

* fix: use `#source` in `set` too

* unused

* chore: use WeakRef

* use update_version instead of WeakRef in SvelteSet/SvelteMap (#16324)

* tidy up

* tweak comment to remove active_reaction reference

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../svelte/src/internal/client/runtime.js     |   6 +-
 packages/svelte/src/motion/spring.js          |  12 +-
 packages/svelte/src/motion/tweened.js         |   6 +-
 packages/svelte/src/reactivity/map.js         |  25 ++++-
 packages/svelte/src/reactivity/set.js         |  18 ++-
 .../side-effect-derived-map/_config.js        |  33 +++++-
 .../side-effect-derived-map/main.svelte       | 106 +++++++++++++++---
 .../side-effect-derived-set/_config.js        |  12 +-
 .../side-effect-derived-set/main.svelte       |  51 ++++++---
 .../side-effect-derived-spring/_config.js     |  23 ++++
 .../side-effect-derived-spring/main.svelte    |  26 +++++
 .../side-effect-derived-tween/_config.js      |  23 ++++
 .../side-effect-derived-tween/main.svelte     |  26 +++++
 13 files changed, 318 insertions(+), 49 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 28fcf26e83..cd7170d326 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -134,6 +134,8 @@ 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;
 
+export let update_version = read_version;
+
 // 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;
@@ -267,6 +269,7 @@ export function update_reaction(reaction) {
 	var previous_reaction_sources = source_ownership;
 	var previous_component_context = component_context;
 	var previous_untracking = untracking;
+	var previous_update_version = update_version;
 
 	var flags = reaction.f;
 
@@ -280,7 +283,7 @@ export function update_reaction(reaction) {
 	source_ownership = null;
 	set_component_context(reaction.ctx);
 	untracking = false;
-	read_version++;
+	update_version = ++read_version;
 
 	reaction.f |= EFFECT_IS_UPDATING;
 
@@ -368,6 +371,7 @@ export function update_reaction(reaction) {
 		source_ownership = previous_reaction_sources;
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
+		update_version = previous_update_version;
 
 		reaction.f ^= EFFECT_IS_UPDATING;
 	}
diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js
index 0f3bc6fb9f..44be1a501b 100644
--- a/packages/svelte/src/motion/spring.js
+++ b/packages/svelte/src/motion/spring.js
@@ -5,7 +5,7 @@ import { writable } from '../store/shared/index.js';
 import { loop } from '../internal/client/loop.js';
 import { raf } from '../internal/client/timing.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { render_effect } from '../internal/client/reactivity/effects.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
@@ -170,9 +170,9 @@ export function spring(value, opts = {}) {
  * @since 5.8.0
  */
 export class Spring {
-	#stiffness = source(0.15);
-	#damping = source(0.8);
-	#precision = source(0.01);
+	#stiffness = state(0.15);
+	#damping = state(0.8);
+	#precision = state(0.01);
 
 	#current;
 	#target;
@@ -194,8 +194,8 @@ export class Spring {
 	 * @param {SpringOpts} [options]
 	 */
 	constructor(value, options = {}) {
-		this.#current = DEV ? tag(source(value), 'Spring.current') : source(value);
-		this.#target = DEV ? tag(source(value), 'Spring.target') : source(value);
+		this.#current = DEV ? tag(state(value), 'Spring.current') : state(value);
+		this.#target = DEV ? tag(state(value), 'Spring.target') : state(value);
 
 		if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1);
 		if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1);
diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js
index 09bd06c325..437c22ec3b 100644
--- a/packages/svelte/src/motion/tweened.js
+++ b/packages/svelte/src/motion/tweened.js
@@ -6,7 +6,7 @@ import { raf } from '../internal/client/timing.js';
 import { loop } from '../internal/client/loop.js';
 import { linear } from '../easing/index.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get, render_effect } from 'svelte/internal/client';
 import { DEV } from 'esm-env';
@@ -191,8 +191,8 @@ export class Tween {
 	 * @param {TweenedOptions<T>} options
 	 */
 	constructor(value, options = {}) {
-		this.#current = source(value);
-		this.#target = source(value);
+		this.#current = state(value);
+		this.#target = state(value);
 		this.#defaults = options;
 
 		if (DEV) {
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
index cd2fac163f..4fa2dfd7b2 100644
--- a/packages/svelte/src/reactivity/map.js
+++ b/packages/svelte/src/reactivity/map.js
@@ -2,7 +2,7 @@
 import { DEV } from 'esm-env';
 import { set, source, state } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
-import { get } from '../internal/client/runtime.js';
+import { get, update_version } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
 /**
@@ -56,6 +56,7 @@ export class SvelteMap extends Map {
 	#sources = new Map();
 	#version = state(0);
 	#size = state(0);
+	#update_version = update_version || -1;
 
 	/**
 	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
@@ -79,6 +80,19 @@ export class SvelteMap extends Map {
 		}
 	}
 
+	/**
+	 * If the source is being created inside the same reaction as the SvelteMap instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
 	/** @param {K} key */
 	has(key) {
 		var sources = this.#sources;
@@ -87,7 +101,7 @@ export class SvelteMap extends Map {
 		if (s === undefined) {
 			var ret = super.get(key);
 			if (ret !== undefined) {
-				s = source(0);
+				s = this.#source(0);
 
 				if (DEV) {
 					tag(s, `SvelteMap get(${label(key)})`);
@@ -123,7 +137,7 @@ export class SvelteMap extends Map {
 		if (s === undefined) {
 			var ret = super.get(key);
 			if (ret !== undefined) {
-				s = source(0);
+				s = this.#source(0);
 
 				if (DEV) {
 					tag(s, `SvelteMap get(${label(key)})`);
@@ -154,7 +168,7 @@ export class SvelteMap extends Map {
 		var version = this.#version;
 
 		if (s === undefined) {
-			s = source(0);
+			s = this.#source(0);
 
 			if (DEV) {
 				tag(s, `SvelteMap get(${label(key)})`);
@@ -219,8 +233,7 @@ export class SvelteMap extends Map {
 		if (this.#size.v !== sources.size) {
 			for (var key of super.keys()) {
 				if (!sources.has(key)) {
-					var s = source(0);
-
+					var s = this.#source(0);
 					if (DEV) {
 						tag(s, `SvelteMap get(${label(key)})`);
 					}
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index 8a656c2bc1..9e3c330beb 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -2,7 +2,7 @@
 import { DEV } from 'esm-env';
 import { source, set, state } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
-import { get } from '../internal/client/runtime.js';
+import { get, update_version } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
 var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
@@ -50,6 +50,7 @@ export class SvelteSet extends Set {
 	#sources = new Map();
 	#version = state(0);
 	#size = state(0);
+	#update_version = update_version || -1;
 
 	/**
 	 * @param {Iterable<T> | null | undefined} [value]
@@ -75,6 +76,19 @@ export class SvelteSet extends Set {
 		if (!inited) this.#init();
 	}
 
+	/**
+	 * If the source is being created inside the same reaction as the SvelteSet instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
 	// We init as part of the first instance so that we can treeshake this class
 	#init() {
 		inited = true;
@@ -116,7 +130,7 @@ export class SvelteSet extends Set {
 				return false;
 			}
 
-			s = source(true);
+			s = this.#source(true);
 
 			if (DEV) {
 				tag(s, `SvelteSet has(${label(value)})`);
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
index 5ad6f57e31..c10dc7fb55 100644
--- a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
@@ -8,7 +8,8 @@ export default test({
 	},
 
 	test({ assert, target }) {
-		const [button1, button2] = target.querySelectorAll('button');
+		const [button1, button2, button3, button4, button5, button6, button7, button8] =
+			target.querySelectorAll('button');
 
 		assert.throws(() => {
 			button1?.click();
@@ -19,5 +20,35 @@ export default test({
 			button2?.click();
 			flushSync();
 		});
+
+		assert.throws(() => {
+			button3?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button4?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button5?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button6?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button7?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button8?.click();
+			flushSync();
+		});
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
index bdd5ccb75c..c37f37ceb6 100644
--- a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
@@ -1,27 +1,101 @@
 <script>
 	import { SvelteMap } from 'svelte/reactivity';
 
-	let visibleExternal = $state(false);
-	let external = new SvelteMap();
-	const throws = $derived.by(() => {
-		external.set(1, 1);
-		return external;
+	let outside_basic = $state(false);
+	let outside_basic_map = new SvelteMap();
+	const throw_basic = $derived.by(() => {
+		outside_basic_map.set(1, 1);
+		return outside_basic_map;
 	});
 
-	let visibleInternal = $state(false);
-	const works = $derived.by(() => {
-		let internal = new SvelteMap();
-		internal.set(1, 1);
-		return internal;
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let inside = new SvelteMap();
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_has = $state(false);
+	let outside_has_map = new SvelteMap([[1, 1]]);
+	const throw_has = $derived.by(() => {
+		outside_has_map.has(1);
+		outside_has_map.set(1, 2);
+		return outside_has_map;
+	});
+
+	let inside_has = $state(false);
+	const works_has = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.has(1);
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_get = $state(false);
+	let outside_get_map = new SvelteMap([[1, 1]]);
+	const throw_get = $derived.by(() => {
+		outside_get_map.get(1);
+		outside_get_map.set(1, 2);
+		return outside_get_map;
+	});
+
+	let inside_get = $state(false);
+	const works_get = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.get(1);
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_values = $state(false);
+	let outside_values_map = new SvelteMap([[1, 1]]);
+	const throw_values = $derived.by(() => {
+		outside_values_map.values(1);
+		outside_values_map.set(1, 2);
+		return outside_values_map;
+	});
+
+	let inside_values = $state(false);
+	const works_values = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.values();
+		inside.set(1, 1);
+		return inside;
 	});
 </script>
 
-<button onclick={() => (visibleExternal = true)}>external</button>
-{#if visibleExternal}
-	{throws}
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throw_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
+
+<button onclick={() => (outside_has = true)}>external</button>
+{#if outside_has}
+	{throw_has}
 {/if}
-<button onclick={() => (visibleInternal = true)}>internal</button>
-{#if visibleInternal}
-	{works}
+<button onclick={() => (inside_has = true)}>internal</button>
+{#if inside_has}
+	{works_has}
 {/if}
 
+<button onclick={() => (outside_get = true)}>external</button>
+{#if outside_get}
+	{throw_get}
+{/if}
+<button onclick={() => (inside_get = true)}>internal</button>
+{#if inside_get}
+	{works_get}
+{/if}
+
+<button onclick={() => (outside_values = true)}>external</button>
+{#if outside_values}
+	{throw_values}
+{/if}
+<button onclick={() => (inside_values = true)}>internal</button>
+{#if inside_values}
+	{works_values}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
index 5ad6f57e31..5cf066fb8a 100644
--- a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
@@ -8,7 +8,7 @@ export default test({
 	},
 
 	test({ assert, target }) {
-		const [button1, button2] = target.querySelectorAll('button');
+		const [button1, button2, button3, button4] = target.querySelectorAll('button');
 
 		assert.throws(() => {
 			button1?.click();
@@ -19,5 +19,15 @@ export default test({
 			button2?.click();
 			flushSync();
 		});
+
+		assert.throws(() => {
+			button3?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button4?.click();
+			flushSync();
+		});
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
index 8564f6e7c4..1d6735ba64 100644
--- a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
@@ -1,27 +1,52 @@
 <script>
 	import { SvelteSet } from 'svelte/reactivity';
 
-	let visibleExternal = $state(false);
-	let external = new SvelteSet();
-	const throws = $derived.by(() => {
-		external.add(1);
-		return external;
+	let outside_basic = $state(false);
+	let outside_basic_set = new SvelteSet();
+	const throws_basic = $derived.by(() => {
+		outside_basic_set.add(1);
+		return outside_basic_set;
 	})
 
-	let visibleInternal = $state(false);
-	const works = $derived.by(() => {
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
 		let internal = new SvelteSet();
 		internal.add(1);
 		return internal;
 	})
+
+	let outside_has_delete = $state(false);
+	let outside_has_delete_set = new SvelteSet([1]);
+	const throws_has_delete = $derived.by(() => {
+		outside_has_delete_set.has(1);
+		outside_has_delete_set.delete(1);
+		return outside_has_delete_set;
+	})
+
+	let inside_has_delete = $state(false);
+	const works_has_delete = $derived.by(() => {
+		let internal = new SvelteSet([1]);
+		internal.has(1);
+		internal.delete(1);
+		return internal;
+	})
 </script>
 
-<button onclick={() => (visibleExternal = true)}>external</button>
-{#if visibleExternal}
-	{throws}
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
+
+<button onclick={() => (outside_has_delete = true)}>external</button>
+{#if outside_has_delete}
+	{throws_has_delete}
 {/if}
-<button onclick={() => (visibleInternal = true)}>internal</button>
-{#if visibleInternal}
-	{works}
+<button onclick={() => (inside_has_delete = true)}>internal</button>
+{#if inside_has_delete}
+	{works_has_delete}
 {/if}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte
new file mode 100644
index 0000000000..b0818deca9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { Spring } from 'svelte/motion';
+
+	let outside_basic = $state(false);
+	let outside_basic_spring = new Spring(0);
+	const throws_basic = $derived.by(() => {
+		outside_basic_spring.set(1);
+		return outside_basic_spring;
+	})
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let internal = new Spring(0);
+		internal.set(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte
new file mode 100644
index 0000000000..bd007f2b50
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { Tween } from 'svelte/motion';
+
+	let outside_basic = $state(false);
+	let outside_basic_tween = new Tween(0);
+	const throws_basic = $derived.by(() => {
+		outside_basic_tween.set(1);
+		return outside_basic_tween;
+	})
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let internal = new Tween(0);
+		internal.set(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
\ No newline at end of file

From 9d176b50080ed075d97ed96a15e2109b3db69886 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Jul 2025 09:37:29 -0400
Subject: [PATCH 200/259] chore: changeset for #16239 (#16325)

---
 .changeset/gorgeous-birds-brake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gorgeous-birds-brake.md

diff --git a/.changeset/gorgeous-birds-brake.md b/.changeset/gorgeous-birds-brake.md
new file mode 100644
index 0000000000..8365cc0e6a
--- /dev/null
+++ b/.changeset/gorgeous-birds-brake.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: associate sources in Spring/Tween/SvelteMap/SvelteSet with correct reaction

From fab2091743d48f682d470cccb1a99590ce6bac32 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 9 Jul 2025 09:41:08 -0400
Subject: [PATCH 201/259] Version Packages (#16314)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/gorgeous-birds-brake.md | 5 -----
 .changeset/light-rivers-jump.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/gorgeous-birds-brake.md
 delete mode 100644 .changeset/light-rivers-jump.md

diff --git a/.changeset/gorgeous-birds-brake.md b/.changeset/gorgeous-birds-brake.md
deleted file mode 100644
index 8365cc0e6a..0000000000
--- a/.changeset/gorgeous-birds-brake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: associate sources in Spring/Tween/SvelteMap/SvelteSet with correct reaction
diff --git a/.changeset/light-rivers-jump.md b/.changeset/light-rivers-jump.md
deleted file mode 100644
index 2454d57156..0000000000
--- a/.changeset/light-rivers-jump.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: re-evaluate derived props during teardown
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 89ae380840..19aa1466c0 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.35.5
+
+### Patch Changes
+
+- fix: associate sources in Spring/Tween/SvelteMap/SvelteSet with correct reaction ([#16325](https://github.com/sveltejs/svelte/pull/16325))
+
+- fix: re-evaluate derived props during teardown ([#16278](https://github.com/sveltejs/svelte/pull/16278))
+
 ## 5.35.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index aaf8f26fec..4ac497ed41 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.4",
+  "version": "5.35.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c4111b9e8d..eb68753d71 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.4';
+export const VERSION = '5.35.5';
 export const PUBLIC_VERSION = '5';

From 71ed9e4648705ac79f1f834b8530d0d3ee06ffa2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Jul 2025 20:56:33 -0400
Subject: [PATCH 202/259] chore: simplify/optimize source_ownership occurrence
 (#16328)

---
 packages/svelte/src/internal/client/runtime.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index cd7170d326..d6e7325ba3 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -236,16 +236,13 @@ 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)) {
+		return;
+	}
+
 	for (var i = 0; i < reactions.length; i++) {
 		var reaction = reactions[i];
 
-		if (
-			source_ownership?.reaction === active_reaction &&
-			source_ownership.sources.includes(signal)
-		) {
-			continue;
-		}
-
 		if ((reaction.f & DERIVED) !== 0) {
 			schedule_possible_effect_self_invalidation(/** @type {Derived} */ (reaction), effect, false);
 		} else if (effect === reaction) {

From 86b06cb6945816ec8182544ba101cd38679f96a1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Jul 2025 01:58:42 -0400
Subject: [PATCH 203/259] chore: dry out transition `get_options` (#16329)

---
 .../src/internal/client/dom/elements/transitions.js   | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 38100e982c..00fad9ffdb 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -209,21 +209,14 @@ export function transition(flags, element, get_fn, get_params) {
 	var outro;
 
 	function get_options() {
-		var previous_reaction = active_reaction;
-		var previous_effect = active_effect;
-		set_active_reaction(null);
-		set_active_effect(null);
-		try {
+		return without_reactive_context(() => {
 			// If a transition is still ongoing, we use the existing options rather than generating
 			// new ones. This ensures that reversible transitions reverse smoothly, rather than
 			// jumping to a new spot because (for example) a different `duration` was used
 			return (current_options ??= get_fn()(element, get_params?.() ?? /** @type {P} */ ({}), {
 				direction
 			}));
-		} finally {
-			set_active_reaction(previous_reaction);
-			set_active_effect(previous_effect);
-		}
+		});
 	}
 
 	/** @type {TransitionManager} */

From c3361bfdb7adc3f2df6ec831fb54f2ca614880e9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Jul 2025 01:59:57 -0400
Subject: [PATCH 204/259] chore: remove component_context.d (#16330)

---
 packages/svelte/src/internal/client/context.js          | 9 ++-------
 packages/svelte/src/internal/client/reactivity/props.js | 8 --------
 packages/svelte/src/internal/client/types.d.ts          | 2 --
 3 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index 736b81c172..d79d827fee 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -139,16 +139,15 @@ export function getAllContexts() {
  * @returns {void}
  */
 export function push(props, runes = false, fn) {
-	var ctx = (component_context = {
+	component_context = {
 		p: component_context,
 		c: null,
-		d: false,
 		e: null,
 		m: false,
 		s: props,
 		x: null,
 		l: null
-	});
+	};
 
 	if (legacy_mode_flag && !runes) {
 		component_context.l = {
@@ -159,10 +158,6 @@ export function push(props, runes = false, fn) {
 		};
 	}
 
-	teardown(() => {
-		/** @type {ComponentContext} */ (ctx).d = true;
-	});
-
 	if (DEV) {
 		// component function
 		component_context.function = fn;
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 03daad5251..f39d45bb04 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -268,14 +268,6 @@ export function spread_props(...props) {
 	return new Proxy({ props }, spread_props_handler);
 }
 
-/**
- * @param {Derived} current_value
- * @returns {boolean}
- */
-function has_destroyed_component_ctx(current_value) {
-	return current_value.ctx?.d ?? false;
-}
-
 /**
  * This function is responsible for synchronizing a possibly bound prop with the inner component state.
  * It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index 0b7310e172..bcbd0ac8a3 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -14,8 +14,6 @@ export type ComponentContext = {
 	p: null | ComponentContext;
 	/** context */
 	c: null | Map<unknown, unknown>;
-	/** destroyed */
-	d: boolean;
 	/** deferred effects */
 	e: null | Array<{
 		fn: () => void | (() => void);

From 0cafe34c92dd21b532702bf6bc27cce108e25ea0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Jul 2025 07:44:07 -0400
Subject: [PATCH 205/259] chore: DRY out increment logic (#16332)

---
 packages/svelte/src/internal/client/proxy.js     | 16 ++++------------
 .../src/internal/client/reactivity/sources.js    |  8 ++++++++
 .../svelte/src/reactivity/create-subscriber.js   |  3 +--
 packages/svelte/src/reactivity/map.js            |  3 +--
 packages/svelte/src/reactivity/set.js            |  3 +--
 .../svelte/src/reactivity/url-search-params.js   |  3 +--
 packages/svelte/src/reactivity/utils.js          |  7 -------
 7 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 packages/svelte/src/reactivity/utils.js

diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index d9063aee34..97c8da9d33 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -8,7 +8,7 @@ import {
 	is_array,
 	object_prototype
 } from '../shared/utils.js';
-import { state as source, set } from './reactivity/sources.js';
+import { state as source, set, increment } from './reactivity/sources.js';
 import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
@@ -118,7 +118,7 @@ export function proxy(value) {
 				if (prop in target) {
 					const s = with_parent(() => source(UNINITIALIZED, stack));
 					sources.set(prop, s);
-					update_version(version);
+					increment(version);
 
 					if (DEV) {
 						tag(s, get_label(path, prop));
@@ -136,7 +136,7 @@ export function proxy(value) {
 					}
 				}
 				set(s, UNINITIALIZED);
-				update_version(version);
+				increment(version);
 			}
 
 			return true;
@@ -304,7 +304,7 @@ export function proxy(value) {
 					}
 				}
 
-				update_version(version);
+				increment(version);
 			}
 
 			return true;
@@ -343,14 +343,6 @@ function get_label(path, prop) {
 	return /^\d+$/.test(prop) ? `${path}[${prop}]` : `${path}['${prop}']`;
 }
 
-/**
- * @param {Source<number>} signal
- * @param {1 | -1} [d]
- */
-function update_version(signal, d = 1) {
-	set(signal, signal.v + d);
-}
-
 /**
  * @param {any} value
  */
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index a86ccfee4f..9f08354cc0 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -259,6 +259,14 @@ export function update_pre(source, d = 1) {
 	return set(source, d === 1 ? ++value : --value);
 }
 
+/**
+ * Silently (without using `get`) increment a source
+ * @param {Source<number>} source
+ */
+export function increment(source) {
+	set(source, source.v + 1);
+}
+
 /**
  * @param {Value} signal
  * @param {number} status should be DIRTY or MAYBE_DIRTY
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 491ffb45cb..67a92ceb7b 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -1,8 +1,7 @@
 import { get, tick, untrack } from '../internal/client/runtime.js';
 import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
-import { source } from '../internal/client/reactivity/sources.js';
+import { source, increment } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
-import { increment } from './utils.js';
 import { DEV } from 'esm-env';
 
 /**
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
index 4fa2dfd7b2..014b5e7c7c 100644
--- a/packages/svelte/src/reactivity/map.js
+++ b/packages/svelte/src/reactivity/map.js
@@ -1,9 +1,8 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { set, source, state } from '../internal/client/reactivity/sources.js';
+import { set, source, state, increment } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
 import { get, update_version } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
 
 /**
  * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index 9e3c330beb..d7c2deeaae 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -1,9 +1,8 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { source, set, state } from '../internal/client/reactivity/sources.js';
+import { source, set, state, increment } from '../internal/client/reactivity/sources.js';
 import { label, tag } from '../internal/client/dev/tracing.js';
 import { get, update_version } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
 
 var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
 var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union'];
diff --git a/packages/svelte/src/reactivity/url-search-params.js b/packages/svelte/src/reactivity/url-search-params.js
index 389da7cdb6..2381e11875 100644
--- a/packages/svelte/src/reactivity/url-search-params.js
+++ b/packages/svelte/src/reactivity/url-search-params.js
@@ -1,9 +1,8 @@
 import { DEV } from 'esm-env';
-import { state } from '../internal/client/reactivity/sources.js';
+import { state, increment } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { get_current_url } from './url.js';
-import { increment } from './utils.js';
 
 export const REPLACE = Symbol();
 
diff --git a/packages/svelte/src/reactivity/utils.js b/packages/svelte/src/reactivity/utils.js
deleted file mode 100644
index cd55e0e0ba..0000000000
--- a/packages/svelte/src/reactivity/utils.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/** @import { Source } from '#client' */
-import { set } from '../internal/client/reactivity/sources.js';
-
-/** @param {Source<number>} source */
-export function increment(source) {
-	set(source, source.v + 1);
-}

From 8da222f46021fd2bd3e69048557a229c20a2fe94 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Jul 2025 08:57:33 -0400
Subject: [PATCH 206/259] chore: simplify component pop (#16331)

* chore: simplify pop

* shuffle

* remove .m flag on component context

* unused

* shuffle

* simplify

* context is never null in pop

* changeset
---
 .changeset/new-candles-marry.md               |  5 ++
 .../svelte/src/internal/client/context.js     | 50 ++++++++-----------
 .../src/internal/client/reactivity/effects.js | 18 ++-----
 .../svelte/src/internal/client/types.d.ts     |  8 +--
 4 files changed, 30 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/new-candles-marry.md

diff --git a/.changeset/new-candles-marry.md b/.changeset/new-candles-marry.md
new file mode 100644
index 0000000000..4d55980c72
--- /dev/null
+++ b/.changeset/new-candles-marry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: simplify internal component `pop()`
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index d79d827fee..6876a89f57 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -143,7 +143,6 @@ export function push(props, runes = false, fn) {
 		p: component_context,
 		c: null,
 		e: null,
-		m: false,
 		s: props,
 		x: null,
 		l: null
@@ -171,37 +170,28 @@ export function push(props, runes = false, fn) {
  * @returns {T}
  */
 export function pop(component) {
-	const context_stack_item = component_context;
-	if (context_stack_item !== null) {
-		if (component !== undefined) {
-			context_stack_item.x = component;
-		}
-		const component_effects = context_stack_item.e;
-		if (component_effects !== null) {
-			var previous_effect = active_effect;
-			var previous_reaction = active_reaction;
-			context_stack_item.e = null;
-			try {
-				for (var i = 0; i < component_effects.length; i++) {
-					var component_effect = component_effects[i];
-					set_active_effect(component_effect.effect);
-					set_active_reaction(component_effect.reaction);
-					create_user_effect(component_effect.fn);
-				}
-			} finally {
-				set_active_effect(previous_effect);
-				set_active_reaction(previous_reaction);
-			}
-		}
-		component_context = context_stack_item.p;
-		if (DEV) {
-			dev_current_component_function = context_stack_item.p?.function ?? null;
+	var context = /** @type {ComponentContext} */ (component_context);
+	var effects = context.e;
+
+	if (effects !== null) {
+		context.e = null;
+
+		for (var fn of effects) {
+			create_user_effect(fn);
 		}
-		context_stack_item.m = true;
 	}
-	// Micro-optimization: Don't set .a above to the empty object
-	// so it can be garbage-collected when the return here is unused
-	return component || /** @type {T} */ ({});
+
+	if (component !== undefined) {
+		context.x = component;
+	}
+
+	component_context = context.p;
+
+	if (DEV) {
+		dev_current_component_function = component_context?.function ?? null;
+	}
+
+	return component ?? /** @type {T} */ ({});
 }
 
 /** @returns {boolean} */
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index df2afd3e38..51c6805529 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -179,28 +179,18 @@ export function teardown(fn) {
 export function user_effect(fn) {
 	validate_effect('$effect');
 
-	// Non-nested `$effect(...)` in a component should be deferred
-	// until the component is mounted
-	var defer =
-		active_effect !== null &&
-		(active_effect.f & BRANCH_EFFECT) !== 0 &&
-		component_context !== null &&
-		!component_context.m;
-
 	if (DEV) {
 		define_property(fn, 'name', {
 			value: '$effect'
 		});
 	}
 
-	if (defer) {
+	if (!active_reaction && active_effect && (active_effect.f & BRANCH_EFFECT) !== 0) {
+		// Top-level `$effect(...)` in a component — defer until mount
 		var context = /** @type {ComponentContext} */ (component_context);
-		(context.e ??= []).push({
-			fn,
-			effect: active_effect,
-			reaction: active_reaction
-		});
+		(context.e ??= []).push(fn);
 	} else {
+		// Everything else — create immediately
 		return create_user_effect(fn);
 	}
 }
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index bcbd0ac8a3..a42f91343c 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -15,13 +15,7 @@ export type ComponentContext = {
 	/** context */
 	c: null | Map<unknown, unknown>;
 	/** deferred effects */
-	e: null | Array<{
-		fn: () => void | (() => void);
-		effect: null | Effect;
-		reaction: null | Reaction;
-	}>;
-	/** mounted */
-	m: boolean;
+	e: null | Array<() => void | (() => void)>;
 	/**
 	 * props — needed for legacy mode lifecycle functions, and for `createEventDispatcher`
 	 * @deprecated remove in 6.0

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 207/259] 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 208/259] 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 209/259] 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 210/259] 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 211/259] 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 212/259] 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 213/259] 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 214/259] 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 215/259] 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 216/259] 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 217/259] 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 218/259] 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 219/259] 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 220/259] 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 221/259] 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 222/259] 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 223/259] 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 224/259] 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 225/259] 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 226/259] 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 227/259] 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 228/259] 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 229/259] 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 230/259] 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 231/259] 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 232/259] 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 233/259] 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 234/259] 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 235/259] 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 236/259] 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 237/259] 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 238/259] 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 239/259] 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 240/259] 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 241/259] 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 242/259] 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 243/259] 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 244/259] 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 245/259] 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 246/259] 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 247/259] 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 248/259] 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 249/259] 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 250/259] 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 251/259] 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 252/259] 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 253/259] 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 254/259] 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 255/259] 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 256/259] 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 257/259] 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 258/259] 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 259/259] 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';