From 425fba33fed0572e952d364d1c59f7af01aedd07 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 20 Mar 2026 22:23:57 +0100
Subject: [PATCH 01/13] fix: hydration comments during hmr (#17975)

Closes #17972

Claude found this fix I had a look and I think it makes sense (we are
injecting a new comment which messes up the marching during hydration).

I'm slightly confused why this only applied to `css_props` but I guess
that's because there's an "hidden" element there which makes it special.

I don't super-like the `if` situation, but I guess it is what it is.

Also the test was using `hmr` without `dev` and this brought to my
attention that we were just assuming components return something while
it's not the case...I guess it doesn't really matter unless you are
using `hmr` in prod which is not a thing but fixing this is simple so we
might just as well doing it
---
 .changeset/calm-mice-allow.md                 |  5 ++++
 .../svelte/src/internal/client/dev/hmr.js     | 25 +++++++++++++------
 .../samples/css-props-hmr/Component.svelte    |  7 ++++++
 .../samples/css-props-hmr/_config.js          |  7 ++++++
 .../samples/css-props-hmr/main.svelte         |  5 ++++
 5 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/calm-mice-allow.md
 create mode 100644 packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte
 create mode 100644 packages/svelte/tests/hydration/samples/css-props-hmr/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte

diff --git a/.changeset/calm-mice-allow.md b/.changeset/calm-mice-allow.md
new file mode 100644
index 0000000000..eff71e1082
--- /dev/null
+++ b/.changeset/calm-mice-allow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: hydration comments during hmr
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index 071901aafc..4687708c90 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/packages/svelte/src/internal/client/dev/hmr.js
@@ -34,7 +34,13 @@ export function hmr(fn) {
 		let start = create_comment();
 		let end = create_comment();
 
-		anchor.before(start);
+		// During hydration, inserting the start comment before the anchor could
+		// corrupt the DOM tree that the hydration walker is navigating (e.g. when
+		// a component is inside a CSS props wrapper gh-issue#17972). We defer the insertion until
+		// after the component has hydrated.
+		if (!hydrating) {
+			anchor.before(start);
+		}
 
 		block(() => {
 			if (component === (component = get(current))) {
@@ -52,13 +58,13 @@ export function hmr(fn) {
 				if (ran) set_should_intro(false);
 
 				// preserve getters/setters
-				Object.defineProperties(
-					instance,
-					Object.getOwnPropertyDescriptors(
-						// @ts-expect-error
-						new.target ? new component(anchor, props) : component(anchor, props)
-					)
-				);
+				var result =
+					// @ts-expect-error
+					new.target ? new component(anchor, props) : component(anchor, props);
+				// a component is not guaranteed to return something and we can't invoke getOwnPropertyDescriptors on undefined
+				if (result) {
+					Object.defineProperties(instance, Object.getOwnPropertyDescriptors(result));
+				}
 
 				if (ran) set_should_intro(true);
 			});
@@ -67,6 +73,9 @@ export function hmr(fn) {
 		ran = true;
 
 		if (hydrating) {
+			// Insert start comment now that hydration is done, so it doesn't
+			// corrupt the hydration walk
+			anchor.before(start);
 			anchor = hydrate_node;
 		}
 
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte b/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte
new file mode 100644
index 0000000000..ac73501cca
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte
@@ -0,0 +1,7 @@
+<h1>Hello</h1>
+
+<style>
+	h1 {
+		color: var(--color);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js b/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js
new file mode 100644
index 0000000000..2cd696d584
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		hmr: true
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte b/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte
new file mode 100644
index 0000000000..eed9b57caf
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component --color="red" />
\ No newline at end of file

From 6b33dd2a1e8aa48dc88c9ce6e19c4a49a2eac51a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 21 Mar 2026 13:29:39 +0100
Subject: [PATCH 02/13] fix: group sync statements (#17977)

We were just putting each statement into its own promise. Besides this
being bad for perf, it also introduces subtle timing issues - the
execution order of the code could change in bad ways. Fixes #17940
---
 .changeset/puny-masks-run.md                  |   5 +
 .../src/compiler/phases/2-analyze/index.js    |  36 ++++-
 .../3-transform/shared/transform-async.js     | 124 ++++++++++--------
 .../svelte/src/compiler/phases/types.d.ts     |   2 +-
 .../_expected/client/index.svelte.js          |  16 ++-
 .../_expected/server/index.svelte.js          |  16 ++-
 .../async-top-level-group-sync-run/_config.js |   3 +
 .../_expected/client/index.svelte.js          |  26 ++++
 .../_expected/server/index.svelte.js          |  21 +++
 .../index.svelte                              |   9 ++
 10 files changed, 184 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/puny-masks-run.md
 create mode 100644 packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js
 create mode 100644 packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte

diff --git a/.changeset/puny-masks-run.md b/.changeset/puny-masks-run.md
new file mode 100644
index 0000000000..162abe4ae7
--- /dev/null
+++ b/.changeset/puny-masks-run.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: group sync statements
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index cadd159b3e..dec0081aa9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1074,6 +1074,9 @@ function calculate_blockers(instance, analysis) {
 
 	let awaited = false;
 
+	/** @type {Array<ESTree.Statement | ESTree.VariableDeclarator>} */
+	let sync_group = [];
+
 	// TODO this should probably be attached to the scope?
 	const promises = b.id('$$promises');
 
@@ -1088,6 +1091,13 @@ function calculate_blockers(instance, analysis) {
 		binding.blocker = blocker;
 	}
 
+	function flush_sync_group() {
+		if (sync_group.length === 0) return;
+
+		analysis.instance_body.async.push({ nodes: sync_group, has_await: false });
+		sync_group = [];
+	}
+
 	/**
 	 * Analysis of blockers for functions is deferred until we know which statements are async/blockers
 	 * @type {Array<ESTree.FunctionDeclaration | ESTree.VariableDeclarator>}
@@ -1149,6 +1159,9 @@ function calculate_blockers(instance, analysis) {
 
 					trace_references(declarator, reads, writes, instance.scope);
 
+					// Needs to happen before blocker computation
+					if (has_await) flush_sync_group();
+
 					const blocker = /** @type {NonNullable<Binding['blocker']>} */ (
 						b.member(promises, b.literal(analysis.instance_body.async.length), true)
 					);
@@ -1161,11 +1174,12 @@ function calculate_blockers(instance, analysis) {
 						push_declaration(id, blocker);
 					}
 
-					// one declarator per declaration, makes things simpler
-					analysis.instance_body.async.push({
-						node: declarator,
-						has_await
-					});
+					if (has_await) {
+						// one declarator per declaration, makes things simpler
+						analysis.instance_body.async.push({ nodes: [declarator], has_await: true });
+					} else {
+						sync_group.push(declarator);
+					}
 				}
 			}
 		} else if (awaited) {
@@ -1177,6 +1191,9 @@ function calculate_blockers(instance, analysis) {
 
 			trace_references(node, reads, writes, instance.scope);
 
+			// Needs to happen before blocker computation
+			if (has_await) flush_sync_group();
+
 			const blocker = /** @type {NonNullable<Binding['blocker']>} */ (
 				b.member(promises, b.literal(analysis.instance_body.async.length), true)
 			);
@@ -1187,15 +1204,20 @@ function calculate_blockers(instance, analysis) {
 
 			if (node.type === 'ClassDeclaration') {
 				push_declaration(node.id, blocker);
-				analysis.instance_body.async.push({ node, has_await });
+			}
+
+			if (has_await) {
+				analysis.instance_body.async.push({ nodes: [node], has_await: true });
 			} else {
-				analysis.instance_body.async.push({ node, has_await });
+				sync_group.push(node);
 			}
 		} else {
 			analysis.instance_body.sync.push(node);
 		}
 	}
 
+	flush_sync_group();
+
 	for (const fn of functions) {
 		/** @type {Set<Binding>} */
 		const reads_writes = new Set();
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
index 5c8f901d7c..ac90f1db4b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
@@ -47,64 +47,24 @@ export function transform_body(instance_body, runner, transform) {
 
 	// Thunks for the await expressions
 	if (instance_body.async.length > 0) {
-		const thunks = instance_body.async.map((s) => {
-			if (s.node.type === 'VariableDeclarator') {
-				const visited = /** @type {ESTree.VariableDeclaration | ESTree.EmptyStatement} */ (
-					transform(b.var(s.node.id, s.node.init))
-				);
-
-				const statements =
-					visited.type === 'VariableDeclaration'
-						? visited.declarations.map((node) => {
-								if (
-									node.id.type === 'Identifier' &&
-									(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
-								) {
-									// this is an intermediate declaration created in VariableDeclaration.js;
-									// subsequent statements depend on it
-									return b.var(node.id, node.init);
-								}
-
-								return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
-							})
-						: [];
-
-				if (statements.length === 1) {
-					const statement = /** @type {ESTree.ExpressionStatement} */ (statements[0]);
-					return b.thunk(statement.expression, s.has_await);
-				}
-
-				return b.thunk(b.block(statements), s.has_await);
-			}
+		const thunks = instance_body.async.map((entry) => {
+			/** @type {ESTree.Statement[]} */
+			const entry_statements = [];
 
-			if (s.node.type === 'ClassDeclaration') {
-				return b.thunk(
-					b.assignment(
-						'=',
-						s.node.id,
-						/** @type {ESTree.ClassExpression} */ ({ ...s.node, type: 'ClassExpression' })
-					),
-					s.has_await
-				);
+			for (const node of entry.nodes) {
+				entry_statements.push(...transform_async_node(node, transform));
 			}
 
-			if (s.node.type === 'ExpressionStatement') {
-				// the expression may be a $inspect call, which will be transformed into an empty statement
-				const expression = /** @type {ESTree.Expression | ESTree.EmptyStatement} */ (
-					transform(s.node.expression)
-				);
-
-				if (expression.type === 'EmptyStatement') {
-					// Keep indices stable for async sequencing while avoiding array holes in run([...]).
-					return b.thunk(b.void0, false);
-				}
+			if (entry_statements.length === 0) {
+				// Keep indices stable for async sequencing while avoiding array holes in run([...]).
+				return b.thunk(b.void0, false);
+			}
 
-				return expression.type === 'AwaitExpression'
-					? b.thunk(expression, true)
-					: b.thunk(b.unary('void', expression), s.has_await);
+			if (entry_statements.length === 1 && entry_statements[0].type === 'ExpressionStatement') {
+				return b.thunk(entry_statements[0].expression, entry.has_await);
 			}
 
-			return b.thunk(b.block([/** @type {ESTree.Statement} */ (transform(s.node))]), s.has_await);
+			return b.thunk(b.block(entry_statements), entry.has_await);
 		});
 
 		// TODO get the `$$promises` ID from scope
@@ -113,3 +73,63 @@ export function transform_body(instance_body, runner, transform) {
 
 	return statements;
 }
+
+/**
+ * @param {ESTree.Statement | ESTree.VariableDeclarator} node
+ * @param {(node: ESTree.Node) => ESTree.Node} transform
+ * @returns {ESTree.Statement[]}
+ */
+function transform_async_node(node, transform) {
+	if (node.type === 'VariableDeclarator') {
+		const visited = /** @type {ESTree.VariableDeclaration | ESTree.EmptyStatement} */ (
+			transform(b.var(node.id, node.init))
+		);
+
+		return visited.type === 'VariableDeclaration'
+			? visited.declarations.map((node) => {
+					if (
+						node.id.type === 'Identifier' &&
+						(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
+					) {
+						// This intermediate declaration is created in VariableDeclaration.js;
+						// subsequent statements may depend on it.
+						return b.var(node.id, node.init);
+					}
+
+					return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
+				})
+			: [];
+	}
+
+	if (node.type === 'ClassDeclaration') {
+		return [
+			b.stmt(
+				b.assignment(
+					'=',
+					node.id,
+					/** @type {ESTree.ClassExpression} */ ({ ...node, type: 'ClassExpression' })
+				)
+			)
+		];
+	}
+
+	if (node.type === 'ExpressionStatement') {
+		// The expression may be a $inspect call, which will be transformed into an empty statement.
+		const expression = /** @type {ESTree.Expression | ESTree.EmptyStatement} */ (
+			transform(node.expression)
+		);
+
+		if (expression.type === 'EmptyStatement') {
+			return [];
+		}
+
+		if (expression.type === 'AwaitExpression') {
+			return [b.stmt(expression)];
+		}
+
+		return [b.stmt(b.unary('void', expression))];
+	}
+
+	const statement = /** @type {ESTree.Statement | ESTree.EmptyStatement} */ (transform(node));
+	return statement.type === 'EmptyStatement' ? [] : [statement];
+}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 5397ea45f9..a1a85ce145 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -131,7 +131,7 @@ export interface ComponentAnalysis extends Analysis {
 	instance_body: {
 		hoisted: Array<Statement | ModuleDeclaration>;
 		sync: Array<Statement | ModuleDeclaration | VariableDeclaration>;
-		async: Array<{ node: Statement | VariableDeclarator; has_await: boolean }>;
+		async: Array<{ nodes: Array<Statement | VariableDeclarator>; has_await: boolean }>;
 		declarations: Array<Identifier>;
 	};
 }
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
index a8b1a43495..4f06d9ddbf 100644
--- a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
@@ -10,13 +10,15 @@ export default function Async_in_derived($$anchor, $$props) {
 	var $$promises = $.run([
 		async () => yes1 = await $.async_derived(() => 1),
 		async () => yes2 = await $.async_derived(async () => foo(await 1)),
-		() => no1 = $.derived(async () => {
-			return await 1;
-		}),
-
-		() => no2 = $.derived(() => async () => {
-			return await 1;
-		})
+		() => {
+			no1 = $.derived(async () => {
+				return await 1;
+			});
+
+			no2 = $.derived(() => async () => {
+				return await 1;
+			});
+		}
 	]);
 
 	var fragment = $.comment();
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
index 1697e3adc6..3a53475944 100644
--- a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
@@ -8,13 +8,15 @@ export default function Async_in_derived($$renderer, $$props) {
 		var $$promises = $$renderer.run([
 			async () => yes1 = await $.async_derived(() => 1),
 			async () => yes2 = await $.async_derived(async () => foo(await 1)),
-			() => no1 = $.derived(async () => {
-				return await 1;
-			}),
-
-			() => no2 = $.derived(() => async () => {
-				return await 1;
-			})
+			() => {
+				no1 = $.derived(async () => {
+					return await 1;
+				});
+
+				no2 = $.derived(() => async () => {
+					return await 1;
+				});
+			}
 		]);
 
 		if (true) {
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..8fb09fadd2
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
@@ -0,0 +1,26 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_top_level_group_sync_run($$anchor) {
+	var a,
+		// these should be grouped into one, having an async tick inbetween
+		// would change how the code runs and could introduce subtle timing bugs
+		b,
+		c;
+
+	var $$promises = $.run([
+		async () => a = await Promise.resolve(1),
+		() => {
+			b = a + 1;
+			c = b + 1;
+		}
+	]);
+
+	$.next();
+
+	var text = $.text();
+
+	$.template_effect(() => $.set_text(text, c), void 0, void 0, [$$promises[1]]);
+	$.append($$anchor, text);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..43db129746
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js
@@ -0,0 +1,21 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_top_level_group_sync_run($$renderer) {
+	var a,
+		// these should be grouped into one, having an async tick inbetween
+		// would change how the code runs and could introduce subtle timing bugs
+		b,
+		c;
+
+	var $$promises = $$renderer.run([
+		async () => a = await Promise.resolve(1),
+		() => {
+			b = a + 1;
+			c = b + 1;
+		}
+	]);
+
+	$$renderer.push(`<!---->`);
+	$$renderer.async([$$promises[1]], ($$renderer) => $$renderer.push(() => $.escape(c)));
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte
new file mode 100644
index 0000000000..98f602312e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte
@@ -0,0 +1,9 @@
+<script>
+	let a = await Promise.resolve(1);
+	// these should be grouped into one, having an async tick inbetween
+	// would change how the code runs and could introduce subtle timing bugs
+	let b = a + 1;
+	let c = b + 1;
+</script>
+
+{c}

From 8e4de9b14500e195ec7f084c8c32b1782b31c5c9 Mon Sep 17 00:00:00 2001
From: Nitin Sahu <ns0779687@gmail.com>
Date: Sat, 21 Mar 2026 18:03:45 +0530
Subject: [PATCH 03/13] fix: null out effect.b in destroy_effect to prevent
 memory leak (#17980)

## Fix: #17881

### Root Cause

When a dynamic component switches (e.g. `<Component />`), branch effects
are destroyed via `destroy_effect()`.

However, the `effect.b` (Boundary reference) field was not cleared
alongside other references (`next`, `prev`, `ctx`, `deps`, `fn`,
`nodes`, `ac`).

As a result, destroyed effects retained a reference to the `Boundary`
instance, which holds references to component state and child effects.
This prevented destroyed component subtrees from being garbage
collected, causing memory usage to grow during repeated component
switching.

### Solution

Clear the boundary reference during effect destruction.

```diff
effect.next =
      effect.prev =
      effect.teardown =
      effect.ctx =
      effect.deps =
      effect.fn =
      effect.nodes =
      effect.ac =
+     effect.b =
          null;
```

### Test Plan

* All existing tests pass:

  * runtime-runes: 2,459
  * runtime-legacy: 3,294
  * signals: 96
  * Total: 5,849 tests

* Added a dynamic component switching test that toggles components
repeatedly and verifies correct DOM output.

### Validation

Reproduced the issue using the example from #17881.

After applying the fix:

* Memory usage stabilizes during repeated component switching
* Destroyed components are properly reclaimed by the garbage collector
* No behavioral regressions observed

### Impact

* Fixes memory leak in dynamic component switching
* Minimal, safe change
* No API or behavior changes

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/fix-memory-leak-boundary.md                    | 5 +++++
 packages/svelte/src/internal/client/reactivity/effects.js | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/fix-memory-leak-boundary.md

diff --git a/.changeset/fix-memory-leak-boundary.md b/.changeset/fix-memory-leak-boundary.md
new file mode 100644
index 0000000000..8a3b084981
--- /dev/null
+++ b/.changeset/fix-memory-leak-boundary.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: null out `effect.b` in `destroy_effect`
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index aeffeedddd..54c8a17d79 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -559,6 +559,7 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.fn =
 		effect.nodes =
 		effect.ac =
+		effect.b =
 			null;
 }
 

From 7123bf3a131a53b1ba9414f0d44150a94d0132e3 Mon Sep 17 00:00:00 2001
From: Abishek Raj R R <abishekrajrr.cse2024@citchennai.net>
Date: Sat, 21 Mar 2026 18:04:31 +0530
Subject: [PATCH 04/13] fix: remove trailing semicolon from {@const} tag
 printer (#17962)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #17720

## Problem
The `{@const}` tag was being printed with a trailing semicolon,
producing invalid Svelte syntax like:
{@const a = 1;}
This happened because the `ConstTag` visitor in the printer was
delegating to esrap's `VariableDeclaration` handler, which always
appends a semicolon (correct for JS, but wrong for Svelte template
syntax).

## Solution
Instead of delegating to `VariableDeclaration`, the `ConstTag` visitor
now manually prints the tag by:
- Writing `{@const ` directly
- Iterating through declarators and visiting each one
- Separating multiple declarations with commas
- Closing with `}` — no trailing semicolon

## Before
{@const a = 1;}
{@const a = 1, b = 2;}

## After
{@const a = 1}
{@const a = 1, b = 2}

## Changes
- `packages/svelte/src/compiler/print/index.js` — fixed `ConstTag`
visitor
- `packages/svelte/tests/print/samples/const-tag/output.svelte` —
updated expected test output

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/two-onions-end.md                             | 5 +++++
 packages/svelte/src/compiler/print/index.js              | 9 +++++++--
 .../svelte/tests/print/samples/const-tag/output.svelte   | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/two-onions-end.md

diff --git a/.changeset/two-onions-end.md b/.changeset/two-onions-end.md
new file mode 100644
index 0000000000..9e6a56bbf9
--- /dev/null
+++ b/.changeset/two-onions-end.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: remove trailing semicolon from {@const} tag printer
diff --git a/packages/svelte/src/compiler/print/index.js b/packages/svelte/src/compiler/print/index.js
index 160aeb4345..26dc1b88e8 100644
--- a/packages/svelte/src/compiler/print/index.js
+++ b/packages/svelte/src/compiler/print/index.js
@@ -592,8 +592,13 @@ const svelte_visitors = (comments) => ({
 	},
 
 	ConstTag(node, context) {
-		context.write('{@');
-		context.visit(node.declaration);
+		context.write('{@const ');
+		const declarators = node.declaration.declarations;
+		for (let i = 0; i < declarators.length; i++) {
+			if (i > 0) context.write(', ');
+			context.visit(declarators[i]);
+		}
+
 		context.write('}');
 	},
 
diff --git a/packages/svelte/tests/print/samples/const-tag/output.svelte b/packages/svelte/tests/print/samples/const-tag/output.svelte
index d9d8addcbb..dded998a84 100644
--- a/packages/svelte/tests/print/samples/const-tag/output.svelte
+++ b/packages/svelte/tests/print/samples/const-tag/output.svelte
@@ -3,6 +3,6 @@
 </script>
 
 {#each boxes as box}
-	{@const area = box.width * box.height;}
+	{@const area = box.width * box.height}
 	{box.width} * {box.height} = {area}
 {/each}

From db69b7e345090edd4aa7949c52478adc05a61d61 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 21 Mar 2026 09:29:56 -0400
Subject: [PATCH 05/13] Version Packages (#17965)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## svelte@5.54.1

### Patch Changes

- fix: hydration comments during hmr
([#17975](https://github.com/sveltejs/svelte/pull/17975))

- fix: null out `effect.b` in `destroy_effect`
([#17980](https://github.com/sveltejs/svelte/pull/17980))

- fix: group sync statements
([#17977](https://github.com/sveltejs/svelte/pull/17977))

- fix: defer batch resolution until earlier intersecting batches have
committed ([#17162](https://github.com/sveltejs/svelte/pull/17162))

- fix: properly invoke `iterator.return()` during reactivity loss check
([#17966](https://github.com/sveltejs/svelte/pull/17966))

- fix: remove trailing semicolon from {@const} tag printer
([#17962](https://github.com/sveltejs/svelte/pull/17962))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/calm-mice-allow.md          |  5 -----
 .changeset/fix-memory-leak-boundary.md |  5 -----
 .changeset/puny-masks-run.md           |  5 -----
 .changeset/spicy-teeth-tan.md          |  5 -----
 .changeset/tasty-carrots-tie.md        |  5 -----
 .changeset/two-onions-end.md           |  5 -----
 packages/svelte/CHANGELOG.md           | 16 ++++++++++++++++
 packages/svelte/package.json           |  2 +-
 packages/svelte/src/version.js         |  2 +-
 9 files changed, 18 insertions(+), 32 deletions(-)
 delete mode 100644 .changeset/calm-mice-allow.md
 delete mode 100644 .changeset/fix-memory-leak-boundary.md
 delete mode 100644 .changeset/puny-masks-run.md
 delete mode 100644 .changeset/spicy-teeth-tan.md
 delete mode 100644 .changeset/tasty-carrots-tie.md
 delete mode 100644 .changeset/two-onions-end.md

diff --git a/.changeset/calm-mice-allow.md b/.changeset/calm-mice-allow.md
deleted file mode 100644
index eff71e1082..0000000000
--- a/.changeset/calm-mice-allow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: hydration comments during hmr
diff --git a/.changeset/fix-memory-leak-boundary.md b/.changeset/fix-memory-leak-boundary.md
deleted file mode 100644
index 8a3b084981..0000000000
--- a/.changeset/fix-memory-leak-boundary.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: null out `effect.b` in `destroy_effect`
diff --git a/.changeset/puny-masks-run.md b/.changeset/puny-masks-run.md
deleted file mode 100644
index 162abe4ae7..0000000000
--- a/.changeset/puny-masks-run.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: group sync statements
diff --git a/.changeset/spicy-teeth-tan.md b/.changeset/spicy-teeth-tan.md
deleted file mode 100644
index c7efa65130..0000000000
--- a/.changeset/spicy-teeth-tan.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: defer batch resolution until earlier intersecting batches have committed
diff --git a/.changeset/tasty-carrots-tie.md b/.changeset/tasty-carrots-tie.md
deleted file mode 100644
index 5d6cb8025d..0000000000
--- a/.changeset/tasty-carrots-tie.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: properly invoke `iterator.return()` during reactivity loss check
diff --git a/.changeset/two-onions-end.md b/.changeset/two-onions-end.md
deleted file mode 100644
index 9e6a56bbf9..0000000000
--- a/.changeset/two-onions-end.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"svelte": patch
----
-
-fix: remove trailing semicolon from {@const} tag printer
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7c1311ae84..16cbf92ea4 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,21 @@
 # svelte
 
+## 5.54.1
+
+### Patch Changes
+
+- fix: hydration comments during hmr ([#17975](https://github.com/sveltejs/svelte/pull/17975))
+
+- fix: null out `effect.b` in `destroy_effect` ([#17980](https://github.com/sveltejs/svelte/pull/17980))
+
+- fix: group sync statements ([#17977](https://github.com/sveltejs/svelte/pull/17977))
+
+- fix: defer batch resolution until earlier intersecting batches have committed ([#17162](https://github.com/sveltejs/svelte/pull/17162))
+
+- fix: properly invoke `iterator.return()` during reactivity loss check ([#17966](https://github.com/sveltejs/svelte/pull/17966))
+
+- fix: remove trailing semicolon from {@const} tag printer ([#17962](https://github.com/sveltejs/svelte/pull/17962))
+
 ## 5.54.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 270d02d621..afbdfa956c 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.54.0",
+  "version": "5.54.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 191d53016a..7de1242e62 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.54.0';
+export const VERSION = '5.54.1';
 export const PUBLIC_VERSION = '5';

From 0c669d9bc98f7a7dfc5da666deaf4f672e07c847 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=9D=A8=E5=B8=86?=
 <39647285+leno23@users.noreply.github.com>
Date: Mon, 23 Mar 2026 01:09:14 +0800
Subject: [PATCH 06/13] docs: recommend createContext as the primary method for
 context (#17959)

### Before submitting the PR, please make sure you do the following

- [ ] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [ ] This message body should clearly illustrate what problems it
solves.
- [ ] Ideally, include a test that fails without this PR but passes with
it.
- [ ] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [ ] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/06-runtime/02-context.md | 124 +++++++++++++++-----
 1 file changed, 96 insertions(+), 28 deletions(-)

diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 61b203f93e..86009c9a20 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -2,7 +2,66 @@
 title: Context
 ---
 
-Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...
+Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling').
+
+By creating a `[get, set]` pair of functions with `createContext`, you can set the context in a parent component and get it in a child component:
+
+<!-- codeblock:start {"title":"Context","selected":"context.ts"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Parent from './Parent.svelte';
+	import Child from './Child.svelte';
+</script>
+
+<Parent>
+	<Child />
+</Parent>
+```
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setUserContext } from './context';
+
+	let { children } = $props();
+
+	setUserContext({ name: 'world' });
+</script>
+
+{@render children()}
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getUserContext } from './context';
+
+	const user = getUserContext();
+</script>
+
+<h1>hello {user.name}, inside Child.svelte</h1>
+```
+
+```ts
+/// file: context.ts
+import { createContext } from 'svelte';
+
+interface User {
+	name: string;
+}
+
+export const [getUserContext, setUserContext] = createContext<User>();
+```
+<!-- codeblock:end -->
+
+> [!NOTE] `createContext` was added in version 5.40. If you are using an earlier version of Svelte, you must use `setContext` and `getContext` instead.
+
+This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) as shown above.
+
+## `setContext` and `getContext`
+
+As an alternative to `createContext`, you can use `setContext` and `getContext` directly. The parent component sets context with `setContext(key, value)`...
 
 ```svelte
 <!--- file: Parent.svelte --->
@@ -26,32 +85,28 @@ Context allows components to access values owned by parent components without pa
 <h1>{message}, inside Child.svelte</h1>
 ```
 
-This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) ([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):
-
-```svelte
-<Parent>
-	<Child />
-</Parent>
-```
-
 The key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.
 
+> [!NOTE] `createContext` is preferred since it provides better type safety and makes it unnecessary to use keys.
+
 In addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.
 
 ## Using context with state
 
-You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...
+You can store reactive state in context...
 
+<!-- codeblock:start {"title":"Context with state"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
-	import { setContext } from 'svelte';
+	import { setCounter } from './context.ts';
 	import Child from './Child.svelte';
 
 	let counter = $state({
 		count: 0
 	});
 
-	setContext('counter', counter);
+	setCounter(counter);
 </script>
 
 <button onclick={() => counter.count += 1}>
@@ -61,12 +116,39 @@ You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAA
 <Child />
 <Child />
 <Child />
+
+<button onclick={() => counter.count = 0}>
+	reset
+</button>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getCounter } from './context.ts';
+
+	const counter = getCounter();
+</script>
+
+<p>{counter.count}</p>
+```
+
+```ts
+/// file: context.ts
+import { createContext } from 'svelte';
+
+interface Counter {
+	count: number;
+}
+
+export const [getCounter, setCounter] = createContext<Counter>();
 ```
+<!-- codeblock:end -->
 
 ...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...
 
 ```svelte
-<button onclick={() => counter = { count: 0 }}>
+<button onclick={() => counter = { count: 0 } }>
 	reset
 </button>
 ```
@@ -81,21 +163,7 @@ You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAA
 
 Svelte will warn you if you get it wrong.
 
-## Type-safe context
-
-As an alternative to using `setContext` and `getContext` directly, you can use them via `createContext`. This gives you type safety and makes it unnecessary to use a key:
-
-```ts
-/// file: context.ts
-// @filename: ambient.d.ts
-interface User {}
-
-// @filename: index.ts
-// ---cut---
-import { createContext } from 'svelte';
-
-export const [getUserContext, setUserContext] = createContext<User>();
-```
+## Component testing
 
 When writing [component tests](testing#Unit-and-component-tests-with-Vitest-Component-testing), it can be useful to create a wrapper component that sets the context in order to check the behaviour of a component that uses it. As of version 5.49, you can do this sort of thing:
 

From a94924b67721e8b3151ebf1622691b1902c9bf85 Mon Sep 17 00:00:00 2001
From: moaaz <145723871+moaaz-ae@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:29:52 +0200
Subject: [PATCH 07/13] fix: export TweenOptions, SpringOptions,
 SpringUpdateOptions and Updater from svelte/motion (#17967)

Exports `TweenedOptions`, `SpringOpts`, `SpringUpdateOpts`, and
`Updater` from `svelte/motion`.

These types are required for the public method signatures of `spring`
and `tweened` (e.g., as parameters for `.set()` and `.update()`). This
PR makes them accessible to TypeScript users, following the established
pattern in modules like `svelte/store` and `svelte/transition`.

Internal implementation details like `TickContext` remain private as
they do not appear in any public-facing signatures.

Fixes #16151

### Before submitting the PR, please make sure you do the following

- [x] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [x] This message body should clearly illustrate what problems it
solves.
- [x] Ideally, include a test that fails without this PR but passes with
it.
- [x] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [x] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/angry-knives-bow.md          |  5 ++
 packages/svelte/src/motion/private.d.ts | 34 ---------
 packages/svelte/src/motion/public.d.ts  | 49 ++++++++++---
 packages/svelte/src/motion/spring.js    | 14 ++--
 packages/svelte/src/motion/tweened.js   | 15 ++--
 packages/svelte/tests/types/motion.ts   | 22 ++++++
 packages/svelte/types/index.d.ts        | 91 +++++++++++++------------
 7 files changed, 128 insertions(+), 102 deletions(-)
 create mode 100644 .changeset/angry-knives-bow.md
 create mode 100644 packages/svelte/tests/types/motion.ts

diff --git a/.changeset/angry-knives-bow.md b/.changeset/angry-knives-bow.md
new file mode 100644
index 0000000000..c96b397886
--- /dev/null
+++ b/.changeset/angry-knives-bow.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: export TweenOptions, SpringOptions, SpringUpdateOptions and Updater from svelte/motion
diff --git a/packages/svelte/src/motion/private.d.ts b/packages/svelte/src/motion/private.d.ts
index 22b8cc4af3..a6e0f95284 100644
--- a/packages/svelte/src/motion/private.d.ts
+++ b/packages/svelte/src/motion/private.d.ts
@@ -8,37 +8,3 @@ export interface TickContext {
 	};
 	settled: boolean;
 }
-
-export interface SpringOpts {
-	stiffness?: number;
-	damping?: number;
-	precision?: number;
-}
-
-export interface SpringUpdateOpts {
-	/**
-	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-	 */
-	hard?: any;
-	/**
-	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-	 */
-	soft?: string | number | boolean;
-	/**
-	 * Only use this for the Spring class; does nothing when set on the spring store
-	 */
-	instant?: boolean;
-	/**
-	 * Only use this for the Spring class; does nothing when set on the spring store
-	 */
-	preserveMomentum?: number;
-}
-
-export type Updater<T> = (target_value: T, value: T) => T;
-
-export interface TweenedOptions<T> {
-	delay?: number;
-	duration?: number | ((from: T, to: T) => number);
-	easing?: (t: number) => number;
-	interpolate?: (a: T, b: T) => (t: number) => T;
-}
diff --git a/packages/svelte/src/motion/public.d.ts b/packages/svelte/src/motion/public.d.ts
index 4e74d4b76f..89145d0383 100644
--- a/packages/svelte/src/motion/public.d.ts
+++ b/packages/svelte/src/motion/public.d.ts
@@ -1,16 +1,49 @@
 import { Readable, type Unsubscriber } from '../store/public.js';
-import { SpringUpdateOpts, TweenedOptions, Updater, SpringOpts } from './private.js';
+
+export interface SpringOptions {
+	stiffness?: number;
+	damping?: number;
+	precision?: number;
+}
+
+export interface SpringUpdateOptions {
+	/**
+	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+	 */
+	hard?: any;
+	/**
+	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+	 */
+	soft?: string | number | boolean;
+	/**
+	 * Only use this for the Spring class; does nothing when set on the spring store
+	 */
+	instant?: boolean;
+	/**
+	 * Only use this for the Spring class; does nothing when set on the spring store
+	 */
+	preserveMomentum?: number;
+}
+
+export type Updater<T> = (target_value: T, value: T) => T;
+
+export interface TweenOptions<T> {
+	delay?: number;
+	duration?: number | ((from: T, to: T) => number);
+	easing?: (t: number) => number;
+	interpolate?: (a: T, b: T) => (t: number) => T;
+}
 
 // TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
 // this means both the Spring class and the Spring interface are merged into one with some things only
 // existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
 
 export interface Spring<T> extends Readable<T> {
-	set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
+	set(new_value: T, opts?: SpringUpdateOptions): Promise<void>;
 	/**
 	 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 	 */
-	update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
+	update: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;
 	/**
 	 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 	 */
@@ -37,7 +70,7 @@ export interface Spring<T> extends Readable<T> {
  * @since 5.8.0
  */
 export class Spring<T> {
-	constructor(value: T, options?: SpringOpts);
+	constructor(value: T, options?: SpringOptions);
 
 	/**
 	 * Create a spring whose value is bound to the return value of `fn`. This must be called
@@ -53,7 +86,7 @@ export class Spring<T> {
 	 * </script>
 	 * ```
 	 */
-	static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+	static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;
 
 	/**
 	 * Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
@@ -63,7 +96,7 @@ export class Spring<T> {
 	 * If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
 	 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 	 */
-	set(value: T, options?: SpringUpdateOpts): Promise<void>;
+	set(value: T, options?: SpringUpdateOptions): Promise<void>;
 
 	damping: number;
 	precision: number;
@@ -81,8 +114,8 @@ export class Spring<T> {
 }
 
 export interface Tweened<T> extends Readable<T> {
-	set(value: T, opts?: TweenedOptions<T>): Promise<void>;
-	update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
+	set(value: T, opts?: TweenOptions<T>): Promise<void>;
+	update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;
 }
 
 export { prefersReducedMotion, spring, tweened, Tween } from './index.js';
diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js
index 44be1a501b..7198d60127 100644
--- a/packages/svelte/src/motion/spring.js
+++ b/packages/svelte/src/motion/spring.js
@@ -1,6 +1,6 @@
 /** @import { Task } from '#client' */
-/** @import { SpringOpts, SpringUpdateOpts, TickContext } from './private.js' */
-/** @import { Spring as SpringStore } from './public.js' */
+/** @import { TickContext } from './private.js' */
+/** @import { Spring as SpringStore, SpringOptions, SpringUpdateOptions } from './public.js' */
 import { writable } from '../store/shared/index.js';
 import { loop } from '../internal/client/loop.js';
 import { raf } from '../internal/client/timing.js';
@@ -62,7 +62,7 @@ function tick_spring(ctx, last_value, current_value, target_value) {
  * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead
  * @template [T=any]
  * @param {T} [value]
- * @param {SpringOpts} [opts]
+ * @param {SpringOptions} [opts]
  * @returns {SpringStore<T>}
  */
 export function spring(value, opts = {}) {
@@ -83,7 +83,7 @@ export function spring(value, opts = {}) {
 	let cancel_task = false;
 	/**
 	 * @param {T} new_value
-	 * @param {SpringUpdateOpts} opts
+	 * @param {SpringUpdateOptions} opts
 	 * @returns {Promise<void>}
 	 */
 	function set(new_value, opts = {}) {
@@ -191,7 +191,7 @@ export class Spring {
 
 	/**
 	 * @param {T} value
-	 * @param {SpringOpts} [options]
+	 * @param {SpringOptions} [options]
 	 */
 	constructor(value, options = {}) {
 		this.#current = DEV ? tag(state(value), 'Spring.current') : state(value);
@@ -225,7 +225,7 @@ export class Spring {
 	 * ```
 	 * @template U
 	 * @param {() => U} fn
-	 * @param {SpringOpts} [options]
+	 * @param {SpringOptions} [options]
 	 */
 	static of(fn, options) {
 		const spring = new Spring(fn(), options);
@@ -293,7 +293,7 @@ export class Spring {
 	 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 	 *
 	 * @param {T} value
-	 * @param {SpringUpdateOpts} [options]
+	 * @param {SpringUpdateOptions} [options]
 	 */
 	set(value, options) {
 		this.#deferred?.reject(new Error('Aborted'));
diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js
index 437c22ec3b..a24148d075 100644
--- a/packages/svelte/src/motion/tweened.js
+++ b/packages/svelte/src/motion/tweened.js
@@ -1,6 +1,5 @@
 /** @import { Task } from '../internal/client/types' */
-/** @import { Tweened } from './public' */
-/** @import { TweenedOptions } from './private' */
+/** @import { Tweened, TweenOptions } from './public' */
 import { writable } from '../store/shared/index.js';
 import { raf } from '../internal/client/timing.js';
 import { loop } from '../internal/client/loop.js';
@@ -84,7 +83,7 @@ function get_interpolator(a, b) {
  * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
  * @template T
  * @param {T} [value]
- * @param {TweenedOptions<T>} [defaults]
+ * @param {TweenOptions<T>} [defaults]
  * @returns {Tweened<T>}
  */
 export function tweened(value, defaults = {}) {
@@ -94,7 +93,7 @@ export function tweened(value, defaults = {}) {
 	let target_value = value;
 	/**
 	 * @param {T} new_value
-	 * @param {TweenedOptions<T>} [opts]
+	 * @param {TweenOptions<T>} [opts]
 	 */
 	function set(new_value, opts) {
 		target_value = new_value;
@@ -180,7 +179,7 @@ export class Tween {
 	#current;
 	#target;
 
-	/** @type {TweenedOptions<T>} */
+	/** @type {TweenOptions<T>} */
 	#defaults;
 
 	/** @type {import('../internal/client/types').Task | null} */
@@ -188,7 +187,7 @@ export class Tween {
 
 	/**
 	 * @param {T} value
-	 * @param {TweenedOptions<T>} options
+	 * @param {TweenOptions<T>} options
 	 */
 	constructor(value, options = {}) {
 		this.#current = state(value);
@@ -216,7 +215,7 @@ export class Tween {
 	 * ```
 	 * @template U
 	 * @param {() => U} fn
-	 * @param {TweenedOptions<U>} [options]
+	 * @param {TweenOptions<U>} [options]
 	 */
 	static of(fn, options) {
 		const tween = new Tween(fn(), options);
@@ -233,7 +232,7 @@ export class Tween {
 	 *
 	 * If `options` are provided, they will override the tween's defaults.
 	 * @param {T} value
-	 * @param {TweenedOptions<T>} [options]
+	 * @param {TweenOptions<T>} [options]
 	 * @returns
 	 */
 	set(value, options) {
diff --git a/packages/svelte/tests/types/motion.ts b/packages/svelte/tests/types/motion.ts
new file mode 100644
index 0000000000..0ba5d1d9c6
--- /dev/null
+++ b/packages/svelte/tests/types/motion.ts
@@ -0,0 +1,22 @@
+import {
+	type TweenOptions,
+	type SpringOptions,
+	type SpringUpdateOptions,
+	type Updater
+} from 'svelte/motion';
+
+let tweenOptions: TweenOptions<number> = {
+	delay: 100,
+	duration: 400
+};
+
+let springOptions: SpringOptions = {
+	stiffness: 0.1,
+	damping: 0.5
+};
+
+let springUpdateOptions: SpringUpdateOptions = {
+	instant: true
+};
+
+let updater: Updater<number> = (target, value) => target + value;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 371a823225..019baf45dd 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2005,16 +2005,50 @@ declare module 'svelte/legacy' {
 
 declare module 'svelte/motion' {
 	import type { MediaQuery } from 'svelte/reactivity';
+	export interface SpringOptions {
+		stiffness?: number;
+		damping?: number;
+		precision?: number;
+	}
+
+	export interface SpringUpdateOptions {
+		/**
+		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+		 */
+		hard?: any;
+		/**
+		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+		 */
+		soft?: string | number | boolean;
+		/**
+		 * Only use this for the Spring class; does nothing when set on the spring store
+		 */
+		instant?: boolean;
+		/**
+		 * Only use this for the Spring class; does nothing when set on the spring store
+		 */
+		preserveMomentum?: number;
+	}
+
+	export type Updater<T> = (target_value: T, value: T) => T;
+
+	export interface TweenOptions<T> {
+		delay?: number;
+		duration?: number | ((from: T, to: T) => number);
+		easing?: (t: number) => number;
+		interpolate?: (a: T, b: T) => (t: number) => T;
+	}
+
 	// TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
 	// this means both the Spring class and the Spring interface are merged into one with some things only
 	// existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
 
 	export interface Spring<T> extends Readable<T> {
-		set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
+		set(new_value: T, opts?: SpringUpdateOptions): Promise<void>;
 		/**
 		 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 		 */
-		update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
+		update: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;
 		/**
 		 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 		 */
@@ -2041,7 +2075,7 @@ declare module 'svelte/motion' {
 	 * @since 5.8.0
 	 */
 	export class Spring<T> {
-		constructor(value: T, options?: SpringOpts);
+		constructor(value: T, options?: SpringOptions);
 
 		/**
 		 * Create a spring whose value is bound to the return value of `fn`. This must be called
@@ -2057,7 +2091,7 @@ declare module 'svelte/motion' {
 		 * </script>
 		 * ```
 		 */
-		static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+		static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;
 
 		/**
 		 * Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
@@ -2067,7 +2101,7 @@ declare module 'svelte/motion' {
 		 * If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
 		 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 		 */
-		set(value: T, options?: SpringUpdateOpts): Promise<void>;
+		set(value: T, options?: SpringUpdateOptions): Promise<void>;
 
 		damping: number;
 		precision: number;
@@ -2085,8 +2119,8 @@ declare module 'svelte/motion' {
 	}
 
 	export interface Tweened<T> extends Readable<T> {
-		set(value: T, opts?: TweenedOptions<T>): Promise<void>;
-		update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
+		set(value: T, opts?: TweenOptions<T>): Promise<void>;
+		update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;
 	}
 	/** Callback to inform of a value updates. */
 	type Subscriber<T> = (value: T) => void;
@@ -2103,39 +2137,6 @@ declare module 'svelte/motion' {
 		 */
 		subscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
 	}
-	interface SpringOpts {
-		stiffness?: number;
-		damping?: number;
-		precision?: number;
-	}
-
-	interface SpringUpdateOpts {
-		/**
-		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-		 */
-		hard?: any;
-		/**
-		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-		 */
-		soft?: string | number | boolean;
-		/**
-		 * Only use this for the Spring class; does nothing when set on the spring store
-		 */
-		instant?: boolean;
-		/**
-		 * Only use this for the Spring class; does nothing when set on the spring store
-		 */
-		preserveMomentum?: number;
-	}
-
-	type Updater<T> = (target_value: T, value: T) => T;
-
-	interface TweenedOptions<T> {
-		delay?: number;
-		duration?: number | ((from: T, to: T) => number);
-		easing?: (t: number) => number;
-		interpolate?: (a: T, b: T) => (t: number) => T;
-	}
 	/**
 	 * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
 	 *
@@ -2165,13 +2166,13 @@ declare module 'svelte/motion' {
 	 *
 	 * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead
 	 * */
-	export function spring<T = any>(value?: T | undefined, opts?: SpringOpts | undefined): Spring<T>;
+	export function spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>;
 	/**
 	 * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
 	 *
 	 * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
 	 * */
-	export function tweened<T>(value?: T | undefined, defaults?: TweenedOptions<T> | undefined): Tweened<T>;
+	export function tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>;
 	/**
 	 * A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
 	 * move towards it over time, taking account of the `delay`, `duration` and `easing` options.
@@ -2204,15 +2205,15 @@ declare module 'svelte/motion' {
 		 * ```
 		 * 
 		 */
-		static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
+		static of<U>(fn: () => U, options?: TweenOptions<U> | undefined): Tween<U>;
 		
-		constructor(value: T, options?: TweenedOptions<T>);
+		constructor(value: T, options?: TweenOptions<T>);
 		/**
 		 * Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
 		 *
 		 * If `options` are provided, they will override the tween's defaults.
 		 * */
-		set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
+		set(value: T, options?: TweenOptions<T> | undefined): Promise<void>;
 		get current(): T;
 		set target(v: T);
 		get target(): T;

From b90a5dfb61545a547f7c5891fc23052c5ff251ea Mon Sep 17 00:00:00 2001
From: Razin Shafayet <sumonislamk29@gmail.com>
Date: Mon, 23 Mar 2026 00:29:08 +0600
Subject: [PATCH 08/13] docs: clarify `$derived` `await` behavior and
 dependency tracking (#17696)

Closes #17660

### Before submitting the PR, please make sure you do the following

- [x] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [x] This message body should clearly illustrate what problems it
solves.
- [ ] Ideally, include a test that fails without this PR but passes with
it.
- [ ] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [ ] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/02-runes/03-$derived.md    | 11 ++++++++++
 .../19-await-expressions.md                   | 21 ++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 35cb6c1912..f85ba90baa 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -51,6 +51,17 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
 
 Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
 
+In addition, if an expression contains an [`await`](await-expressions), 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);
+```
+
+...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 `await` in functions that are called by the expression, only the expression itself.)
+
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
 
 ## Overriding derived values
diff --git a/documentation/docs/03-template-syntax/19-await-expressions.md b/documentation/docs/03-template-syntax/19-await-expressions.md
index 2f73f6a47c..aa3f907b14 100644
--- a/documentation/docs/03-template-syntax/19-await-expressions.md
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -59,8 +59,8 @@ Updates can overlap — a fast update will be reflected in the UI while an earli
 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>
+<p>{await one(x)}</p>
+<p>{await two(y)}</p>
 ```
 
 ...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.
@@ -68,13 +68,18 @@ Svelte will do as much asynchronous work as it can in parallel. For example if y
 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; }
+/** @param {number} x */
+async function one(x) { return x; }
+/** @param {number} y */
+async function two(y) { return y; }
+let x = $state(1);
+let y = $state(2);
 // ---cut---
-// these will run sequentially the first time,
-// but will update independently
-let a = $derived(await one());
-let b = $derived(await two());
+// `b` will not be created until `a` has resolved,
+// but once created they will update independently
+// even if `x` and `y` update simultaneously
+let a = $derived(await one(x));
+let b = $derived(await two(y));
 ```
 
 > [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning

From 1773cb5b593cb650b109f38113b597cf9191714c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 23 Mar 2026 01:46:36 +0100
Subject: [PATCH 09/13] fix: ensure HMR wrapper forwards correct start/end
 nodes to active effect (#17985)

Fixes #17982 (two issues reported there)

Adding the start/end statically at the end once does not work because
it's going to be stale when there's a HMR reload of the wrapped
component. For reasons not completely clear to me it also fails in
another case.

So instead of wrapping the HMR with comments we just forward the nodes
of the inner effect to the outer active effect, pretending the wrapper
isn't there from a "remove dom nodes"-perspective.
---
 .changeset/better-pugs-play.md                |  5 ++++
 .../svelte/src/internal/client/dev/hmr.js     | 29 ++++---------------
 2 files changed, 11 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/better-pugs-play.md

diff --git a/.changeset/better-pugs-play.md b/.changeset/better-pugs-play.md
new file mode 100644
index 0000000000..d1b80a30ce
--- /dev/null
+++ b/.changeset/better-pugs-play.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure HMR wrapper forwards correct start/end nodes to active effect
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index 4687708c90..13ee35b20d 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/packages/svelte/src/internal/client/dev/hmr.js
@@ -5,9 +5,7 @@ import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
 import { set, source } from '../reactivity/sources.js';
 import { set_should_intro } from '../render.js';
-import { get } from '../runtime.js';
-import { assign_nodes } from '../dom/template.js';
-import { create_comment } from '../dom/operations.js';
+import { active_effect, get } from '../runtime.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
@@ -29,19 +27,6 @@ export function hmr(fn) {
 
 		let ran = false;
 
-		// Surround the wrapped effects with comments and assign the nodes
-		// on the wrapping effects so the parent can properly do DOM operations.
-		let start = create_comment();
-		let end = create_comment();
-
-		// During hydration, inserting the start comment before the anchor could
-		// corrupt the DOM tree that the hydration walker is navigating (e.g. when
-		// a component is inside a CSS props wrapper gh-issue#17972). We defer the insertion until
-		// after the component has hydrated.
-		if (!hydrating) {
-			anchor.before(start);
-		}
-
 		block(() => {
 			if (component === (component = get(current))) {
 				return;
@@ -68,21 +53,19 @@ export function hmr(fn) {
 
 				if (ran) set_should_intro(true);
 			});
+
+			// Forward the nodes from the inner effect to the outer active effect which would
+			// get them if the HMR wrapper wasn't there. Do this inside the block not outside
+			// so that HMR updates to the component will also update the nodes on the active effect.
+			/** @type {Effect} */ (active_effect).nodes = effect.nodes;
 		}, EFFECT_TRANSPARENT);
 
 		ran = true;
 
 		if (hydrating) {
-			// Insert start comment now that hydration is done, so it doesn't
-			// corrupt the hydration walk
-			anchor.before(start);
 			anchor = hydrate_node;
 		}
 
-		anchor.before(end);
-
-		assign_nodes(start, end);
-
 		return instance;
 	}
 

From 6e52f40d41e0b51b7da04f661a5db198f2ceba49 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 23 Mar 2026 10:08:49 -0400
Subject: [PATCH 10/13] Version Packages (#17984)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## svelte@5.55.0

### Minor Changes

- feat: export TweenOptions, SpringOptions, SpringUpdateOptions and
Updater from svelte/motion
([#17967](https://github.com/sveltejs/svelte/pull/17967))

### Patch Changes

- fix: ensure HMR wrapper forwards correct start/end nodes to active
effect ([#17985](https://github.com/sveltejs/svelte/pull/17985))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/angry-knives-bow.md |  5 -----
 .changeset/better-pugs-play.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/angry-knives-bow.md
 delete mode 100644 .changeset/better-pugs-play.md

diff --git a/.changeset/angry-knives-bow.md b/.changeset/angry-knives-bow.md
deleted file mode 100644
index c96b397886..0000000000
--- a/.changeset/angry-knives-bow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: export TweenOptions, SpringOptions, SpringUpdateOptions and Updater from svelte/motion
diff --git a/.changeset/better-pugs-play.md b/.changeset/better-pugs-play.md
deleted file mode 100644
index d1b80a30ce..0000000000
--- a/.changeset/better-pugs-play.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure HMR wrapper forwards correct start/end nodes to active effect
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 16cbf92ea4..2b8473b9e6 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.55.0
+
+### Minor Changes
+
+- feat: export TweenOptions, SpringOptions, SpringUpdateOptions and Updater from svelte/motion ([#17967](https://github.com/sveltejs/svelte/pull/17967))
+
+### Patch Changes
+
+- fix: ensure HMR wrapper forwards correct start/end nodes to active effect ([#17985](https://github.com/sveltejs/svelte/pull/17985))
+
 ## 5.54.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index afbdfa956c..7b35924e15 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.54.1",
+  "version": "5.55.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 7de1242e62..ff540e3962 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.54.1';
+export const VERSION = '5.55.0';
 export const PUBLIC_VERSION = '5';

From 5e8662fb23723cb594323d51196418fde638032f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 24 Mar 2026 14:19:29 +0100
Subject: [PATCH 11/13] chore: lots of async tests (#17997)

extracting this from #17971 because even if that PR is not merged these
tests show that there's still a lot of cases where we're buggy,
particularly around forking and new branches
---
 .../async-overlap-multiple-1/_config.js       | 107 +++++++++++
 .../async-overlap-multiple-1/main.svelte      |  26 +++
 .../async-overlap-multiple-2/_config.js       |  82 +++++++++
 .../async-overlap-multiple-2/main.svelte      |  26 +++
 .../async-overlap-multiple-3/_config.js       | 108 +++++++++++
 .../async-overlap-multiple-3/main.svelte      |  26 +++
 .../async-overlap-multiple-4/_config.js       | 110 +++++++++++
 .../async-overlap-multiple-4/main.svelte      |  26 +++
 .../async-overlap-multiple-5/_config.js       | 118 ++++++++++++
 .../async-overlap-multiple-5/main.svelte      |  23 +++
 .../async-overlap-multiple-6/_config.js       |  76 ++++++++
 .../async-overlap-multiple-6/main.svelte      |  23 +++
 .../async-overlap-multiple-7/_config.js       | 129 +++++++++++++
 .../async-overlap-multiple-7/main.svelte      |  23 +++
 .../async-overlap-multiple-fork-1/_config.js  |  34 ++++
 .../async-overlap-multiple-fork-1/main.svelte |  27 +++
 .../async-overlap-multiple-fork-2/_config.js  |  42 +++++
 .../async-overlap-multiple-fork-2/main.svelte |  31 ++++
 .../async-overlap-multiple-fork-3/_config.js  |  43 +++++
 .../async-overlap-multiple-fork-3/main.svelte |  31 ++++
 .../async-state-new-branch-1/Child.svelte     |   7 +
 .../async-state-new-branch-1/_config.js       |  38 ++++
 .../async-state-new-branch-1/main.svelte      |  28 +++
 .../async-state-new-branch-2/Child.svelte     |  11 ++
 .../async-state-new-branch-2/_config.js       |  49 +++++
 .../async-state-new-branch-2/main.svelte      |  30 +++
 .../async-state-new-branch-3/Child.svelte     |  11 ++
 .../async-state-new-branch-3/_config.js       |  61 +++++++
 .../async-state-new-branch-3/main.svelte      |  34 ++++
 .../Child.svelte                              |  11 ++
 .../_config.js                                | 171 ++++++++++++++++++
 .../main.svelte                               |  41 +++++
 .../Child.svelte                              |  11 ++
 .../async-state-new-branch-fork-1/_config.js  |  90 +++++++++
 .../async-state-new-branch-fork-1/main.svelte |  36 ++++
 .../Child.svelte                              |  11 ++
 .../async-state-new-branch-fork-2/_config.js  |  71 ++++++++
 .../async-state-new-branch-fork-2/main.svelte |  36 ++++
 .../Child.svelte                              |  11 ++
 .../async-state-new-branch-fork-3/_config.js  |  70 +++++++
 .../async-state-new-branch-fork-3/main.svelte |  36 ++++
 .../Child.svelte                              |  11 ++
 .../async-state-new-branch-fork-4/_config.js  |  76 ++++++++
 .../async-state-new-branch-fork-4/main.svelte |  32 ++++
 .../Child.svelte                              |  11 ++
 .../async-state-new-branch-fork-5/_config.js  |  85 +++++++++
 .../async-state-new-branch-fork-5/main.svelte |  36 ++++
 packages/svelte/tests/suite.ts                |   5 +-
 48 files changed, 2229 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js
new file mode 100644
index 0000000000..03d8e49b6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js
@@ -0,0 +1,107 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 1 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 1 | c 1 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js
new file mode 100644
index 0000000000..f4aff83aad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js
@@ -0,0 +1,82 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, blocked on first batch because a still pending
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		for (let i = 0; i < 3; i++) {
+			pop.click(); // second a resolved, first a/b now obsolete; empty queue
+			await tick();
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+				a 2 | b 2 | c 1 | d 1
+				<button>a and b</button>
+				<button>a and c</button>
+				<button>b and d</button>
+				<button>shift</button>
+				<button>pop</button>
+			`
+			);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js
new file mode 100644
index 0000000000..c9e7513b22
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js
@@ -0,0 +1,108 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first a resolved, still pending: [b, a, b]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, still pending: [b, a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first b resolved, first + last batch settled, still pending: [a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // all resolved
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js
new file mode 100644
index 0000000000..472a3ebcaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js
@@ -0,0 +1,110 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first a resolved, still pending: [b, a, b]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, still pending: [b, a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second a resolved, first a/b now obsolete
+		// TODO would be nice to show final result here already, right now it doesn't because
+		// we have no handle on the already resolved first a anymore
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // queue empty
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js
new file mode 100644
index 0000000000..d03f3cfbb8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js
@@ -0,0 +1,118 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on main
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on https://github.com/sveltejs/svelte/pull/17971
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 0 | d 2
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 1 | d 3
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js
new file mode 100644
index 0000000000..27152889a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js
@@ -0,0 +1,76 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// Although the second batch is eventually connected to the first one, we can't see that
+		// at this point yet and so the second one flushes right away.
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js
new file mode 100644
index 0000000000..b1bf53a2fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js
@@ -0,0 +1,129 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // schedules second step of first batch and schedules rerun of second batch
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on main
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 2
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // obsolete second batch promise (already rejected)
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 2
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first batch resolves
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on https://github.com/sveltejs/svelte/pull/17971
+		// pop.click(); // second batch resolves but knows it needs to wait on first batch
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click(); // obsolete second batch promise (already rejected)
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click(); // first batch resolves, with it second can now resolve as well
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 1 | d 3
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js
new file mode 100644
index 0000000000..07ce7e340f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte
new file mode 100644
index 0000000000..60ba74fb8e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js
new file mode 100644
index 0000000000..180a190dae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js
@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, b_d, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 1 | c 0 | d 1');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte
new file mode 100644
index 0000000000..6d1c4ab418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c} | d {d}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js
new file mode 100644
index 0000000000..61360d8dc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js
@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true,
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, b_d, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte
new file mode 100644
index 0000000000..6d1c4ab418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c} | d {d}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte
new file mode 100644
index 0000000000..6b765526c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { x } = $props();
+	console.log(x);
+	$effect(() => console.log('$effect: '+ x))
+</script>
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js
new file mode 100644
index 0000000000..0af275009c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js
@@ -0,0 +1,38 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target, logs }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+		` // if this shows world world - that would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, ['universe', 'universe', '$effect: universe', '$effect: universe']);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			universe
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte
new file mode 100644
index 0000000000..8edc718de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js
new file mode 100644
index 0000000000..035616dfb6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js
@@ -0,0 +1,49 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+		` // if this shows world world "world" world world world "world" - then this would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte
new file mode 100644
index 0000000000..11c4bdf5d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js
new file mode 100644
index 0000000000..a2d615b6e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js
@@ -0,0 +1,61 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+		` // if this shows world world "world" world world world "world" - then this would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte
new file mode 100644
index 0000000000..b02ab20995
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (x = 'universe')}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
+ 
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js
new file mode 100644
index 0000000000..8b7e7784de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js
@@ -0,0 +1,171 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO more combinations pass on https://github.com/sveltejs/svelte/pull/17971
+	timeout: 20_000,
+	async test({ assert, target }) {
+		const [x, fork_x, y, fork_y, shift, pop, commit_x, commit_y, reset] =
+			target.querySelectorAll('button');
+
+		const initial = `
+			<button>x</button>
+			<button>x (fork)</button>
+			<button>y++</button>
+			<button>y++ (fork)</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit x</button>
+			<button>commit y</button>
+			<button>reset</button>
+			<hr>
+		`;
+
+		const final = `
+			<button>x</button>
+			<button>x (fork)</button>
+			<button>y++</button>
+			<button>y++ (fork)</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit x</button>
+			<button>commit y</button>
+			<button>reset</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`;
+
+		/** @param {HTMLElement} button */
+		async function click(button) {
+			button.click();
+			await tick();
+		}
+
+		/**
+		 * Generate all permutations of an array.
+		 * @param {HTMLElement[]} actions
+		 * @returns {HTMLElement[][]}
+		 */
+		function permutations(actions) {
+			if (actions.length <= 1) return [actions];
+
+			/** @type {HTMLElement[][]} */
+			const result = [];
+
+			for (let i = 0; i < actions.length; i++) {
+				const head = actions[i];
+				const rest = actions.slice(0, i).concat(actions.slice(i + 1));
+				for (const tail of permutations(rest)) {
+					result.push([head, ...tail]);
+				}
+			}
+
+			return result;
+		}
+
+		/**
+		 * Keep only valid orders where fork commits happen after their fork action.
+		 * @param {HTMLElement[]} order
+		 */
+		function is_valid_order(order) {
+			const x_fork_index = order.indexOf(fork_x);
+			const commit_x_index = order.indexOf(commit_x);
+			if (commit_x_index !== -1 && (x_fork_index === -1 || commit_x_index < x_fork_index)) {
+				return false;
+			}
+
+			const y_fork_index = order.indexOf(fork_y);
+			const commit_y_index = order.indexOf(commit_y);
+			if (commit_y_index !== -1 && (y_fork_index === -1 || commit_y_index < y_fork_index)) {
+				return false;
+			}
+
+			return true;
+		}
+
+		/**
+		 * Four control scenarios:
+		 * - x direct, y direct
+		 * - x direct, y via fork+commit
+		 * - x via fork+commit, y direct
+		 * - x via fork+commit, y via fork+commit
+		 */
+		const control_scenarios = [
+			[x, y],
+			[x, fork_y, commit_y],
+			[fork_x, commit_x, y],
+			[fork_x, commit_x, fork_y, commit_y]
+		];
+
+		const control_orders = control_scenarios.flatMap((scenario) =>
+			permutations(scenario).filter(is_valid_order)
+		);
+
+		/**
+		 * All shift/pop combinations for draining async work.
+		 * We click three times because this scenario can queue up to 3 deferred resolutions.
+		 */
+		const resolve_orders = [
+			[shift, shift, shift],
+			[shift, pop, pop],
+			[pop, shift, shift],
+			[pop, pop, pop]
+		];
+
+		for (const controls of control_orders) {
+			for (const resolves of resolve_orders) {
+				for (const action of controls) {
+					await click(action);
+				}
+
+				for (const action of resolves) {
+					await click(action);
+				}
+
+				const failure_msg = `Failed for: ${controls
+					.map((btn) => btn.textContent)
+					.concat(...resolves.map((btn) => btn.textContent))
+					.join(', ')}`;
+				assert.htmlEqual(target.innerHTML, final, failure_msg);
+
+				await click(reset);
+				assert.htmlEqual(target.innerHTML, initial, failure_msg);
+			}
+		}
+
+		const other_scenarios = [
+			[x, shift, y, shift, shift],
+			[x, shift, y, pop, pop],
+			[fork_x, shift, y, shift, commit_x, shift],
+			[fork_x, shift, y, pop, commit_x, pop],
+			[y, shift, x, shift, shift],
+			[y, shift, x, pop, pop],
+			[fork_y, shift, x, shift, commit_y, shift],
+			[fork_y, shift, x, pop, commit_y, pop]
+		];
+
+		for (const scenario of other_scenarios) {
+			for (const action of scenario) {
+				await click(action);
+			}
+
+			const failure_msg = `Failed for: ${scenario.map((btn) => btn.textContent).join(', ')}`;
+			assert.htmlEqual(target.innerHTML, final, failure_msg);
+
+			await click(reset);
+			assert.htmlEqual(target.innerHTML, initial, failure_msg);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte
new file mode 100644
index 0000000000..bb821d9b0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let fx;
+	let fy;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (x = 'universe')}>x</button>
+<button onclick={() => (fx = fork(() => {x = 'universe';}))}>x (fork)</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => (fy = fork(() => {y++;}))}>y++ (fork)</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => fx.commit()}>commit x</button>
+<button onclick={() => fy.commit()}>commit y</button>
+<button onclick={() => {x = 'world'; y = 0;}}>reset</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js
new file mode 100644
index 0000000000..737169cb91
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js
@@ -0,0 +1,90 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js
new file mode 100644
index 0000000000..a712e70630
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js
@@ -0,0 +1,71 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		y.click();
+		await tick();
+
+		x.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js
new file mode 100644
index 0000000000..905e76511b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js
@@ -0,0 +1,70 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		y.click();
+		await tick();
+
+		x.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js
new file mode 100644
index 0000000000..6a6399a19e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js
@@ -0,0 +1,76 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, resolve, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte
new file mode 100644
index 0000000000..5f00fc4dec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js
new file mode 100644
index 0000000000..9221a96c2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js
@@ -0,0 +1,85 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, resolve, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte
new file mode 100644
index 0000000000..5575e3cbd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/suite.ts b/packages/svelte/tests/suite.ts
index bbd252b8e1..af36f16e29 100644
--- a/packages/svelte/tests/suite.ts
+++ b/packages/svelte/tests/suite.ts
@@ -4,6 +4,7 @@ import { it } from 'vitest';
 export interface BaseTest {
 	skip?: boolean;
 	solo?: boolean;
+	timeout?: number;
 }
 
 /**
@@ -30,7 +31,7 @@ export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string
 			await for_each_dir<Test>(cwd, samples_dir, (config, dir) => {
 				let it_fn = config.skip ? it.skip : config.solo ? it.only : it;
 
-				it_fn(dir, () => fn(config, `${cwd}/${samples_dir}/${dir}`));
+				it_fn(dir, { timeout: config.timeout }, () => fn(config, `${cwd}/${samples_dir}/${dir}`));
 			});
 		}
 	};
@@ -57,7 +58,7 @@ export function suite_with_variants<Test extends BaseTest, Variants extends stri
 					const solo = config.solo;
 					let it_fn = skip ? it.skip : solo ? it.only : it;
 
-					it_fn(`${dir} (${variant})`, async () => {
+					it_fn(`${dir} (${variant})`, { timeout: config.timeout }, async () => {
 						if (!called_common) {
 							called_common = true;
 							common = await common_setup(config, `${cwd}/${samples_dir}/${dir}`);

From 54ba176d2c9068f2e6df9249764bb7766ec1b69d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Mar 2026 11:31:17 -0400
Subject: [PATCH 12/13] docs: 'open in playground' links (#17983)

This takes advantage of https://github.com/sveltejs/svelte.dev/pull/1879
and https://github.com/sveltejs/svelte.dev/pull/1880 to replace some of
the hardcoded playground links in the docs with ones that are generated
automatically from the code. This is a better user experience, and
easier to maintain.

Not every playground link is suitable for replacement, as in many cases
we gloss over implementation details. For now I'm just starting with
some easy ones
---
 documentation/docs/02-runes/04-$effect.md     |  49 ++++++-
 documentation/docs/02-runes/05-$props.md      |  25 +++-
 documentation/docs/02-runes/07-$inspect.md    |  10 +-
 .../docs/03-template-syntax/03-each.md        |  19 ++-
 .../docs/03-template-syntax/06-snippet.md     | 128 ++++++++++++++++--
 .../docs/03-template-syntax/12-bind.md        |  22 ++-
 .../19-await-expressions.md                   |   5 +-
 documentation/docs/06-runtime/02-context.md   |   2 +-
 8 files changed, 235 insertions(+), 25 deletions(-)

diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index d41c5b8e6a..a13fc7bc46 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -41,9 +41,11 @@ You can use `$effect` anywhere, not just at the top level of a component, as lon
 
 > [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.
 
-An effect can return a _teardown function_ which will run immediately before the effect re-runs ([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).
+An effect can return a _teardown function_ which will run immediately before the effect re-runs:
 
+<!-- codeblock:start {"title":"Effect teardown"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 	let milliseconds = $state(1000);
@@ -68,6 +70,7 @@ An effect can return a _teardown function_ which will run immediately before the
 <button onclick={() => (milliseconds *= 2)}>slower</button>
 <button onclick={() => (milliseconds /= 2)}>faster</button>
 ```
+<!-- codeblock:end -->
 
 Teardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.
 
@@ -206,9 +209,11 @@ Apart from the timing, `$effect.pre` works exactly like `$effect`.
 
 ## `$effect.tracking`
 
-The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):
+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:
 
+<!-- codeblock:start {"title":"$effect.tracking()"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	console.log('in component setup:', $effect.tracking()); // false
 
@@ -219,14 +224,27 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 
 <p>in template: {$effect.tracking()}</p> <!-- true -->
 ```
+<!-- codeblock:end -->
 
 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=)):
+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:
 
+<!-- codeblock:start {"title":"$effect.pending"} -->
 ```svelte
+<!--- file: App.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>
+
 <button onclick={() => a++}>a++</button>
 <button onclick={() => b++}>b++</button>
 
@@ -236,6 +254,7 @@ When using [`await`](await-expressions) in components, the `$effect.pending()` r
 	<p>pending promises: {$effect.pending()}</p>
 {/if}
 ```
+<!-- codeblock:end -->
 
 ## `$effect.root`
 
@@ -285,9 +304,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#H4sIAAAAAAAAE5WRTWrDMBCFryKGLBJoY3fRjWIHeoiu6i6UZBwEY0VE49TB-O6VxrFTSih0qe_Ne_OjHpxpEDS8O7ZMeIAnqC1hAP3RA1990hKI_Fb55v06XJA4sZ0J-IjvT47RcYyBIuzP1vO2chVHHFjxiQ2pUr3k-SZRQlbBx_LIFoEN4zJfzQph_UMQr4hRXmBd456Xy5Uqt6pPKHmkfmzyPAZL2PCnbRpg8qWYu63I7lu4gswOSRYqrPNt3CgeqqzgbNwRK1A76w76YqjFspfcQTWmK3vJHlQm1puSTVSeqdOc_r9GaeCHfUSY26TXry6Br4RSK3C6yMEGT-aqVU3YbUZ2NF6rfP2KzXgbuYzY46czdgyazy0On_FlLH3F-UDXhgIO35UGlA1rAgAA)):
+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. Instead of using effects for this...
 
+<!-- codeblock:start {"title":"Setting state in effects (don't do this!)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	const total = 100;
 	let spent = $state(0);
@@ -311,11 +332,21 @@ You might be tempted to do something convoluted with effects to link one value t
 	<input type="range" bind:value={left} max={total} />
 	{left}/{total} left
 </label>
+
+<style>
+	label {
+		display: flex;
+		gap: 0.5em;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
-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=)):
+...use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible:
 
+<!-- codeblock:start {"title":"Setting state with function bindings"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	const total = 100;
 	let spent = $state(0);
@@ -335,6 +366,14 @@ Instead, use `oninput` callbacks or — better still — [function bindings](bin
 	<input type="range" +++bind:value={() => left, updateLeft}+++ max={total} />
 	{left}/{total} left
 </label>
+
+<style>
+	label {
+		display: flex;
+		gap: 0.5em;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
index 737cdf523e..3cf67837f6 100644
--- a/documentation/docs/02-runes/05-$props.md
+++ b/documentation/docs/02-runes/05-$props.md
@@ -64,8 +64,9 @@ let { a, b, c, ...others } = $props();
 
 ## Updating props
 
-References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
+References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state:
 
+<!-- codeblock:start {"title":"Temporarily updating props","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -91,11 +92,13 @@ References to a prop inside a component update when the prop itself updates —
 	clicks (child): {count}
 </button>
 ```
+<!-- codeblock:end -->
 
 While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
 
-If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
+If the prop is a regular object, the mutation will have no effect:
 
+<!-- codeblock:start {"title":"Non-reactive props","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -118,9 +121,11 @@ If the prop is a regular object, the mutation will have no effect ([demo](/playg
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
-If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
+If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it:
 
+<!-- codeblock:start {"title":"Invalid mutation","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -147,8 +152,19 @@ If the prop is a reactive state proxy, however, then mutations _will_ have an ef
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
-The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
+The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates:
+
+<!-- codeblock:start {"title":"Non-reactive fallback props","selected":"Child.svelte"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+```
 
 ```svelte
 <!--- file: Child.svelte --->
@@ -163,6 +179,7 @@ The fallback value of a prop not declared with `$bindable` is left untouched —
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
 In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
 
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index f67e250b45..00857f3ef4 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -5,9 +5,11 @@ tags: rune-inspect
 
 > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
 
-The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire:
 
+<!-- codeblock:start {"title":"$inspect(...)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 	let message = $state('hello');
@@ -18,14 +20,17 @@ The `$inspect` rune is roughly equivalent to `console.log`, with the exception t
 <button onclick={() => count++}>Increment</button>
 <input bind:value={message} />
 ```
+<!-- codeblock:end -->
 
 On updates, a stack trace will be printed, making it easy to find the origin of a state change (unless you're in the playground, due to technical limitations).
 
 ## $inspect(...).with
 
-`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):
+`$inspect(...)` returns an object with a `with` method, which you can invoke with a callback that will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect`:
 
+<!-- codeblock:start {"title":"$inspect(...).with(...)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 
@@ -38,6 +43,7 @@ On updates, a stack trace will be printed, making it easy to find the origin of
 
 <button onclick={() => count++}>Increment</button>
 ```
+<!-- codeblock:end -->
 
 ## $inspect.trace(...)
 
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index 2fe7f28bf2..9fa699d493 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -89,9 +89,11 @@ You can freely use destructuring and rest patterns in each blocks.
 {#each expression, index}...{/each}
 ```
 
-In case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):
+In case you just want to render something `n` times, you can omit the `as` part:
 
+<!-- codeblock:start {"title":"Chess board"} -->
 ```svelte
+<!--- file: App.svelte --->
 <div class="chess-board">
 	{#each { length: 8 }, rank}
 		{#each { length: 8 }, file}
@@ -99,7 +101,22 @@ In case you just want to render something `n` times, you can omit the `as` part
 		{/each}
 	{/each}
 </div>
+
+<style>
+	.chess-board {
+		display: grid;
+		grid-template-columns: repeat(8, 1fr);
+		rows: repeat(8, 1fr);
+		border: 1px solid black;
+		aspect-ratio: 1;
+
+		.black {
+			background: black;
+		}
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 ## Else blocks
 
diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index 02f58e0f6c..36058c3560 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -57,9 +57,11 @@ Like function declarations, snippets can have an arbitrary number of parameters,
 
 ## Snippet scope
 
-Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/playground/untitled#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...
+Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks...
 
+<!-- codeblock:start {"title":"Snippets"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let { message = `it's great to see you!` } = $props();
 </script>
@@ -71,6 +73,7 @@ Snippets can be declared anywhere inside your component. They can reference valu
 {@render hello('alice')}
 {@render hello('bob')}
 ```
+<!-- codeblock:end -->
 
 ...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
 
@@ -91,9 +94,11 @@ Snippets can be declared anywhere inside your component. They can reference valu
 {@render x()}
 ```
 
-Snippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):
+Snippets can reference themselves and each other:
 
+<!-- codeblock:start {"title":"Self-referencing snippets"} -->
 ```svelte
+<!--- file: App.svelte --->
 {#snippet blastoff()}
 	<span>🚀</span>
 {/snippet}
@@ -109,14 +114,17 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
 
 {@render countdown(10)}
 ```
+<!-- codeblock:end -->
 
 ## Passing snippets to components
 
 ### Explicit props
 
-Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
+Within the template, snippets are values just like any other. As such, they can be passed to components as props:
 
+<!-- codeblock:start {"title":"Explicit snippet props"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import Table from './Table.svelte';
 
@@ -141,17 +149,65 @@ Within the template, snippets are values just like any other. As such, they can
 	<td>{d.qty * d.price}</td>
 {/snippet}
 
-<Table data={fruits} {header} {row} />
+<Table data={fruits} +++{header} {row}+++ />
+```
+
+```svelte
+<!--- file: Table.svelte --->
+<script>
+	let { data, header, row } = $props();
+</script>
+
+<table>
+	{#if header}
+		<thead>
+			<tr>{@render header()}</tr>
+		</thead>
+	{/if}
+
+	<tbody>
+		{#each data as d}
+			<tr>{@render row(d)}</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	table {
+		text-align: left;
+		border-spacing: 0;
+	}
+
+	tbody tr:nth-child(2n+1) {
+		background: ButtonFace;
+	}
+
+	table :global(th), table :global(td) {
+		padding: 0.5em;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
 
 ### Implicit props
 
-As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component:
 
+<!-- codeblock:start {"title":"Implicit snippet props"} -->
 ```svelte
-<!-- this is semantically the same as the above -->
+<!--- file: App.svelte --->
+<script>
+	import Table from './Table.svelte';
+
+	const fruits = [
+		{ name: 'apples', qty: 5, price: 2 },
+		{ name: 'bananas', qty: 10, price: 1 },
+		{ name: 'cherries', qty: 20, price: 0.5 }
+	];
+</script>
+
 <Table data={fruits}>
 	{#snippet header()}
 		<th>fruit</th>
@@ -169,12 +225,54 @@ As an authoring convenience, snippets declared directly _inside_ a component imp
 </Table>
 ```
 
+```svelte
+<!--- file: Table.svelte --->
+<script>
+	let { data, header, row } = $props();
+</script>
+
+<table>
+	{#if header}
+		<thead>
+			<tr>{@render header()}</tr>
+		</thead>
+	{/if}
+
+	<tbody>
+		{#each data as d}
+			<tr>{@render row(d)}</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	table {
+		text-align: left;
+		border-spacing: 0;
+	}
+
+	tbody tr:nth-child(2n+1) {
+		background: ButtonFace;
+	}
+
+	table :global(th), table :global(td) {
+		padding: 0.5em;
+	}
+</style>
+```
+<!-- codeblock:end -->
+
 ### Implicit `children` snippet
 
-Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet:
 
+<!-- codeblock:start {"title":"Implicit children snippet","selected":"Button.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
+<script>
+	import Button from './Button.svelte';
+</script>
+
 <Button>click me</Button>
 ```
 
@@ -187,6 +285,7 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 <!-- result will be <button>click me</button> -->
 <button>{@render children()}</button>
 ```
+<!-- codeblock:end -->
 
 > [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
 
@@ -256,9 +355,21 @@ We can tighten things up further by declaring a generic, so that `data` and `row
 
 ## Exporting snippets
 
-Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
+Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets):
+
+<!-- codeblock:start {"title":"Exported snippets","selected":"snippets.svelte"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { add } from './snippets.svelte';
+</script>
+
+{@render add(1, 2)}
+
+```
 
 ```svelte
+<!--- file: snippets.svelte --->
 <script module>
 	export { add };
 </script>
@@ -267,6 +378,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
 	{a} + {b} = {a + b}
 {/snippet}
 ```
+<!-- codeblock:end -->
 
 > [!NOTE]
 > This requires Svelte 5.5.0 or newer
diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index be84969b87..e8164149db 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -54,9 +54,11 @@ A `bind:value` directive on an `<input>` element binds the input's `value` prope
 <p>{message}</p>
 ```
 
-In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):
+In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number:
 
+<!-- codeblock:start {"title":"Numeric bindings"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let a = $state(1);
 	let b = $state(2);
@@ -74,6 +76,7 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
 
 <p>{a} + {b} = {a + b}</p>
 ```
+<!-- codeblock:end -->
 
 If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
 
@@ -144,10 +147,11 @@ Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs
 
 ## `<input 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==)):
+Inputs that work together can use `bind:group`:
 
+<!-- codeblock:start {"title":"bind:group"} -->
 ```svelte
-<!--- file: BurritoChooser.svelte --->
+<!--- file: App.svelte --->
 <script>
 	let tortilla = $state('Plain');
 
@@ -155,6 +159,8 @@ Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sI
 	let fillings = $state([]);
 </script>
 
+<h1>Customize your burrito</h1>
+
 <!-- grouped radio inputs are mutually exclusive -->
 <label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
 <label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
@@ -165,7 +171,17 @@ Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sI
 <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>
+
+<p>Tortilla: {tortilla}</p>
+<p>Fillings: {fillings.join(', ') || 'None'}</p>
+
+<style>
+	label {
+		display: block;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
 
diff --git a/documentation/docs/03-template-syntax/19-await-expressions.md b/documentation/docs/03-template-syntax/19-await-expressions.md
index aa3f907b14..04437f5ee3 100644
--- a/documentation/docs/03-template-syntax/19-await-expressions.md
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -25,9 +25,11 @@ The experimental flag will be removed in Svelte 6.
 
 ## 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)...
+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...
 
+<!-- codeblock:start {"title":"Synchronized updates"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let a = $state(1);
 	let b = $state(2);
@@ -43,6 +45,7 @@ When an `await` expression depends on a particular piece of state, changes to th
 
 <p>{a} + {b} = {await add(a, b)}</p>
 ```
+<!-- codeblock:end -->
 
 ...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —
 
diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 86009c9a20..aee51c9a78 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -208,7 +208,7 @@ export const myGlobalState = $state({
 In many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...
 
 ```svelte
-<!--- file: App.svelte ---->
+<!--- file: App.svelte --->
 <script>
 	import { myGlobalState } from './state.svelte.js';
 

From 669f6b45a3d02aa55b4011576b8d4ded2b5b7135 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 25 Mar 2026 09:27:46 +0100
Subject: [PATCH 13/13] fix: prevent hydration error on async `{@html ...}`
 (#17999)

Fixes #17981
---
 .changeset/four-beers-like.md                      |  5 +++++
 .../3-transform/client/visitors/shared/fragment.js |  4 +---
 .../samples/async-hydrate-html-tag/_config.js      | 10 ++++++++++
 .../samples/async-hydrate-html-tag/main.svelte     | 14 ++++++++++++++
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/four-beers-like.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte

diff --git a/.changeset/four-beers-like.md b/.changeset/four-beers-like.md
new file mode 100644
index 0000000000..967d76af66
--- /dev/null
+++ b/.changeset/four-beers-like.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent hydration error on async `{@html ...}`
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 bd3e708662..f77af74f7e 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
@@ -101,7 +101,7 @@ export function process_children(nodes, initial, is_element, context) {
 			if (is_static_element(node)) {
 				skipped += 1;
 			} else if (
-				node.type === 'EachBlock' &&
+				(node.type === 'EachBlock' || node.type === 'HtmlTag') &&
 				nodes.length === 1 &&
 				is_element &&
 				// In case it's wrapped in async the async logic will want to skip sibling nodes up until the end, hence we cannot make this controlled
@@ -109,8 +109,6 @@ export function process_children(nodes, initial, is_element, context) {
 				!node.metadata.expression.is_async()
 			) {
 				node.metadata.is_controlled = true;
-			} else if (node.type === 'HtmlTag' && nodes.length === 1 && is_element) {
-				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(
 					false,
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js
new file mode 100644
index 0000000000..cb73ab1833
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<div><div><p>first test</p></div> other test</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte
new file mode 100644
index 0000000000..cd34a1a16e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	function firstTest() {
+		return Promise.resolve('<p>first test</p>');
+	}
+
+	function otherTest() {
+		return Promise.resolve('other test');
+	}
+</script>
+
+<div>
+	<div>{@html await firstTest()}</div>
+	{await otherTest()}
+</div>