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/.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/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/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 2f73f6a47c..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 —
 
@@ -59,8 +62,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 +71,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
diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 61b203f93e..aee51c9a78 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:
 
@@ -140,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';
 
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7c1311ae84..2b8473b9e6 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,31 @@
 # 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
+
+- 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 8c926d04c2..70c2a66ea0 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.55.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
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/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/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/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/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index 071901aafc..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,13 +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();
-
-		anchor.before(start);
-
 		block(() => {
 			if (component === (component = get(current))) {
 				return;
@@ -52,16 +43,21 @@ 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);
 			});
+
+			// 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;
@@ -70,10 +66,6 @@ export function hmr(fn) {
 			anchor = hydrate_node;
 		}
 
-		anchor.before(end);
-
-		assign_nodes(start, end);
-
 		return instance;
 	}
 
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;
 }
 
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/src/version.js b/packages/svelte/src/version.js
index 191d53016a..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.0';
+export const VERSION = '5.55.0';
 export const PUBLIC_VERSION = '5';
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
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}
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>
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/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}
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}`);
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 f2d0549430..51b9d079f4 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2010,16 +2010,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
 		 */
@@ -2046,7 +2080,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
@@ -2062,7 +2096,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.
@@ -2072,7 +2106,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;
@@ -2090,8 +2124,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;
@@ -2108,39 +2142,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).
 	 *
@@ -2170,13 +2171,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.
@@ -2209,15 +2210,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;