diff --git a/.changeset/new-candles-marry.md b/.changeset/new-candles-marry.md
deleted file mode 100644
index 4d55980c72..0000000000
--- a/.changeset/new-candles-marry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: simplify internal component `pop()`
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c0e1d36760..046ad335f3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -43,6 +43,23 @@ jobs:
       - run: pnpm test
         env:
           CI: true
+  TestNoAsync:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm playwright install chromium
+      - run: pnpm test runtime-runes
+        env:
+          CI: true
+          SVELTE_NO_ASYNC: true
   Lint:
     permissions: {}
     runs-on: ubuntu-latest
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index 71df3242e8..9be1f00104 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -8,9 +8,17 @@ jobs:
   trigger:
     runs-on: ubuntu-latest
     if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
+    permissions:
+      issues: write # to add / delete reactions
+      pull-requests: write # to read PR data, and to add labels
+      actions: read # to check workflow status
+      contents: read # to clone the repo
     steps:
-      - uses: GitHubSecurityLab/actions-permissions/monitor@v1
-      - uses: actions/github-script@v6
+      - name: monitor action permissions
+        uses: GitHubSecurityLab/actions-permissions/monitor@v1
+      - name: check user authorization # user needs triage permission
+        uses: actions/github-script@v7
+        id: check-permissions
         with:
           script: |
             const user = context.payload.sender.login
@@ -29,7 +37,7 @@ jobs:
             }
 
             if (hasTriagePermission) {
-              console.log('Allowed')
+              console.log('User is allowed. Adding +1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
@@ -37,16 +45,18 @@ jobs:
                 content: '+1',
               })
             } else {
-              console.log('Not allowed')
+              console.log('User is not allowed. Adding -1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 comment_id: context.payload.comment.id,
                 content: '-1',
               })
-              throw new Error('not allowed')
+              throw new Error('User does not have the necessary permissions.')
             }
-      - uses: actions/github-script@v6
+
+      - name: Get PR Data
+        uses: actions/github-script@v7
         id: get-pr-data
         with:
           script: |
@@ -59,21 +69,27 @@ jobs:
             return {
               num: context.issue.number,
               branchName: pr.head.ref,
+              commit: pr.head.sha,
               repo: pr.head.repo.full_name
             }
-      - id: generate-token
-        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0
+
+      - name: Generate Token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
         with:
-          app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
-          private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
-          repository: '${{ github.repository_owner }}/svelte-ecosystem-ci'
-      - uses: actions/github-script@v6
+          app-id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
+          repositories: |
+            svelte
+            svelte-ecosystem-ci
+
+      - name: Trigger Downstream Workflow
+        uses: actions/github-script@v7
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
         with:
           github-token: ${{ steps.generate-token.outputs.token }}
-          result-encoding: string
           script: |
             const comment = process.env.COMMENT.trim()
             const prData = ${{ steps.get-pr-data.outputs.result }}
@@ -89,6 +105,7 @@ jobs:
                 prNumber: '' + prData.num,
                 branchName: prData.branchName,
                 repo: prData.repo,
+                commit: prData.commit,
                 suite: suite === '' ? '-' : suite
               }
             })
diff --git a/.prettierignore b/.prettierignore
index 72cd10aca8..5e1d9b1aa7 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -28,15 +28,6 @@ packages/svelte/types
 packages/svelte/compiler/index.js
 playgrounds/sandbox/src/*
 
-# sites/svelte.dev
-sites/svelte.dev/static/svelte-app.json
-sites/svelte.dev/scripts/svelte-app/
-sites/svelte.dev/src/routes/_components/Supporters/contributors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/contributors.js
-sites/svelte.dev/src/routes/_components/Supporters/donors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/donors.js
-sites/svelte.dev/src/lib/generated
-
 **/node_modules
 **/.svelte-kit
 **/.vercel
diff --git a/.prettierrc b/.prettierrc
index c4fd5d9f2f..c2d09a4289 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -17,12 +17,6 @@
 				"useTabs": false,
 				"tabWidth": 2
 			}
-		},
-		{
-			"files": ["sites/svelte-5-preview/src/routes/docs/content/**/*.md"],
-			"options": {
-				"printWidth": 60
-			}
 		}
 	]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 21a2a11c84..4d360cbc8a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,3 @@
 {
-	"search.exclude": {
-		"sites/svelte-5-preview/static/*": true
-	},
 	"typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0e2628f84f..c2d3e45049 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -105,10 +105,10 @@ Test samples are kept in `/test/xxx/samples` folder.
    pnpm test validator
    ```
 
-1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
+1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -t <test-name>`, for example:
 
    ```bash
-   pnpm test validator -- -t a11y-alt-text
+   pnpm test validator -t a11y-alt-text
    ```
 
    (You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 8e6c91fad7..741e24fde0 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -50,7 +50,7 @@ todos.push({
 });
 ```
 
-> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
 
 Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
 
@@ -119,7 +119,9 @@ class Todo {
 }
 ```
 
-> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+### Built-in classes
+
+Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 ## `$state.raw`
 
diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 2464aa9295..0123868c4e 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -94,6 +94,27 @@ let selected = $derived(items[index]);
 
 ...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
 
+## Destructuring
+
+If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
+
+```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
+let { a, b, c } = $derived(stuff());
+```
+
+...is roughly equivalent to this:
+
+```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
+let _stuff = $derived(stuff());
+let a = $derived(_stuff.a);
+let b = $derived(_stuff.b);
+let c = $derived(_stuff.c);
+```
+
 ## Update propagation
 
 Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index 0e129973d5..5820e178a0 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -221,6 +221,21 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 
 It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
 
+## `$effect.pending`
+
+When using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries ([demo](/playground/untitled#H4sIAAAAAAAAE3WRMU_DMBCF_8rJdHDUqilILGkaiY2RgY0yOPYZWbiOFV8IleX_jpMUEAIWS_7u-d27c2ROnJBV7B6t7WDsequAozKEqmAbpo3FwKqnyOjsJ90EMr-8uvN-G97Q0sRaEfAvLjtH6CjbsDrI3nhqju5IFgkEHGAVSBDy62L_SdtvejPTzEU4Owl6cJJM50AoxcUG2gLiVM31URgChyM89N3JBORcF3BoICA9mhN2A3G9gdvdrij2UJYgejLaSCMsKLTivNj0SEOf7WEN7ZwnHV1dfqd2dTsQ5QCdk9bI10PkcxexXqcmH3W51Jt_le2kbH8os9Y3UaTcNLYpDx-Xab6GTHXpZ128MhpWqDVK2np0yrgXXqQpaLa4APDLBkIF8bd2sYql0Sn_DeE7sYr6AdNzvgljR-MUq7SwAdMHeUtgHR4CAAA=)):
+
+```svelte
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+
+{#if $effect.pending()}
+	<p>pending promises: {$effect.pending()}</p>
+{/if}
+```
+
 ## `$effect.root`
 
 The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
diff --git a/documentation/docs/03-template-syntax/19-await-expressions.md b/documentation/docs/03-template-syntax/19-await-expressions.md
new file mode 100644
index 0000000000..4e5ec28b26
--- /dev/null
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -0,0 +1,144 @@
+---
+title: await
+---
+
+As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:
+
+- at the top level of your component's `<script>`
+- inside `$derived(...)` declarations
+- inside your markup
+
+This feature is currently experimental, and you must opt in by adding the `experimental.async` option wherever you [configure](/docs/kit/configuration) Svelte, usually `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
+```
+
+The experimental flag will be removed in Svelte 6.
+
+## Boundaries
+
+Currently, you can only use `await` inside a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<MyApp />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction will be lifted once Svelte supports asynchronous server-side rendering (see [caveats](#Caveats)).
+
+> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
+
+## Synchronized updates
+
+When an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...
+
+```svelte
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function add(a, b) {
+		await new Promise((f) => setTimeout(f, 500)); // artificial delay
+		return a + b;
+	}
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+```
+
+...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —
+
+```html
+<p>2 + 2 = 3</p>
+```
+
+— instead, the text will update to `2 + 2 = 4` when `add(a, b)` resolves.
+
+Updates can overlap — a fast update will be reflected in the UI while an earlier slow update is still ongoing.
+
+## Concurrency
+
+Svelte will do as much asynchronous work as it can in parallel. For example if you have two `await` expressions in your markup...
+
+```svelte
+<p>{await one()}</p>
+<p>{await two()}</p>
+```
+
+...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.
+
+This does not apply to sequential `await` expressions inside your `<script>` or inside async functions — these run like any other asynchronous JavaScript. An exception is that independent `$derived` expressions will update independently, even though they will run sequentially when they are first created:
+
+```js
+async function one() { return 1; }
+async function two() { return 2; }
+// ---cut---
+// these will run sequentially the first time,
+// but will update independently
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning
+
+## Indicating loading states
+
+In addition to the nearest boundary's [`pending`](svelte-boundary#Properties-pending) snippet, you can indicate that asynchronous work is ongoing with [`$effect.pending()`]($effect#$effect.pending).
+
+You can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:
+
+```js
+let color = 'red';
+let answer = -1;
+let updating = false;
+// ---cut---
+import { tick, settled } from 'svelte';
+
+async function onclick() {
+	updating = true;
+
+	// without this, the change to `updating` will be
+	// grouped with the other changes, meaning it
+	// won't be reflected in the UI
+	await tick();
+
+	color = 'octarine';
+	answer = 42;
+
+	await settled();
+
+	// any updates affected by `color` or `answer`
+	// have now been applied
+	updating = false;
+}
+```
+
+## Error handling
+
+Errors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).
+
+## Caveats
+
+As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.
+
+Currently, server-side rendering is synchronous. If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, only the `pending` snippet will be rendered.
+
+## Breaking changes
+
+Effects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in [very rare situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=) it is possible to update a block that should no longer exist, but only if you update state inside an effect, [which you should avoid]($effect#When-not-to-use-$effect).
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index f5439b4b83..3e91af5d83 100644
--- a/documentation/docs/05-special-elements/01-svelte-boundary.md
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -9,19 +9,41 @@ title: <svelte:boundary>
 > [!NOTE]
 > This feature was added in 5.3.0
 
-Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+Boundaries allow you to 'wall off' parts of your app, so that you can:
 
-If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+- provide UI that should be shown when [`await`](await-expressions) expressions are first resolving
+- handle errors that occur during rendering or while running effects, and provide UI that should be rendered when an error happens
 
-Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
+If a boundary handles an error (with a `failed` snippet or `onerror` handler, or both) its existing content will be removed.
+
+> [!NOTE] Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
 
 ## Properties
 
-For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+For the boundary to do anything, one or more of the following must be provided.
+
+### `pending`
+
+As of Svelte 5.36, boundaries with a `pending` snippet can contain [`await`](await-expressions) expressions. This snippet will be shown when the boundary is first created, and will remain visible until all the `await` expressions inside the boundary have resolved ([demo](/playground/untitled#H4sIAAAAAAAAE21QQW6DQAz8ytY9BKQVpFdKkPqDHnorPWzAaSwt3tWugUaIv1eE0KpKD5as8YxnNBOw6RAKKOOAVrA4up5bEy6VGknOyiO3xJ8qMnmPAhpOZDFC8T6BXPyiXADQ258X77P1FWg4moj_4Y1jQZZ49W0CealqruXUcyPkWLVozQXbZDC2R606spYiNo7bqA7qab_fp2paFLUElD6wYhzVa3AdRUySgNHZAVN1qDZaLRHljTp0vSTJ9XJjrSbpX5f0eZXN6zLXXOa_QfmurIVU-moyoyH5ib87o7XuYZfOZe6vnGWmx1uZW7lJOq9upa-sMwuUZdkmmfIbfQ1xZwwaBL8ECgk9zh8axJAdiVsoTsZGnL8Bg4tX_OMBAAA=)):
+
+```svelte
+<svelte:boundary>
+	<p>{await delayed('hello!')}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+The `pending` snippet will _not_ be shown for subsequent async updates — for these, you can use [`$effect.pending()`]($effect#$effect.pending).
+
+> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
+
 
 ### `failed`
 
-If a `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+If a `failed` snippet is provided, it will be rendered when an error is thrown inside the boundary, with the `error` and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
 
 ```svelte
 <svelte:boundary>
diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index ff33885fb8..49ecd8adb5 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -254,39 +254,24 @@ To declare that a variable expects the constructor or instance type of a compone
 
 Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
 
-In case this is a custom or experimental attribute/event, you can enhance the typings like this:
-
-```ts
-/// file: additional-svelte-typings.d.ts
-declare namespace svelteHTML {
-	// enhance elements
-	interface IntrinsicElements {
-		'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
-	}
-	// enhance attributes
-	interface HTMLAttributes<T> {
-		// If you want to use the beforeinstallprompt event
-		onbeforeinstallprompt?: (event: any) => any;
-		// If you want to use myCustomAttribute={..} (note: all lowercase)
-		mycustomattribute?: any; // You can replace any with something more specific if you like
-	}
-}
-```
-
-Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
-
-You can also declare the typings by augmenting the `svelte/elements` module like this:
+In case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this:
 
 ```ts
 /// file: additional-svelte-typings.d.ts
 import { HTMLButtonAttributes } from 'svelte/elements';
 
 declare module 'svelte/elements' {
+	// add a new element
 	export interface SvelteHTMLElements {
 		'custom-button': HTMLButtonAttributes;
 	}
 
-	// allows for more granular control over what element to add the typings to
+	// add a new global attribute that is available on all html elements
+	export interface HTMLAttributes<T> {
+		globalattribute?: string;
+	}
+
+	// add a new attribute for button elements
 	export interface HTMLButtonAttributes {
 		veryexperimentalattribute?: string;
 	}
@@ -294,3 +279,5 @@ declare module 'svelte/elements' {
 
 export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented
 ```
+
+Then make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 3f33e37d2e..8fdb7770aa 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -1,5 +1,17 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### async_derived_orphan
+
+```
+Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+```
+
+In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.
+
+Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.
+
+Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.
+
 ### bind_invalid_checkbox_value
 
 ```
@@ -68,12 +80,66 @@ Effect cannot be created inside a `$derived` value that was not itself created i
 `%rune%` can only be used inside an effect (e.g. during component initialisation)
 ```
 
+### effect_pending_outside_reaction
+
+```
+`$effect.pending()` can only be called inside an effect or derived
+```
+
 ### effect_update_depth_exceeded
 
 ```
-Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
 ```
 
+If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
+
+```js
+let count = $state(0);
+
+$effect(() => {
+	// this both reads and writes `count`,
+	// so will run in an infinite loop
+	count += 1;
+});
+```
+
+(Svelte intervenes before this can crash your browser tab.)
+
+The same applies to array mutations, since these both read and write to the array:
+
+```js
+let array = $state(['hello']);
+
+$effect(() => {
+	array.push('goodbye');
+});
+```
+
+Note that it's fine for an effect to re-run itself as long as it 'settles':
+
+```js
+let array = ['a', 'b', 'c'];
+// ---cut---
+$effect(() => {
+	// this is okay, because sorting an already-sorted array
+	// won't result in a mutation
+	array.sort();
+});
+```
+
+Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
+
+### flush_sync_in_effect
+
+```
+Cannot use `flushSync` inside an effect
+```
+
+The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ### get_abort_signal_outside_reaction
 
 ```
@@ -116,6 +182,14 @@ Rest element properties of `$props()` such as `%property%` are readonly
 The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 ```
 
+### set_context_after_init
+
+```
+`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+```
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ### state_descriptors_fixed
 
 ```
@@ -164,3 +238,23 @@ let odd = $derived(!even);
 ```
 
 If side-effects are unavoidable, use [`$effect`]($effect) instead.
+
+### svelte_boundary_reset_onerror
+
+```
+A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+```
+
+If a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.
+
+If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
+
+```svelte
+<svelte:boundary onerror={async (error, reset) => {
+	fixTheError();
+	+++await tick();+++
+	reset();
+}}>
+
+</svelte:boundary>
+```
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index fe90b0db38..6f1d677fe9 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -34,6 +34,86 @@ function add() {
 }
 ```
 
+### await_reactivity_loss
+
+```
+Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+```
+
+Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
+
+```js
+let 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 an `await` that is not 'visible' inside the expression. In a case like this...
+
+```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+async function sum() {
+	return await a + b;
+}
+
+let total = $derived(await sum());
+```
+
+...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
+
+```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+/**
+ * @param {Promise<number>} a
+ * @param {number} b
+ */
+async function sum(a, b) {
+	return await a + b;
+}
+
+let total = $derived(await sum(a, b));
+```
+
+### await_waterfall
+
+```
+An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+```
+
+In a case like this...
+
+```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.
+
+(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)
+
+You can solve this by creating the promises first and _then_ awaiting them:
+
+```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
+let aPromise = $derived(one());
+let bPromise = $derived(two());
+
+let a = $derived(await aPromise);
+let b = $derived(await bPromise);
+```
+
 ### binding_property_non_reactive
 
 ```
@@ -232,6 +312,32 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+### svelte_boundary_reset_noop
+
+```
+A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+```
+
+When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
+
+This `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
+
+```svelte
+<script>
+	let reset;
+</script>
+
+<button onclick={reset}>reset</button>
+
+<svelte:boundary onerror={(e, r) => (reset = r)}>
+	<!-- contents -->
+
+	{#snippet failed(e)}
+		<p>oops! {e.message}</p>
+	{/snippet}
+</svelte:boundary>
+```
+
 ### transition_slide_display
 
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index db848a0299..20f57770d1 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -480,6 +480,12 @@ Expected token %token%
 Expected whitespace
 ```
 
+### experimental_async
+
+```
+Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+```
+
 ### export_undefined
 
 ```
@@ -534,6 +540,12 @@ The arguments keyword cannot be used within the template or at the top level of
 %message%
 ```
 
+### legacy_await_invalid
+
+```
+Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+```
+
 ### legacy_export_invalid
 
 ```
diff --git a/documentation/docs/98-reference/.generated/shared-errors.md b/documentation/docs/98-reference/.generated/shared-errors.md
index 6c31aaafd0..de34b3f5da 100644
--- a/documentation/docs/98-reference/.generated/shared-errors.md
+++ b/documentation/docs/98-reference/.generated/shared-errors.md
@@ -1,5 +1,25 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### await_outside_boundary
+
+```
+Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+```
+
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<p>{await getData()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction may be lifted in a future version of Svelte.
+
 ### invalid_default_snippet
 
 ```
diff --git a/eslint.config.js b/eslint.config.js
index d7044fc9f1..5241cb43a6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -49,12 +49,13 @@ export default [
 		},
 		rules: {
 			'@typescript-eslint/await-thenable': 'error',
-			'@typescript-eslint/prefer-promise-reject-errors': 'error',
 			'@typescript-eslint/require-await': 'error',
 			'no-console': 'error',
 			'lube/svelte-naming-convention': ['error', { fixSameNames: true }],
 			// eslint isn't that well-versed with JSDoc to know that `foo: /** @type{..} */ (foo)` isn't a violation of this rule, so turn it off
 			'object-shorthand': 'off',
+			// eslint is being a dummy here too
+			'@typescript-eslint/prefer-promise-reject-errors': 'off',
 			'no-var': 'off',
 
 			// TODO: enable these rules and run `pnpm lint:fix`
@@ -79,7 +80,8 @@ export default [
 		files: ['packages/svelte/src/**/*'],
 		ignores: ['packages/svelte/src/compiler/**/*'],
 		rules: {
-			'custom/no_compiler_imports': 'error'
+			'custom/no_compiler_imports': 'error',
+			'svelte/no-svelte-internal': 'off'
 		}
 	},
 	{
@@ -101,11 +103,7 @@ export default [
 			'*.config.js',
 			// documentation can contain invalid examples
 			'documentation',
-			// contains a fork of the REPL which doesn't adhere to eslint rules
-			'sites/svelte-5-preview/**',
-			'tmp/**',
-			// wasn't checked previously, reenable at some point
-			'sites/svelte.dev/**'
+			'tmp/**'
 		]
 	}
 ];
diff --git a/package.json b/package.json
index 62581782d7..971bd020d1 100644
--- a/package.json
+++ b/package.json
@@ -27,16 +27,17 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.8",
-    "@sveltejs/eslint-config": "^8.1.0",
+    "@sveltejs/eslint-config": "^8.3.3",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^9.9.1",
     "eslint-plugin-lube": "^0.4.3",
+    "eslint-plugin-svelte": "^3.11.0",
     "jsdom": "25.0.1",
     "playwright": "^1.46.1",
     "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.4.0",
     "svelte": "workspace:^",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.24.0",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 19aa1466c0..5a5e532a08 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,143 @@
 # svelte
 
+## 5.36.13
+
+### Patch Changes
+
+- fix: ensure subscriptions are picked up correctly by deriveds ([#16466](https://github.com/sveltejs/svelte/pull/16466))
+
+## 5.36.12
+
+### Patch Changes
+
+- chore: move `capture_signals` to legacy module ([#16456](https://github.com/sveltejs/svelte/pull/16456))
+
+## 5.36.11
+
+### Patch Changes
+
+- fix: always mark reactions of deriveds ([#16457](https://github.com/sveltejs/svelte/pull/16457))
+
+- fix: add labels to `@const` tags and props ([#16454](https://github.com/sveltejs/svelte/pull/16454))
+
+- fix: tag stores for `$inspect.trace()` ([#16452](https://github.com/sveltejs/svelte/pull/16452))
+
+## 5.36.10
+
+### Patch Changes
+
+- fix: prevent batches from getting intertwined ([#16446](https://github.com/sveltejs/svelte/pull/16446))
+
+## 5.36.9
+
+### Patch Changes
+
+- fix: don't reexecute derived with no dependencies on teardown ([#16438](https://github.com/sveltejs/svelte/pull/16438))
+
+- fix: disallow `export { foo as default }` in `<script module>` ([#16447](https://github.com/sveltejs/svelte/pull/16447))
+
+- fix: move ownership validation into async component body ([#16449](https://github.com/sveltejs/svelte/pull/16449))
+
+- fix: allow async destructured deriveds ([#16444](https://github.com/sveltejs/svelte/pull/16444))
+
+- fix: move store setup/cleanup outside of async component body ([#16443](https://github.com/sveltejs/svelte/pull/16443))
+
+## 5.36.8
+
+### Patch Changes
+
+- fix: keep effect in the graph if it has an abort controller ([#16430](https://github.com/sveltejs/svelte/pull/16430))
+
+- chore: Switch `payload.out` to an array ([#16428](https://github.com/sveltejs/svelte/pull/16428))
+
+## 5.36.7
+
+### Patch Changes
+
+- fix: allow instrinsic `<svelte:...>` elements to inherit from `SvelteHTMLElements` ([#16424](https://github.com/sveltejs/svelte/pull/16424))
+
+## 5.36.6
+
+### Patch Changes
+
+- fix: delegate functions with shadowed variables if declared locally ([#16417](https://github.com/sveltejs/svelte/pull/16417))
+
+- fix: handle error in correct boundary after reset ([#16171](https://github.com/sveltejs/svelte/pull/16171))
+
+- fix: make `<svelte:boundary>` reset function a noop after the first call ([#16171](https://github.com/sveltejs/svelte/pull/16171))
+
+## 5.36.5
+
+### Patch Changes
+
+- fix: silence `$inspect` errors when the effect is about to be destroyed ([#16391](https://github.com/sveltejs/svelte/pull/16391))
+
+- fix: more informative error when effects run in an infinite loop ([#16405](https://github.com/sveltejs/svelte/pull/16405))
+
+## 5.36.4
+
+### Patch Changes
+
+- fix: avoid microtask in flushSync ([#16394](https://github.com/sveltejs/svelte/pull/16394))
+
+- fix: ensure compiler state is reset before compilation ([#16396](https://github.com/sveltejs/svelte/pull/16396))
+
+## 5.36.3
+
+### Patch Changes
+
+- fix: don't log `await_reactivity_loss` warning when signal is read in `untrack` ([#16385](https://github.com/sveltejs/svelte/pull/16385))
+
+- fix: better handle $inspect on array mutations ([#16389](https://github.com/sveltejs/svelte/pull/16389))
+
+- fix: leave proxied array `length` untouched when deleting properties ([#16389](https://github.com/sveltejs/svelte/pull/16389))
+
+- fix: update `$effect.pending()` immediately after a batch is removed ([#16382](https://github.com/sveltejs/svelte/pull/16382))
+
+## 5.36.2
+
+### Patch Changes
+
+- fix: add `$effect.pending()` to types ([#16376](https://github.com/sveltejs/svelte/pull/16376))
+
+- fix: add `pending` snippet to `<svelte:boundary>` types ([#16379](https://github.com/sveltejs/svelte/pull/16379))
+
+## 5.36.1
+
+### Patch Changes
+
+- fix: only skip updating bound `<input>` if the input was the source of the change ([#16373](https://github.com/sveltejs/svelte/pull/16373))
+
+## 5.36.0
+
+### Minor Changes
+
+- feat: support `await` in components when using the `experimental.async` compiler option ([#15844](https://github.com/sveltejs/svelte/pull/15844))
+
+### Patch Changes
+
+- fix: silence a11y warning for inert elements ([#16339](https://github.com/sveltejs/svelte/pull/16339))
+
+- chore: clean up a11y analysis code ([#16345](https://github.com/sveltejs/svelte/pull/16345))
+
+## 5.35.7
+
+### Patch Changes
+
+- fix: silence autofocus a11y warning inside `<dialog>` ([#16341](https://github.com/sveltejs/svelte/pull/16341))
+
+- fix: don't show adjusted error messages in boundaries ([#16360](https://github.com/sveltejs/svelte/pull/16360))
+
+- chore: replace inline regex with variable ([#16340](https://github.com/sveltejs/svelte/pull/16340))
+
+## 5.35.6
+
+### Patch Changes
+
+- chore: simplify reaction/source ownership tracking ([#16333](https://github.com/sveltejs/svelte/pull/16333))
+
+- chore: simplify internal component `pop()` ([#16331](https://github.com/sveltejs/svelte/pull/16331))
+
 ## 5.35.5
 
 ### Patch Changes
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index fe4078f56a..1492f77792 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -2080,6 +2080,7 @@ export interface SvelteHTMLElements {
 	'svelte:boundary': {
 		onerror?: (error: unknown, reset: () => void) => void;
 		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+		pending?: import('svelte').Snippet;
 	};
 
 	[name: string]: { [name: string]: any };
diff --git a/packages/svelte/knip.json b/packages/svelte/knip.json
index 7a27a64a91..0d1bf17e9f 100644
--- a/packages/svelte/knip.json
+++ b/packages/svelte/knip.json
@@ -1,10 +1,6 @@
 {
 	"$schema": "https://unpkg.com/knip@5/schema.json",
 	"entry": [
-		"src/*/index.js",
-		"src/index-client.ts",
-		"src/index-server.ts",
-		"src/index.d.ts",
 		"tests/**/*.js",
 		"tests/**/*.ts",
 		"!tests/**/*.svelte",
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 47c2038d70..57ecca0489 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -1,3 +1,13 @@
+## async_derived_orphan
+
+> Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+
+In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.
+
+Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.
+
+Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.
+
 ## bind_invalid_checkbox_value
 
 > Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
@@ -44,9 +54,59 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 > `%rune%` can only be used inside an effect (e.g. during component initialisation)
 
+## effect_pending_outside_reaction
+
+> `$effect.pending()` can only be called inside an effect or derived
+
 ## effect_update_depth_exceeded
 
-> Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+> Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
+
+If an effect updates some state that it also depends on, it will re-run, potentially in a loop:
+
+```js
+let count = $state(0);
+
+$effect(() => {
+	// this both reads and writes `count`,
+	// so will run in an infinite loop
+	count += 1;
+});
+```
+
+(Svelte intervenes before this can crash your browser tab.)
+
+The same applies to array mutations, since these both read and write to the array:
+
+```js
+let array = $state(['hello']);
+
+$effect(() => {
+	array.push('goodbye');
+});
+```
+
+Note that it's fine for an effect to re-run itself as long as it 'settles':
+
+```js
+let array = ['a', 'b', 'c'];
+// ---cut---
+$effect(() => {
+	// this is okay, because sorting an already-sorted array
+	// won't result in a mutation
+	array.sort();
+});
+```
+
+Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.
+
+## flush_sync_in_effect
+
+> Cannot use `flushSync` inside an effect
+
+The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
 
 ## get_abort_signal_outside_reaction
 
@@ -76,6 +136,12 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 
 > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
+## set_context_after_init
+
+> `setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+
+This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
+
 ## state_descriptors_fixed
 
 > Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
@@ -118,3 +184,21 @@ let odd = $derived(!even);
 ```
 
 If side-effects are unavoidable, use [`$effect`]($effect) instead.
+
+## svelte_boundary_reset_onerror
+
+> A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+
+If a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.
+
+If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
+
+```svelte
+<svelte:boundary onerror={async (error, reset) => {
+	fixTheError();
+	+++await tick();+++
+	reset();
+}}>
+
+</svelte:boundary>
+```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index f1901271d1..123c6833e6 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -30,6 +30,82 @@ function add() {
 }
 ```
 
+## await_reactivity_loss
+
+> Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+
+Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
+
+```js
+let 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 an `await` that is not 'visible' inside the expression. In a case like this...
+
+```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+async function sum() {
+	return await a + b;
+}
+
+let total = $derived(await sum());
+```
+
+...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:
+
+```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+/**
+ * @param {Promise<number>} a
+ * @param {number} b
+ */
+async function sum(a, b) {
+	return await a + b;
+}
+
+let total = $derived(await sum(a, b));
+```
+
+## await_waterfall
+
+> An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+
+In a case like this...
+
+```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.
+
+(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)
+
+You can solve this by creating the promises first and _then_ awaiting them:
+
+```js
+async function one() { return 1 }
+async function two() { return 2 }
+// ---cut---
+let aPromise = $derived(one());
+let bPromise = $derived(two());
+
+let a = $derived(await aPromise);
+let b = $derived(await bPromise);
+```
+
 ## binding_property_non_reactive
 
 > `%binding%` is binding to a non-reactive property
@@ -196,6 +272,30 @@ To silence the warning, ensure that `value`:
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+## svelte_boundary_reset_noop
+
+> A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+
+When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
+
+This `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
+
+```svelte
+<script>
+	let reset;
+</script>
+
+<button onclick={reset}>reset</button>
+
+<svelte:boundary onerror={(e, r) => (reset = r)}>
+	<!-- contents -->
+
+	{#snippet failed(e)}
+		<p>oops! {e.message}</p>
+	{/snippet}
+</svelte:boundary>
+```
+
 ## transition_slide_display
 
 > The `slide` transition does not work correctly for elements with `display: %value%`
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index e11975aef2..2b0c5eafdf 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -70,6 +70,10 @@ This turned out to be buggy and unpredictable, particularly when working with de
 
 > `$effect()` can only be used as an expression statement
 
+## experimental_async
+
+> Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+
 ## export_undefined
 
 > `%name%` is not defined
@@ -98,6 +102,10 @@ This turned out to be buggy and unpredictable, particularly when working with de
 
 > The arguments keyword cannot be used within the template or at the top level of a component
 
+## legacy_await_invalid
+
+> Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+
 ## legacy_export_invalid
 
 > Cannot use `export let` in runes mode — use `$props()` instead
diff --git a/packages/svelte/messages/shared-errors/errors.md b/packages/svelte/messages/shared-errors/errors.md
index 4b4d332202..f9160671d3 100644
--- a/packages/svelte/messages/shared-errors/errors.md
+++ b/packages/svelte/messages/shared-errors/errors.md
@@ -1,3 +1,21 @@
+## await_outside_boundary
+
+> Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+
+```svelte
+<svelte:boundary>
+	<p>{await getData()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+This restriction may be lifted in a future version of Svelte.
+
 ## invalid_default_snippet
 
 > Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4ac497ed41..4bf9a5df22 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.35.5",
+  "version": "5.36.13",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -59,6 +59,9 @@
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },
+    "./internal/flags/async": {
+      "default": "./src/internal/flags/async.js"
+    },
     "./internal/flags/legacy": {
       "default": "./src/internal/flags/legacy.js"
     },
diff --git a/packages/svelte/scripts/process-messages/templates/client-errors.js b/packages/svelte/scripts/process-messages/templates/client-errors.js
index c72e9f9d5e..ef749b4ba3 100644
--- a/packages/svelte/scripts/process-messages/templates/client-errors.js
+++ b/packages/svelte/scripts/process-messages/templates/client-errors.js
@@ -1,5 +1,7 @@
 import { DEV } from 'esm-env';
 
+export * from '../shared/errors.js';
+
 /**
  * MESSAGE
  * @param {string} PARAMETER
diff --git a/packages/svelte/scripts/process-messages/templates/server-errors.js b/packages/svelte/scripts/process-messages/templates/server-errors.js
index 6fb7924564..0bbe801abc 100644
--- a/packages/svelte/scripts/process-messages/templates/server-errors.js
+++ b/packages/svelte/scripts/process-messages/templates/server-errors.js
@@ -1,3 +1,5 @@
+export * from '../shared/errors.js';
+
 /**
  * MESSAGE
  * @param {string} PARAMETER
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index a1484718cc..ad32eaa56f 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -255,6 +255,13 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 */
+	export function pending(): number;
+
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.
 	 *
@@ -288,13 +295,13 @@ declare namespace $effect {
 	 *   let count = $state(0);
 	 *
 	 *   const cleanup = $effect.root(() => {
-	 *	    $effect(() => {
-	 *				console.log(count);
-	 *			})
+	 *     $effect(() => {
+	 *       console.log(count);
+	 *     })
 	 *
-	 *      return () => {
-	 *        console.log('effect root cleanup');
-	 * 			}
+	 *     return () => {
+	 *       console.log('effect root cleanup');
+	 *     }
 	 *   });
 	 * </script>
 	 *
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index e9fa33b054..599d3e8248 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -170,6 +170,15 @@ export function effect_invalid_placement(node) {
 	e(node, 'effect_invalid_placement', `\`$effect()\` can only be used as an expression statement\nhttps://svelte.dev/e/effect_invalid_placement`);
 }
 
+/**
+ * Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function experimental_async(node) {
+	e(node, 'experimental_async', `Cannot use \`await\` in deriveds and template expressions, or at the top level of a component, unless the \`experimental.async\` compiler option is \`true\`\nhttps://svelte.dev/e/experimental_async`);
+}
+
 /**
  * `%name%` is not defined
  * @param {null | number | NodeLike} node
@@ -235,6 +244,15 @@ export function invalid_arguments_usage(node) {
 	e(node, 'invalid_arguments_usage', `The arguments keyword cannot be used within the template or at the top level of a component\nhttps://svelte.dev/e/invalid_arguments_usage`);
 }
 
+/**
+ * Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function legacy_await_invalid(node) {
+	e(node, 'legacy_await_invalid', `Cannot use \`await\` in deriveds and template expressions, or at the top level of a component, unless in runes mode\nhttps://svelte.dev/e/legacy_await_invalid`);
+}
+
 /**
  * Cannot use `export let` in runes mode — use `$props()` instead
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 9ba23c1485..a378af34ee 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -20,7 +20,7 @@ export { default as preprocess } from './preprocess/index.js';
  */
 export function compile(source, options) {
 	source = remove_bom(source);
-	state.reset_warnings(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
 	const validated = validate_component_options(options, '');
 
 	let parsed = _parse(source);
@@ -63,7 +63,7 @@ export function compile(source, options) {
  */
 export function compileModule(source, options) {
 	source = remove_bom(source);
-	state.reset_warnings(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
 	const validated = validate_module_options(options, '');
 
 	const analysis = analyze_module(source, validated);
@@ -111,7 +111,7 @@ export function compileModule(source, options) {
  */
 export function parse(source, { modern, loose } = {}) {
 	source = remove_bom(source);
-	state.reset_warnings(() => false);
+	state.reset({ warning: () => false, filename: undefined });
 
 	const ast = _parse(source, loose);
 	return to_public_ast(source, ast, modern);
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index fdc9734f85..6b2e6cda70 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -9,7 +9,7 @@ import { parse } from '../phases/1-parse/index.js';
 import { regex_valid_component_name } from '../phases/1-parse/state/element.js';
 import { analyze_component } from '../phases/2-analyze/index.js';
 import { get_rune } from '../phases/scope.js';
-import { reset, reset_warnings } from '../state.js';
+import { reset, UNKNOWN_FILENAME } from '../state.js';
 import {
 	extract_identifiers,
 	extract_all_identifiers_from_expression,
@@ -134,7 +134,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			return start + style_placeholder + end;
 		});
 
-		reset_warnings(() => false);
+		reset({ warning: () => false, filename });
 
 		let parsed = parse(source);
 
@@ -145,7 +145,10 @@ export function migrate(source, { filename, use_ts } = {}) {
 			...validate_component_options({}, ''),
 			...parsed_options,
 			customElementOptions,
-			filename: filename ?? '(unknown)'
+			filename: filename ?? UNKNOWN_FILENAME,
+			experimental: {
+				async: true
+			}
 		};
 
 		const str = new MagicString(source);
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 6b6c9160d8..87332f647d 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -295,6 +295,8 @@ export default function element(parser) {
 		} else {
 			element.tag = get_attribute_expression(definition);
 		}
+
+		element.metadata.expression = create_expression_metadata();
 	}
 
 	if (is_top_level_script_or_style) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index d73e273ec2..d407b44556 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,4 +1,4 @@
-/** @import { Comment, Expression, Node, Program } from 'estree' */
+/** @import { Expression, Node, Program } from 'estree' */
 /** @import { Binding, AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
@@ -22,6 +22,7 @@ import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AttachTag } from './visitors/AttachTag.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { BindDirective } from './visitors/BindDirective.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
@@ -140,6 +141,7 @@ const visitors = {
 	AttachTag,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BindDirective,
 	CallExpression,
 	ClassBody,
@@ -211,9 +213,14 @@ function js(script, root, allow_reactive_declarations, parent) {
 		body: []
 	};
 
-	const { scope, scopes } = create_scopes(ast, root, allow_reactive_declarations, parent);
+	const { scope, scopes, has_await } = create_scopes(
+		ast,
+		root,
+		allow_reactive_declarations,
+		parent
+	);
 
-	return { ast, scope, scopes };
+	return { ast, scope, scopes, has_await };
 }
 
 /**
@@ -244,7 +251,7 @@ export function analyze_module(source, options) {
 	state.set_source(source);
 	const ast = parse(source, comments, false, false);
 
-	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
+	const { scope, scopes, has_await } = create_scopes(ast, new ScopeRoot(), false, null);
 
 	for (const [name, references] of scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -261,19 +268,19 @@ export function analyze_module(source, options) {
 
 	/** @type {Analysis} */
 	const analysis = {
-		module: { ast, scope, scopes },
+		module: { ast, scope, scopes, has_await },
 		name: options.filename,
 		accessors: false,
 		runes: true,
 		immutable: true,
 		tracing: false,
+		async_deriveds: new Set(),
 		comments,
 		classes: new Map()
 	};
 
-	state.reset({
+	state.adjust({
 		dev: options.dev,
-		filename: options.filename,
 		rootDir: options.rootDir,
 		runes: true
 	});
@@ -314,7 +321,12 @@ export function analyze_component(root, source, options) {
 	const module = js(root.module, scope_root, false, null);
 	const instance = js(root.instance, scope_root, true, module.scope);
 
-	const { scope, scopes } = create_scopes(root.fragment, scope_root, false, instance.scope);
+	const { scope, scopes, has_await } = create_scopes(
+		root.fragment,
+		scope_root,
+		false,
+		instance.scope
+	);
 
 	/** @type {Template} */
 	const template = { ast: root.fragment, scope, scopes };
@@ -422,7 +434,9 @@ export function analyze_component(root, source, options) {
 
 	const component_name = get_component_name(options.filename);
 
-	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
+	const runes =
+		options.runes ??
+		(has_await || instance.has_await || Array.from(module.scope.references.keys()).some(is_rune));
 
 	if (!runes) {
 		for (let check of synthetic_stores_legacy_check) {
@@ -512,15 +526,15 @@ export function analyze_component(root, source, options) {
 		source,
 		undefined_exports: new Map(),
 		snippet_renderers: new Map(),
-		snippets: new Set()
+		snippets: new Set(),
+		async_deriveds: new Set()
 	};
 
-	state.reset({
+	state.adjust({
 		component_name: analysis.name,
 		dev: options.dev,
-		filename: options.filename,
 		rootDir: options.rootDir,
-		runes: true
+		runes
 	});
 
 	if (!runes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 773aa59744..b13f3f89b6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -192,8 +192,13 @@ function get_delegated_event(event_name, handler, context) {
 			return unhoisted;
 		}
 
-		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+		// If we are referencing a binding that is shadowed in another scope then bail out (unless it's declared within the function).
+		if (
+			local_binding !== null &&
+			binding !== null &&
+			local_binding.node !== binding.node &&
+			scope.declarations.get(reference) !== binding
+		) {
 			return unhoisted;
 		}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..af7d0307e9
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
@@ -0,0 +1,30 @@
+/** @import { AwaitExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	let suspend = context.state.ast_type === 'instance' && context.state.function_depth === 1;
+
+	if (context.state.expression) {
+		context.state.expression.has_await = true;
+		suspend = true;
+	}
+
+	// disallow top-level `await` or `await` in template expressions
+	// unless a) in runes mode and b) opted into `experimental.async`
+	if (suspend) {
+		if (!context.state.options.experimental.async) {
+			e.experimental_async(node);
+		}
+
+		if (!context.state.analysis.runes) {
+			e.legacy_await_invalid(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 33abb52cac..9b6337b9ed 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -7,6 +7,7 @@ import { get_parent } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
 import { dev, locate_node, source } from '../../../state.js';
 import * as b from '#compiler/builders';
+import { create_expression_metadata } from '../../nodes.js';
 
 /**
  * @param {CallExpression} node
@@ -163,6 +164,13 @@ export function CallExpression(node, context) {
 
 			break;
 
+		case '$effect.pending':
+			if (context.state.expression) {
+				context.state.expression.has_state = true;
+			}
+
+			break;
+
 		case '$inspect':
 			if (node.arguments.length < 1) {
 				e.rune_invalid_arguments_length(node, rune, 'one or more arguments');
@@ -227,7 +235,19 @@ export function CallExpression(node, context) {
 	}
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived') {
+	if (rune === '$derived') {
+		const expression = create_expression_metadata();
+
+		context.next({
+			...context.state,
+			function_depth: context.state.function_depth + 1,
+			expression
+		});
+
+		if (expression.has_await) {
+			context.state.analysis.async_deriveds.add(node);
+		}
+	} else if (rune === '$inspect') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index 4b85894e52..5b8d9ba053 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -11,6 +11,17 @@ export function ExportNamedDeclaration(node, context) {
 	// visit children, so bindings are correctly initialised
 	context.next();
 
+	if (
+		context.state.ast_type &&
+		node.specifiers.some((specifier) =>
+			specifier.exported.type === 'Identifier'
+				? specifier.exported.name === 'default'
+				: specifier.exported.value === 'default'
+		)
+	) {
+		e.module_illegal_default_export(node);
+	}
+
 	if (node.declaration?.type === 'VariableDeclaration') {
 		// in runes mode, forbid `export let`
 		if (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index d5689e5d55..fab5d46e1b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -9,7 +9,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_attribute, is_custom_element_node } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
-import { check_element } from './shared/a11y.js';
+import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
index 7d6eb5be99..9699d3c03b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -32,6 +32,7 @@ export function StyleDirective(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+			node.metadata.expression.has_await ||= chunk.metadata.expression.has_await;
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
index d50cb80cb8..35af96ba12 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 
-const valid = ['onerror', 'failed'];
+const valid = ['onerror', 'failed', 'pending'];
 
 /**
  * @param {AST.SvelteBoundary} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index c45859408c..3f7b0ec6b8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import { is_text_attribute } from '../../../utils/ast.js';
-import { check_element } from './shared/a11y.js';
+import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
@@ -62,5 +62,17 @@ export function SvelteElement(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next({ ...context.state, parent_element: null });
+	context.visit(node.tag, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	for (const attribute of node.attributes) {
+		context.visit(attribute);
+	}
+
+	context.visit(node.fragment, {
+		...context.state,
+		parent_element: null
+	});
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
index b87f082de0..652a447165 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
@@ -3,7 +3,7 @@
 import { visit_component } from './shared/component.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { filename } from '../../../state.js';
+import { filename, UNKNOWN_FILENAME } from '../../../state.js';
 
 /**
  * @param {AST.SvelteSelf} node
@@ -23,9 +23,9 @@ export function SvelteSelf(node, context) {
 	}
 
 	if (context.state.analysis.runes) {
-		const name = filename === '(unknown)' ? 'Self' : context.state.analysis.name;
+		const name = filename === UNKNOWN_FILENAME ? 'Self' : context.state.analysis.name;
 		const basename =
-			filename === '(unknown)'
+			filename === UNKNOWN_FILENAME
 				? 'Self.svelte'
 				: /** @type {string} */ (filename.split(/[/\\]/).pop());
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
new file mode 100644
index 0000000000..a1b70f2207
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
@@ -0,0 +1,319 @@
+/** @import { ARIARoleRelationConcept  } from 'aria-query' */
+import { roles as roles_map, elementRoles } from 'aria-query';
+// @ts-expect-error package doesn't provide typings
+import { AXObjects, elementAXObjects } from 'axobject-query';
+
+export const aria_attributes =
+	'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
+		' '
+	);
+
+/** @type {Record<string, string[]>} */
+export const a11y_required_attributes = {
+	a: ['href'],
+	area: ['alt', 'aria-label', 'aria-labelledby'],
+	// html-has-lang
+	html: ['lang'],
+	// iframe-has-title
+	iframe: ['title'],
+	img: ['alt'],
+	object: ['title', 'aria-label', 'aria-labelledby']
+};
+
+export const a11y_distracting_elements = ['blink', 'marquee'];
+
+// this excludes `<a>` and `<button>` because they are handled separately
+export const a11y_required_content = [
+	// heading-has-content
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6'
+];
+
+export const a11y_labelable = [
+	'button',
+	'input',
+	'keygen',
+	'meter',
+	'output',
+	'progress',
+	'select',
+	'textarea'
+];
+
+export const a11y_interactive_handlers = [
+	// Keyboard events
+	'keypress',
+	'keydown',
+	'keyup',
+	// Click events
+	'click',
+	'contextmenu',
+	'dblclick',
+	'drag',
+	'dragend',
+	'dragenter',
+	'dragexit',
+	'dragleave',
+	'dragover',
+	'dragstart',
+	'drop',
+	'mousedown',
+	'mouseenter',
+	'mouseleave',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup'
+];
+
+export const a11y_recommended_interactive_handlers = [
+	'click',
+	'mousedown',
+	'mouseup',
+	'keypress',
+	'keydown',
+	'keyup'
+];
+
+export const a11y_nested_implicit_semantics = new Map([
+	['header', 'banner'],
+	['footer', 'contentinfo']
+]);
+
+export const a11y_implicit_semantics = new Map([
+	['a', 'link'],
+	['area', 'link'],
+	['article', 'article'],
+	['aside', 'complementary'],
+	['body', 'document'],
+	['button', 'button'],
+	['datalist', 'listbox'],
+	['dd', 'definition'],
+	['dfn', 'term'],
+	['dialog', 'dialog'],
+	['details', 'group'],
+	['dt', 'term'],
+	['fieldset', 'group'],
+	['figure', 'figure'],
+	['form', 'form'],
+	['h1', 'heading'],
+	['h2', 'heading'],
+	['h3', 'heading'],
+	['h4', 'heading'],
+	['h5', 'heading'],
+	['h6', 'heading'],
+	['hr', 'separator'],
+	['img', 'img'],
+	['li', 'listitem'],
+	['link', 'link'],
+	['main', 'main'],
+	['menu', 'list'],
+	['meter', 'progressbar'],
+	['nav', 'navigation'],
+	['ol', 'list'],
+	['option', 'option'],
+	['optgroup', 'group'],
+	['output', 'status'],
+	['progress', 'progressbar'],
+	['section', 'region'],
+	['summary', 'button'],
+	['table', 'table'],
+	['tbody', 'rowgroup'],
+	['textarea', 'textbox'],
+	['tfoot', 'rowgroup'],
+	['thead', 'rowgroup'],
+	['tr', 'row'],
+	['ul', 'list']
+]);
+
+export const menuitem_type_to_implicit_role = new Map([
+	['command', 'menuitem'],
+	['checkbox', 'menuitemcheckbox'],
+	['radio', 'menuitemradio']
+]);
+
+export const input_type_to_implicit_role = new Map([
+	['button', 'button'],
+	['image', 'button'],
+	['reset', 'button'],
+	['submit', 'button'],
+	['checkbox', 'checkbox'],
+	['radio', 'radio'],
+	['range', 'slider'],
+	['number', 'spinbutton'],
+	['email', 'textbox'],
+	['search', 'searchbox'],
+	['tel', 'textbox'],
+	['text', 'textbox'],
+	['url', 'textbox']
+]);
+
+/**
+ * Exceptions to the rule which follows common A11y conventions
+ * TODO make this configurable by the user
+ * @type {Record<string, string[]>}
+ */
+export const a11y_non_interactive_element_to_interactive_role_exceptions = {
+	ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+	ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+	table: ['grid'],
+	td: ['gridcell'],
+	fieldset: ['radiogroup', 'presentation']
+};
+
+export const combobox_if_list = ['email', 'search', 'tel', 'text', 'url'];
+
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
+export const address_type_tokens = ['shipping', 'billing'];
+
+export const autofill_field_name_tokens = [
+	'',
+	'on',
+	'off',
+	'name',
+	'honorific-prefix',
+	'given-name',
+	'additional-name',
+	'family-name',
+	'honorific-suffix',
+	'nickname',
+	'username',
+	'new-password',
+	'current-password',
+	'one-time-code',
+	'organization-title',
+	'organization',
+	'street-address',
+	'address-line1',
+	'address-line2',
+	'address-line3',
+	'address-level4',
+	'address-level3',
+	'address-level2',
+	'address-level1',
+	'country',
+	'country-name',
+	'postal-code',
+	'cc-name',
+	'cc-given-name',
+	'cc-additional-name',
+	'cc-family-name',
+	'cc-number',
+	'cc-exp',
+	'cc-exp-month',
+	'cc-exp-year',
+	'cc-csc',
+	'cc-type',
+	'transaction-currency',
+	'transaction-amount',
+	'language',
+	'bday',
+	'bday-day',
+	'bday-month',
+	'bday-year',
+	'sex',
+	'url',
+	'photo'
+];
+
+export const contact_type_tokens = ['home', 'work', 'mobile', 'fax', 'pager'];
+
+export const autofill_contact_field_name_tokens = [
+	'tel',
+	'tel-country-code',
+	'tel-national',
+	'tel-area-code',
+	'tel-local',
+	'tel-local-prefix',
+	'tel-local-suffix',
+	'tel-extension',
+	'email',
+	'impp'
+];
+
+export const ElementInteractivity = /** @type {const} */ ({
+	Interactive: 'interactive',
+	NonInteractive: 'non-interactive',
+	Static: 'static'
+});
+
+export const invisible_elements = ['meta', 'html', 'script', 'style'];
+
+export const aria_roles = roles_map.keys();
+
+export const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
+
+const non_abstract_roles = aria_roles.filter((name) => !abstract_roles.includes(name));
+
+export const non_interactive_roles = non_abstract_roles
+	.filter((name) => {
+		const role = roles_map.get(name);
+		return (
+			// 'toolbar' does not descend from widget, but it does support
+			// aria-activedescendant, thus in practice we treat it as a widget.
+			// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
+			// 'generic' is meant to have no semantic meaning.
+			// 'cell' is treated as CellRole by the AXObject which is interactive, so we treat 'cell' it as interactive as well.
+			!['toolbar', 'tabpanel', 'generic', 'cell'].includes(name) &&
+			!role?.superClass.some((classes) => classes.includes('widget') || classes.includes('window'))
+		);
+	})
+	.concat(
+		// The `progressbar` is descended from `widget`, but in practice, its
+		// value is always `readonly`, so we treat it as a non-interactive role.
+		'progressbar'
+	);
+
+export const interactive_roles = non_abstract_roles.filter(
+	(name) =>
+		!non_interactive_roles.includes(name) &&
+		// 'generic' is meant to have no semantic meaning.
+		name !== 'generic'
+);
+
+export const presentation_roles = ['presentation', 'none'];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const non_interactive_element_role_schemas = [];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const interactive_element_role_schemas = [];
+
+for (const [schema, roles] of elementRoles.entries()) {
+	if ([...roles].every((role) => role !== 'generic' && non_interactive_roles.includes(role))) {
+		non_interactive_element_role_schemas.push(schema);
+	}
+
+	if ([...roles].every((role) => interactive_roles.includes(role))) {
+		interactive_element_role_schemas.push(schema);
+	}
+}
+
+const interactive_ax_objects = [...AXObjects.keys()].filter(
+	(name) => AXObjects.get(name).type === 'widget'
+);
+
+/** @type {ARIARoleRelationConcept[]} */
+export const interactive_element_ax_object_schemas = [];
+
+/** @type {ARIARoleRelationConcept[]} */
+export const non_interactive_element_ax_object_schemas = [];
+
+const non_interactive_ax_objects = [...AXObjects.keys()].filter((name) =>
+	['windows', 'structure'].includes(AXObjects.get(name).type)
+);
+
+for (const [schema, ax_object] of elementAXObjects.entries()) {
+	if ([...ax_object].every((role) => interactive_ax_objects.includes(role))) {
+		interactive_element_ax_object_schemas.push(schema);
+	}
+
+	if ([...ax_object].every((role) => non_interactive_ax_objects.includes(role))) {
+		non_interactive_element_ax_object_schemas.push(schema);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
similarity index 55%
rename from packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
rename to packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
index 1f58a28cad..f45a6c9a80 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
@@ -1,686 +1,53 @@
-/** @import { Context } from '../../types.js' */
 /** @import { AST } from '#compiler' */
+/** @import { Context } from '../../../types.js' */
 /** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
-import { roles as roles_map, aria, elementRoles } from 'aria-query';
-// @ts-expect-error package doesn't provide typings
-import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
-import {
-	regex_heading_tags,
-	regex_not_whitespace,
-	regex_starts_with_vowel,
-	regex_whitespaces
-} from '../../../patterns.js';
-import * as w from '../../../../warnings.js';
-import fuzzymatch from '../../../1-parse/utils/fuzzymatch.js';
-import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
-import { walk } from 'zimmerframe';
-import { list } from '../../../../utils/string.js';
-import { is_content_editable_binding } from '../../../../../utils.js';
-
-const aria_roles = roles_map.keys();
-const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
-const non_abstract_roles = aria_roles.filter((name) => !abstract_roles.includes(name));
-const non_interactive_roles = non_abstract_roles
-	.filter((name) => {
-		const role = roles_map.get(name);
-		return (
-			// 'toolbar' does not descend from widget, but it does support
-			// aria-activedescendant, thus in practice we treat it as a widget.
-			// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
-			// 'generic' is meant to have no semantic meaning.
-			// 'cell' is treated as CellRole by the AXObject which is interactive, so we treat 'cell' it as interactive as well.
-			!['toolbar', 'tabpanel', 'generic', 'cell'].includes(name) &&
-			!role?.superClass.some((classes) => classes.includes('widget') || classes.includes('window'))
-		);
-	})
-	.concat(
-		// The `progressbar` is descended from `widget`, but in practice, its
-		// value is always `readonly`, so we treat it as a non-interactive role.
-		'progressbar'
-	);
-const interactive_roles = non_abstract_roles.filter(
-	(name) =>
-		!non_interactive_roles.includes(name) &&
-		// 'generic' is meant to have no semantic meaning.
-		name !== 'generic'
-);
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_non_interactive_roles(role) {
-	return non_interactive_roles.includes(role);
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_interactive_roles(role) {
-	return interactive_roles.includes(role);
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_abstract_role(role) {
-	return abstract_roles.includes(role);
-}
-
-const presentation_roles = ['presentation', 'none'];
-
-/**
- * @param {ARIARoleDefinitionKey} role
- */
-function is_presentation_role(role) {
-	return presentation_roles.includes(role);
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function is_hidden_from_screen_reader(tag_name, attribute_map) {
-	if (tag_name === 'input') {
-		const type = get_static_value(attribute_map.get('type'));
-		if (type === 'hidden') {
-			return true;
-		}
-	}
-
-	const aria_hidden = attribute_map.get('aria-hidden');
-	if (!aria_hidden) return false;
-	const aria_hidden_value = get_static_value(aria_hidden);
-	if (aria_hidden_value === null) return true;
-	return aria_hidden_value === true || aria_hidden_value === 'true';
-}
-
-/**
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function has_disabled_attribute(attribute_map) {
-	const disabled_attr_value = get_static_value(attribute_map.get('disabled'));
-	if (disabled_attr_value) {
-		return true;
-	}
-
-	const aria_disabled_attr = attribute_map.get('aria-disabled');
-	if (aria_disabled_attr) {
-		const aria_disabled_attr_value = get_static_value(aria_disabled_attr);
-		if (aria_disabled_attr_value === 'true') {
-			return true;
-		}
-	}
-	return false;
-}
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const non_interactive_element_role_schemas = [];
-elementRoles.entries().forEach(([schema, roles]) => {
-	if ([...roles].every((role) => role !== 'generic' && non_interactive_roles.includes(role))) {
-		non_interactive_element_role_schemas.push(schema);
-	}
-});
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const interactive_element_role_schemas = [];
-elementRoles.entries().forEach(([schema, roles]) => {
-	if ([...roles].every((role) => interactive_roles.includes(role))) {
-		interactive_element_role_schemas.push(schema);
-	}
-});
-const interactive_ax_objects = [...AXObjects.keys()].filter(
-	(name) => AXObjects.get(name).type === 'widget'
-);
-const non_interactive_ax_objects = [...AXObjects.keys()].filter((name) =>
-	['windows', 'structure'].includes(AXObjects.get(name).type)
-);
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const interactive_element_ax_object_schemas = [];
-elementAXObjects.entries().forEach(
-	/**
-	 * @param {any} _
-	 */
-	([schema, ax_object]) => {
-		if ([...ax_object].every((role) => interactive_ax_objects.includes(role))) {
-			interactive_element_ax_object_schemas.push(schema);
-		}
-	}
-);
-
-/**
- * @type {ARIARoleRelationConcept[]}
- */
-const non_interactive_element_ax_object_schemas = [];
-elementAXObjects.entries().forEach(
-	/**
-	 * @param {any} _
-	 */
-	([schema, ax_object]) => {
-		if ([...ax_object].every((role) => non_interactive_ax_objects.includes(role))) {
-			non_interactive_element_ax_object_schemas.push(schema);
-		}
-	}
-);
-
-/**
- * @param {ARIARoleRelationConcept} schema
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function match_schema(schema, tag_name, attribute_map) {
-	if (schema.name !== tag_name) return false;
-	if (!schema.attributes) return true;
-	return schema.attributes.every((schema_attribute) => {
-		const attribute = attribute_map.get(schema_attribute.name);
-		if (!attribute) return false;
-		if (schema_attribute.value && schema_attribute.value !== get_static_text_value(attribute)) {
-			return false;
-		}
-		return true;
-	});
-}
-
-const ElementInteractivity = /** @type {const} */ ({
-	Interactive: 'interactive',
-	NonInteractive: 'non-interactive',
-	Static: 'static'
-});
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {ElementInteractivity[keyof ElementInteractivity]}
- */
-function element_interactivity(tag_name, attribute_map) {
-	if (
-		interactive_element_role_schemas.some((schema) => match_schema(schema, tag_name, attribute_map))
-	) {
-		return ElementInteractivity.Interactive;
-	}
-	if (
-		tag_name !== 'header' &&
-		non_interactive_element_role_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.NonInteractive;
-	}
-	if (
-		interactive_element_ax_object_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.Interactive;
-	}
-	if (
-		non_interactive_element_ax_object_schemas.some((schema) =>
-			match_schema(schema, tag_name, attribute_map)
-		)
-	) {
-		return ElementInteractivity.NonInteractive;
-	}
-	return ElementInteractivity.Static;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_interactive_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Interactive;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_non_interactive_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.NonInteractive;
-}
-
-/**
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {boolean}
- */
-function is_static_element(tag_name, attribute_map) {
-	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Static;
-}
-
-/**
- * @param {ARIARoleDefinitionKey} role
- * @param {string} tag_name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function is_semantic_role_element(role, tag_name, attribute_map) {
-	for (const [schema, ax_object] of elementAXObjects.entries()) {
-		if (
-			schema.name === tag_name &&
-			(!schema.attributes ||
-				schema.attributes.every(
-					/** @param {any} attr */
-					(attr) =>
-						attribute_map.has(attr.name) &&
-						get_static_value(attribute_map.get(attr.name)) === attr.value
-				))
-		) {
-			for (const name of ax_object) {
-				const roles = AXObjectRoles.get(name);
-				if (roles) {
-					for (const { name } of roles) {
-						if (name === role) {
-							return true;
-						}
-					}
-				}
-			}
-		}
-	}
-	return false;
-}
-
-// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
-const address_type_tokens = ['shipping', 'billing'];
-const autofill_field_name_tokens = [
-	'',
-	'on',
-	'off',
-	'name',
-	'honorific-prefix',
-	'given-name',
-	'additional-name',
-	'family-name',
-	'honorific-suffix',
-	'nickname',
-	'username',
-	'new-password',
-	'current-password',
-	'one-time-code',
-	'organization-title',
-	'organization',
-	'street-address',
-	'address-line1',
-	'address-line2',
-	'address-line3',
-	'address-level4',
-	'address-level3',
-	'address-level2',
-	'address-level1',
-	'country',
-	'country-name',
-	'postal-code',
-	'cc-name',
-	'cc-given-name',
-	'cc-additional-name',
-	'cc-family-name',
-	'cc-number',
-	'cc-exp',
-	'cc-exp-month',
-	'cc-exp-year',
-	'cc-csc',
-	'cc-type',
-	'transaction-currency',
-	'transaction-amount',
-	'language',
-	'bday',
-	'bday-day',
-	'bday-month',
-	'bday-year',
-	'sex',
-	'url',
-	'photo'
-];
-const contact_type_tokens = ['home', 'work', 'mobile', 'fax', 'pager'];
-const autofill_contact_field_name_tokens = [
-	'tel',
-	'tel-country-code',
-	'tel-national',
-	'tel-area-code',
-	'tel-local',
-	'tel-local-prefix',
-	'tel-local-suffix',
-	'tel-extension',
-	'email',
-	'impp'
-];
-
-/**
- * @param {null | true | string} autocomplete
- */
-function is_valid_autocomplete(autocomplete) {
-	if (autocomplete === true) {
-		return false;
-	} else if (!autocomplete) {
-		return true; // dynamic value
-	}
-	const tokens = autocomplete.trim().toLowerCase().split(regex_whitespaces);
-	if (typeof tokens[0] === 'string' && tokens[0].startsWith('section-')) {
-		tokens.shift();
-	}
-	if (address_type_tokens.includes(tokens[0])) {
-		tokens.shift();
-	}
-	if (autofill_field_name_tokens.includes(tokens[0])) {
-		tokens.shift();
-	} else {
-		if (contact_type_tokens.includes(tokens[0])) {
-			tokens.shift();
-		}
-		if (autofill_contact_field_name_tokens.includes(tokens[0])) {
-			tokens.shift();
-		} else {
-			return false;
-		}
-	}
-	if (tokens[0] === 'webauthn') {
-		tokens.shift();
-	}
-	return tokens.length === 0;
-}
-
-const aria_attributes =
-	'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
-		' '
-	);
-/** @type {Record<string, string[]>} */
-const a11y_required_attributes = {
-	a: ['href'],
-	area: ['alt', 'aria-label', 'aria-labelledby'],
-	// html-has-lang
-	html: ['lang'],
-	// iframe-has-title
-	iframe: ['title'],
-	img: ['alt'],
-	object: ['title', 'aria-label', 'aria-labelledby']
-};
-const a11y_distracting_elements = ['blink', 'marquee'];
-
-// this excludes `<a>` and `<button>` because they are handled separately
-const a11y_required_content = [
-	// heading-has-content
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6'
-];
-const a11y_labelable = [
-	'button',
-	'input',
-	'keygen',
-	'meter',
-	'output',
-	'progress',
-	'select',
-	'textarea'
-];
-const a11y_interactive_handlers = [
-	// Keyboard events
-	'keypress',
-	'keydown',
-	'keyup',
-	// Click events
-	'click',
-	'contextmenu',
-	'dblclick',
-	'drag',
-	'dragend',
-	'dragenter',
-	'dragexit',
-	'dragleave',
-	'dragover',
-	'dragstart',
-	'drop',
-	'mousedown',
-	'mouseenter',
-	'mouseleave',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup'
-];
-const a11y_recommended_interactive_handlers = [
-	'click',
-	'mousedown',
-	'mouseup',
-	'keypress',
-	'keydown',
-	'keyup'
-];
-const a11y_nested_implicit_semantics = new Map([
-	['header', 'banner'],
-	['footer', 'contentinfo']
-]);
-const a11y_implicit_semantics = new Map([
-	['a', 'link'],
-	['area', 'link'],
-	['article', 'article'],
-	['aside', 'complementary'],
-	['body', 'document'],
-	['button', 'button'],
-	['datalist', 'listbox'],
-	['dd', 'definition'],
-	['dfn', 'term'],
-	['dialog', 'dialog'],
-	['details', 'group'],
-	['dt', 'term'],
-	['fieldset', 'group'],
-	['figure', 'figure'],
-	['form', 'form'],
-	['h1', 'heading'],
-	['h2', 'heading'],
-	['h3', 'heading'],
-	['h4', 'heading'],
-	['h5', 'heading'],
-	['h6', 'heading'],
-	['hr', 'separator'],
-	['img', 'img'],
-	['li', 'listitem'],
-	['link', 'link'],
-	['main', 'main'],
-	['menu', 'list'],
-	['meter', 'progressbar'],
-	['nav', 'navigation'],
-	['ol', 'list'],
-	['option', 'option'],
-	['optgroup', 'group'],
-	['output', 'status'],
-	['progress', 'progressbar'],
-	['section', 'region'],
-	['summary', 'button'],
-	['table', 'table'],
-	['tbody', 'rowgroup'],
-	['textarea', 'textbox'],
-	['tfoot', 'rowgroup'],
-	['thead', 'rowgroup'],
-	['tr', 'row'],
-	['ul', 'list']
-]);
-const menuitem_type_to_implicit_role = new Map([
-	['command', 'menuitem'],
-	['checkbox', 'menuitemcheckbox'],
-	['radio', 'menuitemradio']
-]);
-const input_type_to_implicit_role = new Map([
-	['button', 'button'],
-	['image', 'button'],
-	['reset', 'button'],
-	['submit', 'button'],
-	['checkbox', 'checkbox'],
-	['radio', 'radio'],
-	['range', 'slider'],
-	['number', 'spinbutton'],
-	['email', 'textbox'],
-	['search', 'searchbox'],
-	['tel', 'textbox'],
-	['text', 'textbox'],
-	['url', 'textbox']
-]);
-
-/**
- * Exceptions to the rule which follows common A11y conventions
- * TODO make this configurable by the user
- * @type {Record<string, string[]>}
- */
-const a11y_non_interactive_element_to_interactive_role_exceptions = {
-	ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
-	ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
-	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
-	table: ['grid'],
-	td: ['gridcell'],
-	fieldset: ['radiogroup', 'presentation']
-};
-
-const combobox_if_list = ['email', 'search', 'tel', 'text', 'url'];
-
-/** @param {Map<string, AST.Attribute>} attribute_map */
-function input_implicit_role(attribute_map) {
-	const type_attribute = attribute_map.get('type');
-	if (!type_attribute) return;
-	const type = get_static_text_value(type_attribute);
-	if (!type) return;
-	const list_attribute_exists = attribute_map.has('list');
-	if (list_attribute_exists && combobox_if_list.includes(type)) {
-		return 'combobox';
-	}
-	return input_type_to_implicit_role.get(type);
-}
-
-/** @param {Map<string, AST.Attribute>} attribute_map */
-function menuitem_implicit_role(attribute_map) {
-	const type_attribute = attribute_map.get('type');
-	if (!type_attribute) return;
-	const type = get_static_text_value(type_attribute);
-	if (!type) return;
-	return menuitem_type_to_implicit_role.get(type);
-}
-
-/**
- * @param {string} name
- * @param {Map<string, AST.Attribute>} attribute_map
- */
-function get_implicit_role(name, attribute_map) {
-	if (name === 'menuitem') {
-		return menuitem_implicit_role(attribute_map);
-	} else if (name === 'input') {
-		return input_implicit_role(attribute_map);
-	} else {
-		return a11y_implicit_semantics.get(name);
-	}
-}
-
-const invisible_elements = ['meta', 'html', 'script', 'style'];
-
-/**
- * @param {AST.SvelteNode[]} path
- * @param {string[]} elements
- */
-function is_parent(path, elements) {
-	let i = path.length;
-	while (i--) {
-		const parent = path[i];
-		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
-		if (parent.type === 'RegularElement') {
-			return elements.includes(parent.name);
-		}
-	}
-	return false;
-}
-
-/**
- * @param {AST.Attribute} attribute
- * @param {ARIAProperty} name
- * @param {ARIAPropertyDefinition} schema
- * @param {string | true | null} value
- */
-function validate_aria_attribute_value(attribute, name, schema, value) {
-	const type = schema.type;
-
-	if (value === null) return;
-	if (value === true) value = '';
-
-	if (type === 'boolean' && value !== 'true' && value !== 'false') {
-		w.a11y_incorrect_aria_attribute_type_boolean(attribute, name);
-	} else if (type === 'integer' && (value === '' || !Number.isInteger(+value))) {
-		w.a11y_incorrect_aria_attribute_type_integer(attribute, name);
-	} else if (type === 'number' && (value === '' || isNaN(+value))) {
-		w.a11y_incorrect_aria_attribute_type(attribute, name, 'number');
-	} else if ((type === 'string' || type === 'id') && value === '') {
-		w.a11y_incorrect_aria_attribute_type(attribute, name, 'non-empty string');
-	} else if (type === 'idlist' && value === '') {
-		w.a11y_incorrect_aria_attribute_type_idlist(attribute, name);
-	} else if (type === 'token') {
-		const values = (schema.values ?? []).map((value) => value.toString());
-		if (!values.includes(value.toLowerCase())) {
-			w.a11y_incorrect_aria_attribute_type_token(
-				attribute,
-				name,
-				list(values.map((v) => `"${v}"`))
-			);
-		}
-	} else if (type === 'tokenlist') {
-		const values = (schema.values ?? []).map((value) => value.toString());
-		if (
-			value
-				.toLowerCase()
-				.split(regex_whitespaces)
-				.some((value) => !values.includes(value))
-		) {
-			w.a11y_incorrect_aria_attribute_type_tokenlist(
-				attribute,
-				name,
-				list(values.map((v) => `"${v}"`))
-			);
-		}
-	} else if (type === 'tristate' && value !== 'true' && value !== 'false' && value !== 'mixed') {
-		w.a11y_incorrect_aria_attribute_type_tristate(attribute, name);
-	}
-}
-
-/**
- * @param {AST.RegularElement |AST.SvelteElement} node
- * @param {string[]} attributes
- * @param {string} name
- */
-function warn_missing_attribute(node, attributes, name = node.name) {
-	const article =
-		regex_starts_with_vowel.test(attributes[0]) || attributes[0] === 'href' ? 'an' : 'a';
-	const sequence =
-		attributes.length > 1
-			? attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}`
-			: attributes[0];
-
-	w.a11y_missing_attribute(node, name, article, sequence);
-}
-
-/**
- * @param {AST.Attribute | undefined} attribute
- */
-function get_static_value(attribute) {
-	if (!attribute) return null;
-	if (attribute.value === true) return true;
-	if (is_text_attribute(attribute)) return attribute.value[0].data;
-	return null;
-}
-
-/**
- * @param {AST.Attribute | undefined} attribute
- */
-function get_static_text_value(attribute) {
-	const value = get_static_value(attribute);
-	if (value === true) return null;
-	return value;
-}
+import {
+	a11y_distracting_elements,
+	a11y_implicit_semantics,
+	a11y_interactive_handlers,
+	a11y_labelable,
+	a11y_nested_implicit_semantics,
+	a11y_non_interactive_element_to_interactive_role_exceptions,
+	a11y_recommended_interactive_handlers,
+	a11y_required_attributes,
+	a11y_required_content,
+	abstract_roles,
+	address_type_tokens,
+	aria_attributes,
+	aria_roles,
+	autofill_contact_field_name_tokens,
+	autofill_field_name_tokens,
+	combobox_if_list,
+	contact_type_tokens,
+	ElementInteractivity,
+	input_type_to_implicit_role,
+	interactive_element_ax_object_schemas,
+	interactive_element_role_schemas,
+	interactive_roles,
+	invisible_elements,
+	menuitem_type_to_implicit_role,
+	non_interactive_element_ax_object_schemas,
+	non_interactive_element_role_schemas,
+	non_interactive_roles,
+	presentation_roles
+} from './constants.js';
+import { roles as roles_map, aria } from 'aria-query';
+// @ts-expect-error package doesn't provide typings
+import { AXObjectRoles, elementAXObjects } from 'axobject-query';
+import {
+	regex_heading_tags,
+	regex_js_prefix,
+	regex_not_whitespace,
+	regex_redundant_img_alt,
+	regex_starts_with_vowel,
+	regex_whitespaces
+} from '../../../../patterns.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import { list } from '../../../../../utils/string.js';
+import { walk } from 'zimmerframe';
+import fuzzymatch from '../../../../1-parse/utils/fuzzymatch.js';
+import { is_content_editable_binding } from '../../../../../../utils.js';
+import * as w from '../../../../../warnings.js';
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
@@ -703,22 +70,33 @@ export function check_element(node, context) {
 	let has_contenteditable_binding = false;
 
 	for (const attribute of node.attributes) {
-		if (attribute.type === 'SpreadAttribute') {
-			has_spread = true;
-		} else if (attribute.type === 'OnDirective') {
-			handlers.add(attribute.name);
-		} else if (attribute.type === 'Attribute') {
-			if (is_event_attribute(attribute)) {
-				handlers.add(attribute.name.slice(2));
-			} else {
-				attributes.push(attribute);
-				attribute_map.set(attribute.name, attribute);
-				if (attribute.name === 'contenteditable') {
-					has_contenteditable_attr = true;
+		switch (attribute.type) {
+			case 'Attribute': {
+				if (is_event_attribute(attribute)) {
+					handlers.add(attribute.name.slice(2));
+				} else {
+					attributes.push(attribute);
+					attribute_map.set(attribute.name, attribute);
+					if (attribute.name === 'contenteditable') {
+						has_contenteditable_attr = true;
+					}
+				}
+				break;
+			}
+			case 'SpreadAttribute': {
+				has_spread = true;
+				break;
+			}
+			case 'BindDirective': {
+				if (is_content_editable_binding(attribute.name)) {
+					has_contenteditable_binding = true;
 				}
+				break;
+			}
+			case 'OnDirective': {
+				handlers.add(attribute.name);
+				break;
 			}
-		} else if (attribute.type === 'BindDirective' && is_content_editable_binding(attribute.name)) {
-			has_contenteditable_binding = true;
 		}
 	}
 
@@ -763,15 +141,18 @@ export function check_element(node, context) {
 			}
 		}
 
-		// aria-role
-		if (name === 'role') {
-			if (invisible_elements.includes(node.name)) {
-				// aria-unsupported-elements
-				w.a11y_misplaced_role(attribute, node.name);
-			}
+		switch (name) {
+			// aria-role
+			case 'role': {
+				if (invisible_elements.includes(node.name)) {
+					// aria-unsupported-elements
+					w.a11y_misplaced_role(attribute, node.name);
+				}
 
-			const value = get_static_value(attribute);
-			if (typeof value === 'string') {
+				const value = get_static_value(attribute);
+				if (typeof value !== 'string') {
+					break;
+				}
 				for (const c_r of value.split(regex_whitespaces)) {
 					const current_role = /** @type {ARIARoleDefinitionKey} current_role */ (c_r);
 
@@ -866,30 +247,35 @@ export function check_element(node, context) {
 						w.a11y_no_noninteractive_element_to_interactive_role(node, node.name, current_role);
 					}
 				}
+				break;
 			}
-		}
-
-		// no-access-key
-		if (name === 'accesskey') {
-			w.a11y_accesskey(attribute);
-		}
-
-		// no-autofocus
-		if (name === 'autofocus') {
-			w.a11y_autofocus(attribute);
-		}
-
-		// scope
-		if (name === 'scope' && !is_dynamic_element && node.name !== 'th') {
-			w.a11y_misplaced_scope(attribute);
-		}
-
-		// tabindex-no-positive
-		if (name === 'tabindex') {
-			const value = get_static_value(attribute);
-			// @ts-ignore todo is tabindex=true correct case?
-			if (!isNaN(value) && +value > 0) {
-				w.a11y_positive_tabindex(attribute);
+			// no-access-key
+			case 'accesskey': {
+				w.a11y_accesskey(attribute);
+				break;
+			}
+			// no-autofocus
+			case 'autofocus': {
+				if (node.name !== 'dialog' && !is_parent(context.path, ['dialog'])) {
+					w.a11y_autofocus(attribute);
+				}
+				break;
+			}
+			// scope
+			case 'scope': {
+				if (!is_dynamic_element && node.name !== 'th') {
+					w.a11y_misplaced_scope(attribute);
+				}
+				break;
+			}
+			// tabindex-no-positive
+			case 'tabindex': {
+				const value = get_static_value(attribute);
+				// @ts-ignore todo is tabindex=true correct case?
+				if (!isNaN(value) && +value > 0) {
+					w.a11y_positive_tabindex(attribute);
+				}
+				break;
 			}
 		}
 	}
@@ -987,174 +373,432 @@ export function check_element(node, context) {
 		}
 	}
 
-	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
-		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
+	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
+		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
+	}
+
+	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
+		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
+	}
+
+	// element-specific checks
+	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
+
+	switch (node.name) {
+		case 'a':
+		case 'button': {
+			const is_hidden =
+				get_static_value(attribute_map.get('aria-hidden')) === 'true' ||
+				get_static_value(attribute_map.get('inert')) !== null;
+
+			if (!has_spread && !is_hidden && !is_labelled && !has_content(node)) {
+				w.a11y_consider_explicit_label(node);
+			}
+			if (node.name === 'button') {
+				break;
+			}
+			const href = attribute_map.get('href') || attribute_map.get('xlink:href');
+			if (href) {
+				const href_value = get_static_text_value(href);
+				if (href_value !== null) {
+					if (href_value === '' || href_value === '#' || regex_js_prefix.test(href_value)) {
+						w.a11y_invalid_attribute(href, href_value, href.name);
+					}
+				}
+			} else if (!has_spread) {
+				const id_attribute = get_static_value(attribute_map.get('id'));
+				const name_attribute = get_static_value(attribute_map.get('name'));
+				const aria_disabled_attribute = get_static_value(attribute_map.get('aria-disabled'));
+				if (!id_attribute && !name_attribute && aria_disabled_attribute !== 'true') {
+					warn_missing_attribute(node, ['href']);
+				}
+			}
+			break;
+		}
+		case 'input': {
+			const type = attribute_map.get('type');
+			const type_value = get_static_text_value(type);
+			if (type_value === 'image' && !has_spread) {
+				const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
+				const has_attribute = required_attributes.some((name) => attribute_map.has(name));
+				if (!has_attribute) {
+					warn_missing_attribute(node, required_attributes, 'input type="image"');
+				}
+			}
+			// autocomplete-valid
+			const autocomplete = attribute_map.get('autocomplete');
+			if (type && autocomplete) {
+				const autocomplete_value = get_static_value(autocomplete);
+				if (!is_valid_autocomplete(autocomplete_value)) {
+					w.a11y_autocomplete_valid(
+						autocomplete,
+						/** @type {string} */ (autocomplete_value),
+						type_value ?? '...'
+					);
+				}
+			}
+			break;
+		}
+		case 'img': {
+			const alt_attribute = get_static_text_value(attribute_map.get('alt'));
+			const aria_hidden = get_static_value(attribute_map.get('aria-hidden'));
+			if (alt_attribute && !aria_hidden && !has_spread) {
+				if (regex_redundant_img_alt.test(alt_attribute)) {
+					w.a11y_img_redundant_alt(node);
+				}
+			}
+			break;
+		}
+		case 'label': {
+			/** @param {AST.TemplateNode} node */
+			const has_input_child = (node) => {
+				let has = false;
+				walk(
+					node,
+					{},
+					{
+						_(node, { next }) {
+							if (
+								node.type === 'SvelteElement' ||
+								node.type === 'SlotElement' ||
+								node.type === 'Component' ||
+								node.type === 'RenderTag' ||
+								(node.type === 'RegularElement' &&
+									(a11y_labelable.includes(node.name) || node.name === 'slot'))
+							) {
+								has = true;
+							} else {
+								next();
+							}
+						}
+					}
+				);
+				return has;
+			};
+			if (!has_spread && !attribute_map.has('for') && !has_input_child(node)) {
+				w.a11y_label_has_associated_control(node);
+			}
+			break;
+		}
+		case 'video': {
+			const aria_hidden_attribute = attribute_map.get('aria-hidden');
+			const aria_hidden_exist = aria_hidden_attribute && get_static_value(aria_hidden_attribute);
+			if (attribute_map.has('muted') || aria_hidden_exist === 'true' || has_spread) {
+				return;
+			}
+			let has_caption = false;
+			const track = /** @type {AST.RegularElement | undefined} */ (
+				node.fragment.nodes.find((i) => i.type === 'RegularElement' && i.name === 'track')
+			);
+			if (track) {
+				has_caption = track.attributes.some(
+					(a) =>
+						a.type === 'SpreadAttribute' ||
+						(a.type === 'Attribute' && a.name === 'kind' && get_static_value(a) === 'captions')
+				);
+			}
+			if (!has_caption) {
+				w.a11y_media_has_caption(node);
+			}
+			break;
+		}
+		case 'figcaption': {
+			if (!is_parent(context.path, ['figure'])) {
+				w.a11y_figcaption_parent(node);
+			}
+			break;
+		}
+		case 'figure': {
+			const children = node.fragment.nodes.filter((node) => {
+				if (node.type === 'Comment') return false;
+				if (node.type === 'Text') return regex_not_whitespace.test(node.data);
+				return true;
+			});
+			const index = children.findIndex(
+				(child) => child.type === 'RegularElement' && child.name === 'figcaption'
+			);
+			if (index !== -1 && index !== 0 && index !== children.length - 1) {
+				w.a11y_figcaption_index(children[index]);
+			}
+			break;
+		}
+	}
+
+	if (!has_spread && node.name !== 'a') {
+		const required_attributes = a11y_required_attributes[node.name];
+		if (required_attributes) {
+			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
+			if (!has_attribute) {
+				warn_missing_attribute(node, required_attributes);
+			}
+		}
+	}
+
+	if (a11y_distracting_elements.includes(node.name)) {
+		// no-distracting-elements
+		w.a11y_distracting_elements(node, node.name);
+	}
+
+	// Check content
+	if (
+		!has_spread &&
+		!is_labelled &&
+		!has_contenteditable_binding &&
+		a11y_required_content.includes(node.name) &&
+		!has_content(node)
+	) {
+		w.a11y_missing_content(node, node.name);
+	}
+}
+
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_presentation_role(role) {
+	return presentation_roles.includes(role);
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function is_hidden_from_screen_reader(tag_name, attribute_map) {
+	if (tag_name === 'input') {
+		const type = get_static_value(attribute_map.get('type'));
+		if (type === 'hidden') {
+			return true;
+		}
+	}
+
+	const aria_hidden = attribute_map.get('aria-hidden');
+	if (!aria_hidden) return false;
+	const aria_hidden_value = get_static_value(aria_hidden);
+	if (aria_hidden_value === null) return true;
+	return aria_hidden_value === true || aria_hidden_value === 'true';
+}
+
+/**
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function has_disabled_attribute(attribute_map) {
+	const disabled_attr_value = get_static_value(attribute_map.get('disabled'));
+	if (disabled_attr_value) {
+		return true;
+	}
+
+	const aria_disabled_attr = attribute_map.get('aria-disabled');
+	if (aria_disabled_attr) {
+		const aria_disabled_attr_value = get_static_value(aria_disabled_attr);
+		if (aria_disabled_attr_value === 'true') {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {ElementInteractivity[keyof ElementInteractivity]}
+ */
+function element_interactivity(tag_name, attribute_map) {
+	if (
+		interactive_element_role_schemas.some((schema) => match_schema(schema, tag_name, attribute_map))
+	) {
+		return ElementInteractivity.Interactive;
+	}
+	if (
+		tag_name !== 'header' &&
+		non_interactive_element_role_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.NonInteractive;
+	}
+	if (
+		interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.Interactive;
+	}
+	if (
+		non_interactive_element_ax_object_schemas.some((schema) =>
+			match_schema(schema, tag_name, attribute_map)
+		)
+	) {
+		return ElementInteractivity.NonInteractive;
+	}
+	return ElementInteractivity.Static;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_interactive_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Interactive;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_non_interactive_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.NonInteractive;
+}
+
+/**
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ * @returns {boolean}
+ */
+function is_static_element(tag_name, attribute_map) {
+	return element_interactivity(tag_name, attribute_map) === ElementInteractivity.Static;
+}
+
+/**
+ * @param {ARIARoleDefinitionKey} role
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function is_semantic_role_element(role, tag_name, attribute_map) {
+	for (const [schema, ax_object] of elementAXObjects.entries()) {
+		if (
+			schema.name === tag_name &&
+			(!schema.attributes ||
+				schema.attributes.every(
+					/** @param {any} attr */
+					(attr) =>
+						attribute_map.has(attr.name) &&
+						get_static_value(attribute_map.get(attr.name)) === attr.value
+				))
+		) {
+			for (const name of ax_object) {
+				const roles = AXObjectRoles.get(name);
+				if (roles) {
+					for (const { name } of roles) {
+						if (name === role) {
+							return true;
+						}
+					}
+				}
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {null | true | string} autocomplete
+ */
+function is_valid_autocomplete(autocomplete) {
+	if (autocomplete === true) {
+		return false;
+	} else if (!autocomplete) {
+		return true; // dynamic value
 	}
-
-	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
-		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
+	const tokens = autocomplete.trim().toLowerCase().split(regex_whitespaces);
+	if (typeof tokens[0] === 'string' && tokens[0].startsWith('section-')) {
+		tokens.shift();
 	}
-
-	// element-specific checks
-	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
-
-	if (node.name === 'a' || node.name === 'button') {
-		const is_hidden = get_static_value(attribute_map.get('aria-hidden')) === 'true';
-
-		if (!has_spread && !is_hidden && !is_labelled && !has_content(node)) {
-			w.a11y_consider_explicit_label(node);
-		}
+	if (address_type_tokens.includes(tokens[0])) {
+		tokens.shift();
 	}
-
-	if (node.name === 'a') {
-		const href = attribute_map.get('href') || attribute_map.get('xlink:href');
-		if (href) {
-			const href_value = get_static_text_value(href);
-			if (href_value !== null) {
-				if (href_value === '' || href_value === '#' || /^\W*javascript:/i.test(href_value)) {
-					w.a11y_invalid_attribute(href, href_value, href.name);
-				}
-			}
-		} else if (!has_spread) {
-			const id_attribute = get_static_value(attribute_map.get('id'));
-			const name_attribute = get_static_value(attribute_map.get('name'));
-			const aria_disabled_attribute = get_static_value(attribute_map.get('aria-disabled'));
-			if (!id_attribute && !name_attribute && aria_disabled_attribute !== 'true') {
-				warn_missing_attribute(node, ['href']);
-			}
+	if (autofill_field_name_tokens.includes(tokens[0])) {
+		tokens.shift();
+	} else {
+		if (contact_type_tokens.includes(tokens[0])) {
+			tokens.shift();
 		}
-	} else if (!has_spread) {
-		const required_attributes = a11y_required_attributes[node.name];
-		if (required_attributes) {
-			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
-			if (!has_attribute) {
-				warn_missing_attribute(node, required_attributes);
-			}
+		if (autofill_contact_field_name_tokens.includes(tokens[0])) {
+			tokens.shift();
+		} else {
+			return false;
 		}
 	}
-
-	if (node.name === 'input') {
-		const type = attribute_map.get('type');
-		const type_value = get_static_text_value(type);
-		if (type_value === 'image' && !has_spread) {
-			const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
-			const has_attribute = required_attributes.some((name) => attribute_map.has(name));
-			if (!has_attribute) {
-				warn_missing_attribute(node, required_attributes, 'input type="image"');
-			}
-		}
-		// autocomplete-valid
-		const autocomplete = attribute_map.get('autocomplete');
-		if (type && autocomplete) {
-			const autocomplete_value = get_static_value(autocomplete);
-			if (!is_valid_autocomplete(autocomplete_value)) {
-				w.a11y_autocomplete_valid(
-					autocomplete,
-					/** @type {string} */ (autocomplete_value),
-					type_value ?? '...'
-				);
-			}
-		}
+	if (tokens[0] === 'webauthn') {
+		tokens.shift();
 	}
+	return tokens.length === 0;
+}
 
-	if (node.name === 'img') {
-		const alt_attribute = get_static_text_value(attribute_map.get('alt'));
-		const aria_hidden = get_static_value(attribute_map.get('aria-hidden'));
-		if (alt_attribute && !aria_hidden && !has_spread) {
-			if (/\b(image|picture|photo)\b/i.test(alt_attribute)) {
-				w.a11y_img_redundant_alt(node);
-			}
-		}
+/** @param {Map<string, AST.Attribute>} attribute_map */
+function input_implicit_role(attribute_map) {
+	const type_attribute = attribute_map.get('type');
+	if (!type_attribute) return;
+	const type = get_static_text_value(type_attribute);
+	if (!type) return;
+	const list_attribute_exists = attribute_map.has('list');
+	if (list_attribute_exists && combobox_if_list.includes(type)) {
+		return 'combobox';
 	}
+	return input_type_to_implicit_role.get(type);
+}
 
-	if (node.name === 'label') {
-		/** @param {AST.TemplateNode} node */
-		const has_input_child = (node) => {
-			let has = false;
-			walk(
-				node,
-				{},
-				{
-					_(node, { next }) {
-						if (
-							node.type === 'SvelteElement' ||
-							node.type === 'SlotElement' ||
-							node.type === 'Component' ||
-							node.type === 'RenderTag' ||
-							(node.type === 'RegularElement' &&
-								(a11y_labelable.includes(node.name) || node.name === 'slot'))
-						) {
-							has = true;
-						} else {
-							next();
-						}
-					}
-				}
-			);
-			return has;
-		};
-		if (!has_spread && !attribute_map.has('for') && !has_input_child(node)) {
-			w.a11y_label_has_associated_control(node);
-		}
-	}
+/** @param {Map<string, AST.Attribute>} attribute_map */
+function menuitem_implicit_role(attribute_map) {
+	const type_attribute = attribute_map.get('type');
+	if (!type_attribute) return;
+	const type = get_static_text_value(type_attribute);
+	if (!type) return;
+	return menuitem_type_to_implicit_role.get(type);
+}
 
-	if (node.name === 'video') {
-		const aria_hidden_attribute = attribute_map.get('aria-hidden');
-		const aria_hidden_exist = aria_hidden_attribute && get_static_value(aria_hidden_attribute);
-		if (attribute_map.has('muted') || aria_hidden_exist === 'true' || has_spread) {
-			return;
-		}
-		let has_caption = false;
-		const track = /** @type {AST.RegularElement | undefined} */ (
-			node.fragment.nodes.find((i) => i.type === 'RegularElement' && i.name === 'track')
-		);
-		if (track) {
-			has_caption = track.attributes.some(
-				(a) =>
-					a.type === 'SpreadAttribute' ||
-					(a.type === 'Attribute' && a.name === 'kind' && get_static_value(a) === 'captions')
-			);
-		}
-		if (!has_caption) {
-			w.a11y_media_has_caption(node);
-		}
+/**
+ * @param {string} name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function get_implicit_role(name, attribute_map) {
+	if (name === 'menuitem') {
+		return menuitem_implicit_role(attribute_map);
+	} else if (name === 'input') {
+		return input_implicit_role(attribute_map);
+	} else {
+		return a11y_implicit_semantics.get(name);
 	}
+}
 
-	if (node.name === 'figcaption') {
-		if (!is_parent(context.path, ['figure'])) {
-			w.a11y_figcaption_parent(node);
-		}
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_non_interactive_roles(role) {
+	return non_interactive_roles.includes(role);
+}
 
-	if (node.name === 'figure') {
-		const children = node.fragment.nodes.filter((node) => {
-			if (node.type === 'Comment') return false;
-			if (node.type === 'Text') return regex_not_whitespace.test(node.data);
-			return true;
-		});
-		const index = children.findIndex(
-			(child) => child.type === 'RegularElement' && child.name === 'figcaption'
-		);
-		if (index !== -1 && index !== 0 && index !== children.length - 1) {
-			w.a11y_figcaption_index(children[index]);
-		}
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_interactive_roles(role) {
+	return interactive_roles.includes(role);
+}
 
-	if (a11y_distracting_elements.includes(node.name)) {
-		// no-distracting-elements
-		w.a11y_distracting_elements(node, node.name);
-	}
+/**
+ * @param {ARIARoleDefinitionKey} role
+ */
+function is_abstract_role(role) {
+	return abstract_roles.includes(role);
+}
 
-	// Check content
-	if (
-		!has_spread &&
-		!is_labelled &&
-		!has_contenteditable_binding &&
-		a11y_required_content.includes(node.name) &&
-		!has_content(node)
-	) {
-		w.a11y_missing_content(node, node.name);
-	}
+/**
+ * @param {AST.Attribute | undefined} attribute
+ */
+function get_static_text_value(attribute) {
+	const value = get_static_value(attribute);
+	if (value === true) return null;
+	return value;
+}
+
+/**
+ * @param {AST.Attribute | undefined} attribute
+ */
+function get_static_value(attribute) {
+	if (!attribute) return null;
+	if (attribute.value === true) return true;
+	if (is_text_attribute(attribute)) return attribute.value[0].data;
+	return null;
 }
 
 /**
@@ -1186,3 +830,133 @@ function has_content(element) {
 		return true;
 	}
 }
+
+/**
+ * @param {ARIARoleRelationConcept} schema
+ * @param {string} tag_name
+ * @param {Map<string, AST.Attribute>} attribute_map
+ */
+function match_schema(schema, tag_name, attribute_map) {
+	if (schema.name !== tag_name) return false;
+	if (!schema.attributes) return true;
+	return schema.attributes.every((schema_attribute) => {
+		const attribute = attribute_map.get(schema_attribute.name);
+		if (!attribute) return false;
+		if (schema_attribute.value && schema_attribute.value !== get_static_text_value(attribute)) {
+			return false;
+		}
+		return true;
+	});
+}
+
+/**
+ * @param {AST.SvelteNode[]} path
+ * @param {string[]} elements
+ */
+function is_parent(path, elements) {
+	let i = path.length;
+	while (i--) {
+		const parent = path[i];
+		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
+		if (parent.type === 'RegularElement') {
+			return elements.includes(parent.name);
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {AST.Attribute} attribute
+ * @param {ARIAProperty} name
+ * @param {ARIAPropertyDefinition} schema
+ * @param {string | true | null} value
+ */
+function validate_aria_attribute_value(attribute, name, schema, value) {
+	const type = schema.type;
+
+	if (value === null) return;
+	if (value === true) value = '';
+
+	switch (type) {
+		case 'id':
+		case 'string': {
+			if (value === '') {
+				w.a11y_incorrect_aria_attribute_type(attribute, name, 'non-empty string');
+			}
+			break;
+		}
+		case 'number': {
+			if (value === '' || isNaN(+value)) {
+				w.a11y_incorrect_aria_attribute_type(attribute, name, 'number');
+			}
+			break;
+		}
+		case 'boolean': {
+			if (value !== 'true' && value !== 'false') {
+				w.a11y_incorrect_aria_attribute_type_boolean(attribute, name);
+			}
+			break;
+		}
+		case 'idlist': {
+			if (value === '') {
+				w.a11y_incorrect_aria_attribute_type_idlist(attribute, name);
+			}
+			break;
+		}
+		case 'integer': {
+			if (value === '' || !Number.isInteger(+value)) {
+				w.a11y_incorrect_aria_attribute_type_integer(attribute, name);
+			}
+			break;
+		}
+		case 'token': {
+			const values = (schema.values ?? []).map((value) => value.toString());
+			if (!values.includes(value.toLowerCase())) {
+				w.a11y_incorrect_aria_attribute_type_token(
+					attribute,
+					name,
+					list(values.map((v) => `"${v}"`))
+				);
+			}
+			break;
+		}
+		case 'tokenlist': {
+			const values = (schema.values ?? []).map((value) => value.toString());
+			if (
+				value
+					.toLowerCase()
+					.split(regex_whitespaces)
+					.some((value) => !values.includes(value))
+			) {
+				w.a11y_incorrect_aria_attribute_type_tokenlist(
+					attribute,
+					name,
+					list(values.map((v) => `"${v}"`))
+				);
+			}
+			break;
+		}
+		case 'tristate': {
+			if (value !== 'true' && value !== 'false' && value !== 'mixed') {
+				w.a11y_incorrect_aria_attribute_type_tristate(attribute, name);
+			}
+			break;
+		}
+	}
+}
+
+/**
+ * @param {AST.RegularElement |AST.SvelteElement} node
+ * @param {string[]} attributes
+ * @param {string} name
+ */
+function warn_missing_attribute(node, attributes, name = node.name) {
+	const article =
+		regex_starts_with_vowel.test(attributes[0]) || attributes[0] === 'href' ? 'an' : 'a';
+	const sequence =
+		attributes.length > 1
+			? attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}`
+			: attributes[0];
+
+	w.a11y_missing_attribute(node, name, article, sequence);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index a9c0651e0f..124438a9da 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -12,6 +12,7 @@ import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { BinaryExpression } from './visitors/BinaryExpression.js';
 import { BindDirective } from './visitors/BindDirective.js';
 import { BlockStatement } from './visitors/BlockStatement.js';
@@ -88,6 +89,7 @@ const visitors = {
 	AssignmentExpression,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BinaryExpression,
 	BindDirective,
 	BlockStatement,
@@ -162,6 +164,7 @@ export function client_component(analysis, options) {
 		state_fields: new Map(),
 		transform: {},
 		in_constructor: false,
+		in_derived: false,
 		instance_level_snippets: [],
 		module_level_snippets: [],
 
@@ -206,7 +209,8 @@ export function client_component(analysis, options) {
 
 	/** @type {ESTree.Statement[]} */
 	const store_setup = [];
-
+	/** @type {ESTree.Statement} */
+	let store_init = b.empty;
 	/** @type {ESTree.VariableDeclaration[]} */
 	const legacy_reactive_declarations = [];
 
@@ -224,8 +228,9 @@ export function client_component(analysis, options) {
 		if (binding.kind === 'store_sub') {
 			if (store_setup.length === 0) {
 				needs_store_cleanup = true;
-				store_setup.push(
-					b.const(b.array_pattern([b.id('$$stores'), b.id('$$cleanup')]), b.call('$.setup_stores'))
+				store_init = b.const(
+					b.array_pattern([b.id('$$stores'), b.id('$$cleanup')]),
+					b.call('$.setup_stores')
 				);
 			}
 
@@ -350,7 +355,7 @@ export function client_component(analysis, options) {
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];
 	if (dev) push_args.push(b.id(analysis.name));
 
-	const component_block = b.block([
+	let component_block = b.block([
 		...store_setup,
 		...legacy_reactive_declarations,
 		...group_binding_declarations,
@@ -358,10 +363,64 @@ export function client_component(analysis, options) {
 		.../** @type {ESTree.Statement[]} */ (instance.body),
 		analysis.runes || !analysis.needs_context
 			? b.empty
-			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)),
-		.../** @type {ESTree.Statement[]} */ (template.body)
+			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined))
 	]);
 
+	if (analysis.needs_mutation_validation) {
+		component_block.body.unshift(
+			b.var('$$ownership_validator', b.call('$.create_ownership_validator', b.id('$$props')))
+		);
+	}
+
+	const should_inject_context =
+		dev ||
+		analysis.needs_context ||
+		analysis.reactive_statements.size > 0 ||
+		component_returned_object.length > 0;
+
+	let should_inject_props =
+		should_inject_context ||
+		analysis.needs_props ||
+		analysis.uses_props ||
+		analysis.uses_rest_props ||
+		analysis.uses_slots ||
+		analysis.slot_names.size > 0;
+
+	if (analysis.instance.has_await) {
+		const params = [b.id('$$anchor')];
+		if (should_inject_props) {
+			params.push(b.id('$$props'));
+		}
+		if (store_setup.length > 0) {
+			params.push(b.id('$$stores'));
+		}
+		const body = b.function_declaration(
+			b.id('$$body'),
+			params,
+			b.block([
+				b.var('$$unsuspend', b.call('$.suspend')),
+				...component_block.body,
+				b.if(b.call('$.aborted'), b.return()),
+				.../** @type {ESTree.Statement[]} */ (template.body),
+				b.stmt(b.call('$$unsuspend'))
+			]),
+			true
+		);
+
+		state.hoisted.push(body);
+
+		component_block = b.block([
+			b.var('fragment', b.call('$.comment')),
+			b.var('node', b.call('$.first_child', b.id('fragment'))),
+			store_init,
+			b.stmt(b.call(body.id, b.id('node'), ...params.slice(1))),
+			b.stmt(b.call('$.append', b.id('$$anchor'), b.id('fragment')))
+		]);
+	} else {
+		component_block.body.unshift(store_init);
+		component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
+	}
+
 	// trick esrap into including comments
 	component_block.loc = instance.loc;
 
@@ -392,18 +451,6 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (analysis.needs_mutation_validation) {
-		component_block.body.unshift(
-			b.var('$$ownership_validator', b.call('$.create_ownership_validator', b.id('$$props')))
-		);
-	}
-
-	const should_inject_context =
-		dev ||
-		analysis.needs_context ||
-		analysis.reactive_statements.size > 0 ||
-		component_returned_object.length > 0;
-
 	// we want the cleanup function for the stores to run as the very last thing
 	// so that it can effectively clean up the store subscription even after the user effects runs
 	if (should_inject_context) {
@@ -469,14 +516,6 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.const('$$slots', b.call('$.sanitize_slots', b.id('$$props'))));
 	}
 
-	let should_inject_props =
-		should_inject_context ||
-		analysis.needs_props ||
-		analysis.uses_props ||
-		analysis.uses_rest_props ||
-		analysis.uses_slots ||
-		analysis.slot_names.size > 0;
-
 	// Merge hoisted statements into module body.
 	// Ensure imports are on top, with the order preserved, then module body, then hoisted statements
 	/** @type {ESTree.ImportDeclaration[]} */
@@ -537,6 +576,10 @@ export function client_component(analysis, options) {
 		);
 	}
 
+	if (options.experimental.async) {
+		body.unshift(b.imports([], 'svelte/internal/flags/async'));
+	}
+
 	if (!analysis.runes) {
 		body.unshift(b.imports([], 'svelte/internal/flags/legacy'));
 	}
@@ -670,7 +713,9 @@ export function client_module(analysis, options) {
 		scopes: analysis.module.scopes,
 		state_fields: new Map(),
 		transform: {},
-		in_constructor: false
+		in_constructor: false,
+		in_derived: false,
+		is_instance: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index cf5c942268..e691be169b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -21,6 +21,14 @@ export interface ClientTransformState extends TransformState {
 	 */
 	readonly in_constructor: boolean;
 
+	/**
+	 * True if we're directly inside a `$derived(...)` expression (but not `$derived.by(...)`)
+	 */
+	readonly in_derived: boolean;
+
+	/** `true` if we're transforming the contents of `<script>` */
+	readonly is_instance: boolean;
+
 	readonly transform: Record<
 		string,
 		{
@@ -41,7 +49,6 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly options: ValidatedCompileOptions;
 	readonly hoisted: Array<Statement | ModuleDeclaration>;
 	readonly events: Set<string>;
-	readonly is_instance: boolean;
 	readonly store_to_invalidate?: string;
 
 	/** Stuff that happens before the render effect(s) */
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..803d317ad4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
@@ -0,0 +1,126 @@
+/** @import { AwaitExpression, Expression, Property, SpreadElement } from 'estree' */
+/** @import { Context } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	const argument = /** @type {Expression} */ (context.visit(node.argument));
+
+	const tla = context.state.is_instance && context.state.scope.function_depth === 1;
+
+	// preserve context for
+	//   a) top-level await and
+	//   b) awaits that precede other expressions in template or `$derived(...)`
+	if (tla || (is_reactive_expression(context) && !is_last_evaluated_expression(context, node))) {
+		return b.call(b.await(b.call('$.save', argument)));
+	}
+
+	// in dev, note which values are read inside a reactive expression,
+	// but don't track them
+	else if (dev && !is_ignored(node, 'await_reactivity_loss')) {
+		return b.call(b.await(b.call('$.track_reactivity_loss', argument)));
+	}
+
+	return argument === node.argument ? node : { ...node, argument };
+}
+
+/**
+ * @param {Context} context
+ */
+function is_reactive_expression(context) {
+	if (context.state.in_derived) {
+		return true;
+	}
+
+	let i = context.path.length;
+
+	while (i--) {
+		const parent = context.path[i];
+
+		if (
+			parent.type === 'ArrowFunctionExpression' ||
+			parent.type === 'FunctionExpression' ||
+			parent.type === 'FunctionDeclaration'
+		) {
+			return false;
+		}
+
+		// @ts-expect-error we could probably use a neater/more robust mechanism
+		if (parent.metadata) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {Context} context
+ * @param {Expression | SpreadElement | Property} node
+ */
+function is_last_evaluated_expression(context, node) {
+	let i = context.path.length;
+
+	while (i--) {
+		const parent = /** @type {Expression | Property | SpreadElement} */ (context.path[i]);
+
+		// @ts-expect-error we could probably use a neater/more robust mechanism
+		if (parent.metadata) {
+			return true;
+		}
+
+		switch (parent.type) {
+			case 'ArrayExpression':
+				if (node !== parent.elements.at(-1)) return false;
+				break;
+
+			case 'AssignmentExpression':
+			case 'BinaryExpression':
+			case 'LogicalExpression':
+				if (node === parent.left) return false;
+				break;
+
+			case 'CallExpression':
+			case 'NewExpression':
+				if (node !== parent.arguments.at(-1)) return false;
+				break;
+
+			case 'ConditionalExpression':
+				if (node === parent.test) return false;
+				break;
+
+			case 'MemberExpression':
+				if (parent.computed && node === parent.object) return false;
+				break;
+
+			case 'ObjectExpression':
+				if (node !== parent.properties.at(-1)) return false;
+				break;
+
+			case 'Property':
+				if (node === parent.key) return false;
+				break;
+
+			case 'SequenceExpression':
+				if (node !== parent.expressions.at(-1)) return false;
+				break;
+
+			case 'TaggedTemplateExpression':
+				if (node !== parent.quasi.expressions.at(-1)) return false;
+				break;
+
+			case 'TemplateLiteral':
+				if (node !== parent.expressions.at(-1)) return false;
+				break;
+
+			default:
+				return false;
+		}
+
+		node = parent;
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
index 665be9e23b..3e2f1414e6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -44,10 +44,11 @@ export function CallExpression(node, context) {
 
 		case '$derived':
 		case '$derived.by': {
-			let fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
-			if (rune === '$derived') fn = b.thunk(fn);
+			let fn = /** @type {Expression} */ (
+				context.visit(node.arguments[0], { ...context.state, in_derived: rune === '$derived' })
+			);
 
-			return b.call('$.derived', fn);
+			return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
 		}
 
 		case '$state.snapshot':
@@ -63,6 +64,9 @@ export function CallExpression(node, context) {
 				.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
 			);
 
+		case '$effect.pending':
+			return b.call('$.pending');
+
 		case '$inspect':
 		case '$inspect().with':
 			return transform_inspect_rune(node, context);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
index c1be1e3220..34acdd6bb9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -17,7 +17,13 @@ export function ConstTag(node, context) {
 	// TODO we can almost certainly share some code with $derived(...)
 	if (declaration.id.type === 'Identifier') {
 		const init = build_expression(context, declaration.init, node.metadata.expression);
-		context.state.init.push(b.const(declaration.id, create_derived(context.state, b.thunk(init))));
+		let expression = create_derived(context.state, b.thunk(init));
+
+		if (dev) {
+			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
+		}
+
+		context.state.init.push(b.const(declaration.id, expression));
 
 		context.state.transform[declaration.id.name] = { read: get_value };
 
@@ -55,7 +61,13 @@ export function ConstTag(node, context) {
 			])
 		);
 
-		context.state.init.push(b.const(tmp, create_derived(context.state, fn)));
+		let expression = create_derived(context.state, fn);
+
+		if (dev) {
+			expression = b.call('$.tag', expression, b.literal('[@const]'));
+		}
+
+		context.state.init.push(b.const(tmp, expression));
 
 		// we need to eagerly evaluate the expression in order to hit any
 		// 'Cannot access x before initialization' errors
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 353927b865..225a4f617c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -312,11 +312,9 @@ export function EachBlock(node, context) {
 		declarations.push(b.let(node.index, index));
 	}
 
-	if (dev && node.metadata.keyed) {
-		context.state.init.push(
-			b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
-		);
-	}
+	const { has_await } = node.metadata.expression;
+	const get_collection = b.thunk(collection, has_await);
+	const thunk = has_await ? b.thunk(b.call('$.get', b.id('$$collection'))) : get_collection;
 
 	const render_args = [b.id('$$anchor'), item];
 	if (uses_index || collection_id) render_args.push(index);
@@ -326,7 +324,7 @@ export function EachBlock(node, context) {
 	const args = [
 		context.state.node,
 		b.literal(flags),
-		b.thunk(collection),
+		thunk,
 		key_function,
 		b.arrow(render_args, b.block(declarations.concat(block.body)))
 	];
@@ -337,7 +335,26 @@ export function EachBlock(node, context) {
 		);
 	}
 
-	context.state.init.push(add_svelte_meta(b.call('$.each', ...args), node, 'each'));
+	const statements = [add_svelte_meta(b.call('$.each', ...args), node, 'each')];
+
+	if (dev && node.metadata.keyed) {
+		statements.unshift(b.stmt(b.call('$.validate_each_keys', thunk, key_function)));
+	}
+
+	if (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([get_collection]),
+					b.arrow([context.state.node, b.id('$$collection')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(...statements);
+	}
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 7cd2bd90ed..0b10c02ffb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -47,9 +47,7 @@ export function Fragment(node, context) {
 	const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
 	const is_single_child_not_needing_template =
 		trimmed.length === 1 &&
-		(trimmed[0].type === 'SvelteFragment' ||
-			trimmed[0].type === 'TitleElement' ||
-			(trimmed[0].type === 'IfBlock' && trimmed[0].elseif));
+		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
 
 	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
index 5dc8fa5cf9..cd299a710b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
@@ -8,7 +8,7 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function FunctionDeclaration(node, context) {
-	const state = { ...context.state, in_constructor: false };
+	const state = { ...context.state, in_constructor: false, in_derived: false };
 
 	if (node.metadata?.hoisted === true) {
 		const params = build_hoisted_params(node, context);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
index fb59967996..64e84ef2ff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
@@ -11,7 +11,9 @@ import { build_expression } from './shared/utils.js';
 export function HtmlTag(node, context) {
 	context.state.template.push_comment();
 
+	const { has_await } = node.metadata.expression;
 	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const html = has_await ? b.call('$.get', b.id('$$html')) : expression;
 
 	const is_svg = context.state.metadata.namespace === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
@@ -20,7 +22,7 @@ export function HtmlTag(node, context) {
 		b.call(
 			'$.html',
 			context.state.node,
-			b.thunk(expression),
+			b.thunk(html),
 			is_svg && b.true,
 			is_mathml && b.true,
 			is_ignored(node, 'hydration_html_changed') && b.true
@@ -28,5 +30,18 @@ export function HtmlTag(node, context) {
 	);
 
 	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
-	context.state.init.push(statement);
+	if (node.metadata.expression.has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$html')], b.block([statement]))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
index cfd2bb7b09..3dd36b180b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
@@ -13,37 +13,32 @@ export function IfBlock(node, context) {
 	const statements = [];
 
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	const consequent_id = context.state.scope.generate('consequent');
+	const consequent_id = b.id(context.state.scope.generate('consequent'));
 
-	statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent)));
+	statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
 
 	let alternate_id;
 
 	if (node.alternate) {
-		alternate_id = context.state.scope.generate('alternate');
 		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
-		const nodes = node.alternate.nodes;
-
-		let alternate_args = [b.id('$$anchor')];
-		if (nodes.length === 1 && nodes[0].type === 'IfBlock' && nodes[0].elseif) {
-			alternate_args.push(b.id('$$elseif'));
-		}
-
-		statements.push(b.var(b.id(alternate_id), b.arrow(alternate_args, alternate)));
+		alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
 	}
 
-	const test = build_expression(context, node.test, node.metadata.expression);
+	const { has_await } = node.metadata.expression;
+	const expression = build_expression(context, node.test, node.metadata.expression);
+	const test = has_await ? b.call('$.get', b.id('$$condition')) : expression;
 
 	/** @type {Expression[]} */
 	const args = [
-		node.elseif ? b.id('$$anchor') : context.state.node,
+		context.state.node,
 		b.arrow(
 			[b.id('$$render')],
 			b.block([
 				b.if(
 					test,
-					b.stmt(b.call(b.id('$$render'), b.id(consequent_id))),
-					alternate_id ? b.stmt(b.call(b.id('$$render'), b.id(alternate_id), b.false)) : undefined
+					b.stmt(b.call('$$render', consequent_id)),
+					alternate_id && b.stmt(b.call('$$render', alternate_id, b.literal(false)))
 				)
 			])
 		)
@@ -71,10 +66,23 @@ export function IfBlock(node, context) {
 		// ...even though they're logically equivalent. In the first case, the
 		// transition will only play when `y` changes, but in the second it
 		// should play when `x` or `y` change — both are considered 'local'
-		args.push(b.id('$$elseif'));
+		args.push(b.true);
 	}
 
 	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
 
-	context.state.init.push(b.block(statements));
+	if (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$condition')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(b.block(statements));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
index 3add1fbe93..52850090e3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
@@ -11,14 +11,28 @@ import { build_expression, add_svelte_meta } from './shared/utils.js';
 export function KeyBlock(node, context) {
 	context.state.template.push_comment();
 
-	const key = build_expression(context, node.expression, node.metadata.expression);
+	const { has_await } = node.metadata.expression;
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression);
 	const body = /** @type {Expression} */ (context.visit(node.fragment));
 
-	context.state.init.push(
-		add_svelte_meta(
-			b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)),
-			node,
-			'key'
-		)
+	let statement = add_svelte_meta(
+		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
+		node,
+		'key'
 	);
+
+	if (has_await) {
+		statement = b.stmt(
+			b.call(
+				'$.async',
+				context.state.node,
+				b.array([b.thunk(expression, true)]),
+				b.arrow([context.state.node, b.id('$$key')], b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index eed2a75506..4296aa959e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -253,7 +253,10 @@ export function RegularElement(node, context) {
 				const { value, has_state } = build_attribute_value(
 					attribute.value,
 					context,
-					(value, metadata) => (metadata.has_call ? context.state.memoizer.add(value) : value)
+					(value, metadata) =>
+						metadata.has_call || metadata.has_await
+							? context.state.memoizer.add(value, metadata.has_await)
+							: value
 				);
 
 				const update = build_element_attribute_update(node, node_id, name, value, attributes);
@@ -319,7 +322,11 @@ export function RegularElement(node, context) {
 	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
 	const use_text_content =
 		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
+		trimmed.every(
+			(node) =>
+				node.type === 'Text' ||
+				(!node.metadata.expression.has_state && !node.metadata.expression.has_await)
+		) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
@@ -465,16 +472,18 @@ export function build_class_directives_object(
 ) {
 	let properties = [];
 	let has_call_or_state = false;
+	let has_await = false;
 
 	for (const d of class_directives) {
 		const expression = /** @type Expression */ (context.visit(d.expression));
 		properties.push(b.init(d.name, expression));
 		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
+		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = b.object(properties);
 
-	return has_call_or_state ? memoizer.add(directives) : directives;
+	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
 }
 
 /**
@@ -492,6 +501,7 @@ export function build_style_directives_object(
 	const important = b.object([]);
 
 	let has_call_or_state = false;
+	let has_await = false;
 
 	for (const d of style_directives) {
 		const expression =
@@ -503,11 +513,12 @@ export function build_style_directives_object(
 		object.properties.push(b.init(d.name, expression));
 
 		has_call_or_state ||= d.metadata.expression.has_call || d.metadata.expression.has_state;
+		has_await ||= d.metadata.expression.has_await;
 	}
 
 	const directives = important.properties.length ? b.array([normal, important]) : normal;
 
-	return has_call_or_state ? memoizer.add(directives) : directives;
+	return has_call_or_state || has_await ? memoizer.add(directives, has_await) : directives;
 }
 
 /**
@@ -629,7 +640,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
 
 	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call ? state.memoizer.add(value) : value
+		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
 	);
 
 	const evaluated = context.state.scope.evaluate(value);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
index 7f1a4ae7ba..b7a6e65557 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
@@ -1,9 +1,9 @@
-/** @import { Expression } from 'estree' */
+/** @import { Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { add_svelte_meta, build_expression } from './shared/utils.js';
+import { add_svelte_meta, build_expression, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -12,32 +12,34 @@ import { add_svelte_meta, build_expression } from './shared/utils.js';
 export function RenderTag(node, context) {
 	context.state.template.push_comment();
 
-	const expression = unwrap_optional(node.expression);
-
-	const callee = expression.callee;
-	const raw_args = expression.arguments;
+	const call = unwrap_optional(node.expression);
 
 	/** @type {Expression[]} */
 	let args = [];
-	for (let i = 0; i < raw_args.length; i++) {
-		let thunk = b.thunk(
-			build_expression(context, /** @type {Expression} */ (raw_args[i]), node.metadata.arguments[i])
-		);
 
-		const { has_call } = node.metadata.arguments[i];
+	const memoizer = new Memoizer();
+
+	for (let i = 0; i < call.arguments.length; i++) {
+		const arg = /** @type {Expression} */ (call.arguments[i]);
+		const metadata = node.metadata.arguments[i];
 
-		if (has_call) {
-			const id = b.id(context.state.scope.generate('render_arg'));
-			context.state.init.push(b.var(id, b.call('$.derived_safe_equal', thunk)));
-			args.push(b.thunk(b.call('$.get', id)));
-		} else {
-			args.push(thunk);
+		let expression = build_expression(context, arg, metadata);
+
+		if (metadata.has_await || metadata.has_call) {
+			expression = b.call('$.get', memoizer.add(expression, metadata.has_await));
 		}
+
+		args.push(b.thunk(expression));
 	}
 
+	memoizer.apply();
+
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
 	let snippet_function = build_expression(
 		context,
-		/** @type {Expression} */ (callee),
+		/** @type {Expression} */ (call.callee),
 		node.metadata.expression
 	);
 
@@ -47,7 +49,7 @@ export function RenderTag(node, context) {
 			snippet_function = b.logical('??', snippet_function, b.id('$.noop'));
 		}
 
-		context.state.init.push(
+		statements.push(
 			add_svelte_meta(
 				b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args),
 				node,
@@ -55,7 +57,7 @@ export function RenderTag(node, context) {
 			)
 		);
 	} else {
-		context.state.init.push(
+		statements.push(
 			add_svelte_meta(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
 					snippet_function,
@@ -67,4 +69,21 @@ export function RenderTag(node, context) {
 			)
 		);
 	}
+
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					memoizer.async_values(),
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index 401cfde428..a5c0974738 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -1,9 +1,9 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Literal, Property } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Literal, Property, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
 import { build_attribute_value } from './shared/element.js';
-import { memoize_expression } from './shared/utils.js';
+import { Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.SlotElement} node
@@ -22,7 +22,7 @@ export function SlotElement(node, context) {
 	/** @type {ExpressionStatement[]} */
 	const lets = [];
 
-	let is_default = true;
+	const memoizer = new Memoizer();
 
 	let name = b.literal('default');
 
@@ -33,12 +33,14 @@ export function SlotElement(node, context) {
 			const { value, has_state } = build_attribute_value(
 				attribute.value,
 				context,
-				(value, metadata) => (metadata.has_call ? memoize_expression(context.state, value) : value)
+				(value, metadata) =>
+					metadata.has_call || metadata.has_await
+						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						: value
 			);
 
 			if (attribute.name === 'name') {
 				name = /** @type {Literal} */ (value);
-				is_default = false;
 			} else if (attribute.name !== 'slot') {
 				if (has_state) {
 					props.push(b.get(attribute.name, [b.return(value)]));
@@ -51,9 +53,14 @@ export function SlotElement(node, context) {
 		}
 	}
 
+	memoizer.apply();
+
 	// Let bindings first, they can be used on attributes
 	context.state.init.push(...lets);
 
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
 	const props_expression =
 		spreads.length === 0 ? b.object(props) : b.call('$.spread_props', b.object(props), ...spreads);
 
@@ -62,14 +69,24 @@ export function SlotElement(node, context) {
 			? b.null
 			: b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)));
 
-	const slot = b.call(
-		'$.slot',
-		context.state.node,
-		b.id('$$props'),
-		name,
-		props_expression,
-		fallback
+	statements.push(
+		b.stmt(b.call('$.slot', context.state.node, b.id('$$props'), name, props_expression, fallback))
 	);
 
-	context.state.init.push(b.stmt(slot));
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					async_values,
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
index 1480648ce5..d37b990440 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Statement, Expression, FunctionDeclaration, VariableDeclaration, ArrowFunctionExpression } from 'estree' */
+/** @import { BlockStatement, Statement, Expression, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -71,7 +71,7 @@ export function SvelteBoundary(node, context) {
 
 			hoisted.push(snippet);
 
-			if (child.expression.name === 'failed') {
+			if (['failed', 'pending'].includes(child.expression.name)) {
 				props.properties.push(b.prop('init', child.expression, child.expression));
 			}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 6af5f5770e..2062519bb6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -32,7 +32,7 @@ export function SvelteElement(node, context) {
 	const style_directives = [];
 
 	/** @type {ExpressionStatement[]} */
-	const lets = [];
+	const statements = [];
 
 	// Create a temporary context which picks up the init/update statements.
 	// They'll then be added to the function parameter of $.element
@@ -64,7 +64,7 @@ export function SvelteElement(node, context) {
 		} else if (attribute.type === 'StyleDirective') {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			statements.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		} else if (attribute.type === 'OnDirective') {
 			const handler = /** @type {Expression} */ (context.visit(attribute, inner_context.state));
 			inner_context.state.after_update.push(b.stmt(handler));
@@ -73,9 +73,6 @@ export function SvelteElement(node, context) {
 		}
 	}
 
-	// Let bindings first, they can be used on attributes
-	context.state.init.push(...lets); // create computeds in the outer context; the dynamic element is the single child of this slot
-
 	if (
 		attributes.length === 1 &&
 		attributes[0].type === 'Attribute' &&
@@ -96,14 +93,10 @@ export function SvelteElement(node, context) {
 		);
 	}
 
-	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
+	const { has_await } = node.metadata.expression;
 
-	if (dev) {
-		if (node.fragment.nodes.length > 0) {
-			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
-		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
-	}
+	const expression = /** @type {Expression} */ (context.visit(node.tag));
+	const get_tag = b.thunk(has_await ? b.call('$.get', b.id('$$tag')) : expression);
 
 	/** @type {Statement[]} */
 	const inner = inner_context.state.init;
@@ -123,9 +116,16 @@ export function SvelteElement(node, context) {
 		).body
 	);
 
+	if (dev) {
+		if (node.fragment.nodes.length > 0) {
+			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
+		}
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
+	}
+
 	const location = dev && locator(node.start);
 
-	context.state.init.push(
+	statements.push(
 		b.stmt(
 			b.call(
 				'$.element',
@@ -138,4 +138,19 @@ export function SvelteElement(node, context) {
 			)
 		)
 	);
+
+	if (has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					b.array([b.thunk(expression, true)]),
+					b.arrow([context.state.node, b.id('$$tag')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 53f18d42e4..0998dc4778 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -1,7 +1,7 @@
 /** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { dev } from '../../../../state.js';
+/** @import { ComponentContext } from '../types' */
+import { dev, is_ignored, locate_node } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
@@ -20,7 +20,7 @@ export function VariableDeclaration(node, context) {
 
 	if (context.state.analysis.runes) {
 		for (const declarator of node.declarations) {
-			const init = declarator.init;
+			const init = /** @type {Expression} */ (declarator.init);
 			const rune = get_rune(init, context.state.scope);
 
 			if (
@@ -171,11 +171,14 @@ export function VariableDeclaration(node, context) {
 							context.state.transform[id.name] = { read: get_value };
 
 							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-							const call = b.call('$.derived', expression);
-							return b.declarator(
-								id,
-								dev ? b.call('$.tag', call, b.literal('[$state iterable]')) : call
-							);
+							let call = b.call('$.derived', expression);
+
+							if (dev) {
+								const label = `[$state ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`;
+								call = b.call('$.tag', call, b.literal(label));
+							}
+
+							return b.declarator(id, call);
 						}),
 						...paths.map((path) => {
 							const value = /** @type {Expression} */ (context.visit(path.expression));
@@ -194,31 +197,71 @@ export function VariableDeclaration(node, context) {
 			}
 
 			if (rune === '$derived' || rune === '$derived.by') {
+				const is_async = context.state.analysis.async_deriveds.has(
+					/** @type {CallExpression} */ (init)
+				);
+
 				if (declarator.id.type === 'Identifier') {
-					let expression = /** @type {Expression} */ (context.visit(value));
-					if (rune === '$derived') expression = b.thunk(expression);
-					const call = b.call('$.derived', expression);
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							dev ? b.call('$.tag', call, b.literal(declarator.id.name)) : call
-						)
+					let expression = /** @type {Expression} */ (
+						context.visit(value, {
+							...context.state,
+							in_derived: rune === '$derived'
+						})
 					);
+
+					if (is_async) {
+						const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+						let call = b.call(
+							'$.async_derived',
+							b.thunk(expression, true),
+							location ? b.literal(location) : undefined
+						);
+
+						call = b.call(b.await(b.call('$.save', call)));
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
+					} else {
+						if (rune === '$derived') expression = b.thunk(expression);
+
+						let call = b.call('$.derived', expression);
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
+					}
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
+					let expression = /** @type {Expression} */ (
+						context.visit(value, {
+							...context.state,
+							in_derived: rune === '$derived'
+						})
+					);
 
 					let rhs = value;
 
 					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
 						const id = b.id(context.state.scope.generate('$$d'));
+						let call = b.call('$.derived', rune === '$derived' ? b.thunk(expression) : expression);
+
 						rhs = b.call('$.get', id);
 
-						let expression = /** @type {Expression} */ (context.visit(value));
-						if (rune === '$derived') expression = b.thunk(expression);
-						const call = b.call('$.derived', expression);
-						declarations.push(
-							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
-						);
+						if (is_async) {
+							const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+							call = b.call(
+								'$.async_derived',
+								b.thunk(expression, true),
+								location ? b.literal(location) : undefined
+							);
+							call = b.call(b.await(b.call('$.save', call)));
+						}
+
+						if (dev) {
+							const label = `[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`;
+							call = b.call('$.tag', call, b.literal(label));
+						}
+
+						declarations.push(b.declarator(id, call));
 					}
 
 					const { inserts, paths } = extract_paths(declarator.id, rhs);
@@ -228,10 +271,14 @@ export function VariableDeclaration(node, context) {
 						context.state.transform[id.name] = { read: get_value };
 
 						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-						const call = b.call('$.derived', expression);
-						declarations.push(
-							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
-						);
+						let call = b.call('$.derived', expression);
+
+						if (dev) {
+							const label = `[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`;
+							call = b.call('$.tag', call, b.literal(label));
+						}
+
+						declarations.push(b.declarator(id, call));
 					}
 
 					for (const path of paths) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index aa3704b50b..7feeebdbbc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -4,12 +4,7 @@
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import {
-	build_bind_this,
-	memoize_expression,
-	validate_binding,
-	add_svelte_meta
-} from '../shared/utils.js';
+import { add_svelte_meta, build_bind_this, Memoizer, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
 import { determine_slot } from '../../../../../utils/slot.js';
@@ -48,6 +43,8 @@ export function build_component(node, component_name, context) {
 	/** @type {Record<string, Expression[]>} */
 	const events = {};
 
+	const memoizer = new Memoizer();
+
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
@@ -132,16 +129,15 @@ export function build_component(node, component_name, context) {
 			(events[attribute.name] ||= []).push(handler);
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
-			if (attribute.metadata.expression.has_state) {
-				let value = expression;
-
-				if (attribute.metadata.expression.has_call) {
-					const id = b.id(context.state.scope.generate('spread_element'));
-					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
-					value = b.call('$.get', id);
-				}
 
-				props_and_spreads.push(b.thunk(value));
+			if (attribute.metadata.expression.has_state) {
+				props_and_spreads.push(
+					b.thunk(
+						attribute.metadata.expression.has_await || attribute.metadata.expression.has_call
+							? b.call('$.get', memoizer.add(expression, attribute.metadata.expression.has_await))
+							: expression
+					)
+				);
 			} else {
 				props_and_spreads.push(expression);
 			}
@@ -150,10 +146,12 @@ export function build_component(node, component_name, context) {
 				custom_css_props.push(
 					b.init(
 						attribute.name,
-						build_attribute_value(attribute.value, context, (value, metadata) =>
+						build_attribute_value(attribute.value, context, (value, metadata) => {
 							// TODO put the derived in the local block
-							metadata.has_call ? memoize_expression(context.state, value) : value
-						).value
+							return metadata.has_call || metadata.has_await
+								? b.call('$.get', memoizer.add(value, metadata.has_await))
+								: value;
+						}).value
 					)
 				);
 				continue;
@@ -171,20 +169,24 @@ export function build_component(node, component_name, context) {
 				attribute.value,
 				context,
 				(value, metadata) => {
-					if (!metadata.has_state) return value;
+					if (!metadata.has_state && !metadata.has_await) return value;
 
 					// When we have a non-simple computation, anything other than an Identifier or Member expression,
 					// then there's a good chance it needs to be memoized to avoid over-firing when read within the
 					// child component (e.g. `active={i === index}`)
-					const should_wrap_in_derived = get_attribute_chunks(attribute.value).some((n) => {
-						return (
-							n.type === 'ExpressionTag' &&
-							n.expression.type !== 'Identifier' &&
-							n.expression.type !== 'MemberExpression'
-						);
-					});
-
-					return should_wrap_in_derived ? memoize_expression(context.state, value) : value;
+					const should_wrap_in_derived =
+						metadata.has_await ||
+						get_attribute_chunks(attribute.value).some((n) => {
+							return (
+								n.type === 'ExpressionTag' &&
+								n.expression.type !== 'Identifier' &&
+								n.expression.type !== 'MemberExpression'
+							);
+						});
+
+					return should_wrap_in_derived
+						? b.call('$.get', memoizer.add(value, metadata.has_await))
+						: value;
 				}
 			);
 
@@ -444,7 +446,7 @@ export function build_component(node, component_name, context) {
 		};
 	}
 
-	const statements = [...snippet_declarations];
+	const statements = [...snippet_declarations, ...memoizer.deriveds(context.state.analysis.runes)];
 
 	if (is_component_dynamic) {
 		const prev = fn;
@@ -492,5 +494,20 @@ export function build_component(node, component_name, context) {
 		statements.push(add_svelte_meta(fn(anchor), node, 'component', { componentTag: node.name }));
 	}
 
+	memoizer.apply();
+
+	const async_values = memoizer.async_values();
+
+	if (async_values) {
+		return b.stmt(
+			b.call(
+				'$.async',
+				anchor,
+				async_values,
+				b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
+			)
+		);
+	}
+
 	return statements.length > 1 ? b.block(statements) : statements[0];
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index d119b0457b..9143a57025 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -1,4 +1,4 @@
-/** @import { ArrayExpression, Expression, Identifier, ObjectExpression } from 'estree' */
+/** @import { Expression, Identifier, ObjectExpression } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
@@ -33,7 +33,7 @@ export function build_attribute_effect(
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
 			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
-				metadata.has_call ? memoizer.add(value) : value
+				metadata.has_call || metadata.has_await ? memoizer.add(value, metadata.has_await) : value
 			);
 
 			if (
@@ -50,8 +50,8 @@ export function build_attribute_effect(
 		} else {
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
-			if (attribute.metadata.expression.has_call) {
-				value = memoizer.add(value);
+			if (attribute.metadata.expression.has_call || attribute.metadata.expression.has_await) {
+				value = memoizer.add(value, attribute.metadata.expression.has_await);
 			}
 
 			values.push(b.spread(value));
@@ -87,6 +87,7 @@ export function build_attribute_effect(
 				element_id,
 				b.arrow(ids, b.object(values)),
 				memoizer.sync_values(),
+				memoizer.async_values(),
 				element.metadata.scoped &&
 					context.state.analysis.css.hash !== '' &&
 					b.literal(context.state.analysis.css.hash),
@@ -118,7 +119,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 
 		return {
 			value: memoize(expression, chunk.metadata.expression),
-			has_state: chunk.metadata.expression.has_state
+			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.has_await
 		};
 	}
 
@@ -151,7 +152,9 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 			value = b.call('$.clsx', value);
 		}
 
-		return metadata.has_call ? context.state.memoizer.add(value) : value;
+		return metadata.has_call || metadata.has_await
+			? context.state.memoizer.add(value, metadata.has_await)
+			: value;
 	});
 
 	/** @type {Identifier | undefined} */
@@ -165,7 +168,9 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 
 	if (class_directives.length) {
 		next = build_class_directives_object(class_directives, context);
-		has_state ||= class_directives.some((d) => d.metadata.expression.has_state);
+		has_state ||= class_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+		);
 
 		if (has_state) {
 			previous_id = b.id(context.state.scope.generate('classes'));
@@ -219,7 +224,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
  */
 export function build_set_style(node_id, attribute, style_directives, context) {
 	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
-		metadata.has_call ? context.state.memoizer.add(value) : value
+		metadata.has_call ? context.state.memoizer.add(value, metadata.has_await) : value
 	);
 
 	/** @type {Identifier | undefined} */
@@ -233,7 +238,9 @@ export function build_set_style(node_id, attribute, style_directives, context) {
 
 	if (style_directives.length) {
 		next = build_style_directives_object(style_directives, context);
-		has_state ||= style_directives.some((d) => d.metadata.expression.has_state);
+		has_state ||= style_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+		);
 
 		if (has_state) {
 			previous_id = b.id(context.state.scope.generate('styles'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
index a0e9d0bf5e..691ac0b01e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -9,7 +9,7 @@ import { build_hoisted_params } from '../../utils.js';
 export const visit_function = (node, context) => {
 	const metadata = node.metadata;
 
-	let state = { ...context.state, in_constructor: false };
+	let state = { ...context.state, in_constructor: false, in_derived: false };
 
 	if (node.type === 'FunctionExpression') {
 		const parent = /** @type {Node} */ (context.path.at(-1));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index de74fede0c..014547cf2d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -8,17 +8,7 @@ import { sanitize_template_string } from '../../../../../utils/sanitize_template
 import { regex_is_valid_identifier } from '../../../../patterns.js';
 import is_reference from 'is-reference';
 import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
-import { build_getter, create_derived } from '../../utils.js';
-
-/**
- * @param {ComponentClientTransformState} state
- * @param {Expression} value
- */
-export function memoize_expression(state, value) {
-	const id = b.id(state.scope.generate('expression'));
-	state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-	return b.call('$.get', id);
-}
+import { build_getter } from '../../utils.js';
 
 /**
  * A utility for extracting complex expressions (such as call expressions)
@@ -28,19 +18,23 @@ export class Memoizer {
 	/** @type {Array<{ id: Identifier, expression: Expression }>} */
 	#sync = [];
 
+	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	#async = [];
+
 	/**
 	 * @param {Expression} expression
+	 * @param {boolean} has_await
 	 */
-	add(expression) {
+	add(expression, has_await) {
 		const id = b.id('#'); // filled in later
 
-		this.#sync.push({ id, expression });
+		(has_await ? this.#async : this.#sync).push({ id, expression });
 
 		return id;
 	}
 
 	apply() {
-		return this.#sync.map((memo, i) => {
+		return [...this.#async, ...this.#sync].map((memo, i) => {
 			memo.id.name = `$${i}`;
 			return memo.id;
 		});
@@ -52,6 +46,15 @@ export class Memoizer {
 		);
 	}
 
+	async_ids() {
+		return this.#async.map((memo) => memo.id);
+	}
+
+	async_values() {
+		if (this.#async.length === 0) return;
+		return b.array(this.#async.map((memo) => b.thunk(memo.expression, true)));
+	}
+
 	sync_values() {
 		if (this.#sync.length === 0) return;
 		return b.array(this.#sync.map((memo) => b.thunk(memo.expression)));
@@ -69,7 +72,8 @@ export function build_template_chunk(
 	values,
 	context,
 	state = context.state,
-	memoize = (value, metadata) => (metadata.has_call ? state.memoizer.add(value) : value)
+	memoize = (value, metadata) =>
+		metadata.has_call || metadata.has_await ? state.memoizer.add(value, metadata.has_await) : value
 ) {
 	/** @type {Expression[]} */
 	const expressions = [];
@@ -78,6 +82,7 @@ export function build_template_chunk(
 	const quasis = [quasi];
 
 	let has_state = false;
+	let has_await = false;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
@@ -100,7 +105,8 @@ export function build_template_chunk(
 
 			const evaluated = state.scope.evaluate(value);
 
-			has_state ||= node.metadata.expression.has_state && !evaluated.is_known;
+			has_await ||= node.metadata.expression.has_await;
+			has_state ||= has_await || (node.metadata.expression.has_state && !evaluated.is_known);
 
 			if (values.length === 1) {
 				// If we have a single expression, then pass that in directly to possibly avoid doing
@@ -156,8 +162,9 @@ export function build_template_chunk(
  * @param {ComponentClientTransformState} state
  */
 export function build_render_statement(state) {
-	const ids = state.memoizer.apply();
-	const values = state.memoizer.sync_values();
+	const { memoizer } = state;
+
+	const ids = memoizer.apply();
 
 	return b.stmt(
 		b.call(
@@ -168,8 +175,8 @@ export function build_render_statement(state) {
 					? state.update[0].expression
 					: b.block(state.update)
 			),
-			values,
-			values && !state.analysis.runes && b.id('$.derived_safe_equal')
+			memoizer.sync_values(),
+			memoizer.async_values()
 		)
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 86346b864c..10c92242d4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -10,6 +10,7 @@ import { dev, filename } from '../../../state.js';
 import { render_stylesheet } from '../css/index.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
 import { Component } from './visitors/Component.js';
@@ -44,6 +45,7 @@ import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 const global_visitors = {
 	_: set_scope,
 	AssignmentExpression,
+	AwaitExpression,
 	CallExpression,
 	ClassBody,
 	ExpressionStatement,
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..9135892dbd
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
@@ -0,0 +1,25 @@
+/** @import { AwaitExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	// if `await` is inside a function, or inside `<script module>`,
+	// allow it, otherwise error
+	if (
+		context.state.scope.function_depth === 0 ||
+		context.path.some(
+			(node) =>
+				node.type === 'ArrowFunctionExpression' ||
+				node.type === 'FunctionDeclaration' ||
+				node.type === 'FunctionExpression'
+		)
+	) {
+		return context.next();
+	}
+
+	return b.call('$.await_outside_boundary');
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
index 35c79988b0..41d3202ce9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -25,6 +25,10 @@ export function CallExpression(node, context) {
 		return b.arrow([], b.block([]));
 	}
 
+	if (rune === '$effect.pending') {
+		return b.literal(0);
+	}
+
 	if (rune === '$state' || rune === '$state.raw') {
 		return node.arguments[0] ? context.visit(node.arguments[0]) : b.void0;
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
index ac6c9891a7..ee0086de2e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
@@ -44,12 +44,12 @@ export function EachBlock(node, context) {
 	);
 
 	if (node.fallback) {
-		const open = b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open));
+		const open = b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open));
 
 		const fallback = /** @type {BlockStatement} */ (context.visit(node.fallback));
 
 		fallback.body.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
+			b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 		);
 
 		state.template.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
index eb51c941f5..8c082f38d5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
@@ -10,29 +10,20 @@ import { block_close, block_open } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
+	const test = /** @type {Expression} */ (context.visit(node.test));
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
-	let if_statement = b.if(/** @type {Expression} */ (context.visit(node.test)), consequent);
 
-	context.state.template.push(if_statement, block_close);
+	const alternate = node.alternate
+		? /** @type {BlockStatement} */ (context.visit(node.alternate))
+		: b.block([]);
 
-	let index = 1;
-	let alt = node.alternate;
-	while (alt && alt.nodes.length === 1 && alt.nodes[0].type === 'IfBlock' && alt.nodes[0].elseif) {
-		const elseif = alt.nodes[0];
-		const alternate = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
-		alternate.body.unshift(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(`<!--[${index++}-->`)))
-		);
-		if_statement = if_statement.alternate = b.if(
-			/** @type {Expression} */ (context.visit(elseif.test)),
-			alternate
-		);
-		alt = elseif.alternate;
-	}
+	consequent.body.unshift(
+		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open))
+	);
 
-	if_statement.alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
-	if_statement.alternate.body.unshift(
-		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
+	alternate.body.unshift(
+		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 	);
+
+	context.state.template.push(b.if(test, consequent, alternate), block_close);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
index 734740c1b1..6e814d6384 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
@@ -3,15 +3,36 @@
 /** @import { ComponentContext } from '../types' */
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
 import * as b from '#compiler/builders';
+import { build_attribute_value } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteBoundary} node
  * @param {ComponentContext} context
  */
 export function SvelteBoundary(node, context) {
-	context.state.template.push(
-		b.literal(BLOCK_OPEN),
-		/** @type {BlockStatement} */ (context.visit(node.fragment)),
-		b.literal(BLOCK_CLOSE)
+	context.state.template.push(b.literal(BLOCK_OPEN));
+
+	// if this has a `pending` snippet, render it
+	const pending_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'pending')
+	);
+
+	const pending_snippet = /** @type {AST.SnippetBlock} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+		)
 	);
+
+	if (pending_attribute) {
+		const value = build_attribute_value(pending_attribute.value, context, false, true);
+		context.state.template.push(b.call(value, b.id('$$payload')));
+	} else if (pending_snippet) {
+		context.state.template.push(
+			/** @type {BlockStatement} */ (context.visit(pending_snippet.body))
+		);
+	} else {
+		context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+	}
+
+	context.state.template.push(b.literal(BLOCK_CLOSE));
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
index 8fcf8efa68..8a8633dd1a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -96,10 +96,10 @@ function is_statement(node) {
 /**
  * @param {Array<Statement | Expression>} template
  * @param {Identifier} out
- * @param {AssignmentOperator} operator
+ * @param {AssignmentOperator | 'push'} operator
  * @returns {Statement[]}
  */
-export function build_template(template, out = b.id('$$payload.out'), operator = '+=') {
+export function build_template(template, out = b.id('$$payload.out'), operator = 'push') {
 	/** @type {string[]} */
 	let strings = [];
 
@@ -110,18 +110,32 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
 	const statements = [];
 
 	const flush = () => {
-		statements.push(
-			b.stmt(
-				b.assignment(
-					operator,
-					out,
-					b.template(
-						strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
-						expressions
+		if (operator === 'push') {
+			statements.push(
+				b.stmt(
+					b.call(
+						b.member(out, b.id('push')),
+						b.template(
+							strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
+							expressions
+						)
 					)
 				)
-			)
-		);
+			);
+		} else {
+			statements.push(
+				b.stmt(
+					b.assignment(
+						operator,
+						out,
+						b.template(
+							strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
+							expressions
+						)
+					)
+				)
+			);
+		}
 		strings = [];
 		expressions = [];
 	};
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index c35f194b75..4874554ff0 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -66,7 +66,8 @@ export function create_expression_metadata() {
 		has_state: false,
 		has_call: false,
 		has_member_expression: false,
-		has_assignment: false
+		has_assignment: false,
+		has_await: false
 	};
 }
 
diff --git a/packages/svelte/src/compiler/phases/patterns.js b/packages/svelte/src/compiler/phases/patterns.js
index 2bee717131..448be7f949 100644
--- a/packages/svelte/src/compiler/phases/patterns.js
+++ b/packages/svelte/src/compiler/phases/patterns.js
@@ -23,3 +23,5 @@ export const regex_heading_tags = /^h[1-6]$/;
 export const regex_illegal_attribute_character = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
 export const regex_bidirectional_control_characters =
 	/[\u202a\u202b\u202c\u202d\u202e\u2066\u2067\u2068\u2069]+/g;
+export const regex_js_prefix = /^\W*javascript:/i;
+export const regex_redundant_img_alt = /\b(image|picture|photo)\b/i;
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 8a2cc39ba7..700e098e45 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -18,9 +18,9 @@ import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
 
 const UNKNOWN = Symbol('unknown');
 /** Includes `BigInt` */
-export const NUMBER = Symbol('number');
-export const STRING = Symbol('string');
-export const FUNCTION = Symbol('string');
+const NUMBER = Symbol('number');
+const STRING = Symbol('string');
+const FUNCTION = Symbol('string');
 
 /** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
 const globals = {
@@ -933,7 +933,25 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		}
 	};
 
+	let has_await = false;
+
 	walk(ast, state, {
+		AwaitExpression(node, context) {
+			// this doesn't _really_ belong here, but it allows us to
+			// automatically opt into runes mode on encountering
+			// blocking awaits, without doing an additional walk
+			// before the analysis occurs
+			// TODO remove this in Svelte 7.0 or whenever we get rid of legacy support
+			has_await ||= context.path.every(
+				({ type }) =>
+					type !== 'ArrowFunctionExpression' &&
+					type !== 'FunctionExpression' &&
+					type !== 'FunctionDeclaration'
+			);
+
+			context.next();
+		},
+
 		// references
 		Identifier(node, { path, state }) {
 			const parent = path.at(-1);
@@ -1290,6 +1308,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	}
 
 	return {
+		has_await,
 		scope,
 		scopes
 	};
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index dba2559a17..4cbbc362c7 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,21 +1,19 @@
 import type { AST, Binding, StateField } from '#compiler';
 import type {
-	AssignmentExpression,
+	CallExpression,
 	ClassBody,
-	Comment,
 	Identifier,
 	LabeledStatement,
 	Node,
 	Program
 } from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
-import type { StateCreationRuneName } from '../../utils.js';
-import type { AnalysisState } from './2-analyze/types.js';
 
 export interface Js {
 	ast: Program;
 	scope: Scope;
 	scopes: Map<AST.SvelteNode, Scope>;
+	has_await: boolean;
 }
 
 export interface Template {
@@ -46,6 +44,9 @@ export interface Analysis {
 
 	// TODO figure out if we can move this to ComponentAnalysis
 	accessors: boolean;
+
+	/** A set of deriveds that contain `await` expressions */
+	async_deriveds: Set<CallExpression>;
 }
 
 export interface ComponentAnalysis extends Analysis {
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 5eb25dd6bb..725d03b802 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -16,6 +16,11 @@ export let warnings = [];
  */
 export let filename;
 
+/**
+ * This is the fallback used when no filename is specified.
+ */
+export const UNKNOWN_FILENAME = '(unknown)';
+
 /**
  * The name of the component that is used in the `export default function ...` statement.
  */
@@ -80,15 +85,6 @@ export function pop_ignore() {
 	ignore_stack.pop();
 }
 
-/**
- *
- * @param {(warning: Warning) => boolean} fn
- */
-export function reset_warnings(fn = () => true) {
-	warning_filter = fn;
-	warnings = [];
-}
-
 /**
  * @param {AST.SvelteNode | NodeLike} node
  * @param {import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
@@ -99,21 +95,36 @@ export function is_ignored(node, code) {
 }
 
 /**
+ * Call this to reset the compiler state. Should be called before each compilation.
+ * @param {{ warning?: (warning: Warning) => boolean; filename: string | undefined }} state
+ */
+export function reset(state) {
+	dev = false;
+	runes = false;
+	component_name = UNKNOWN_FILENAME;
+	source = '';
+	locator = () => undefined;
+	filename = (state.filename ?? UNKNOWN_FILENAME).replace(/\\/g, '/');
+	warning_filter = state.warning ?? (() => true);
+	warnings = [];
+}
+
+/**
+ * Adjust the compiler state based on the provided state object.
+ * Call this after parsing and basic analysis happened.
  * @param {{
  *   dev: boolean;
- *   filename: string;
  *   component_name?: string;
  *   rootDir?: string;
  *   runes: boolean;
  * }} state
  */
-export function reset(state) {
+export function adjust(state) {
 	const root_dir = state.rootDir?.replace(/\\/g, '/');
-	filename = state.filename.replace(/\\/g, '/');
 
 	dev = state.dev;
 	runes = state.runes;
-	component_name = state.component_name ?? '(unknown)';
+	component_name = state.component_name ?? UNKNOWN_FILENAME;
 
 	if (typeof root_dir === 'string' && filename.startsWith(root_dir)) {
 		// make filename relative to rootDir
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 558ee558f7..6211e69bd3 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -224,6 +224,17 @@ export interface ModuleCompileOptions {
 	 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 	 */
 	warningFilter?: (warning: Warning) => boolean;
+	/**
+	 * Experimental options
+	 * @since 5.36
+	 */
+	experimental?: {
+		/**
+		 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+		 * @since 5.36
+		 */
+		async?: boolean;
+	};
 }
 
 // The following two somewhat scary looking types ensure that certain types are required but can be undefined still
@@ -287,6 +298,8 @@ export interface ExpressionMetadata {
 	has_state: boolean;
 	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
 	has_call: boolean;
+	/** True if the expression contains `await` */
+	has_await: boolean;
 	/** True if the expression includes a member expression */
 	has_member_expression: boolean;
 	/** True if the expression includes an assignment or an update */
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index c9841e9d4e..de06a41469 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -366,6 +366,7 @@ export namespace AST {
 		tag: Expression;
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			/**
 			 * `true` if this is an svg element. The boolean may not be accurate because
 			 * the tag is dynamic, but we do our best to infer it from the template.
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index 736738d19f..c241cdb445 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -1,4 +1,5 @@
 /** @import * as ESTree from 'estree' */
+import { walk } from 'zimmerframe';
 import { regex_is_valid_identifier } from '../phases/patterns.js';
 import { sanitize_template_string } from './sanitize_template_string.js';
 
@@ -30,16 +31,17 @@ export function assignment_pattern(left, right) {
 /**
  * @param {Array<ESTree.Pattern>} params
  * @param {ESTree.BlockStatement | ESTree.Expression} body
+ * @param {boolean} async
  * @returns {ESTree.ArrowFunctionExpression}
  */
-export function arrow(params, body) {
+export function arrow(params, body, async = false) {
 	return {
 		type: 'ArrowFunctionExpression',
 		params,
 		body,
 		expression: body.type !== 'BlockStatement',
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null) // should not be used by codegen
 	};
 }
@@ -100,7 +102,7 @@ export function labeled(name, body) {
 
 /**
  * @param {string | ESTree.Expression} callee
- * @param {...(ESTree.Expression | ESTree.SpreadElement | false | undefined)} args
+ * @param {...(ESTree.Expression | ESTree.SpreadElement | false | undefined | null)} args
  * @returns {ESTree.CallExpression}
  */
 export function call(callee, ...args) {
@@ -216,16 +218,17 @@ export function export_default(declaration) {
  * @param {ESTree.Identifier} id
  * @param {ESTree.Pattern[]} params
  * @param {ESTree.BlockStatement} body
+ * @param {boolean} async
  * @returns {ESTree.FunctionDeclaration}
  */
-export function function_declaration(id, params, body) {
+export function function_declaration(id, params, body, async = false) {
 	return {
 		type: 'FunctionDeclaration',
 		id,
 		params,
 		body,
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null) // should not be used by codegen
 	};
 }
@@ -421,19 +424,32 @@ export function template(elements, expressions) {
  * @returns {ESTree.Expression}
  */
 export function thunk(expression, async = false) {
-	const fn = arrow([], expression);
-	if (async) fn.async = true;
-	return unthunk(fn);
+	return unthunk(arrow([], expression, async));
 }
 
 /**
  * Replace "(arg) => func(arg)" to "func"
- * @param {ESTree.Expression} expression
+ * @param {ESTree.ArrowFunctionExpression} expression
  * @returns {ESTree.Expression}
  */
 export function unthunk(expression) {
+	// optimize `async () => await x()`, but not `async () => await x(await y)`
+	if (expression.async && expression.body.type === 'AwaitExpression') {
+		let has_await = false;
+
+		walk(expression.body.argument, null, {
+			AwaitExpression(_node, context) {
+				has_await = true;
+				context.stop();
+			}
+		});
+
+		if (!has_await) {
+			return unthunk(arrow(expression.params, expression.body.argument));
+		}
+	}
+
 	if (
-		expression.type === 'ArrowFunctionExpression' &&
 		expression.async === false &&
 		expression.body.type === 'CallExpression' &&
 		expression.body.callee.type === 'Identifier' &&
diff --git a/packages/svelte/src/compiler/utils/compile_diagnostic.js b/packages/svelte/src/compiler/utils/compile_diagnostic.js
index db938cf2bd..c5df49e01c 100644
--- a/packages/svelte/src/compiler/utils/compile_diagnostic.js
+++ b/packages/svelte/src/compiler/utils/compile_diagnostic.js
@@ -61,7 +61,7 @@ export class CompileDiagnostic {
 		this.code = code;
 		this.message = message;
 
-		if (state.filename) {
+		if (state.filename !== state.UNKNOWN_FILENAME) {
 			this.filename = state.filename;
 		}
 
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 85305d7ce9..ed83375d22 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -41,7 +41,11 @@ const common = {
 		return input;
 	}),
 
-	warningFilter: fun(() => true)
+	warningFilter: fun(() => true),
+
+	experimental: object({
+		async: boolean(false)
+	})
 };
 
 export const validate_module_options =
@@ -241,19 +245,6 @@ function validator(fallback, fn) {
 	};
 }
 
-/**
- * @param {number} fallback
- * @returns {Validator}
- */
-function number(fallback) {
-	return validator(fallback, (input, keypath) => {
-		if (typeof input !== 'number') {
-			throw_error(`${keypath} should be a number, if specified`);
-		}
-		return input;
-	});
-}
-
 /**
  * @param {string | undefined} fallback
  * @param {boolean} allow_empty
@@ -273,20 +264,6 @@ function string(fallback, allow_empty = true) {
 	});
 }
 
-/**
- * @param {string[]} fallback
- * @returns {Validator}
- */
-function string_array(fallback) {
-	return validator(fallback, (input, keypath) => {
-		if (input && !Array.isArray(input)) {
-			throw_error(`${keypath} should be a string array, if specified`);
-		}
-
-		return input;
-	});
-}
-
 /**
  * @param {boolean | undefined} fallback
  * @returns {Validator}
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 4e1785723c..69cd213940 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -42,6 +42,8 @@ export const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML';
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
 export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
+	'await_waterfall',
+	'await_reactivity_loss',
 	'state_snapshot_uncloneable',
 	'binding_property_non_reactive',
 	'hydration_attribute_changed',
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index 0d962aacd1..397a81c319 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -5,7 +5,6 @@ import { active_reaction, untrack } from './internal/client/runtime.js';
 import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
-import { lifecycle_outside_component } from './internal/shared/errors.js';
 import { legacy_mode_flag } from './internal/flags/index.js';
 import { component_context } from './internal/client/context.js';
 import { DEV } from 'esm-env';
@@ -91,7 +90,7 @@ export function getAbortSignal() {
  */
 export function onMount(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('onMount');
+		e.lifecycle_outside_component('onMount');
 	}
 
 	if (legacy_mode_flag && component_context.l !== null) {
@@ -115,7 +114,7 @@ export function onMount(fn) {
  */
 export function onDestroy(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('onDestroy');
+		e.lifecycle_outside_component('onDestroy');
 	}
 
 	onMount(() => () => untrack(fn));
@@ -158,7 +157,7 @@ function create_custom_event(type, detail, { bubbles = false, cancelable = false
 export function createEventDispatcher() {
 	const active_component_context = component_context;
 	if (active_component_context === null) {
-		lifecycle_outside_component('createEventDispatcher');
+		e.lifecycle_outside_component('createEventDispatcher');
 	}
 
 	return (type, detail, options) => {
@@ -196,7 +195,7 @@ export function createEventDispatcher() {
  */
 export function beforeUpdate(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('beforeUpdate');
+		e.lifecycle_outside_component('beforeUpdate');
 	}
 
 	if (component_context.l === null) {
@@ -219,7 +218,7 @@ export function beforeUpdate(fn) {
  */
 export function afterUpdate(fn) {
 	if (component_context === null) {
-		lifecycle_outside_component('afterUpdate');
+		e.lifecycle_outside_component('afterUpdate');
 	}
 
 	if (component_context.l === null) {
@@ -238,8 +237,8 @@ function init_update_callbacks(context) {
 	return (l.u ??= { a: [], b: [], m: [] });
 }
 
-export { flushSync } from './internal/client/runtime.js';
+export { flushSync } from './internal/client/reactivity/batch.js';
 export { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
-export { tick, untrack } from './internal/client/runtime.js';
+export { tick, untrack, settled } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';
diff --git a/packages/svelte/src/index-server.js b/packages/svelte/src/index-server.js
index e5039cf150..1342e502d7 100644
--- a/packages/svelte/src/index-server.js
+++ b/packages/svelte/src/index-server.js
@@ -35,6 +35,8 @@ export function unmount() {
 
 export async function tick() {}
 
+export async function settled() {}
+
 export { getAbortSignal } from './internal/server/abort-signal.js';
 
 export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index a5a8b42972..50a7a21ae8 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -18,8 +18,13 @@ export const EFFECT_TRANSPARENT = 1 << 16;
 export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 export const EFFECT_PRESERVED = 1 << 19;
-export const EFFECT_IS_UPDATING = 1 << 20;
-export const USER_EFFECT = 1 << 21;
+export const USER_EFFECT = 1 << 20;
+
+// Flags used for async
+export const REACTION_IS_UPDATING = 1 << 21;
+export const ASYNC = 1 << 22;
+
+export const ERROR_VALUE = 1 << 23;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
index 6876a89f57..cad75546d4 100644
--- a/packages/svelte/src/internal/client/context.js
+++ b/packages/svelte/src/internal/client/context.js
@@ -1,17 +1,11 @@
-/** @import { ComponentContext, DevStackEntry } from '#client' */
-
+/** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
 import { DEV } from 'esm-env';
-import { lifecycle_outside_component } from '../shared/errors.js';
-import { source } from './reactivity/sources.js';
-import {
-	active_effect,
-	active_reaction,
-	set_active_effect,
-	set_active_reaction
-} from './runtime.js';
-import { create_user_effect, teardown } from './reactivity/effects.js';
-import { legacy_mode_flag } from '../flags/index.js';
+import * as e from './errors.js';
+import { active_effect, active_reaction } from './runtime.js';
+import { create_user_effect } from './reactivity/effects.js';
+import { async_mode_flag, legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
+import { BRANCH_EFFECT, EFFECT_RAN } from './constants.js';
 
 /** @type {ComponentContext | null} */
 export let component_context = null;
@@ -103,6 +97,16 @@ export function getContext(key) {
  */
 export function setContext(key, context) {
 	const context_map = get_or_init_context_map('setContext');
+
+	if (async_mode_flag) {
+		var flags = /** @type {Effect} */ (active_effect).f;
+		var valid = !active_reaction && (flags & BRANCH_EFFECT) !== 0 && (flags & EFFECT_RAN) === 0;
+
+		if (!valid) {
+			e.set_context_after_init();
+		}
+	}
+
 	context_map.set(key, context);
 	return context;
 }
@@ -145,18 +149,9 @@ export function push(props, runes = false, fn) {
 		e: null,
 		s: props,
 		x: null,
-		l: null
+		l: legacy_mode_flag && !runes ? { s: null, u: null, $: [] } : null
 	};
 
-	if (legacy_mode_flag && !runes) {
-		component_context.l = {
-			s: null,
-			u: null,
-			r1: [],
-			r2: source(false)
-		};
-	}
-
 	if (DEV) {
 		// component function
 		component_context.function = fn;
@@ -205,7 +200,7 @@ export function is_runes() {
  */
 function get_or_init_context_map(name) {
 	if (component_context === null) {
-		lifecycle_outside_component(name);
+		e.lifecycle_outside_component(name);
 	}
 
 	return (component_context.c ??= new Map(get_parent_context(component_context) || undefined));
diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js
index fbde87a2d7..2714a3af1f 100644
--- a/packages/svelte/src/internal/client/dev/debug.js
+++ b/packages/svelte/src/internal/client/dev/debug.js
@@ -7,6 +7,7 @@ import {
 	CLEAN,
 	DERIVED,
 	EFFECT,
+	ASYNC,
 	MAYBE_DIRTY,
 	RENDER_EFFECT,
 	ROOT_EFFECT
@@ -39,6 +40,8 @@ export function log_effect_tree(effect, depth = 0) {
 		label = 'boundary';
 	} else if ((flags & BLOCK_EFFECT) !== 0) {
 		label = 'block';
+	} else if ((flags & ASYNC) !== 0) {
+		label = 'async';
 	} else if ((flags & BRANCH_EFFECT) !== 0) {
 		label = 'branch';
 	} else if ((flags & RENDER_EFFECT) !== 0) {
@@ -60,6 +63,13 @@ export function log_effect_tree(effect, depth = 0) {
 
 		// eslint-disable-next-line no-console
 		console.log(callsite);
+	} else {
+		// eslint-disable-next-line no-console
+		console.groupCollapsed(`%cfn`, `font-weight: normal`);
+		// eslint-disable-next-line no-console
+		console.log(effect.fn);
+		// eslint-disable-next-line no-console
+		console.groupEnd();
 	}
 
 	if (effect.deps !== null) {
diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js
index e15c66901c..c593f2622c 100644
--- a/packages/svelte/src/internal/client/dev/inspect.js
+++ b/packages/svelte/src/internal/client/dev/inspect.js
@@ -1,6 +1,6 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
-import { inspect_effect, validate_effect } from '../reactivity/effects.js';
+import { inspect_effect, render_effect, validate_effect } from '../reactivity/effects.js';
 import { untrack } from '../runtime.js';
 
 /**
@@ -12,29 +12,44 @@ export function inspect(get_value, inspector = console.log) {
 	validate_effect('$inspect');
 
 	let initial = true;
+	let error = /** @type {any} */ (UNINITIALIZED);
 
+	// Inspect effects runs synchronously so that we can capture useful
+	// stack traces. As a consequence, reading the value might result
+	// in an error (an `$inspect(object.property)` will run before the
+	// `{#if object}...{/if}` that contains it)
 	inspect_effect(() => {
-		/** @type {any} */
-		var value = UNINITIALIZED;
-
-		// Capturing the value might result in an exception due to the inspect effect being
-		// sync and thus operating on stale data. In the case we encounter an exception we
-		// can bail-out of reporting the value. Instead we simply console.error the error
-		// so at least it's known that an error occured, but we don't stop execution
 		try {
-			value = get_value();
-		} catch (error) {
-			// eslint-disable-next-line no-console
-			console.error(error);
+			var value = get_value();
+		} catch (e) {
+			error = e;
+			return;
 		}
 
-		if (value !== UNINITIALIZED) {
-			var snap = snapshot(value, true);
-			untrack(() => {
-				inspector(initial ? 'init' : 'update', ...snap);
-			});
-		}
+		var snap = snapshot(value, true);
+		untrack(() => {
+			inspector(initial ? 'init' : 'update', ...snap);
+		});
 
 		initial = false;
 	});
+
+	// If an error occurs, we store it (along with its stack trace).
+	// If the render effect subsequently runs, we log the error,
+	// but if it doesn't run it's because the `$inspect` was
+	// destroyed, meaning we don't need to bother
+	render_effect(() => {
+		try {
+			// call `get_value` so that this runs alongside the inspect effect
+			get_value();
+		} catch {
+			// ignore
+		}
+
+		if (error !== UNINITIALIZED) {
+			// eslint-disable-next-line no-console
+			console.error(error);
+			error = UNINITIALIZED;
+		}
+	});
 }
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 5834f5bffd..673a710fac 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -2,9 +2,9 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { define_property } from '../../shared/utils.js';
-import { DERIVED, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
+import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
-import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
+import { active_reaction, untrack } from '../runtime.js';
 
 /**
  * @typedef {{
@@ -26,7 +26,7 @@ function log_entry(signal, entry) {
 		return;
 	}
 
-	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
+	const type = get_type(signal);
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
 	const style = dirty
@@ -56,8 +56,10 @@ function log_entry(signal, entry) {
 	}
 
 	if (dirty && signal.updated) {
-		// eslint-disable-next-line no-console
-		console.log(signal.updated);
+		for (const updated of signal.updated.values()) {
+			// eslint-disable-next-line no-console
+			console.log(updated.error);
+		}
 	}
 
 	if (entry) {
@@ -71,6 +73,15 @@ function log_entry(signal, entry) {
 	console.groupEnd();
 }
 
+/**
+ * @param {Value} signal
+ * @returns {'$state' | '$derived' | 'store'}
+ */
+function get_type(signal) {
+	if ((signal.f & (DERIVED | ASYNC)) !== 0) return '$derived';
+	return signal.label?.startsWith('$') ? 'store' : '$state';
+}
+
 /**
  * @template T
  * @param {() => string} label
@@ -120,44 +131,46 @@ export function trace(label, fn) {
 
 /**
  * @param {string} label
+ * @returns {Error & { stack: string } | null}
  */
 export function get_stack(label) {
 	let error = Error();
 	const stack = error.stack;
 
-	if (stack) {
-		const lines = stack.split('\n');
-		const new_lines = ['\n'];
-
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-
-			if (line === 'Error') {
-				continue;
-			}
-			if (line.includes('validate_each_keys')) {
-				return null;
-			}
-			if (line.includes('svelte/src/internal')) {
-				continue;
-			}
-			new_lines.push(line);
-		}
+	if (!stack) return null;
 
-		if (new_lines.length === 1) {
+	const lines = stack.split('\n');
+	const new_lines = ['\n'];
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+
+		if (line === 'Error') {
+			continue;
+		}
+		if (line.includes('validate_each_keys')) {
 			return null;
 		}
+		if (line.includes('svelte/src/internal')) {
+			continue;
+		}
+		new_lines.push(line);
+	}
 
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
-
-		define_property(error, 'name', {
-			// 'Error' suffix is required for stack traces to be rendered properly
-			value: `${label}Error`
-		});
+	if (new_lines.length === 1) {
+		return null;
 	}
-	return error;
+
+	define_property(error, 'stack', {
+		value: new_lines.join('\n')
+	});
+
+	define_property(error, 'name', {
+		// 'Error' suffix is required for stack traces to be rendered properly
+		value: `${label}Error`
+	});
+
+	return /** @type {Error & { stack: string }} */ (error);
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
index e41e4c4628..60d140c718 100644
--- a/packages/svelte/src/internal/client/dev/validation.js
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -1,15 +1,16 @@
-import { invalid_snippet_arguments } from '../../shared/errors.js';
+import * as e from '../errors.js';
 /**
  * @param {Node} anchor
  * @param {...(()=>any)[]} args
  */
 export function validate_snippet_args(anchor, ...args) {
 	if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
-		invalid_snippet_arguments();
+		e.invalid_snippet_arguments();
 	}
+
 	for (let arg of args) {
 		if (typeof arg !== 'function') {
-			invalid_snippet_arguments();
+			e.invalid_snippet_arguments();
 		}
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/async.js b/packages/svelte/src/internal/client/dom/blocks/async.js
new file mode 100644
index 0000000000..82f107ab29
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/async.js
@@ -0,0 +1,26 @@
+/** @import { TemplateNode, Value } from '#client' */
+import { flatten } from '../../reactivity/async.js';
+import { get } from '../../runtime.js';
+import { get_pending_boundary } from './boundary.js';
+
+/**
+ * @param {TemplateNode} node
+ * @param {Array<() => Promise<any>>} expressions
+ * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
+ */
+export function async(node, expressions, fn) {
+	var boundary = get_pending_boundary();
+
+	boundary.update_pending_count(1);
+
+	flatten([], expressions, (values) => {
+		try {
+			// get values eagerly to avoid creating blocks if they reject
+			for (const d of values) get(d);
+
+			fn(node, ...values);
+		} finally {
+			boundary.update_pending_count(-1);
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 325224fff2..4f68db57b1 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -3,7 +3,7 @@ import { DEV } from 'esm-env';
 import { is_promise } from '../../../shared/utils.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
 import { internal_set, mutable_source, source } from '../../reactivity/sources.js';
-import { flushSync, set_active_effect, set_active_reaction } from '../../runtime.js';
+import { set_active_effect, set_active_reaction } from '../../runtime.js';
 import {
 	hydrate_next,
 	hydrate_node,
@@ -22,6 +22,7 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from '../../context.js';
+import { flushSync } from '../../reactivity/batch.js';
 
 const PENDING = 0;
 const THEN = 1;
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 03cec4fd2f..1866931ef2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,11 +1,17 @@
-/** @import { Effect, TemplateNode, } from '#client' */
-import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
+/** @import { Effect, Source, TemplateNode, } from '#client' */
+import {
+	BOUNDARY_EFFECT,
+	EFFECT_PRESERVED,
+	EFFECT_RAN,
+	EFFECT_TRANSPARENT
+} from '#client/constants';
 import { component_context, set_component_context } from '../../context.js';
-import { invoke_error_boundary } from '../../error-handling.js';
+import { handle_error, invoke_error_boundary } from '../../error-handling.js';
 import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
 import {
 	active_effect,
 	active_reaction,
+	get,
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
@@ -17,12 +23,21 @@ import {
 	remove_nodes,
 	set_hydrate_node
 } from '../hydration.js';
+import { get_next_sibling } from '../operations.js';
 import { queue_micro_task } from '../task.js';
+import * as e from '../../errors.js';
+import * as w from '../../warnings.js';
+import { DEV } from 'esm-env';
+import { Batch, effect_pending_updates } from '../../reactivity/batch.js';
+import { internal_set, source } from '../../reactivity/sources.js';
+import { tag } from '../../dev/tracing.js';
+import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
 
 /**
  * @typedef {{
  * 	 onerror?: (error: unknown, reset: () => void) => void;
  *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
+ *   pending?: (anchor: Node) => void;
  * }} BoundaryProps
  */
 
@@ -39,6 +54,11 @@ export function boundary(node, props, children) {
 }
 
 export class Boundary {
+	pending = false;
+
+	/** @type {Boundary | null} */
+	parent;
+
 	/** @type {TemplateNode} */
 	#anchor;
 
@@ -57,11 +77,45 @@ export class Boundary {
 	/** @type {Effect | null} */
 	#main_effect = null;
 
+	/** @type {Effect | null} */
+	#pending_effect = null;
+
 	/** @type {Effect | null} */
 	#failed_effect = null;
 
+	/** @type {DocumentFragment | null} */
+	#offscreen_fragment = null;
+
+	#pending_count = 0;
 	#is_creating_fallback = false;
 
+	/**
+	 * A source containing the number of pending async deriveds/expressions.
+	 * Only created if `$effect.pending()` is used inside the boundary,
+	 * otherwise updating the source results in needless `Batch.ensure()`
+	 * calls followed by no-op flushes
+	 * @type {Source<number> | null}
+	 */
+	#effect_pending = null;
+
+	#effect_pending_update = () => {
+		if (this.#effect_pending) {
+			internal_set(this.#effect_pending, this.#pending_count);
+		}
+	};
+
+	#effect_pending_subscriber = createSubscriber(() => {
+		this.#effect_pending = source(this.#pending_count);
+
+		if (DEV) {
+			tag(this.#effect_pending, '$effect.pending()');
+		}
+
+		return () => {
+			this.#effect_pending = null;
+		};
+	});
+
 	/**
 	 * @param {TemplateNode} node
 	 * @param {BoundaryProps} props
@@ -74,6 +128,10 @@ export class Boundary {
 
 		this.#hydrate_open = hydrate_node;
 
+		this.parent = /** @type {Effect} */ (active_effect).b;
+
+		this.pending = !!this.#props.pending;
+
 		this.#effect = block(() => {
 			/** @type {Effect} */ (active_effect).b = this;
 
@@ -81,10 +139,43 @@ export class Boundary {
 				hydrate_next();
 			}
 
-			try {
-				this.#main_effect = branch(() => children(this.#anchor));
-			} catch (error) {
-				this.error(error);
+			const pending = this.#props.pending;
+
+			if (hydrating && pending) {
+				this.#pending_effect = branch(() => pending(this.#anchor));
+
+				// future work: when we have some form of async SSR, we will
+				// need to use hydration boundary comments to report whether
+				// the pending or main block was rendered for a given
+				// boundary, and hydrate accordingly
+				Batch.enqueue(() => {
+					this.#main_effect = this.#run(() => {
+						Batch.ensure();
+						return branch(() => this.#children(this.#anchor));
+					});
+
+					if (this.#pending_count > 0) {
+						this.#show_pending_snippet();
+					} else {
+						pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
+							this.#pending_effect = null;
+						});
+
+						this.pending = false;
+					}
+				});
+			} else {
+				try {
+					this.#main_effect = branch(() => children(this.#anchor));
+				} catch (error) {
+					this.error(error);
+				}
+
+				if (this.#pending_count > 0) {
+					this.#show_pending_snippet();
+				} else {
+					this.pending = false;
+				}
 			}
 		}, flags);
 
@@ -93,6 +184,10 @@ export class Boundary {
 		}
 	}
 
+	has_pending_snippet() {
+		return !!this.#props.pending;
+	}
+
 	/**
 	 * @param {() => Effect | null} fn
 	 */
@@ -107,6 +202,9 @@ export class Boundary {
 
 		try {
 			return fn();
+		} catch (e) {
+			handle_error(e);
+			return null;
 		} finally {
 			set_active_effect(previous_effect);
 			set_active_reaction(previous_reaction);
@@ -114,22 +212,116 @@ export class Boundary {
 		}
 	}
 
+	#show_pending_snippet() {
+		const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
+
+		if (this.#main_effect !== null) {
+			this.#offscreen_fragment = document.createDocumentFragment();
+			move_effect(this.#main_effect, this.#offscreen_fragment);
+		}
+
+		if (this.#pending_effect === null) {
+			this.#pending_effect = branch(() => pending(this.#anchor));
+		}
+	}
+
+	/** @param {1 | -1} d */
+	#update_pending_count(d) {
+		this.#pending_count += d;
+
+		if (this.#pending_count === 0) {
+			this.pending = false;
+
+			if (this.#pending_effect) {
+				pause_effect(this.#pending_effect, () => {
+					this.#pending_effect = null;
+				});
+			}
+
+			if (this.#offscreen_fragment) {
+				this.#anchor.before(this.#offscreen_fragment);
+				this.#offscreen_fragment = null;
+			}
+		}
+	}
+
+	/** @param {1 | -1} d */
+	update_pending_count(d) {
+		if (this.has_pending_snippet()) {
+			this.#update_pending_count(d);
+		} else if (this.parent) {
+			this.parent.#update_pending_count(d);
+		}
+
+		effect_pending_updates.add(this.#effect_pending_update);
+	}
+
+	get_effect_pending() {
+		this.#effect_pending_subscriber();
+		return get(/** @type {Source<number>} */ (this.#effect_pending));
+	}
+
 	/** @param {unknown} error */
 	error(error) {
 		var onerror = this.#props.onerror;
 		let failed = this.#props.failed;
 
+		if (this.#main_effect) {
+			destroy_effect(this.#main_effect);
+			this.#main_effect = null;
+		}
+
+		if (this.#pending_effect) {
+			destroy_effect(this.#pending_effect);
+			this.#pending_effect = null;
+		}
+
+		if (this.#failed_effect) {
+			destroy_effect(this.#failed_effect);
+			this.#failed_effect = null;
+		}
+
+		if (hydrating) {
+			set_hydrate_node(this.#hydrate_open);
+			next();
+			set_hydrate_node(remove_nodes());
+		}
+
+		var did_reset = false;
+		var calling_on_error = false;
+
 		const reset = () => {
+			if (did_reset) {
+				w.svelte_boundary_reset_noop();
+				return;
+			}
+
+			did_reset = true;
+
+			if (calling_on_error) {
+				e.svelte_boundary_reset_onerror();
+			}
+
+			this.#pending_count = 0;
+
 			if (this.#failed_effect !== null) {
 				pause_effect(this.#failed_effect, () => {
 					this.#failed_effect = null;
 				});
 			}
 
+			this.pending = true;
+
 			this.#main_effect = this.#run(() => {
 				this.#is_creating_fallback = false;
 				return branch(() => this.#children(this.#anchor));
 			});
+
+			if (this.#pending_count > 0) {
+				this.#show_pending_snippet();
+			} else {
+				this.pending = false;
+			}
 		};
 
 		// If we have nothing to capture the error, or if we hit an error while
@@ -142,27 +334,15 @@ export class Boundary {
 
 		try {
 			set_active_reaction(null);
+			calling_on_error = true;
 			onerror?.(error, reset);
+			calling_on_error = false;
+		} catch (error) {
+			invoke_error_boundary(error, this.#effect && this.#effect.parent);
 		} finally {
 			set_active_reaction(previous_reaction);
 		}
 
-		if (this.#main_effect) {
-			destroy_effect(this.#main_effect);
-			this.#main_effect = null;
-		}
-
-		if (this.#failed_effect) {
-			destroy_effect(this.#failed_effect);
-			this.#failed_effect = null;
-		}
-
-		if (hydrating) {
-			set_hydrate_node(this.#hydrate_open);
-			next();
-			set_hydrate_node(remove_nodes());
-		}
-
 		if (failed) {
 			queue_micro_task(() => {
 				this.#failed_effect = this.#run(() => {
@@ -187,3 +367,49 @@ export class Boundary {
 		}
 	}
 }
+
+/**
+ *
+ * @param {Effect} effect
+ * @param {DocumentFragment} fragment
+ */
+function move_effect(effect, fragment) {
+	var node = effect.nodes_start;
+	var end = effect.nodes_end;
+
+	while (node !== null) {
+		/** @type {TemplateNode | null} */
+		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
+
+		fragment.append(node);
+		node = next;
+	}
+}
+
+export function get_pending_boundary() {
+	var boundary = /** @type {Effect} */ (active_effect).b;
+
+	while (boundary !== null && !boundary.has_pending_snippet()) {
+		boundary = boundary.parent;
+	}
+
+	if (boundary === null) {
+		e.await_outside_boundary();
+	}
+
+	return boundary;
+}
+
+export function pending() {
+	if (active_effect === null) {
+		e.effect_pending_outside_reaction();
+	}
+
+	var boundary = active_effect.b;
+
+	if (boundary === null) {
+		return 0; // TODO eventually we will need this to be global
+	}
+
+	return boundary.get_effect_pending();
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 7b12be58e8..43c75e2a37 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -1,4 +1,5 @@
 /** @import { EachItem, EachState, Effect, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -21,7 +22,8 @@ import {
 	clear_text_content,
 	create_text,
 	get_first_child,
-	get_next_sibling
+	get_next_sibling,
+	should_defer_append
 } from '../operations.js';
 import {
 	block,
@@ -39,6 +41,7 @@ import { queue_micro_task } from '../task.js';
 import { active_effect, get } from '../../runtime.js';
 import { DEV } from 'esm-env';
 import { derived_safe_equal } from '../../reactivity/deriveds.js';
+import { current_batch } from '../../reactivity/batch.js';
 
 /**
  * The row of a keyed each block that is currently updating. We track this
@@ -66,9 +69,10 @@ export function index(_, i) {
  * @param {EachState} state
  * @param {EachItem[]} items
  * @param {null | Node} controlled_anchor
- * @param {Map<any, EachItem>} items_map
  */
-function pause_effects(state, items, controlled_anchor, items_map) {
+function pause_effects(state, items, controlled_anchor) {
+	var items_map = state.items;
+
 	/** @type {TransitionManager[]} */
 	var transitions = [];
 	var length = items.length;
@@ -137,6 +141,9 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 	var was_empty = false;
 
+	/** @type {Map<any, EachItem>} */
+	var offscreen_items = new Map();
+
 	// TODO: ideally we could use derived for runes mode but because of the ability
 	// to use a store which can be mutated, we can't do that here as mutating a store
 	// will still result in the collection array being the same from the store
@@ -146,8 +153,45 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
 	});
 
+	/** @type {V[]} */
+	var array;
+
+	/** @type {Effect} */
+	var each_effect;
+
+	function commit() {
+		reconcile(
+			each_effect,
+			array,
+			state,
+			offscreen_items,
+			anchor,
+			render_fn,
+			flags,
+			get_key,
+			get_collection
+		);
+
+		if (fallback_fn !== null) {
+			if (array.length === 0) {
+				if (fallback) {
+					resume_effect(fallback);
+				} else {
+					fallback = branch(() => fallback_fn(anchor));
+				}
+			} else if (fallback !== null) {
+				pause_effect(fallback, () => {
+					fallback = null;
+				});
+			}
+		}
+	}
+
 	block(() => {
-		var array = get(each_array);
+		// store a reference to the effect so that we can update the start/end nodes in reconciliation
+		each_effect ??= /** @type {Effect} */ (active_effect);
+
+		array = get(each_array);
 		var length = array.length;
 
 		if (was_empty && length === 0) {
@@ -219,21 +263,56 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			}
 		}
 
-		if (!hydrating) {
-			reconcile(array, state, anchor, render_fn, flags, get_key, get_collection);
-		}
+		if (hydrating) {
+			if (length === 0 && fallback_fn) {
+				fallback = branch(() => fallback_fn(anchor));
+			}
+		} else {
+			if (should_defer_append()) {
+				var keys = new Set();
+				var batch = /** @type {Batch} */ (current_batch);
+
+				for (i = 0; i < length; i += 1) {
+					value = array[i];
+					key = get_key(value, i);
+
+					var existing = state.items.get(key) ?? offscreen_items.get(key);
+
+					if (existing) {
+						// update before reconciliation, to trigger any async updates
+						if ((flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0) {
+							update_item(existing, value, i, flags);
+						}
+					} else {
+						item = create_item(
+							null,
+							state,
+							null,
+							null,
+							value,
+							key,
+							i,
+							render_fn,
+							flags,
+							get_collection,
+							true
+						);
+
+						offscreen_items.set(key, item);
+					}
 
-		if (fallback_fn !== null) {
-			if (length === 0) {
-				if (fallback) {
-					resume_effect(fallback);
-				} else {
-					fallback = branch(() => fallback_fn(anchor));
+					keys.add(key);
 				}
-			} else if (fallback !== null) {
-				pause_effect(fallback, () => {
-					fallback = null;
-				});
+
+				for (const [key, item] of state.items) {
+					if (!keys.has(key)) {
+						batch.skipped_effects.add(item.e);
+					}
+				}
+
+				batch.add_callback(commit);
+			} else {
+				commit();
 			}
 		}
 
@@ -259,8 +338,10 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 /**
  * Add, remove, or reorder items output by an each block as its input changes
  * @template V
+ * @param {Effect} each_effect
  * @param {Array<V>} array
  * @param {EachState} state
+ * @param {Map<any, EachItem>} offscreen_items
  * @param {Element | Comment | Text} anchor
  * @param {(anchor: Node, item: MaybeSource<V>, index: number | Source<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
@@ -268,7 +349,17 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
  * @param {() => V[]} get_collection
  * @returns {void}
  */
-function reconcile(array, state, anchor, render_fn, flags, get_key, get_collection) {
+function reconcile(
+	each_effect,
+	array,
+	state,
+	offscreen_items,
+	anchor,
+	render_fn,
+	flags,
+	get_key,
+	get_collection
+) {
 	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
 	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
 
@@ -320,23 +411,39 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 	for (i = 0; i < length; i += 1) {
 		value = array[i];
 		key = get_key(value, i);
+
 		item = items.get(key);
 
 		if (item === undefined) {
-			var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
-
-			prev = create_item(
-				child_anchor,
-				state,
-				prev,
-				prev === null ? state.first : prev.next,
-				value,
-				key,
-				i,
-				render_fn,
-				flags,
-				get_collection
-			);
+			var pending = offscreen_items.get(key);
+
+			if (pending !== undefined) {
+				offscreen_items.delete(key);
+				items.set(key, pending);
+
+				var next = prev ? prev.next : current;
+
+				link(state, prev, pending);
+				link(state, pending, next);
+
+				move(pending, next, anchor);
+				prev = pending;
+			} else {
+				var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
+
+				prev = create_item(
+					child_anchor,
+					state,
+					prev,
+					prev === null ? state.first : prev.next,
+					value,
+					key,
+					i,
+					render_fn,
+					flags,
+					get_collection
+				);
+			}
 
 			items.set(key, prev);
 
@@ -455,7 +562,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 				}
 			}
 
-			pause_effects(state, to_destroy, controlled_anchor, items);
+			pause_effects(state, to_destroy, controlled_anchor);
 		}
 	}
 
@@ -468,8 +575,14 @@ function reconcile(array, state, anchor, render_fn, flags, get_key, get_collecti
 		});
 	}
 
-	/** @type {Effect} */ (active_effect).first = state.first && state.first.e;
-	/** @type {Effect} */ (active_effect).last = prev && prev.e;
+	each_effect.first = state.first && state.first.e;
+	each_effect.last = prev && prev.e;
+
+	for (var unused of offscreen_items.values()) {
+		destroy_effect(unused.e);
+	}
+
+	offscreen_items.clear();
 }
 
 /**
@@ -493,7 +606,7 @@ function update_item(item, value, index, type) {
 
 /**
  * @template V
- * @param {Node} anchor
+ * @param {Node | null} anchor
  * @param {EachState} state
  * @param {EachItem | null} prev
  * @param {EachItem | null} next
@@ -503,6 +616,7 @@ function update_item(item, value, index, type) {
  * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
  * @param {() => V[]} get_collection
+ * @param {boolean} [deferred]
  * @returns {EachItem}
  */
 function create_item(
@@ -515,7 +629,8 @@ function create_item(
 	index,
 	render_fn,
 	flags,
-	get_collection
+	get_collection,
+	deferred
 ) {
 	var previous_each_item = current_each_item;
 	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
@@ -549,13 +664,20 @@ function create_item(
 	current_each_item = item;
 
 	try {
-		item.e = branch(() => render_fn(anchor, v, i, get_collection), hydrating);
+		if (anchor === null) {
+			var fragment = document.createDocumentFragment();
+			fragment.append((anchor = create_text()));
+		}
+
+		item.e = branch(() => render_fn(/** @type {Node} */ (anchor), v, i, get_collection), hydrating);
 
 		item.e.prev = prev && prev.e;
 		item.e.next = next && next.e;
 
 		if (prev === null) {
-			state.first = item;
+			if (!deferred) {
+				state.first = item;
+			}
 		} else {
 			prev.next = item;
 			prev.e.next = item.e;
@@ -583,7 +705,7 @@ function move(item, next, anchor) {
 	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
 	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
 
-	while (node !== end) {
+	while (node !== null && node !== end) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
 		dest.before(node);
 		node = next_node;
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index bf1098c3f4..6ba9ad4936 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -1,4 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import {
 	hydrate_next,
@@ -10,16 +11,20 @@ import {
 	set_hydrating
 } from '../hydration.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
-import { HYDRATION_START, HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { create_text, should_defer_append } from '../operations.js';
+import { current_batch } from '../../reactivity/batch.js';
+
+// TODO reinstate https://github.com/sveltejs/svelte/pull/15250
 
 /**
  * @param {TemplateNode} node
- * @param {(branch: (fn: (anchor: Node, elseif?: [number,number]) => void, flag?: boolean) => void) => void} fn
- * @param {[number,number]} [elseif]
+ * @param {(branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
  * @returns {void}
  */
-export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
-	if (hydrating && root_index === 0) {
+export function if_block(node, fn, elseif = false) {
+	if (hydrating) {
 		hydrate_next();
 	}
 
@@ -34,45 +39,56 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
 	/** @type {UNINITIALIZED | boolean | null} */
 	var condition = UNINITIALIZED;
 
-	var flags = root_index > 0 ? EFFECT_TRANSPARENT : 0;
+	var flags = elseif ? EFFECT_TRANSPARENT : 0;
 
 	var has_branch = false;
 
-	const set_branch = (
-		/** @type {(anchor: Node, elseif?: [number,number]) => void} */ fn,
-		flag = true
-	) => {
+	const set_branch = (/** @type {(anchor: Node) => void} */ fn, flag = true) => {
 		has_branch = true;
 		update_branch(flag, fn);
 	};
 
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
+
+	function commit() {
+		if (offscreen_fragment !== null) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		var active = condition ? consequent_effect : alternate_effect;
+		var inactive = condition ? alternate_effect : consequent_effect;
+
+		if (active) {
+			resume_effect(active);
+		}
+
+		if (inactive) {
+			pause_effect(inactive, () => {
+				if (condition) {
+					alternate_effect = null;
+				} else {
+					consequent_effect = null;
+				}
+			});
+		}
+	}
+
 	const update_branch = (
 		/** @type {boolean | null} */ new_condition,
-		/** @type {null | ((anchor: Node, elseif?: [number,number]) => void)} */ fn
+		/** @type {null | ((anchor: Node) => void)} */ fn
 	) => {
 		if (condition === (condition = new_condition)) return;
 
 		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		let mismatch = false;
 
-		if (hydrating && hydrate_index !== -1) {
-			if (root_index === 0) {
-				const data = read_hydration_instruction(anchor);
-
-				if (data === HYDRATION_START) {
-					hydrate_index = 0;
-				} else if (data === HYDRATION_START_ELSE) {
-					hydrate_index = Infinity;
-				} else {
-					hydrate_index = parseInt(data.substring(1));
-					if (hydrate_index !== hydrate_index) {
-						// if hydrate_index is NaN
-						// we set an invalid index to force mismatch
-						hydrate_index = condition ? Infinity : -1;
-					}
-				}
-			}
-			const is_else = hydrate_index > root_index;
+		if (hydrating) {
+			const is_else = read_hydration_instruction(anchor) === HYDRATION_START_ELSE;
 
 			if (!!condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
@@ -82,34 +98,35 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) {
 				set_hydrate_node(anchor);
 				set_hydrating(false);
 				mismatch = true;
-				hydrate_index = -1; // ignore hydration in next else if
 			}
 		}
 
-		if (condition) {
-			if (consequent_effect) {
-				resume_effect(consequent_effect);
-			} else if (fn) {
-				consequent_effect = branch(() => fn(anchor));
-			}
+		var defer = should_defer_append();
+		var target = anchor;
 
-			if (alternate_effect) {
-				pause_effect(alternate_effect, () => {
-					alternate_effect = null;
-				});
-			}
+		if (defer) {
+			offscreen_fragment = document.createDocumentFragment();
+			offscreen_fragment.append((target = create_text()));
+		}
+
+		if (condition) {
+			consequent_effect ??= fn && branch(() => fn(target));
 		} else {
-			if (alternate_effect) {
-				resume_effect(alternate_effect);
-			} else if (fn) {
-				alternate_effect = branch(() => fn(anchor, [root_index + 1, hydrate_index]));
-			}
+			alternate_effect ??= fn && branch(() => fn(target));
+		}
 
-			if (consequent_effect) {
-				pause_effect(consequent_effect, () => {
-					consequent_effect = null;
-				});
-			}
+		if (defer) {
+			var batch = /** @type {Batch} */ (current_batch);
+
+			var active = condition ? consequent_effect : alternate_effect;
+			var inactive = condition ? alternate_effect : consequent_effect;
+
+			if (active) batch.skipped_effects.delete(active);
+			if (inactive) batch.skipped_effects.add(inactive);
+
+			batch.add_callback(commit);
+		} else {
+			commit();
 		}
 
 		if (mismatch) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index a697163548..5e3c42019f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,9 +1,12 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { UNINITIALIZED } from '../../../../constants.js';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
 import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
 import { is_runes } from '../../context.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_text, should_defer_append } from '../operations.js';
+import { current_batch } from '../../reactivity/batch.js';
 
 /**
  * @template V
@@ -12,7 +15,7 @@ import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
  * @param {(anchor: Node) => TemplateNode | void} render_fn
  * @returns {void}
  */
-export function key_block(node, get_key, render_fn) {
+export function key(node, get_key, render_fn) {
 	if (hydrating) {
 		hydrate_next();
 	}
@@ -25,15 +28,48 @@ export function key_block(node, get_key, render_fn) {
 	/** @type {Effect} */
 	var effect;
 
+	/** @type {Effect} */
+	var pending_effect;
+
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
+
 	var changed = is_runes() ? not_equal : safe_not_equal;
 
+	function commit() {
+		if (effect) {
+			pause_effect(effect);
+		}
+
+		if (offscreen_fragment !== null) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		effect = pending_effect;
+	}
+
 	block(() => {
 		if (changed(key, (key = get_key()))) {
-			if (effect) {
-				pause_effect(effect);
+			var target = anchor;
+
+			var defer = should_defer_append();
+
+			if (defer) {
+				offscreen_fragment = document.createDocumentFragment();
+				offscreen_fragment.append((target = create_text()));
 			}
 
-			effect = branch(() => render_fn(anchor));
+			pending_effect = branch(() => render_fn(target));
+
+			if (defer) {
+				/** @type {Batch} */ (current_batch).add_callback(commit);
+			} else {
+				commit();
+			}
 		}
 	});
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index ad21436505..f16da9c427 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
@@ -1,7 +1,10 @@
 /** @import { TemplateNode, Dom, Effect } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
+import { current_batch } from '../../reactivity/batch.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_text, should_defer_append } from '../operations.js';
 
 /**
  * @template P
@@ -24,16 +27,50 @@ export function component(node, get_component, render_fn) {
 	/** @type {Effect | null} */
 	var effect;
 
-	block(() => {
-		if (component === (component = get_component())) return;
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
 
+	/** @type {Effect | null} */
+	var pending_effect = null;
+
+	function commit() {
 		if (effect) {
 			pause_effect(effect);
 			effect = null;
 		}
 
+		if (offscreen_fragment) {
+			// remove the anchor
+			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
+
+			anchor.before(offscreen_fragment);
+			offscreen_fragment = null;
+		}
+
+		effect = pending_effect;
+		pending_effect = null;
+	}
+
+	block(() => {
+		if (component === (component = get_component())) return;
+
+		var defer = should_defer_append();
+
 		if (component) {
-			effect = branch(() => render_fn(anchor, component));
+			var target = anchor;
+
+			if (defer) {
+				offscreen_fragment = document.createDocumentFragment();
+				offscreen_fragment.append((target = create_text()));
+			}
+
+			pending_effect = branch(() => render_fn(target, component));
+		}
+
+		if (defer) {
+			/** @type {Batch} */ (current_batch).add_callback(commit);
+		} else {
+			commit();
 		}
 	}, EFFECT_TRANSPARENT);
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 66f484a59a..22e532f5e4 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -21,8 +21,8 @@ import { set_class } from './class.js';
 import { set_style } from './style.js';
 import { ATTACHMENT_KEY, NAMESPACE_HTML } from '../../../../constants.js';
 import { block, branch, destroy_effect, effect } from '../../reactivity/effects.js';
-import { derived } from '../../reactivity/deriveds.js';
 import { init_select, select_option } from './bindings/select.js';
+import { flatten } from '../../reactivity/async.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -462,66 +462,67 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
 /**
  * @param {Element & ElementCSSInlineStyle} element
  * @param {(...expressions: any) => Record<string | symbol, any>} fn
- * @param {Array<() => any>} thunks
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
  * @param {string} [css_hash]
  * @param {boolean} [skip_warning]
  */
 export function attribute_effect(
 	element,
 	fn,
-	thunks = [],
+	sync = [],
+	async = [],
 	css_hash,
-	skip_warning = false,
-	d = derived
+	skip_warning = false
 ) {
-	const deriveds = thunks.map(d);
+	flatten(sync, async, (values) => {
+		/** @type {Record<string | symbol, any> | undefined} */
+		var prev = undefined;
 
-	/** @type {Record<string | symbol, any> | undefined} */
-	var prev = undefined;
+		/** @type {Record<symbol, Effect>} */
+		var effects = {};
 
-	/** @type {Record<symbol, Effect>} */
-	var effects = {};
+		var is_select = element.nodeName === 'SELECT';
+		var inited = false;
 
-	var is_select = element.nodeName === 'SELECT';
-	var inited = false;
+		block(() => {
+			var next = fn(...values.map(get));
+			/** @type {Record<string | symbol, any>} */
+			var current = set_attributes(element, prev, next, css_hash, skip_warning);
 
-	block(() => {
-		var next = fn(...deriveds.map(get));
-		/** @type {Record<string | symbol, any>} */
-		var current = set_attributes(element, prev, next, css_hash, skip_warning);
+			if (inited && is_select && 'value' in next) {
+				select_option(/** @type {HTMLSelectElement} */ (element), next.value);
+			}
 
-		if (inited && is_select && 'value' in next) {
-			select_option(/** @type {HTMLSelectElement} */ (element), next.value);
-		}
+			for (let symbol of Object.getOwnPropertySymbols(effects)) {
+				if (!next[symbol]) destroy_effect(effects[symbol]);
+			}
 
-		for (let symbol of Object.getOwnPropertySymbols(effects)) {
-			if (!next[symbol]) destroy_effect(effects[symbol]);
-		}
+			for (let symbol of Object.getOwnPropertySymbols(next)) {
+				var n = next[symbol];
 
-		for (let symbol of Object.getOwnPropertySymbols(next)) {
-			var n = next[symbol];
+				if (symbol.description === ATTACHMENT_KEY && (!prev || n !== prev[symbol])) {
+					if (effects[symbol]) destroy_effect(effects[symbol]);
+					effects[symbol] = branch(() => attach(element, () => n));
+				}
 
-			if (symbol.description === ATTACHMENT_KEY && (!prev || n !== prev[symbol])) {
-				if (effects[symbol]) destroy_effect(effects[symbol]);
-				effects[symbol] = branch(() => attach(element, () => n));
+				current[symbol] = n;
 			}
 
-			current[symbol] = n;
-		}
-
-		prev = current;
-	});
+			prev = current;
+		});
 
-	if (is_select) {
-		var select = /** @type {HTMLSelectElement} */ (element);
+		if (is_select) {
+			var select = /** @type {HTMLSelectElement} */ (element);
 
-		effect(() => {
-			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
-			init_select(select);
-		});
-	}
+			effect(() => {
+				select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
+				init_select(select);
+			});
+		}
 
-	inited = true;
+		inited = true;
+	});
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index f1992007ed..7c1fccea0f 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,3 +1,4 @@
+/** @import { Batch } from '../../../reactivity/batch.js' */
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
@@ -7,6 +8,7 @@ import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
 import { untrack } from '../../../runtime.js';
 import { is_runes } from '../../../context.js';
+import { current_batch } from '../../../reactivity/batch.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -17,6 +19,8 @@ import { is_runes } from '../../../context.js';
 export function bind_value(input, get, set = get) {
 	var runes = is_runes();
 
+	var batches = new WeakSet();
+
 	listen_to_event_and_reset_event(input, 'input', (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
@@ -28,6 +32,10 @@ export function bind_value(input, get, set = get) {
 		value = is_numberlike_input(input) ? to_number(value) : value;
 		set(value);
 
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
+
 		// In runes mode, respect any validation in accessors (doesn't apply in legacy mode,
 		// because we use mutable state which ensures the render effect always runs)
 		if (runes && value !== (value = get())) {
@@ -54,6 +62,10 @@ export function bind_value(input, get, set = get) {
 		(untrack(get) == null && input.value)
 	) {
 		set(is_numberlike_input(input) ? to_number(input.value) : input.value);
+
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
 	}
 
 	render_effect(() => {
@@ -64,6 +76,15 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
+		if (input === document.activeElement && batches.has(/** @type {Batch} */ (current_batch))) {
+			// Never rewrite the contents of a focused input. We can get here if, for example,
+			// an update is deferred because of async work depending on the input:
+			//
+			// <input bind:value={query}>
+			// <p>{await find(query)}</p>
+			return;
+		}
+
 		if (is_numberlike_input(input) && value === to_number(input.value)) {
 			// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
 			return;
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 4b35f0802f..fb269e47e0 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -1,9 +1,11 @@
-/** @import { TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
 import { get_descriptor, is_extensible } from '../../shared/utils.js';
-import { TEXT_NODE } from '#client/constants';
+import { active_effect } from '../runtime.js';
+import { async_mode_flag } from '../../flags/index.js';
+import { TEXT_NODE, EFFECT_RAN } from '#client/constants';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -204,6 +206,19 @@ export function clear_text_content(node) {
 	node.textContent = '';
 }
 
+/**
+ * Returns `true` if we're updating the current block, for example `condition` in
+ * an `{#if condition}` block just changed. In this case, the branch should be
+ * appended (or removed) at the same time as other updates within the
+ * current `<svelte:boundary>`
+ */
+export function should_defer_append() {
+	if (!async_mode_flag) return false;
+
+	var flags = /** @type {Effect} */ (active_effect).f;
+	return (flags & EFFECT_RAN) !== 0;
+}
+
 /**
  *
  * @param {string} tag
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
index 378f7408ef..6c83a453d5 100644
--- a/packages/svelte/src/internal/client/error-handling.js
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -1,31 +1,42 @@
-/** @import { Effect } from '#client' */
+/** @import { Derived, Effect } from '#client' */
 /** @import { Boundary } from './dom/blocks/boundary.js' */
 import { DEV } from 'esm-env';
 import { FILENAME } from '../../constants.js';
 import { is_firefox } from './dom/operations.js';
-import { BOUNDARY_EFFECT, EFFECT_RAN } from './constants.js';
+import { ERROR_VALUE, BOUNDARY_EFFECT, EFFECT_RAN } from './constants.js';
 import { define_property, get_descriptor } from '../shared/utils.js';
-import { active_effect } from './runtime.js';
+import { active_effect, active_reaction } from './runtime.js';
+
+const adjustments = new WeakMap();
 
 /**
  * @param {unknown} error
  */
 export function handle_error(error) {
-	var effect = /** @type {Effect} */ (active_effect);
+	var effect = active_effect;
+
+	// for unowned deriveds, don't throw until we read the value
+	if (effect === null) {
+		/** @type {Derived} */ (active_reaction).f |= ERROR_VALUE;
+		return error;
+	}
 
-	if (DEV && error instanceof Error) {
-		adjust_error(error, effect);
+	if (DEV && error instanceof Error && !adjustments.has(error)) {
+		adjustments.set(error, get_adjustments(error, effect));
 	}
 
 	if ((effect.f & EFFECT_RAN) === 0) {
 		// if the error occurred while creating this subtree, we let it
 		// bubble up until it hits a boundary that can handle it
 		if ((effect.f & BOUNDARY_EFFECT) === 0) {
+			if (!effect.parent && error instanceof Error) {
+				apply_adjustments(error);
+			}
+
 			throw error;
 		}
 
-		// @ts-expect-error
-		effect.fn(error);
+		/** @type {Boundary} */ (effect.b).error(error);
 	} else {
 		// otherwise we bubble up the effect tree ourselves
 		invoke_error_boundary(error, effect);
@@ -42,27 +53,27 @@ export function invoke_error_boundary(error, effect) {
 			try {
 				/** @type {Boundary} */ (effect.b).error(error);
 				return;
-			} catch {}
+			} catch (e) {
+				error = e;
+			}
 		}
 
 		effect = effect.parent;
 	}
 
+	if (error instanceof Error) {
+		apply_adjustments(error);
+	}
+
 	throw error;
 }
 
-/** @type {WeakSet<Error>} */
-const adjusted_errors = new WeakSet();
-
 /**
  * Add useful information to the error message/stack in development
  * @param {Error} error
  * @param {Effect} effect
  */
-function adjust_error(error, effect) {
-	if (adjusted_errors.has(error)) return;
-	adjusted_errors.add(error);
-
+function get_adjustments(error, effect) {
 	const message_descriptor = get_descriptor(error, 'message');
 
 	// if the message was already changed and it's not configurable we can't change it
@@ -78,17 +89,28 @@ function adjust_error(error, effect) {
 		context = context.p;
 	}
 
-	define_property(error, 'message', {
-		value: error.message + `\n${component_stack}\n`
-	});
+	return {
+		message: error.message + `\n${component_stack}\n`,
+		stack: error.stack
+			?.split('\n')
+			.filter((line) => !line.includes('svelte/src/internal'))
+			.join('\n')
+	};
+}
+
+/**
+ * @param {Error} error
+ */
+function apply_adjustments(error) {
+	const adjusted = adjustments.get(error);
+
+	if (adjusted) {
+		define_property(error, 'message', {
+			value: adjusted.message
+		});
 
-	if (error.stack) {
-		// Filter out internal modules
 		define_property(error, 'stack', {
-			value: error.stack
-				.split('\n')
-				.filter((line) => !line.includes('svelte/src/internal'))
-				.join('\n')
+			value: adjusted.stack
 		});
 	}
 }
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 5c3f5340e1..937971da5e 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -2,6 +2,24 @@
 
 import { DEV } from 'esm-env';
 
+export *  from '../shared/errors.js';
+
+/**
+ * Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
+ * @returns {never}
+ */
+export function async_derived_orphan() {
+	if (DEV) {
+		const error = new Error(`async_derived_orphan\nCannot create a \`$derived(...)\` with an \`await\` expression outside of an effect tree\nhttps://svelte.dev/e/async_derived_orphan`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/async_derived_orphan`);
+	}
+}
+
 /**
  * Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
  * @returns {never}
@@ -180,12 +198,28 @@ export function effect_orphan(rune) {
 }
 
 /**
- * Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+ * `$effect.pending()` can only be called inside an effect or derived
+ * @returns {never}
+ */
+export function effect_pending_outside_reaction() {
+	if (DEV) {
+		const error = new Error(`effect_pending_outside_reaction\n\`$effect.pending()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/effect_pending_outside_reaction`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/effect_pending_outside_reaction`);
+	}
+}
+
+/**
+ * Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
  * @returns {never}
  */
 export function effect_update_depth_exceeded() {
 	if (DEV) {
-		const error = new Error(`effect_update_depth_exceeded\nMaximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops\nhttps://svelte.dev/e/effect_update_depth_exceeded`);
+		const error = new Error(`effect_update_depth_exceeded\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\nhttps://svelte.dev/e/effect_update_depth_exceeded`);
 
 		error.name = 'Svelte error';
 
@@ -195,6 +229,22 @@ export function effect_update_depth_exceeded() {
 	}
 }
 
+/**
+ * Cannot use `flushSync` inside an effect
+ * @returns {never}
+ */
+export function flush_sync_in_effect() {
+	if (DEV) {
+		const error = new Error(`flush_sync_in_effect\nCannot use \`flushSync\` inside an effect\nhttps://svelte.dev/e/flush_sync_in_effect`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/flush_sync_in_effect`);
+	}
+}
+
 /**
  * `getAbortSignal()` can only be called inside an effect or derived
  * @returns {never}
@@ -311,6 +361,22 @@ export function rune_outside_svelte(rune) {
 	}
 }
 
+/**
+ * `setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
+ * @returns {never}
+ */
+export function set_context_after_init() {
+	if (DEV) {
+		const error = new Error(`set_context_after_init\n\`setContext\` must be called when a component first initializes, not in a subsequent effect or after an \`await\` expression\nhttps://svelte.dev/e/set_context_after_init`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/set_context_after_init`);
+	}
+}
+
 /**
  * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
  * @returns {never}
@@ -357,4 +423,20 @@ export function state_unsafe_mutation() {
 	} else {
 		throw new Error(`https://svelte.dev/e/state_unsafe_mutation`);
 	}
+}
+
+/**
+ * A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
+ * @returns {never}
+ */
+export function svelte_boundary_reset_onerror() {
+	if (DEV) {
+		const error = new Error(`svelte_boundary_reset_onerror\nA \`<svelte:boundary>\` \`reset\` function cannot be called while an error is still being handled\nhttps://svelte.dev/e/svelte_boundary_reset_onerror`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`);
+	}
 }
\ No newline at end of file
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 576a30fa77..90f0f9baac 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -9,10 +9,11 @@ export { create_ownership_validator } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
 export { trace, tag, tag_proxy } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
+export { async } from './dom/blocks/async.js';
 export { validate_snippet_args } from './dev/validation.js';
 export { await_block as await } from './dom/blocks/await.js';
 export { if_block as if } from './dom/blocks/if.js';
-export { key_block as key } from './dom/blocks/key.js';
+export { key } from './dom/blocks/key.js';
 export { css_props } from './dom/blocks/css-props.js';
 export { index, each } from './dom/blocks/each.js';
 export { html } from './dom/blocks/html.js';
@@ -97,8 +98,15 @@ export {
 	props_id,
 	with_script
 } from './dom/template.js';
-export { user_derived as derived, derived_safe_equal } from './reactivity/deriveds.js';
+export { save, track_reactivity_loss } from './reactivity/async.js';
+export { flushSync as flush, suspend } from './reactivity/batch.js';
 export {
+	async_derived,
+	user_derived as derived,
+	derived_safe_equal
+} from './reactivity/deriveds.js';
+export {
+	aborted,
 	effect_tracking,
 	effect_root,
 	legacy_pre_effect,
@@ -129,13 +137,12 @@ export {
 	update_store,
 	mark_store_binding
 } from './reactivity/store.js';
-export { boundary } from './dom/blocks/boundary.js';
+export { boundary, pending } from './dom/blocks/boundary.js';
+export { invalidate_inner_signals } from './legacy.js';
 export { set_text } from './render.js';
 export {
 	get,
 	safe_get,
-	invalidate_inner_signals,
-	flushSync as flush,
 	tick,
 	untrack,
 	exclude_from_object,
diff --git a/packages/svelte/src/internal/client/legacy.js b/packages/svelte/src/internal/client/legacy.js
new file mode 100644
index 0000000000..97ad7244c0
--- /dev/null
+++ b/packages/svelte/src/internal/client/legacy.js
@@ -0,0 +1,46 @@
+/** @import { Value } from '#client' */
+import { internal_set } from './reactivity/sources.js';
+import { untrack } from './runtime.js';
+
+/**
+ * @type {Set<Value> | null}
+ * @deprecated
+ */
+export let captured_signals = null;
+
+/**
+ * Capture an array of all the signals that are read when `fn` is called
+ * @template T
+ * @param {() => T} fn
+ */
+function capture_signals(fn) {
+	var previous_captured_signals = captured_signals;
+
+	try {
+		captured_signals = new Set();
+
+		untrack(fn);
+
+		if (previous_captured_signals !== null) {
+			for (var signal of captured_signals) {
+				previous_captured_signals.add(signal);
+			}
+		}
+
+		return captured_signals;
+	} finally {
+		captured_signals = previous_captured_signals;
+	}
+}
+
+/**
+ * Invokes a function and captures all signals that are read during the invocation,
+ * then invalidates them.
+ * @param {() => any} fn
+ * @deprecated
+ */
+export function invalidate_inner_signals(fn) {
+	for (var signal of capture_signals(fn)) {
+		internal_set(signal, signal.v);
+	}
+}
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 97c8da9d33..3ae4b87ed5 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -1,6 +1,13 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { get, active_effect, active_reaction, set_active_reaction } from './runtime.js';
+import {
+	get,
+	active_effect,
+	update_version,
+	active_reaction,
+	set_update_version,
+	set_active_reaction
+} from './runtime.js';
 import {
 	array_prototype,
 	get_descriptor,
@@ -8,7 +15,13 @@ import {
 	is_array,
 	object_prototype
 } from '../shared/utils.js';
-import { state as source, set, increment } from './reactivity/sources.js';
+import {
+	state as source,
+	set,
+	increment,
+	flush_inspect_effects,
+	set_inspect_effects_deferred
+} from './reactivity/sources.js';
 import { PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
@@ -41,7 +54,7 @@ export function proxy(value) {
 	var version = source(0);
 
 	var stack = DEV && tracing_mode_flag ? get_stack('CreatedAt') : null;
-	var reaction = active_reaction;
+	var parent_version = update_version;
 
 	/**
 	 * Executes the proxy in the context of the reaction it was originally created in, if any
@@ -49,13 +62,23 @@ export function proxy(value) {
 	 * @param {() => T} fn
 	 */
 	var with_parent = (fn) => {
-		var previous_reaction = active_reaction;
-		set_active_reaction(reaction);
+		if (update_version === parent_version) {
+			return fn();
+		}
+
+		// child source is being created after the initial proxy —
+		// prevent it from being associated with the current reaction
+		var reaction = active_reaction;
+		var version = update_version;
+
+		set_active_reaction(null);
+		set_update_version(parent_version);
 
-		/** @type {T} */
 		var result = fn();
 
-		set_active_reaction(previous_reaction);
+		set_active_reaction(reaction);
+		set_update_version(version);
+
 		return result;
 	};
 
@@ -63,6 +86,9 @@ export function proxy(value) {
 		// We need to create the length source eagerly to ensure that
 		// mutations to the array are properly synced with our proxy
 		sources.set('length', source(/** @type {any[]} */ (value).length, stack));
+		if (DEV) {
+			value = /** @type {any} */ (inspectable_array(/** @type {any[]} */ (value)));
+		}
 	}
 
 	/** Used in dev for $inspect.trace() */
@@ -125,16 +151,6 @@ export function proxy(value) {
 					}
 				}
 			} else {
-				// When working with arrays, we need to also ensure we update the length when removing
-				// an indexed property
-				if (is_proxied_array && typeof prop === 'string') {
-					var ls = /** @type {Source<number>} */ (sources.get('length'));
-					var n = Number(prop);
-
-					if (Number.isInteger(n) && n < ls.v) {
-						set(ls, n);
-					}
-				}
 				set(s, UNINITIALIZED);
 				increment(version);
 			}
@@ -371,3 +387,42 @@ export function get_proxied_value(value) {
 export function is(a, b) {
 	return Object.is(get_proxied_value(a), get_proxied_value(b));
 }
+
+const ARRAY_MUTATING_METHODS = new Set([
+	'copyWithin',
+	'fill',
+	'pop',
+	'push',
+	'reverse',
+	'shift',
+	'sort',
+	'splice',
+	'unshift'
+]);
+
+/**
+ * Wrap array mutating methods so $inspect is triggered only once and
+ * to prevent logging an array in intermediate state (e.g. with an empty slot)
+ * @param {any[]} array
+ */
+function inspectable_array(array) {
+	return new Proxy(array, {
+		get(target, prop, receiver) {
+			var value = Reflect.get(target, prop, receiver);
+			if (!ARRAY_MUTATING_METHODS.has(/** @type {string} */ (prop))) {
+				return value;
+			}
+
+			/**
+			 * @this {any[]}
+			 * @param {any[]} args
+			 */
+			return function (...args) {
+				set_inspect_effects_deferred();
+				var result = value.apply(this, args);
+				flush_inspect_effects();
+				return result;
+			};
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
new file mode 100644
index 0000000000..c200f10dba
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -0,0 +1,127 @@
+/** @import { Effect, Value } from '#client' */
+
+import { DESTROYED } from '#client/constants';
+import { DEV } from 'esm-env';
+import { component_context, is_runes, set_component_context } from '../context.js';
+import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import { invoke_error_boundary } from '../error-handling.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../runtime.js';
+import { current_batch } from './batch.js';
+import {
+	async_derived,
+	current_async_effect,
+	derived,
+	derived_safe_equal,
+	set_from_async_derived
+} from './deriveds.js';
+
+/**
+ *
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {(values: Value[]) => any} fn
+ */
+export function flatten(sync, async, fn) {
+	const d = is_runes() ? derived : derived_safe_equal;
+
+	if (async.length === 0) {
+		fn(sync.map(d));
+		return;
+	}
+
+	var batch = current_batch;
+	var parent = /** @type {Effect} */ (active_effect);
+
+	var restore = capture();
+	var boundary = get_pending_boundary();
+
+	Promise.all(async.map((expression) => async_derived(expression)))
+		.then((result) => {
+			batch?.activate();
+
+			restore();
+
+			try {
+				fn([...sync.map(d), ...result]);
+			} catch (error) {
+				// ignore errors in blocks that have already been destroyed
+				if ((parent.f & DESTROYED) === 0) {
+					invoke_error_boundary(error, parent);
+				}
+			}
+
+			batch?.deactivate();
+			unset_context();
+		})
+		.catch((error) => {
+			boundary.error(error);
+		});
+}
+
+/**
+ * Captures the current effect context so that we can restore it after
+ * some asynchronous work has happened (so that e.g. `await a + b`
+ * causes `b` to be registered as a dependency).
+ */
+function capture() {
+	var previous_effect = active_effect;
+	var previous_reaction = active_reaction;
+	var previous_component_context = component_context;
+
+	return function restore() {
+		set_active_effect(previous_effect);
+		set_active_reaction(previous_reaction);
+		set_component_context(previous_component_context);
+
+		if (DEV) {
+			set_from_async_derived(null);
+		}
+	};
+}
+
+/**
+ * Wraps an `await` expression in such a way that the effect context that was
+ * active before the expression evaluated can be reapplied afterwards —
+ * `await a + b` becomes `(await $.save(a))() + b`
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
+export async function save(promise) {
+	var restore = capture();
+	var value = await promise;
+
+	return () => {
+		restore();
+		return value;
+	};
+}
+
+/**
+ * Reset `current_async_effect` after the `promise` resolves, so
+ * that we can emit `await_reactivity_loss` warnings
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
+export async function track_reactivity_loss(promise) {
+	var previous_async_effect = current_async_effect;
+	var value = await promise;
+
+	return () => {
+		set_from_async_derived(previous_async_effect);
+		return value;
+	};
+}
+
+export function unset_context() {
+	set_active_effect(null);
+	set_active_reaction(null);
+	set_component_context(null);
+	if (DEV) set_from_async_derived(null);
+}
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
new file mode 100644
index 0000000000..ec082bb595
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -0,0 +1,633 @@
+/** @import { Derived, Effect, Source } from '#client' */
+import {
+	BLOCK_EFFECT,
+	BRANCH_EFFECT,
+	CLEAN,
+	DESTROYED,
+	DIRTY,
+	EFFECT,
+	ASYNC,
+	INERT,
+	RENDER_EFFECT,
+	ROOT_EFFECT,
+	USER_EFFECT
+} from '#client/constants';
+import { async_mode_flag } from '../../flags/index.js';
+import { deferred, define_property } from '../../shared/utils.js';
+import { get_pending_boundary } from '../dom/blocks/boundary.js';
+import {
+	active_effect,
+	is_dirty,
+	is_updating_effect,
+	set_is_updating_effect,
+	set_signal_status,
+	update_effect,
+	write_version
+} from '../runtime.js';
+import * as e from '../errors.js';
+import { flush_tasks } from '../dom/task.js';
+import { DEV } from 'esm-env';
+import { invoke_error_boundary } from '../error-handling.js';
+import { old_values } from './sources.js';
+import { unlink_effect } from './effects.js';
+import { unset_context } from './async.js';
+
+/** @type {Set<Batch>} */
+const batches = new Set();
+
+/** @type {Batch | null} */
+export let current_batch = null;
+
+/**
+ * When time travelling, we re-evaluate deriveds based on the temporary
+ * values of their dependencies rather than their actual values, and cache
+ * the results in this map rather than on the deriveds themselves
+ * @type {Map<Derived, any> | null}
+ */
+export let batch_deriveds = null;
+
+/** @type {Set<() => void>} */
+export let effect_pending_updates = new Set();
+
+/** @type {Array<() => void>} */
+let tasks = [];
+
+function dequeue() {
+	const task = /** @type {() => void} */ (tasks.shift());
+
+	if (tasks.length > 0) {
+		queueMicrotask(dequeue);
+	}
+
+	task();
+}
+
+/** @type {Effect[]} */
+let queued_root_effects = [];
+
+/** @type {Effect | null} */
+let last_scheduled_effect = null;
+
+let is_flushing = false;
+
+export class Batch {
+	/**
+	 * The current values of any sources that are updated in this batch
+	 * They keys of this map are identical to `this.#previous`
+	 * @type {Map<Source, any>}
+	 */
+	#current = new Map();
+
+	/**
+	 * The values of any sources that are updated in this batch _before_ those updates took place.
+	 * They keys of this map are identical to `this.#current`
+	 * @type {Map<Source, any>}
+	 */
+	#previous = new Map();
+
+	/**
+	 * When the batch is committed (and the DOM is updated), we need to remove old branches
+	 * and append new ones by calling the functions added inside (if/each/key/etc) blocks
+	 * @type {Set<() => void>}
+	 */
+	#callbacks = new Set();
+
+	/**
+	 * The number of async effects that are currently in flight
+	 */
+	#pending = 0;
+
+	/**
+	 * A deferred that resolves when the batch is committed, used with `settled()`
+	 * TODO replace with Promise.withResolvers once supported widely enough
+	 * @type {{ promise: Promise<void>, resolve: (value?: any) => void, reject: (reason: unknown) => void } | null}
+	 */
+	#deferred = null;
+
+	/**
+	 * True if an async effect inside this batch resolved and
+	 * its parent branch was already deleted
+	 */
+	#neutered = false;
+
+	/**
+	 * Async effects (created inside `async_derived`) encountered during processing.
+	 * These run after the rest of the batch has updated, since they should
+	 * always have the latest values
+	 * @type {Effect[]}
+	 */
+	#async_effects = [];
+
+	/**
+	 * The same as `#async_effects`, but for effects inside a newly-created
+	 * `<svelte:boundary>` — these do not prevent the batch from committing
+	 * @type {Effect[]}
+	 */
+	#boundary_async_effects = [];
+
+	/**
+	 * Template effects and `$effect.pre` effects, which run when
+	 * a batch is committed
+	 * @type {Effect[]}
+	 */
+	#render_effects = [];
+
+	/**
+	 * The same as `#render_effects`, but for `$effect` (which runs after)
+	 * @type {Effect[]}
+	 */
+	#effects = [];
+
+	/**
+	 * Block effects, which may need to re-run on subsequent flushes
+	 * in order to update internal sources (e.g. each block items)
+	 * @type {Effect[]}
+	 */
+	#block_effects = [];
+
+	/**
+	 * A set of branches that still exist, but will be destroyed when this batch
+	 * is committed — we skip over these during `process`
+	 * @type {Set<Effect>}
+	 */
+	skipped_effects = new Set();
+
+	/**
+	 *
+	 * @param {Effect[]} root_effects
+	 */
+	#process(root_effects) {
+		queued_root_effects = [];
+
+		/** @type {Map<Source, { v: unknown, wv: number }> | null} */
+		var current_values = null;
+
+		// if there are multiple batches, we are 'time travelling' —
+		// we need to undo the changes belonging to any batch
+		// other than the current one
+		if (batches.size > 1) {
+			current_values = new Map();
+			batch_deriveds = new Map();
+
+			for (const [source, current] of this.#current) {
+				current_values.set(source, { v: source.v, wv: source.wv });
+				source.v = current;
+			}
+
+			for (const batch of batches) {
+				if (batch === this) continue;
+
+				for (const [source, previous] of batch.#previous) {
+					if (!current_values.has(source)) {
+						current_values.set(source, { v: source.v, wv: source.wv });
+						source.v = previous;
+					}
+				}
+			}
+		}
+
+		for (const root of root_effects) {
+			this.#traverse_effect_tree(root);
+		}
+
+		// if we didn't start any new async work, and no async work
+		// is outstanding from a previous flush, commit
+		if (this.#async_effects.length === 0 && this.#pending === 0) {
+			var render_effects = this.#render_effects;
+			var effects = this.#effects;
+
+			this.#render_effects = [];
+			this.#effects = [];
+			this.#block_effects = [];
+
+			this.#commit();
+
+			flush_queued_effects(render_effects);
+			flush_queued_effects(effects);
+
+			this.#deferred?.resolve();
+		} else {
+			// otherwise mark effects clean so they get scheduled on the next run
+			for (const e of this.#render_effects) set_signal_status(e, CLEAN);
+			for (const e of this.#effects) set_signal_status(e, CLEAN);
+			for (const e of this.#block_effects) set_signal_status(e, CLEAN);
+		}
+
+		if (current_values) {
+			for (const [source, { v, wv }] of current_values) {
+				// reset the source to the current value (unless
+				// it got a newer value as a result of effects running)
+				if (source.wv <= wv) {
+					source.v = v;
+				}
+			}
+
+			batch_deriveds = null;
+		}
+
+		for (const effect of this.#async_effects) {
+			update_effect(effect);
+		}
+
+		for (const effect of this.#boundary_async_effects) {
+			update_effect(effect);
+		}
+
+		this.#async_effects = [];
+		this.#boundary_async_effects = [];
+	}
+
+	/**
+	 * Traverse the effect tree, executing effects or stashing
+	 * them for later execution as appropriate
+	 * @param {Effect} root
+	 */
+	#traverse_effect_tree(root) {
+		root.f ^= CLEAN;
+
+		var effect = root.first;
+
+		while (effect !== null) {
+			var flags = effect.f;
+			var is_branch = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0;
+			var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
+
+			var skip = is_skippable_branch || (flags & INERT) !== 0 || this.skipped_effects.has(effect);
+
+			if (!skip && effect.fn !== null) {
+				if (is_branch) {
+					effect.f ^= CLEAN;
+				} else if ((flags & EFFECT) !== 0) {
+					this.#effects.push(effect);
+				} else if (async_mode_flag && (flags & RENDER_EFFECT) !== 0) {
+					this.#render_effects.push(effect);
+				} else if (is_dirty(effect)) {
+					if ((flags & ASYNC) !== 0) {
+						var effects = effect.b?.pending ? this.#boundary_async_effects : this.#async_effects;
+						effects.push(effect);
+					} else {
+						if ((effect.f & BLOCK_EFFECT) !== 0) this.#block_effects.push(effect);
+						update_effect(effect);
+					}
+				}
+
+				var child = effect.first;
+
+				if (child !== null) {
+					effect = child;
+					continue;
+				}
+			}
+
+			var parent = effect.parent;
+			effect = effect.next;
+
+			while (effect === null && parent !== null) {
+				effect = parent.next;
+				parent = parent.parent;
+			}
+		}
+	}
+
+	/**
+	 * Associate a change to a given source with the current
+	 * batch, noting its previous and current values
+	 * @param {Source} source
+	 * @param {any} value
+	 */
+	capture(source, value) {
+		if (!this.#previous.has(source)) {
+			this.#previous.set(source, value);
+		}
+
+		this.#current.set(source, source.v);
+	}
+
+	activate() {
+		current_batch = this;
+	}
+
+	deactivate() {
+		current_batch = null;
+
+		for (const update of effect_pending_updates) {
+			effect_pending_updates.delete(update);
+			update();
+
+			if (current_batch !== null) {
+				// only do one at a time
+				break;
+			}
+		}
+	}
+
+	neuter() {
+		this.#neutered = true;
+	}
+
+	flush() {
+		if (queued_root_effects.length > 0) {
+			this.flush_effects();
+		} else {
+			this.#commit();
+		}
+
+		if (current_batch !== this) {
+			// this can happen if a `flushSync` occurred during `this.flush_effects()`,
+			// which is permitted in legacy mode despite being a terrible idea
+			return;
+		}
+
+		if (this.#pending === 0) {
+			batches.delete(this);
+		}
+
+		this.deactivate();
+	}
+
+	flush_effects() {
+		var was_updating_effect = is_updating_effect;
+		is_flushing = true;
+
+		try {
+			var flush_count = 0;
+			set_is_updating_effect(true);
+
+			while (queued_root_effects.length > 0) {
+				if (flush_count++ > 1000) {
+					if (DEV) {
+						var updates = new Map();
+
+						for (const source of this.#current.keys()) {
+							for (const [stack, update] of source.updated ?? []) {
+								var entry = updates.get(stack);
+
+								if (!entry) {
+									entry = { error: update.error, count: 0 };
+									updates.set(stack, entry);
+								}
+
+								entry.count += update.count;
+							}
+						}
+
+						for (const update of updates.values()) {
+							// eslint-disable-next-line no-console
+							console.error(update.error);
+						}
+					}
+
+					infinite_loop_guard();
+				}
+
+				this.#process(queued_root_effects);
+				old_values.clear();
+			}
+		} finally {
+			is_flushing = false;
+			set_is_updating_effect(was_updating_effect);
+
+			last_scheduled_effect = null;
+		}
+	}
+
+	/**
+	 * Append and remove branches to/from the DOM
+	 */
+	#commit() {
+		if (!this.#neutered) {
+			for (const fn of this.#callbacks) {
+				fn();
+			}
+		}
+
+		this.#callbacks.clear();
+	}
+
+	increment() {
+		this.#pending += 1;
+	}
+
+	decrement() {
+		this.#pending -= 1;
+
+		if (this.#pending === 0) {
+			for (const e of this.#render_effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (const e of this.#effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			for (const e of this.#block_effects) {
+				set_signal_status(e, DIRTY);
+				schedule_effect(e);
+			}
+
+			this.#render_effects = [];
+			this.#effects = [];
+
+			this.flush();
+		} else {
+			this.deactivate();
+		}
+	}
+
+	/** @param {() => void} fn */
+	add_callback(fn) {
+		this.#callbacks.add(fn);
+	}
+
+	settled() {
+		return (this.#deferred ??= deferred()).promise;
+	}
+
+	static ensure(autoflush = true) {
+		if (current_batch === null) {
+			const batch = (current_batch = new Batch());
+			batches.add(current_batch);
+
+			if (autoflush) {
+				Batch.enqueue(() => {
+					if (current_batch !== batch) {
+						// a flushSync happened in the meantime
+						return;
+					}
+
+					batch.flush();
+				});
+			}
+		}
+
+		return current_batch;
+	}
+
+	/** @param {() => void} task */
+	static enqueue(task) {
+		if (tasks.length === 0) {
+			queueMicrotask(dequeue);
+		}
+
+		tasks.unshift(task);
+	}
+}
+
+/**
+ * Synchronously flush any pending updates.
+ * Returns void if no callback is provided, otherwise returns the result of calling the callback.
+ * @template [T=void]
+ * @param {(() => T) | undefined} [fn]
+ * @returns {T}
+ */
+export function flushSync(fn) {
+	if (async_mode_flag && active_effect !== null) {
+		e.flush_sync_in_effect();
+	}
+
+	var result;
+
+	const batch = Batch.ensure(false);
+
+	if (fn) {
+		batch.flush_effects();
+
+		result = fn();
+	}
+
+	while (true) {
+		flush_tasks();
+
+		if (queued_root_effects.length === 0) {
+			if (batch === current_batch) {
+				batch.flush();
+			}
+
+			// this would be reset in `batch.flush_effects()` but since we are early returning here,
+			// we need to reset it here as well in case the first time there's 0 queued root effects
+			last_scheduled_effect = null;
+
+			return /** @type {T} */ (result);
+		}
+
+		batch.flush_effects();
+	}
+}
+
+function infinite_loop_guard() {
+	try {
+		e.effect_update_depth_exceeded();
+	} catch (error) {
+		if (DEV) {
+			// stack contains no useful information, replace it
+			define_property(error, 'stack', { value: '' });
+		}
+
+		// Best effort: invoke the boundary nearest the most recent
+		// effect and hope that it's relevant to the infinite loop
+		invoke_error_boundary(error, last_scheduled_effect);
+	}
+}
+
+/**
+ * @param {Array<Effect>} effects
+ * @returns {void}
+ */
+function flush_queued_effects(effects) {
+	var length = effects.length;
+	if (length === 0) return;
+
+	for (var i = 0; i < length; i++) {
+		var effect = effects[i];
+
+		if ((effect.f & (DESTROYED | INERT)) === 0) {
+			if (is_dirty(effect)) {
+				var wv = write_version;
+
+				update_effect(effect);
+
+				// Effects with no dependencies or teardown do not get added to the effect tree.
+				// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
+				// don't know if we need to keep them until they are executed. Doing the check
+				// here (rather than in `update_effect`) allows us to skip the work for
+				// immediate effects.
+				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
+					// if there's no teardown or abort controller we completely unlink
+					// the effect from the graph
+					if (effect.teardown === null && effect.ac === null) {
+						// remove this effect from the graph
+						unlink_effect(effect);
+					} else {
+						// keep the effect in the graph, but free up some memory
+						effect.fn = null;
+					}
+				}
+
+				// if state is written in a user effect, abort and re-schedule, lest we run
+				// effects that should be removed as a result of the state change
+				if (write_version > wv && (effect.f & USER_EFFECT) !== 0) {
+					break;
+				}
+			}
+		}
+	}
+
+	for (; i < length; i += 1) {
+		schedule_effect(effects[i]);
+	}
+}
+
+/**
+ * @param {Effect} signal
+ * @returns {void}
+ */
+export function schedule_effect(signal) {
+	var effect = (last_scheduled_effect = signal);
+
+	while (effect.parent !== null) {
+		effect = effect.parent;
+		var flags = effect.f;
+
+		// if the effect is being scheduled because a parent (each/await/etc) block
+		// updated an internal source, bail out or we'll cause a second flush
+		if (is_flushing && effect === active_effect && (flags & BLOCK_EFFECT) !== 0) {
+			return;
+		}
+
+		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+			if ((flags & CLEAN) === 0) return;
+			effect.f ^= CLEAN;
+		}
+	}
+
+	queued_root_effects.push(effect);
+}
+
+export function suspend() {
+	var boundary = get_pending_boundary();
+	var batch = /** @type {Batch} */ (current_batch);
+	var pending = boundary.pending;
+
+	boundary.update_pending_count(1);
+	if (!pending) batch.increment();
+
+	return function unsuspend() {
+		boundary.update_pending_count(-1);
+
+		if (!pending) {
+			batch.activate();
+			batch.decrement();
+		}
+
+		unset_context();
+	};
+}
+
+/**
+ * Forcibly remove all current batches, to prevent cross-talk between tests
+ */
+export function clear() {
+	batches.clear();
+}
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index e563c77534..7f730e365e 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -1,6 +1,17 @@
-/** @import { Derived, Effect } from '#client' */
+/** @import { Derived, Effect, Source } from '#client' */
+/** @import { Batch } from './batch.js'; */
 import { DEV } from 'esm-env';
-import { CLEAN, DERIVED, DIRTY, EFFECT_PRESERVED, MAYBE_DIRTY, UNOWNED } from '#client/constants';
+import {
+	ERROR_VALUE,
+	CLEAN,
+	DERIVED,
+	DIRTY,
+	EFFECT_PRESERVED,
+	MAYBE_DIRTY,
+	STALE_REACTION,
+	UNOWNED,
+	ASYNC
+} from '#client/constants';
 import {
 	active_reaction,
 	active_effect,
@@ -14,12 +25,26 @@ import {
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
-import { destroy_effect } from './effects.js';
-import { inspect_effects, set_inspect_effects } from './sources.js';
+import * as w from '../warnings.js';
+import { async_effect, destroy_effect } from './effects.js';
+import { inspect_effects, internal_set, set_inspect_effects, source } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
 import { tracing_mode_flag } from '../../flags/index.js';
+import { Boundary } from '../dom/blocks/boundary.js';
 import { component_context } from '../context.js';
 import { UNINITIALIZED } from '../../../constants.js';
+import { batch_deriveds, current_batch } from './batch.js';
+import { unset_context } from './async.js';
+
+/** @type {Effect | null} */
+export let current_async_effect = null;
+
+/** @param {Effect | null} v */
+export function set_from_async_derived(v) {
+	current_async_effect = v;
+}
+
+export const recent_async_deriveds = new Set();
 
 /**
  * @template V
@@ -65,6 +90,135 @@ export function derived(fn) {
 	return signal;
 }
 
+/**
+ * @template V
+ * @param {() => V | Promise<V>} fn
+ * @param {string} [location] If provided, print a warning if the value is not read immediately after update
+ * @returns {Promise<Source<V>>}
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function async_derived(fn, location) {
+	let parent = /** @type {Effect | null} */ (active_effect);
+
+	if (parent === null) {
+		e.async_derived_orphan();
+	}
+
+	var boundary = /** @type {Boundary} */ (parent.b);
+
+	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
+	var signal = source(/** @type {V} */ (UNINITIALIZED));
+
+	/** @type {Promise<V> | null} */
+	var prev = null;
+
+	// only suspend in async deriveds created on initialisation
+	var should_suspend = !active_reaction;
+
+	async_effect(() => {
+		if (DEV) current_async_effect = active_effect;
+
+		try {
+			var p = fn();
+		} catch (error) {
+			p = Promise.reject(error);
+		}
+
+		if (DEV) current_async_effect = null;
+
+		var r = () => p;
+		promise = prev?.then(r, r) ?? Promise.resolve(p);
+
+		prev = promise;
+
+		var batch = /** @type {Batch} */ (current_batch);
+		var pending = boundary.pending;
+
+		if (should_suspend) {
+			boundary.update_pending_count(1);
+			if (!pending) batch.increment();
+		}
+
+		/**
+		 * @param {any} value
+		 * @param {unknown} error
+		 */
+		const handler = (value, error = undefined) => {
+			prev = null;
+
+			current_async_effect = null;
+
+			if (!pending) batch.activate();
+
+			if (error) {
+				if (error !== STALE_REACTION) {
+					signal.f |= ERROR_VALUE;
+
+					// @ts-expect-error the error is the wrong type, but we don't care
+					internal_set(signal, error);
+				}
+			} else {
+				if ((signal.f & ERROR_VALUE) !== 0) {
+					signal.f ^= ERROR_VALUE;
+				}
+
+				internal_set(signal, value);
+
+				if (DEV && location !== undefined) {
+					recent_async_deriveds.add(signal);
+
+					setTimeout(() => {
+						if (recent_async_deriveds.has(signal)) {
+							w.await_waterfall(/** @type {string} */ (signal.label), location);
+							recent_async_deriveds.delete(signal);
+						}
+					});
+				}
+			}
+
+			if (should_suspend) {
+				boundary.update_pending_count(-1);
+				if (!pending) batch.decrement();
+			}
+
+			unset_context();
+		};
+
+		promise.then(handler, (e) => handler(null, e || 'unknown'));
+
+		if (batch) {
+			return () => {
+				queueMicrotask(() => batch.neuter());
+			};
+		}
+	});
+
+	if (DEV) {
+		// add a flag that lets this be printed as a derived
+		// when using `$inspect.trace()`
+		signal.f |= ASYNC;
+	}
+
+	return new Promise((fulfil) => {
+		/** @param {Promise<V>} p */
+		function next(p) {
+			function go() {
+				if (p === promise) {
+					fulfil(signal);
+				} else {
+					// if the effect re-runs before the initial promise
+					// resolves, delay resolution until we have a value
+					next(promise);
+				}
+			}
+
+			p.then(go, go);
+		}
+
+		next(promise);
+	});
+}
+
 /**
  * @template V
  * @param {() => V} fn
@@ -183,10 +337,16 @@ export function update_derived(derived) {
 
 	// don't mark derived clean if we're reading it inside a
 	// cleanup function, or it will cache a stale value
-	if (is_destroying_effect) return;
+	if (is_destroying_effect) {
+		return;
+	}
 
-	var status =
-		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
+	if (batch_deriveds !== null) {
+		batch_deriveds.set(derived, derived.v);
+	} else {
+		var status =
+			(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
 
-	set_signal_status(derived, status);
+		set_signal_status(derived, status);
+	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 51c6805529..c4edd2bf8d 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -1,13 +1,12 @@
 /** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
 import {
-	check_dirtiness,
+	is_dirty,
 	active_effect,
 	active_reaction,
 	update_effect,
 	get,
 	is_destroying_effect,
 	remove_reactions,
-	schedule_effect,
 	set_active_reaction,
 	set_is_destroying_effect,
 	set_signal_status,
@@ -32,17 +31,17 @@ import {
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_PRESERVED,
-	BOUNDARY_EFFECT,
 	STALE_REACTION,
-	USER_EFFECT
+	USER_EFFECT,
+	ASYNC
 } from '#client/constants';
-import { set } from './sources.js';
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
 import { get_next_sibling } from '../dom/operations.js';
-import { derived } from './deriveds.js';
 import { component_context, dev_current_component_function, dev_stack } from '../context.js';
+import { Batch, schedule_effect } from './batch.js';
+import { flatten } from './async.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -93,6 +92,10 @@ function create_effect(type, fn, sync, push = true) {
 		}
 	}
 
+	if (parent !== null && (parent.f & INERT) !== 0) {
+		type |= INERT;
+	}
+
 	/** @type {Effect} */
 	var effect = {
 		ctx: component_context,
@@ -137,7 +140,7 @@ function create_effect(type, fn, sync, push = true) {
 		effect.first === null &&
 		effect.nodes_start === null &&
 		effect.teardown === null &&
-		(effect.f & (EFFECT_PRESERVED | BOUNDARY_EFFECT)) === 0;
+		(effect.f & EFFECT_PRESERVED) === 0;
 
 	if (!inert && push) {
 		if (parent !== null) {
@@ -185,8 +188,13 @@ export function user_effect(fn) {
 		});
 	}
 
-	if (!active_reaction && active_effect && (active_effect.f & BRANCH_EFFECT) !== 0) {
-		// Top-level `$effect(...)` in a component — defer until mount
+	// Non-nested `$effect(...)` in a component should be deferred
+	// until the component is mounted
+	var flags = /** @type {Effect} */ (active_effect).f;
+	var defer = !active_reaction && (flags & BRANCH_EFFECT) !== 0 && (flags & EFFECT_RAN) === 0;
+
+	if (defer) {
+		// Top-level `$effect(...)` in an unmounted component — defer until mount
 		var context = /** @type {ComponentContext} */ (component_context);
 		(context.e ??= []).push(fn);
 	} else {
@@ -228,6 +236,7 @@ export function inspect_effect(fn) {
  * @returns {() => void}
  */
 export function effect_root(fn) {
+	Batch.ensure();
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
 	return () => {
@@ -241,6 +250,7 @@ export function effect_root(fn) {
  * @returns {(options?: { outro?: boolean }) => Promise<void>}
  */
 export function component_root(fn) {
+	Batch.ensure();
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
 	return (options = {}) => {
@@ -274,9 +284,10 @@ export function effect(fn) {
 export function legacy_pre_effect(deps, fn) {
 	var context = /** @type {ComponentContextLegacy} */ (component_context);
 
-	/** @type {{ effect: null | Effect, ran: boolean }} */
-	var token = { effect: null, ran: false };
-	context.l.r1.push(token);
+	/** @type {{ effect: null | Effect, ran: boolean, deps: () => any }} */
+	var token = { effect: null, ran: false, deps };
+
+	context.l.$.push(token);
 
 	token.effect = render_effect(() => {
 		deps();
@@ -286,7 +297,6 @@ export function legacy_pre_effect(deps, fn) {
 		if (token.ran) return;
 
 		token.ran = true;
-		set(context.l.r2, true);
 		untrack(fn);
 	});
 }
@@ -295,10 +305,10 @@ export function legacy_pre_effect_reset() {
 	var context = /** @type {ComponentContextLegacy} */ (component_context);
 
 	render_effect(() => {
-		if (!get(context.l.r2)) return;
-
 		// Run dirty `$:` statements
-		for (var token of context.l.r1) {
+		for (var token of context.l.$) {
+			token.deps();
+
 			var effect = token.effect;
 
 			// If the effect is CLEAN, then make it MAYBE_DIRTY. This ensures we traverse through
@@ -307,14 +317,12 @@ export function legacy_pre_effect_reset() {
 				set_signal_status(effect, MAYBE_DIRTY);
 			}
 
-			if (check_dirtiness(effect)) {
+			if (is_dirty(effect)) {
 				update_effect(effect);
 			}
 
 			token.ran = false;
 		}
-
-		context.l.r2.v = false; // set directly to avoid rerunning this effect
 	});
 }
 
@@ -322,34 +330,27 @@ export function legacy_pre_effect_reset() {
  * @param {() => void | (() => void)} fn
  * @returns {Effect}
  */
-export function render_effect(fn) {
-	return create_effect(RENDER_EFFECT, fn, true);
+export function async_effect(fn) {
+	return create_effect(ASYNC | EFFECT_PRESERVED, fn, true);
 }
 
 /**
- * @param {(...expressions: any) => void | (() => void)} fn
- * @param {Array<() => any>} thunks
- * @param {<T>(fn: () => T) => Derived<T>} d
+ * @param {() => void | (() => void)} fn
  * @returns {Effect}
  */
-export function template_effect(fn, thunks = [], d = derived) {
-	if (DEV) {
-		// wrap the effect so that we can decorate stack trace with `in {expression}`
-		// (TODO maybe there's a better approach?)
-		return render_effect(() => {
-			var outer = /** @type {Effect} */ (active_effect);
-			var inner = () => fn(...deriveds.map(get));
-
-			define_property(outer.fn, 'name', { value: '{expression}' });
-			define_property(inner, 'name', { value: '{expression}' });
-
-			const deriveds = thunks.map(d);
-			block(inner);
-		});
-	}
+export function render_effect(fn, flags = 0) {
+	return create_effect(RENDER_EFFECT | flags, fn, true);
+}
 
-	const deriveds = thunks.map(d);
-	return block(() => fn(...deriveds.map(get)));
+/**
+ * @param {(...expressions: any) => void | (() => void)} fn
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ */
+export function template_effect(fn, sync = [], async = []) {
+	flatten(sync, async, (values) => {
+		create_effect(RENDER_EFFECT, () => fn(...values.map(get)), true);
+	});
 }
 
 /**
@@ -357,7 +358,7 @@ export function template_effect(fn, thunks = [], d = derived) {
  * @param {number} flags
  */
 export function block(fn, flags = 0) {
-	var effect = create_effect(RENDER_EFFECT | BLOCK_EFFECT | flags, fn, true);
+	var effect = create_effect(BLOCK_EFFECT | flags, fn, true);
 	if (DEV) {
 		effect.dev_stack = dev_stack;
 	}
@@ -369,7 +370,7 @@ export function block(fn, flags = 0) {
  * @param {boolean} [push]
  */
 export function branch(fn, push = true) {
-	return create_effect(RENDER_EFFECT | BRANCH_EFFECT, fn, true, push);
+	return create_effect(BRANCH_EFFECT, fn, true, push);
 }
 
 /**
@@ -606,6 +607,15 @@ function resume_children(effect, local) {
 	if ((effect.f & INERT) === 0) return;
 	effect.f ^= INERT;
 
+	// If a dependency of this effect changed while it was paused,
+	// schedule the effect to update. we don't use `is_dirty`
+	// here because we don't want to eagerly recompute a derived like
+	// `{#if foo}{foo.bar()}{/if}` if `foo` is now `undefined
+	if ((effect.f & CLEAN) === 0) {
+		set_signal_status(effect, DIRTY);
+		schedule_effect(effect);
+	}
+
 	var child = effect.first;
 
 	while (child !== null) {
@@ -626,3 +636,8 @@ function resume_children(effect, local) {
 		}
 	}
 }
+
+export function aborted() {
+	var effect = /** @type {Effect} */ (active_effect);
+	return (effect.f & DESTROYED) !== 0;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index f39d45bb04..05b747a1c4 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -1,13 +1,11 @@
-/** @import { ComponentContext } from '#client' */
-/** @import { Derived, Effect, Source } from './types.js' */
+/** @import { Effect, Source } from './types.js' */
 import { DEV } from 'esm-env';
 import {
 	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED,
-	UNINITIALIZED
+	PROPS_IS_UPDATED
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../../shared/utils.js';
 import { set, source, update } from './sources.js';
@@ -393,6 +391,10 @@ export function prop(props, key, flags, fallback) {
 		return getter();
 	});
 
+	if (DEV) {
+		d.label = key;
+	}
+
 	// Capture the initial value if it's bindable
 	if (bindable) get(d);
 
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 9f08354cc0..f6b14f3360 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -5,14 +5,13 @@ import {
 	active_effect,
 	untracked_writes,
 	get,
-	schedule_effect,
 	set_untracked_writes,
 	set_signal_status,
 	untrack,
 	increment_write_version,
 	update_effect,
-	source_ownership,
-	check_dirtiness,
+	current_sources,
+	is_dirty,
 	untracking,
 	is_destroying_effect,
 	push_reaction_value
@@ -27,12 +26,14 @@ import {
 	UNOWNED,
 	MAYBE_DIRTY,
 	BLOCK_EFFECT,
-	ROOT_EFFECT
+	ROOT_EFFECT,
+	ASYNC
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { get_stack, tag_proxy } from '../dev/tracing.js';
 import { component_context, is_runes } from '../context.js';
+import { Batch, schedule_effect } from './batch.js';
 import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
 
@@ -48,6 +49,12 @@ export function set_inspect_effects(v) {
 	inspect_effects = v;
 }
 
+let inspect_effects_deferred = false;
+
+export function set_inspect_effects_deferred() {
+	inspect_effects_deferred = true;
+}
+
 /**
  * @template V
  * @param {V} v
@@ -139,8 +146,8 @@ export function set(source, value, should_proxy = false) {
 		// to ensure we error if state is set inside an inspect effect
 		(!untracking || (active_reaction.f & INSPECT_EFFECT) !== 0) &&
 		is_runes() &&
-		(active_reaction.f & (DERIVED | BLOCK_EFFECT | INSPECT_EFFECT)) !== 0 &&
-		!(source_ownership?.reaction === active_reaction && source_ownership.sources.includes(source))
+		(active_reaction.f & (DERIVED | BLOCK_EFFECT | ASYNC | INSPECT_EFFECT)) !== 0 &&
+		!current_sources?.includes(source)
 	) {
 		e.state_unsafe_mutation();
 	}
@@ -172,8 +179,25 @@ export function internal_set(source, value) {
 
 		source.v = value;
 
-		if (DEV && tracing_mode_flag) {
-			source.updated = get_stack('UpdatedAt');
+		const batch = Batch.ensure();
+		batch.capture(source, old_value);
+
+		if (DEV) {
+			if (tracing_mode_flag || active_effect !== null) {
+				const error = get_stack('UpdatedAt');
+
+				if (error !== null) {
+					source.updated ??= new Map();
+					let entry = source.updated.get(error.stack);
+
+					if (!entry) {
+						entry = { error, count: 0 };
+						source.updated.set(error.stack, entry);
+					}
+
+					entry.count++;
+				}
+			}
 
 			if (active_effect !== null) {
 				source.set_during_effect = true;
@@ -209,25 +233,32 @@ export function internal_set(source, value) {
 			}
 		}
 
-		if (DEV && inspect_effects.size > 0) {
-			const inspects = Array.from(inspect_effects);
+		if (DEV && inspect_effects.size > 0 && !inspect_effects_deferred) {
+			flush_inspect_effects();
+		}
+	}
 
-			for (const effect of inspects) {
-				// Mark clean inspect-effects as maybe dirty and then check their dirtiness
-				// instead of just updating the effects - this way we avoid overfiring.
-				if ((effect.f & CLEAN) !== 0) {
-					set_signal_status(effect, MAYBE_DIRTY);
-				}
-				if (check_dirtiness(effect)) {
-					update_effect(effect);
-				}
-			}
+	return value;
+}
+
+export function flush_inspect_effects() {
+	inspect_effects_deferred = false;
+
+	const inspects = Array.from(inspect_effects);
+
+	for (const effect of inspects) {
+		// Mark clean inspect-effects as maybe dirty and then check their dirtiness
+		// instead of just updating the effects - this way we avoid overfiring.
+		if ((effect.f & CLEAN) !== 0) {
+			set_signal_status(effect, MAYBE_DIRTY);
+		}
 
-			inspect_effects.clear();
+		if (is_dirty(effect)) {
+			update_effect(effect);
 		}
 	}
 
-	return value;
+	inspect_effects.clear();
 }
 
 /**
@@ -283,9 +314,6 @@ function mark_reactions(signal, status) {
 		var reaction = reactions[i];
 		var flags = reaction.f;
 
-		// Skip any effects that are already dirty
-		if ((flags & DIRTY) !== 0) continue;
-
 		// In legacy mode, skip the current effect to prevent infinite loops
 		if (!runes && reaction === active_effect) continue;
 
@@ -295,15 +323,15 @@ function mark_reactions(signal, status) {
 			continue;
 		}
 
-		set_signal_status(reaction, status);
+		// don't set a DIRTY reaction to MAYBE_DIRTY
+		if ((flags & DIRTY) === 0) {
+			set_signal_status(reaction, status);
+		}
 
-		// If the signal a) was previously clean or b) is an unowned derived, then mark it
-		if ((flags & (CLEAN | UNOWNED)) !== 0) {
-			if ((flags & DERIVED) !== 0) {
-				mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
-			} else {
-				schedule_effect(/** @type {Effect} */ (reaction));
-			}
+		if ((flags & DERIVED) !== 0) {
+			mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
+		} else if ((flags & DIRTY) === 0) {
+			schedule_effect(/** @type {Effect} */ (reaction));
 		}
 	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/store.js b/packages/svelte/src/internal/client/reactivity/store.js
index e7a92ee052..ce082866ce 100644
--- a/packages/svelte/src/internal/client/reactivity/store.js
+++ b/packages/svelte/src/internal/client/reactivity/store.js
@@ -6,6 +6,7 @@ import { define_property, noop } from '../../shared/utils.js';
 import { get } from '../runtime.js';
 import { teardown } from './effects.js';
 import { mutable_source, set } from './sources.js';
+import { DEV } from 'esm-env';
 
 /**
  * Whether or not the prop currently being read is a store binding, as in
@@ -33,6 +34,10 @@ export function store_get(store, store_name, stores) {
 		unsubscribe: noop
 	});
 
+	if (DEV) {
+		entry.source.label = store_name;
+	}
+
 	// if the component that setup this is already unmounted we don't want to register a subscription
 	if (entry.store !== store && !(IS_UNMOUNTED in stores)) {
 		entry.unsubscribe();
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 90f922df68..72187e84a7 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -29,8 +29,8 @@ export interface Value<V = unknown> extends Signal {
 	label?: string;
 	/** An error with a stack trace showing when the source was created */
 	created?: Error | null;
-	/** An error with a stack trace showing when the source was last updated */
-	updated?: Error | null;
+	/** An map of errors with stack traces showing when the source was updated, keyed by the stack trace */
+	updated?: Map<string, { error: Error; count: number }> | null;
 	/**
 	 * Whether or not the source was set while running an effect — if so, we need to
 	 * increment the write version so that it shows up as dirty when the effect re-runs
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index d6e7325ba3..e86866af2a 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1,36 +1,36 @@
 /** @import { Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
-import { define_property, get_descriptors, get_prototype_of, index_of } from '../shared/utils.js';
+import { get_descriptors, get_prototype_of, index_of } from '../shared/utils.js';
 import {
 	destroy_block_effect_children,
 	destroy_effect_children,
-	execute_effect_teardown,
-	unlink_effect
+	execute_effect_teardown
 } from './reactivity/effects.js';
 import {
-	EFFECT,
 	DIRTY,
 	MAYBE_DIRTY,
 	CLEAN,
 	DERIVED,
 	UNOWNED,
 	DESTROYED,
-	INERT,
 	BRANCH_EFFECT,
 	STATE_SYMBOL,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	DISCONNECTED,
-	EFFECT_IS_UPDATING,
+	REACTION_IS_UPDATING,
 	STALE_REACTION,
-	USER_EFFECT
+	ERROR_VALUE
 } from './constants.js';
-import { flush_tasks } from './dom/task.js';
-import { internal_set, old_values } from './reactivity/sources.js';
-import { destroy_derived_effects, execute_derived, update_derived } from './reactivity/deriveds.js';
-import * as e from './errors.js';
-
-import { tracing_mode_flag } from '../flags/index.js';
+import { old_values } from './reactivity/sources.js';
+import {
+	destroy_derived_effects,
+	execute_derived,
+	current_async_effect,
+	recent_async_deriveds,
+	update_derived
+} from './reactivity/deriveds.js';
+import { async_mode_flag, tracing_mode_flag } from '../flags/index.js';
 import { tracing_expressions, get_stack } from './dev/tracing.js';
 import {
 	component_context,
@@ -41,15 +41,18 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from './context.js';
-import { handle_error, invoke_error_boundary } from './error-handling.js';
+import * as w from './warnings.js';
+import { Batch, batch_deriveds, flushSync, schedule_effect } from './reactivity/batch.js';
+import { handle_error } from './error-handling.js';
 import { UNINITIALIZED } from '../../constants.js';
+import { captured_signals } from './legacy.js';
 
-let is_flushing = false;
-
-/** @type {Effect | null} */
-let last_scheduled_effect = null;
+export let is_updating_effect = false;
 
-let is_updating_effect = false;
+/** @param {boolean} value */
+export function set_is_updating_effect(value) {
+	is_updating_effect = value;
+}
 
 export let is_destroying_effect = false;
 
@@ -58,15 +61,6 @@ export function set_is_destroying_effect(value) {
 	is_destroying_effect = value;
 }
 
-// Handle effect queues
-
-/** @type {Effect[]} */
-let queued_root_effects = [];
-
-/** @type {Effect[]} Stack of effects, dev only */
-let dev_effect_stack = [];
-// Handle signal reactivity tree dependencies and reactions
-
 /** @type {null | Reaction} */
 export let active_reaction = null;
 
@@ -88,17 +82,17 @@ export function set_active_effect(effect) {
 /**
  * When sources are created within a reaction, reading and writing
  * them within that reaction should not cause a re-run
- * @type {null | { reaction: Reaction, sources: Source[] }}
+ * @type {null | Source[]}
  */
-export let source_ownership = null;
+export let current_sources = null;
 
 /** @param {Value} value */
 export function push_reaction_value(value) {
-	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
-		if (source_ownership === null) {
-			source_ownership = { reaction: active_reaction, sources: [value] };
+	if (active_reaction !== null && (!async_mode_flag || (active_reaction.f & DERIVED) !== 0)) {
+		if (current_sources === null) {
+			current_sources = [value];
 		} else {
-			source_ownership.sources.push(value);
+			current_sources.push(value);
 		}
 	}
 }
@@ -129,24 +123,21 @@ export function set_untracked_writes(value) {
  * @type {number} Used by sources and deriveds for handling updates.
  * Version starts from 1 so that unowned deriveds differentiate between a created effect and a run one for tracing
  **/
-let write_version = 1;
+export let write_version = 1;
 
 /** @type {number} Used to version each read of a source of derived to avoid duplicating depedencies inside a reaction */
 let read_version = 0;
 
 export let update_version = read_version;
 
+/** @param {number} value */
+export function set_update_version(value) {
+	update_version = value;
+}
+
 // If we are working with a get() chain that has no active container,
 // to prevent memory leaks, we skip adding the reaction.
 export let skip_reaction = false;
-// Handle collecting all signals which are read during a specific time frame
-/** @type {Set<Value> | null} */
-export let captured_signals = null;
-
-/** @param {Set<Value> | null} value */
-export function set_captured_signals(value) {
-	captured_signals = value;
-}
 
 export function increment_write_version() {
 	return ++write_version;
@@ -158,7 +149,7 @@ export function increment_write_version() {
  * @param {Reaction} reaction
  * @returns {boolean}
  */
-export function check_dirtiness(reaction) {
+export function is_dirty(reaction) {
 	var flags = reaction.f;
 
 	if ((flags & DIRTY) !== 0) {
@@ -177,8 +168,12 @@ export function check_dirtiness(reaction) {
 			var length = dependencies.length;
 
 			// If we are working with a disconnected or an unowned signal that is now connected (due to an active effect)
-			// then we need to re-connect the reaction to the dependency
-			if (is_disconnected || is_unowned_connected) {
+			// then we need to re-connect the reaction to the dependency, unless the effect has already been destroyed
+			// (which can happen if the derived is read by an async derived)
+			if (
+				(is_disconnected || is_unowned_connected) &&
+				(active_effect === null || (active_effect.f & DESTROYED) === 0)
+			) {
 				var derived = /** @type {Derived} */ (reaction);
 				var parent = derived.parent;
 
@@ -207,7 +202,7 @@ export function check_dirtiness(reaction) {
 			for (i = 0; i < length; i++) {
 				dependency = dependencies[i];
 
-				if (check_dirtiness(/** @type {Derived} */ (dependency))) {
+				if (is_dirty(/** @type {Derived} */ (dependency))) {
 					update_derived(/** @type {Derived} */ (dependency));
 				}
 
@@ -236,7 +231,7 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 
-	if (source_ownership?.reaction === active_reaction && source_ownership.sources.includes(signal)) {
+	if (!async_mode_flag && current_sources?.includes(signal)) {
 		return;
 	}
 
@@ -263,7 +258,7 @@ export function update_reaction(reaction) {
 	var previous_untracked_writes = untracked_writes;
 	var previous_reaction = active_reaction;
 	var previous_skip_reaction = skip_reaction;
-	var previous_reaction_sources = source_ownership;
+	var previous_sources = current_sources;
 	var previous_component_context = component_context;
 	var previous_untracking = untracking;
 	var previous_update_version = update_version;
@@ -277,19 +272,18 @@ export function update_reaction(reaction) {
 		(flags & UNOWNED) !== 0 && (untracking || !is_updating_effect || active_reaction === null);
 	active_reaction = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null;
 
-	source_ownership = null;
+	current_sources = null;
 	set_component_context(reaction.ctx);
 	untracking = false;
 	update_version = ++read_version;
 
-	reaction.f |= EFFECT_IS_UPDATING;
-
 	if (reaction.ac !== null) {
 		reaction.ac.abort(STALE_REACTION);
 		reaction.ac = null;
 	}
 
 	try {
+		reaction.f |= REACTION_IS_UPDATING;
 		var result = /** @type {Function} */ (0, reaction.fn)();
 		var deps = reaction.deps;
 
@@ -356,21 +350,24 @@ export function update_reaction(reaction) {
 			}
 		}
 
+		if ((reaction.f & ERROR_VALUE) !== 0) {
+			reaction.f ^= ERROR_VALUE;
+		}
+
 		return result;
 	} catch (error) {
-		handle_error(error);
+		return handle_error(error);
 	} finally {
+		reaction.f ^= REACTION_IS_UPDATING;
 		new_deps = previous_deps;
 		skipped_deps = previous_skipped_deps;
 		untracked_writes = previous_untracked_writes;
 		active_reaction = previous_reaction;
 		skip_reaction = previous_skip_reaction;
-		source_ownership = previous_reaction_sources;
+		current_sources = previous_sources;
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
 		update_version = previous_update_version;
-
-		reaction.f ^= EFFECT_IS_UPDATING;
 	}
 }
 
@@ -395,6 +392,7 @@ function remove_reaction(signal, dependency) {
 			}
 		}
 	}
+
 	// If the derived has no reactions, then we can disconnect it from the graph,
 	// allowing it to either reconnect in the future, or be GC'd by the VM.
 	if (
@@ -480,10 +478,6 @@ export function update_effect(effect) {
 				}
 			}
 		}
-
-		if (DEV) {
-			dev_effect_stack.push(effect);
-		}
 	} finally {
 		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
@@ -495,253 +489,30 @@ export function update_effect(effect) {
 	}
 }
 
-function log_effect_stack() {
-	// eslint-disable-next-line no-console
-	console.error(
-		'Last ten effects were: ',
-		dev_effect_stack.slice(-10).map((d) => d.fn)
-	);
-	dev_effect_stack = [];
-}
-
-function infinite_loop_guard() {
-	try {
-		e.effect_update_depth_exceeded();
-	} catch (error) {
-		if (DEV) {
-			// stack is garbage, ignore. Instead add a console.error message.
-			define_property(error, 'stack', {
-				value: ''
-			});
-		}
-		// Try and handle the error so it can be caught at a boundary, that's
-		// if there's an effect available from when it was last scheduled
-		if (last_scheduled_effect !== null) {
-			if (DEV) {
-				try {
-					invoke_error_boundary(error, last_scheduled_effect);
-				} catch (e) {
-					// Only log the effect stack if the error is re-thrown
-					log_effect_stack();
-					throw e;
-				}
-			} else {
-				invoke_error_boundary(error, last_scheduled_effect);
-			}
-		} else {
-			if (DEV) {
-				log_effect_stack();
-			}
-			throw error;
-		}
-	}
-}
-
-function flush_queued_root_effects() {
-	var was_updating_effect = is_updating_effect;
-
-	try {
-		var flush_count = 0;
-		is_updating_effect = true;
-
-		while (queued_root_effects.length > 0) {
-			if (flush_count++ > 1000) {
-				infinite_loop_guard();
-			}
-
-			var root_effects = queued_root_effects;
-			var length = root_effects.length;
-
-			queued_root_effects = [];
-
-			for (var i = 0; i < length; i++) {
-				var collected_effects = process_effects(root_effects[i]);
-				flush_queued_effects(collected_effects);
-			}
-			old_values.clear();
-		}
-	} finally {
-		is_flushing = false;
-		is_updating_effect = was_updating_effect;
-
-		last_scheduled_effect = null;
-		if (DEV) {
-			dev_effect_stack = [];
-		}
-	}
-}
-
-/**
- * @param {Array<Effect>} effects
- * @returns {void}
- */
-function flush_queued_effects(effects) {
-	var length = effects.length;
-	if (length === 0) return;
-
-	for (var i = 0; i < length; i++) {
-		var effect = effects[i];
-
-		if ((effect.f & (DESTROYED | INERT)) === 0) {
-			if (check_dirtiness(effect)) {
-				var wv = write_version;
-
-				update_effect(effect);
-
-				// Effects with no dependencies or teardown do not get added to the effect tree.
-				// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
-				// don't know if we need to keep them until they are executed. Doing the check
-				// here (rather than in `update_effect`) allows us to skip the work for
-				// immediate effects.
-				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-					if (effect.teardown === null) {
-						// remove this effect from the graph
-						unlink_effect(effect);
-					} else {
-						// keep the effect in the graph, but free up some memory
-						effect.fn = null;
-					}
-				}
-
-				// if state is written in a user effect, abort and re-schedule, lest we run
-				// effects that should be removed as a result of the state change
-				if (write_version > wv && (effect.f & USER_EFFECT) !== 0) {
-					break;
-				}
-			}
-		}
-	}
-
-	for (; i < length; i += 1) {
-		schedule_effect(effects[i]);
-	}
-}
-
-/**
- * @param {Effect} signal
- * @returns {void}
- */
-export function schedule_effect(signal) {
-	if (!is_flushing) {
-		is_flushing = true;
-		queueMicrotask(flush_queued_root_effects);
-	}
-
-	var effect = (last_scheduled_effect = signal);
-
-	while (effect.parent !== null) {
-		effect = effect.parent;
-		var flags = effect.f;
-
-		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-			if ((flags & CLEAN) === 0) return;
-			effect.f ^= CLEAN;
-		}
-	}
-
-	queued_root_effects.push(effect);
-}
-
 /**
- *
- * This function both runs render effects and collects user effects in topological order
- * from the starting effect passed in. Effects will be collected when they match the filtered
- * bitwise flag passed in only. The collected effects array will be populated with all the user
- * effects to be flushed.
- *
- * @param {Effect} root
- * @returns {Effect[]}
- */
-function process_effects(root) {
-	/** @type {Effect[]} */
-	var effects = [];
-
-	/** @type {Effect | null} */
-	var effect = root;
-
-	while (effect !== null) {
-		var flags = effect.f;
-		var is_branch = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0;
-		var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
-
-		if (!is_skippable_branch && (flags & INERT) === 0) {
-			if ((flags & EFFECT) !== 0) {
-				effects.push(effect);
-			} else if (is_branch) {
-				effect.f ^= CLEAN;
-			} else {
-				if (check_dirtiness(effect)) {
-					update_effect(effect);
-				}
-			}
-
-			/** @type {Effect | null} */
-			var child = effect.first;
-
-			if (child !== null) {
-				effect = child;
-				continue;
-			}
-		}
-
-		var parent = effect.parent;
-		effect = effect.next;
-
-		while (effect === null && parent !== null) {
-			effect = parent.next;
-			parent = parent.parent;
-		}
-	}
-
-	return effects;
-}
-
-/**
- * Synchronously flush any pending updates.
- * Returns void if no callback is provided, otherwise returns the result of calling the callback.
- * @template [T=void]
- * @param {(() => T) | undefined} [fn]
- * @returns {T}
+ * Returns a promise that resolves once any pending state changes have been applied.
+ * @returns {Promise<void>}
  */
-export function flushSync(fn) {
-	var result;
-
-	if (fn) {
-		is_flushing = true;
-		flush_queued_root_effects();
-
-		is_flushing = true;
-		result = fn();
+export async function tick() {
+	if (async_mode_flag) {
+		return new Promise((f) => requestAnimationFrame(() => f()));
 	}
 
-	while (true) {
-		flush_tasks();
-
-		if (queued_root_effects.length === 0) {
-			// this would be reset in `flush_queued_root_effects` but since we are early returning here,
-			// we need to reset it here as well in case the first time there's 0 queued root effects
-			is_flushing = false;
-			last_scheduled_effect = null;
-			if (DEV) {
-				dev_effect_stack = [];
-			}
-			return /** @type {T} */ (result);
-		}
+	await Promise.resolve();
 
-		is_flushing = true;
-		flush_queued_root_effects();
-	}
+	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
+	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
+	flushSync();
 }
 
 /**
- * Returns a promise that resolves once any pending state changes have been applied.
+ * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
+ * have resolved and the DOM has been updated
  * @returns {Promise<void>}
+ * @since 5.36
  */
-export async function tick() {
-	await Promise.resolve();
-	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
-	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
-	flushSync();
+export function settled() {
+	return Batch.ensure().settled();
 }
 
 /**
@@ -753,31 +524,48 @@ export function get(signal) {
 	var flags = signal.f;
 	var is_derived = (flags & DERIVED) !== 0;
 
-	if (captured_signals !== null) {
-		captured_signals.add(signal);
-	}
+	captured_signals?.add(signal);
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (
-			source_ownership?.reaction !== active_reaction ||
-			!source_ownership?.sources.includes(signal)
-		) {
+		// if we're in a derived that is being read inside an _async_ derived,
+		// it's possible that the effect was already destroyed. In this case,
+		// we don't add the dependency, because that would create a memory leak
+		var destroyed = active_effect !== null && (active_effect.f & DESTROYED) !== 0;
+
+		if (!destroyed && !current_sources?.includes(signal)) {
 			var deps = active_reaction.deps;
-			if (signal.rv < read_version) {
-				signal.rv = read_version;
-				// If the signal is accessing the same dependencies in the same
-				// order as it did last time, increment `skipped_deps`
-				// rather than updating `new_deps`, which creates GC cost
-				if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
-					skipped_deps++;
-				} else if (new_deps === null) {
-					new_deps = [signal];
-				} else if (!skip_reaction || !new_deps.includes(signal)) {
-					// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
-					// an unowned derived because skip_reaction is true, then we need to ensure that
-					// we don't have duplicates
-					new_deps.push(signal);
+
+			if ((active_reaction.f & REACTION_IS_UPDATING) !== 0) {
+				// we're in the effect init/update cycle
+				if (signal.rv < read_version) {
+					signal.rv = read_version;
+
+					// If the signal is accessing the same dependencies in the same
+					// order as it did last time, increment `skipped_deps`
+					// rather than updating `new_deps`, which creates GC cost
+					if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
+						skipped_deps++;
+					} else if (new_deps === null) {
+						new_deps = [signal];
+					} else if (!skip_reaction || !new_deps.includes(signal)) {
+						// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
+						// an unowned derived because skip_reaction is true, then we need to ensure that
+						// we don't have duplicates
+						new_deps.push(signal);
+					}
+				}
+			} else {
+				// we're adding a dependency outside the init/update cycle
+				// (i.e. after an `await`)
+				(active_reaction.deps ??= []).push(signal);
+
+				var reactions = signal.reactions;
+
+				if (reactions === null) {
+					signal.reactions = [active_reaction];
+				} else if (!reactions.includes(active_reaction)) {
+					reactions.push(active_reaction);
 				}
 			}
 		}
@@ -797,42 +585,50 @@ export function get(signal) {
 		}
 	}
 
-	if (is_derived && !is_destroying_effect) {
-		derived = /** @type {Derived} */ (signal);
+	if (DEV) {
+		if (current_async_effect) {
+			var tracking = (current_async_effect.f & REACTION_IS_UPDATING) !== 0;
+			var was_read = current_async_effect.deps?.includes(signal);
 
-		if (check_dirtiness(derived)) {
-			update_derived(derived);
+			if (!tracking && !untracking && !was_read) {
+				w.await_reactivity_loss(/** @type {string} */ (signal.label));
+
+				var trace = get_stack('TracedAt');
+				// eslint-disable-next-line no-console
+				if (trace) console.warn(trace);
+			}
 		}
-	}
 
-	if (
-		DEV &&
-		tracing_mode_flag &&
-		!untracking &&
-		tracing_expressions !== null &&
-		active_reaction !== null &&
-		tracing_expressions.reaction === active_reaction
-	) {
-		// Used when mapping state between special blocks like `each`
-		if (signal.trace) {
-			signal.trace();
-		} else {
-			var trace = get_stack('TracedAt');
+		recent_async_deriveds.delete(signal);
 
-			if (trace) {
-				var entry = tracing_expressions.entries.get(signal);
+		if (
+			tracing_mode_flag &&
+			!untracking &&
+			tracing_expressions !== null &&
+			active_reaction !== null &&
+			tracing_expressions.reaction === active_reaction
+		) {
+			// Used when mapping state between special blocks like `each`
+			if (signal.trace) {
+				signal.trace();
+			} else {
+				trace = get_stack('TracedAt');
 
-				if (entry === undefined) {
-					entry = { traces: [] };
-					tracing_expressions.entries.set(signal, entry);
-				}
+				if (trace) {
+					var entry = tracing_expressions.entries.get(signal);
 
-				var last = entry.traces[entry.traces.length - 1];
+					if (entry === undefined) {
+						entry = { traces: [] };
+						tracing_expressions.entries.set(signal, entry);
+					}
+
+					var last = entry.traces[entry.traces.length - 1];
 
-				// traces can be duplicated, e.g. by `snapshot` invoking both
-				// both `getOwnPropertyDescriptor` and `get` traps at once
-				if (trace.stack !== last?.stack) {
-					entry.traces.push(trace);
+					// traces can be duplicated, e.g. by `snapshot` invoking both
+					// both `getOwnPropertyDescriptor` and `get` traps at once
+					if (trace.stack !== last?.stack) {
+						entry.traces.push(trace);
+					}
 				}
 			}
 		}
@@ -848,8 +644,12 @@ export function get(signal) {
 
 			var value = derived.v;
 
-			// if the derived is dirty, or depends on the values that just changed, re-execute
-			if ((derived.f & CLEAN) !== 0 || depends_on_old_values(derived)) {
+			// if the derived is dirty and has reactions, or depends on the values that just changed, re-execute
+			// (a derived can be maybe_dirty due to the effect destroy removing its last reaction)
+			if (
+				((derived.f & CLEAN) === 0 && derived.reactions !== null) ||
+				depends_on_old_values(derived)
+			) {
 				value = execute_derived(derived);
 			}
 
@@ -857,6 +657,20 @@ export function get(signal) {
 
 			return value;
 		}
+	} else if (is_derived) {
+		derived = /** @type {Derived} */ (signal);
+
+		if (batch_deriveds?.has(derived)) {
+			return batch_deriveds.get(derived);
+		}
+
+		if (is_dirty(derived)) {
+			update_derived(derived);
+		}
+	}
+
+	if ((signal.f & ERROR_VALUE) !== 0) {
+		throw signal.v;
 	}
 
 	return signal.v;
@@ -890,45 +704,6 @@ export function safe_get(signal) {
 	return signal && get(signal);
 }
 
-/**
- * Capture an array of all the signals that are read when `fn` is called
- * @template T
- * @param {() => T} fn
- */
-function capture_signals(fn) {
-	var previous_captured_signals = captured_signals;
-	captured_signals = new Set();
-
-	var captured = captured_signals;
-	var signal;
-
-	try {
-		untrack(fn);
-		if (previous_captured_signals !== null) {
-			for (signal of captured_signals) {
-				previous_captured_signals.add(signal);
-			}
-		}
-	} finally {
-		captured_signals = previous_captured_signals;
-	}
-
-	return captured;
-}
-
-/**
- * Invokes a function and captures all signals that are read during the invocation,
- * then invalidates them.
- * @param {() => any} fn
- */
-export function invalidate_inner_signals(fn) {
-	var captured = capture_signals(() => untrack(fn));
-
-	for (var signal of captured) {
-		internal_set(signal, signal.v);
-	}
-}
-
 /**
  * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
  * any state read inside `fn` will not be treated as a dependency.
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index a42f91343c..d24218c4d3 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -43,9 +43,7 @@ export type ComponentContext = {
 			m: Array<() => any>;
 		};
 		/** `$:` statements */
-		r1: any[];
-		/** This tracks whether `$:` statements have run in the current cycle, to ensure they only run once */
-		r2: Source<boolean>;
+		$: any[];
 	};
 	/**
 	 * dev mode only: the component function
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 74f9041b91..dfa2a3752e 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -18,6 +18,31 @@ export function assignment_value_stale(property, location) {
 	}
 }
 
+/**
+ * Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`
+ * @param {string} name
+ */
+export function await_reactivity_loss(name) {
+	if (DEV) {
+		console.warn(`%c[svelte] await_reactivity_loss\n%cDetected reactivity loss when reading \`${name}\`. This happens when state is read in an async function after an earlier \`await\`\nhttps://svelte.dev/e/await_reactivity_loss`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/await_reactivity_loss`);
+	}
+}
+
+/**
+ * An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app
+ * @param {string} name
+ * @param {string} location
+ */
+export function await_waterfall(name, location) {
+	if (DEV) {
+		console.warn(`%c[svelte] await_waterfall\n%cAn async derived, \`${name}\` (${location}) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\nhttps://svelte.dev/e/await_waterfall`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/await_waterfall`);
+	}
+}
+
 /**
  * `%binding%` (%location%) is binding to a non-reactive property
  * @param {string} binding
@@ -199,6 +224,17 @@ export function state_proxy_equality_mismatch(operator) {
 	}
 }
 
+/**
+ * A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
+ */
+export function svelte_boundary_reset_noop() {
+	if (DEV) {
+		console.warn(`%c[svelte] svelte_boundary_reset_noop\n%cA \`<svelte:boundary>\` \`reset\` function only resets the boundary the first time it is called\nhttps://svelte.dev/e/svelte_boundary_reset_noop`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`);
+	}
+}
+
 /**
  * The `slide` transition does not work correctly for elements with `display: %value%`
  * @param {string} value
diff --git a/packages/svelte/src/internal/flags/async.js b/packages/svelte/src/internal/flags/async.js
new file mode 100644
index 0000000000..ca4ff9286a
--- /dev/null
+++ b/packages/svelte/src/internal/flags/async.js
@@ -0,0 +1,3 @@
+import { enable_async_mode_flag } from './index.js';
+
+enable_async_mode_flag();
diff --git a/packages/svelte/src/internal/flags/index.js b/packages/svelte/src/internal/flags/index.js
index 017840f2d9..ce7bba604b 100644
--- a/packages/svelte/src/internal/flags/index.js
+++ b/packages/svelte/src/internal/flags/index.js
@@ -1,6 +1,16 @@
+export let async_mode_flag = false;
 export let legacy_mode_flag = false;
 export let tracing_mode_flag = false;
 
+export function enable_async_mode_flag() {
+	async_mode_flag = true;
+}
+
+/** ONLY USE THIS DURING TESTING */
+export function disable_async_mode_flag() {
+	async_mode_flag = false;
+}
+
 export function enable_legacy_mode_flag() {
 	legacy_mode_flag = true;
 }
diff --git a/packages/svelte/src/internal/server/abort-signal.js b/packages/svelte/src/internal/server/abort-signal.js
index da579b2592..a769a46e3d 100644
--- a/packages/svelte/src/internal/server/abort-signal.js
+++ b/packages/svelte/src/internal/server/abort-signal.js
@@ -1,7 +1,7 @@
 import { STALE_REACTION } from '#client/constants';
 
 /** @type {AbortController | null} */
-export let controller = null;
+let controller = null;
 
 export function abort() {
 	controller?.abort(STALE_REACTION);
diff --git a/packages/svelte/src/internal/server/blocks/snippet.js b/packages/svelte/src/internal/server/blocks/snippet.js
index 9e96ae3430..bb82ca97d0 100644
--- a/packages/svelte/src/internal/server/blocks/snippet.js
+++ b/packages/svelte/src/internal/server/blocks/snippet.js
@@ -15,8 +15,10 @@ export function createRawSnippet(fn) {
 	// @ts-expect-error the types are a lie
 	return (/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
 		var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
-		payload.out += fn(...getters)
-			.render()
-			.trim();
+		payload.out.push(
+			fn(...getters)
+				.render()
+				.trim()
+		);
 	};
 }
diff --git a/packages/svelte/src/internal/server/context.js b/packages/svelte/src/internal/server/context.js
index 4e547f48cb..bae93beb53 100644
--- a/packages/svelte/src/internal/server/context.js
+++ b/packages/svelte/src/internal/server/context.js
@@ -1,7 +1,7 @@
 /** @import { Component } from '#server' */
 import { DEV } from 'esm-env';
 import { on_destroy } from './index.js';
-import * as e from '../shared/errors.js';
+import * as e from './errors.js';
 
 /** @type {Component | null} */
 export var current_component = null;
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index efc761d7c5..2a0cb057a3 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -5,7 +5,7 @@ import {
 	is_tag_valid_with_parent
 } from '../../html-tree-validation.js';
 import { current_component } from './context.js';
-import { invalid_snippet_arguments } from '../shared/errors.js';
+import * as e from './errors.js';
 import { HeadPayload, Payload } from './payload.js';
 
 /**
@@ -40,7 +40,7 @@ function print_error(payload, message) {
 
 	// eslint-disable-next-line no-console
 	console.error(message);
-	payload.head.out += `<script>console.error(${JSON.stringify(message)})</script>`;
+	payload.head.out.push(`<script>console.error(${JSON.stringify(message)})</script>`);
 }
 
 export function reset_elements() {
@@ -102,6 +102,6 @@ export function validate_snippet_args(payload) {
 		// for some reason typescript consider the type of payload as never after the first instanceof
 		!(payload instanceof Payload || /** @type {any} */ (payload) instanceof HeadPayload)
 	) {
-		invalid_snippet_arguments();
+		e.invalid_snippet_arguments();
 	}
 }
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index e47530c9aa..458937218f 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -1,6 +1,6 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
-
+export *  from '../shared/errors.js';
 
 /**
  * `%name%(...)` is not available on the server
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index ceb516ebb0..62ee22d6fc 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -33,23 +33,23 @@ const INVALID_ATTR_NAME_CHAR_REGEX =
  * @returns {void}
  */
 export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
-	payload.out += '<!---->';
+	payload.out.push('<!---->');
 
 	if (tag) {
-		payload.out += `<${tag}`;
+		payload.out.push(`<${tag}`);
 		attributes_fn();
-		payload.out += `>`;
+		payload.out.push(`>`);
 
 		if (!is_void(tag)) {
 			children_fn();
 			if (!is_raw_text_element(tag)) {
-				payload.out += EMPTY_COMMENT;
+				payload.out.push(EMPTY_COMMENT);
 			}
-			payload.out += `</${tag}>`;
+			payload.out.push(`</${tag}>`);
 		}
 	}
 
-	payload.out += '<!---->';
+	payload.out.push('<!---->');
 }
 
 /**
@@ -72,7 +72,7 @@ export function render(component, options = {}) {
 
 		const prev_on_destroy = on_destroy;
 		on_destroy = [];
-		payload.out += BLOCK_OPEN;
+		payload.out.push(BLOCK_OPEN);
 
 		let reset_reset_element;
 
@@ -97,20 +97,22 @@ export function render(component, options = {}) {
 			reset_reset_element();
 		}
 
-		payload.out += BLOCK_CLOSE;
+		payload.out.push(BLOCK_CLOSE);
 		for (const cleanup of on_destroy) cleanup();
 		on_destroy = prev_on_destroy;
 
-		let head = payload.head.out + payload.head.title;
+		let head = payload.head.out.join('') + payload.head.title;
 
 		for (const { hash, code } of payload.css) {
 			head += `<style id="${hash}">${code}</style>`;
 		}
 
+		const body = payload.out.join('');
+
 		return {
 			head,
-			html: payload.out,
-			body: payload.out
+			html: body,
+			body: body
 		};
 	} finally {
 		abort();
@@ -124,9 +126,9 @@ export function render(component, options = {}) {
  */
 export function head(payload, fn) {
 	const head_payload = payload.head;
-	head_payload.out += BLOCK_OPEN;
+	head_payload.out.push(BLOCK_OPEN);
 	fn(head_payload);
-	head_payload.out += BLOCK_CLOSE;
+	head_payload.out.push(BLOCK_CLOSE);
 }
 
 /**
@@ -141,21 +143,21 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	const styles = style_object_to_string(props);
 
 	if (is_html) {
-		payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
+		payload.out.push(`<svelte-css-wrapper style="display: contents; ${styles}">`);
 	} else {
-		payload.out += `<g style="${styles}">`;
+		payload.out.push(`<g style="${styles}">`);
 	}
 
 	if (dynamic) {
-		payload.out += '<!---->';
+		payload.out.push('<!---->');
 	}
 
 	component();
 
 	if (is_html) {
-		payload.out += `<!----></svelte-css-wrapper>`;
+		payload.out.push(`<!----></svelte-css-wrapper>`);
 	} else {
-		payload.out += `<!----></g>`;
+		payload.out.push(`<!----></g>`);
 	}
 }
 
@@ -440,13 +442,13 @@ export function bind_props(props_parent, props_now) {
  */
 function await_block(payload, promise, pending_fn, then_fn) {
 	if (is_promise(promise)) {
-		payload.out += BLOCK_OPEN;
+		payload.out.push(BLOCK_OPEN);
 		promise.then(null, noop);
 		if (pending_fn !== null) {
 			pending_fn();
 		}
 	} else if (then_fn !== null) {
-		payload.out += BLOCK_OPEN_ELSE;
+		payload.out.push(BLOCK_OPEN_ELSE);
 		then_fn(promise);
 	}
 }
@@ -493,7 +495,7 @@ export function once(get_value) {
  */
 export function props_id(payload) {
 	const uid = payload.uid();
-	payload.out += '<!--#' + uid + '-->';
+	payload.out.push('<!--#' + uid + '-->');
 	return uid;
 }
 
@@ -520,6 +522,8 @@ export {
 
 export { escape_html as escape };
 
+export { await_outside_boundary } from '../shared/errors.js';
+
 /**
  * @template T
  * @param {()=>T} fn
@@ -560,10 +564,13 @@ export function valueless_option(payload, children) {
 
 	children();
 
-	var body = payload.out.slice(i);
+	var body = payload.out.slice(i).join('');
 
 	if (body.replace(/<!---->/g, '') === payload.select_value) {
 		// replace '>' with ' selected>' (closing tag will be added later)
-		payload.out = payload.out.slice(0, i - 1) + ' selected>' + body;
+		var last_item = payload.out[i - 1];
+		payload.out[i - 1] = last_item.slice(0, -1) + ' selected>';
+		// Remove the old items after position i and add the body as a single item
+		payload.out.splice(i, payload.out.length - i, body);
 	}
 }
diff --git a/packages/svelte/src/internal/server/payload.js b/packages/svelte/src/internal/server/payload.js
index a31120ae16..195488e061 100644
--- a/packages/svelte/src/internal/server/payload.js
+++ b/packages/svelte/src/internal/server/payload.js
@@ -1,11 +1,12 @@
 export class HeadPayload {
 	/** @type {Set<{ hash: string; code: string }>} */
 	css = new Set();
-	out = '';
+	/** @type {string[]} */
+	out = [];
 	uid = () => '';
 	title = '';
 
-	constructor(css = new Set(), out = '', title = '', uid = () => '') {
+	constructor(css = new Set(), /** @type {string[]} */ out = [], title = '', uid = () => '') {
 		this.css = css;
 		this.out = out;
 		this.title = title;
@@ -16,7 +17,8 @@ export class HeadPayload {
 export class Payload {
 	/** @type {Set<{ hash: string; code: string }>} */
 	css = new Set();
-	out = '';
+	/** @type {string[]} */
+	out = [];
 	uid = () => '';
 	select_value = undefined;
 
@@ -36,12 +38,12 @@ export class Payload {
 export function copy_payload({ out, css, head, uid }) {
 	const payload = new Payload();
 
-	payload.out = out;
+	payload.out = [...out];
 	payload.css = new Set(css);
 	payload.uid = uid;
 
 	payload.head = new HeadPayload();
-	payload.head.out = head.out;
+	payload.head.out = [...head.out];
 	payload.head.css = new Set(head.css);
 	payload.head.title = head.title;
 	payload.head.uid = head.uid;
@@ -56,7 +58,7 @@ export function copy_payload({ out, css, head, uid }) {
  * @returns {void}
  */
 export function assign_payload(p1, p2) {
-	p1.out = p2.out;
+	p1.out = [...p2.out];
 	p1.css = p2.css;
 	p1.head = p2.head;
 	p1.uid = p2.uid;
diff --git a/packages/svelte/src/internal/shared/errors.js b/packages/svelte/src/internal/shared/errors.js
index 6bcc35016a..66685cb00b 100644
--- a/packages/svelte/src/internal/shared/errors.js
+++ b/packages/svelte/src/internal/shared/errors.js
@@ -2,6 +2,22 @@
 
 import { DEV } from 'esm-env';
 
+/**
+ * Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+ * @returns {never}
+ */
+export function await_outside_boundary() {
+	if (DEV) {
+		const error = new Error(`await_outside_boundary\nCannot await outside a \`<svelte:boundary>\` with a \`pending\` snippet\nhttps://svelte.dev/e/await_outside_boundary`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/await_outside_boundary`);
+	}
+}
+
 /**
  * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
  * @returns {never}
diff --git a/packages/svelte/src/internal/shared/validate.js b/packages/svelte/src/internal/shared/validate.js
index bbb237594b..8f3e2807e7 100644
--- a/packages/svelte/src/internal/shared/validate.js
+++ b/packages/svelte/src/internal/shared/validate.js
@@ -1,5 +1,3 @@
-/** @import { TemplateNode } from '#client' */
-/** @import { Getters } from '#shared' */
 import { is_void } from '../../utils.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 45c478ecab..d4a053d1aa 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -3,13 +3,15 @@ import { DIRTY, LEGACY_PROPS, MAYBE_DIRTY } from '../internal/client/constants.j
 import { user_pre_effect } from '../internal/client/reactivity/effects.js';
 import { mutable_source, set } from '../internal/client/reactivity/sources.js';
 import { hydrate, mount, unmount } from '../internal/client/render.js';
-import { active_effect, flushSync, get, set_signal_status } from '../internal/client/runtime.js';
-import { lifecycle_outside_component } from '../internal/shared/errors.js';
+import { active_effect, get, set_signal_status } from '../internal/client/runtime.js';
+import { flushSync } from '../internal/client/reactivity/batch.js';
 import { define_property, is_array } from '../internal/shared/utils.js';
+import * as e from '../internal/client/errors.js';
 import * as w from '../internal/client/warnings.js';
 import { DEV } from 'esm-env';
 import { FILENAME } from '../constants.js';
 import { component_context, dev_current_component_function } from '../internal/client/context.js';
+import { async_mode_flag } from '../internal/flags/index.js';
 
 /**
  * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@@ -119,8 +121,9 @@ class Svelte4Component {
 			recover: options.recover
 		});
 
-		// We don't flushSync for custom element wrappers or if the user doesn't want it
-		if (!options?.props?.$$host || options.sync === false) {
+		// We don't flushSync for custom element wrappers or if the user doesn't want it,
+		// or if we're in async mode since `flushSync()` will fail
+		if (!async_mode_flag && (!options?.props?.$$host || options.sync === false)) {
 			flushSync();
 		}
 
@@ -245,7 +248,7 @@ export function handlers(...handlers) {
 export function createBubbler() {
 	const active_component_context = component_context;
 	if (active_component_context === null) {
-		lifecycle_outside_component('createBubbler');
+		e.lifecycle_outside_component('createBubbler');
 	}
 
 	return (/**@type {string}*/ type) => (/**@type {Event}*/ event) => {
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 67a92ceb7b..6f9313eb0a 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -3,12 +3,16 @@ import { effect_tracking, render_effect } from '../internal/client/reactivity/ef
 import { source, increment } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { DEV } from 'esm-env';
+import { queue_micro_task } from '../internal/client/dom/task.js';
 
 /**
- * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
- * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+ * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+ * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
  *
- * If `start` returns a function, it will be called when the effect is destroyed.
+ * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+ * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+ *
+ * If `start` returns a cleanup function, it will be called when the effect is destroyed.
  *
  * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
  * are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -36,6 +40,7 @@ import { DEV } from 'esm-env';
  * 	}
  *
  * 	get current() {
+ * 		// This makes the getter reactive, if read in an effect
  * 		this.#subscribe();
  *
  * 		// Return the current state of the query, whether or not we're in an effect
@@ -68,8 +73,8 @@ export function createSubscriber(start) {
 				subscribers += 1;
 
 				return () => {
-					tick().then(() => {
-						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
+					queue_micro_task(() => {
+						// Only count down after a microtask, else we would reach 0 before our own render effect reruns,
 						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
 						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
 						subscribers -= 1;
@@ -77,6 +82,10 @@ export function createSubscriber(start) {
 						if (subscribers === 0) {
 							stop?.();
 							stop = undefined;
+							// Increment the version to ensure any dependent deriveds are marked dirty when the subscription is picked up again later.
+							// If we didn't do this then the comparison of write versions would determine that the derived has a later version than
+							// the subscriber, and it would not be re-run.
+							increment(version);
 						}
 					});
 				};
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 921eaec57c..cd79cfc274 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -428,7 +428,7 @@ export function is_mathml(name) {
 	return MATHML_ELEMENTS.includes(name);
 }
 
-export const STATE_CREATION_RUNES = /** @type {const} */ ([
+const STATE_CREATION_RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
 	'$derived',
@@ -445,6 +445,7 @@ const RUNES = /** @type {const} */ ([
 	'$effect.pre',
 	'$effect.tracking',
 	'$effect.root',
+	'$effect.pending',
 	'$inspect',
 	'$inspect().with',
 	'$inspect.trace',
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index eb68753d71..7d47fbc5f1 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.35.5';
+export const VERSION = '5.36.13';
 export const PUBLIC_VERSION = '5';
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 5042eaa4b8..ebd58c8cc0 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -50,6 +50,7 @@ declare global {
 				? SVGElementTagNameMap[Key]
 				: any;
 
+		// TODO remove HTMLAttributes/SVGAttributes/IntrinsicElements in Svelte 6
 		// For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		interface HTMLAttributes<T extends EventTarget = any> {}
@@ -238,18 +239,6 @@ declare global {
 			use: HTMLProps<'use', SVGAttributes>;
 			view: HTMLProps<'view', SVGAttributes>;
 
-			// Svelte specific
-			'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>;
-			'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>;
-			'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>;
-			'svelte:fragment': { slot?: string };
-			'svelte:head': { [name: string]: any };
-			'svelte:boundary': {
-				onerror?: (error: unknown, reset: () => void) => void;
-				failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
-			};
-			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
-
 			[name: string]: { [name: string]: any };
 		}
 	}
diff --git a/packages/svelte/tests/compiler-errors/test.ts b/packages/svelte/tests/compiler-errors/test.ts
index 5e57a3a032..13b9280dde 100644
--- a/packages/svelte/tests/compiler-errors/test.ts
+++ b/packages/svelte/tests/compiler-errors/test.ts
@@ -1,5 +1,5 @@
 import * as fs from 'node:fs';
-import { assert, expect } from 'vitest';
+import { assert, expect, it } from 'vitest';
 import { compile, compileModule, type CompileError } from 'svelte/compiler';
 import { suite, type BaseTest } from '../suite';
 import { read_file } from '../helpers.js';
@@ -78,3 +78,15 @@ const { test, run } = suite<CompilerErrorTest>((config, cwd) => {
 export { test };
 
 await run(__dirname);
+
+it('resets the compiler state including filename', () => {
+	// start with something that succeeds
+	compile('<div>hello</div>', { filename: 'foo.svelte' });
+	// then try something that fails in the parsing stage
+	try {
+		compile('<p>hello<div>invalid</p>', { filename: 'bar.svelte' });
+		expect.fail('Expected an error');
+	} catch (e: any) {
+		expect(e.toString()).toContain('bar.svelte');
+	}
+});
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index 2d825dbb7c..410838829e 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -86,7 +86,8 @@ export async function compile_directory(
 				const compiled = compileModule(text, {
 					filename: opts.filename,
 					generate: opts.generate,
-					dev: opts.dev
+					dev: opts.dev,
+					experimental: opts.experimental
 				});
 				write(out, compiled.js.code.replace(`v${VERSION}`, 'VERSION'));
 			} else {
@@ -193,6 +194,8 @@ if (typeof window !== 'undefined') {
 
 export const fragments = /** @type {'html' | 'tree'} */ (process.env.FRAGMENTS) ?? 'html';
 
+export const async_mode = process.env.SVELTE_NO_ASYNC !== 'true';
+
 /**
  * @param {any[]} logs
  */
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
index e35b08f2a8..dccf5ca669 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
@@ -27,6 +27,8 @@ export default test({
 			array: ['a', 'b', 'c']
 		});
 
+		raf.tick(25);
+
 		raf.tick(50);
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 126992a0c0..05c1a982ec 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -3,14 +3,15 @@ import { setImmediate } from 'node:timers/promises';
 import { globSync } from 'tinyglobby';
 import { createClassComponent } from 'svelte/legacy';
 import { proxy } from 'svelte/internal/client';
-import { flushSync, hydrate, mount, unmount, untrack } from 'svelte';
+import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
-import { compile_directory, fragments } from '../helpers.js';
+import { async_mode, compile_directory, fragments } from '../helpers.js';
 import { assert_html_equal, assert_html_equal_with_options } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
 import { suite_with_variants, type BaseTest } from '../suite.js';
+import { clear } from '../../src/internal/client/reactivity/batch.js';
 
 type Assert = typeof import('vitest').assert & {
 	htmlEqual(a: string, b: string, description?: string): void;
@@ -25,12 +26,30 @@ type Assert = typeof import('vitest').assert & {
 	): void;
 };
 
+// TODO remove this shim when we can
+// @ts-expect-error
+Promise.withResolvers = () => {
+	let resolve;
+	let reject;
+
+	const promise = new Promise((f, r) => {
+		resolve = f;
+		reject = r;
+	});
+
+	return { promise, resolve, reject };
+};
+
 export interface RuntimeTest<Props extends Record<string, any> = Record<string, any>>
 	extends BaseTest {
 	/** Use e.g. `mode: ['client']` to indicate that this test should never run in server/hydrate modes */
 	mode?: Array<'server' | 'client' | 'hydrate'>;
 	/** Temporarily skip specific modes, without skipping the entire test */
 	skip_mode?: Array<'server' | 'client' | 'hydrate'>;
+	/** Skip if running with process.env.NO_ASYNC */
+	skip_no_async?: boolean;
+	/** Skip if running without process.env.NO_ASYNC */
+	skip_async?: boolean;
 	html?: string;
 	ssrHtml?: string;
 	compileOptions?: Partial<CompileOptions>;
@@ -107,7 +126,15 @@ let console_error = console.error;
 export function runtime_suite(runes: boolean) {
 	return suite_with_variants<RuntimeTest, 'hydrate' | 'ssr' | 'dom', CompileOptions>(
 		['dom', 'hydrate', 'ssr'],
-		(variant, config) => {
+		(variant, config, test_name) => {
+			if (!async_mode && (config.skip_no_async || test_name.startsWith('async-'))) {
+				return true;
+			}
+
+			if (async_mode && config.skip_async) {
+				return true;
+			}
+
 			if (variant === 'hydrate') {
 				if (config.mode && !config.mode.includes('hydrate')) return 'no-test';
 				if (config.skip_mode?.includes('hydrate')) return true;
@@ -154,6 +181,9 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		rootDir: cwd,
 		dev: force_hmr ? true : undefined,
 		hmr: force_hmr ? true : undefined,
+		experimental: {
+			async: runes && async_mode
+		},
 		fragments,
 		...config.compileOptions,
 		immutable: config.immutable,
@@ -215,7 +245,7 @@ async function run_test_variant(
 		if (str.slice(0, i).includes('warnings') || config.warnings) {
 			// eslint-disable-next-line no-console
 			console.warn = (...args) => {
-				if (args[0].startsWith('%c[svelte]')) {
+				if (typeof args[0] === 'string' && args[0].startsWith('%c[svelte]')) {
 					// TODO convert this to structured data, for more robust comparison?
 
 					let message = args[0];
@@ -397,6 +427,12 @@ async function run_test_variant(
 			try {
 				if (config.test) {
 					flushSync();
+
+					if (variant === 'hydrate' && cwd.includes('async-')) {
+						// wait for pending boundaries to render
+						await Promise.resolve();
+					}
+
 					await config.test({
 						// @ts-expect-error TS doesn't get it
 						assert: {
@@ -453,10 +489,11 @@ async function run_test_variant(
 					'Expected component to unmount and leave nothing behind after it was destroyed'
 				);
 
-				// TODO: This seems useless, unhandledRejection is only triggered on the next task
-				// by which time the test has already finished and the next test resets it to null above
+				// uncaught errors like during template effects flush
 				if (unhandled_rejection) {
-					throw unhandled_rejection; // eslint-disable-line no-unsafe-finally
+					if (!config.expect_unhandled_rejections) {
+						throw unhandled_rejection; // eslint-disable-line no-unsafe-finally
+					}
 				}
 			}
 		}
@@ -486,6 +523,8 @@ async function run_test_variant(
 		console.log = console_log;
 		console.warn = console_warn;
 		console.error = console_error;
+
+		clear();
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js b/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js
new file mode 100644
index 0000000000..7134117067
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-delete-item/_config.js
@@ -0,0 +1,13 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+
+		assert.deepEqual(logs[0], [0, , 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte b/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte
new file mode 100644
index 0000000000..ca00a85491
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-delete-item/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	const arr = [0, 1, 2];
+</script>
+
+<button onclick={() => {
+	delete arr[1];
+	console.log(arr);
+}}>del</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js
new file mode 100644
index 0000000000..a947a91ab8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/_config.js
@@ -0,0 +1,23 @@
+import { settled, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [reset, resolve] = target.querySelectorAll('button');
+
+		reset.click();
+		await settled();
+		assert.deepEqual(logs, ['aborted']);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>resolve</button>
+				<h1>hello</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte
new file mode 100644
index 0000000000..d8d77bf0e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-abort-signal/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	let deferred = $state(Promise.withResolvers());
+
+	function load(deferred) {
+		const signal = getAbortSignal();
+
+		return new Promise((fulfil, reject) => {
+			signal.onabort = (e) => {
+				console.log('aborted');
+				reject(e.currentTarget.reason);
+			};
+
+			deferred.promise.then(fulfil, reject);
+		});
+	}
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>resolve</button>
+
+<svelte:boundary>
+	<h1>{await load(deferred)}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
new file mode 100644
index 0000000000..3de81a507b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
@@ -0,0 +1,18 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p data-foo="bar">hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte
new file mode 100644
index 0000000000..00a11cac43
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/main.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	<p data-foo={await 'bar'}>hello</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js
new file mode 100644
index 0000000000..0a64738409
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js
@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<button>cool</button>
+		<button>neat</button>
+		<button>reset</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [cool, neat, reset] = target.querySelectorAll('button');
+
+		cool.click();
+		await tick();
+
+		const p = target.querySelector('p');
+		ok(p);
+		assert.htmlEqual(p.outerHTML, '<p class="cool">hello</p>');
+
+		reset.click();
+		assert.htmlEqual(p.outerHTML, '<p class="cool">hello</p>');
+
+		neat.click();
+		await tick();
+		assert.htmlEqual(p.outerHTML, '<p class="neat">hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte
new file mode 100644
index 0000000000..6332a9802d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.resolve('cool')}>cool</button>
+<button onclick={() => deferred.resolve('neat')}>neat</button>
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+
+<svelte:boundary>
+	<p class={await deferred.promise}>hello</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js
new file mode 100644
index 0000000000..a29c99860d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>false</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte
new file mode 100644
index 0000000000..a93eb7dc25
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-destroy-during-init/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve(count)}>shift</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>true</p>
+		<p>{await push()}</p>
+	{:else}
+		<p>false</p>
+		<p>{await push()}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js
new file mode 100644
index 0000000000..e2718a35d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'loading');
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'nope');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte
new file mode 100644
index 0000000000..412da7268e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-during-init/main.svelte
@@ -0,0 +1,8 @@
+<svelte:boundary>
+	{#if await Promise.reject(new Error('nope'))}
+		hi
+	{/if}
+
+	{#snippet pending()}loading{/snippet}
+	{#snippet failed(e)}{e.message}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
new file mode 100644
index 0000000000..c5dae7fee2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, resolve, reject] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		reject.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>resolve</button>
+				<button>reject</button>
+				<p>false</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte
new file mode 100644
index 0000000000..1ad6cb84de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve([count])}>resolve</button>
+<button onclick={() => deferreds.shift()?.reject(new Error('oops'))}>reject</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>true</p>
+		{#each await push() as count}<p>{count}</p>{/each}
+	{:else}
+		<p>false</p>
+		{#each await push() as count}<p>{count}</p>{/each}
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js
new file mode 100644
index 0000000000..18175de4dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/_config.js
@@ -0,0 +1,53 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [override, release, resolve] = target.querySelectorAll('button');
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>before</p>
+				<p>before</p>
+			`
+		);
+
+		override.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>during</p>
+				<p>during</p>
+			`
+		);
+
+		release.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>override</button>
+				<button>release</button>
+				<button>resolve</button>
+				<p>after</p>
+				<p>after</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte
new file mode 100644
index 0000000000..256ad68f4a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-rerun/main.svelte
@@ -0,0 +1,45 @@
+<script lang=ts>
+	let deferred = Promise.withResolvers();
+	let value = $state();
+	let override = $state();
+	let current = $derived(override ?? value);
+	let promise = $state(update(['before']));
+
+	async function update (v) {
+		deferred = Promise.withResolvers();
+		await deferred.promise;
+		value = v;
+	};
+
+	function indirect() {
+		override;
+		return promise.then(() => current);
+	}
+</script>
+
+<button onclick={() => {
+	override = ['during'];
+}}>override</button>
+
+<button onclick={() => {
+	override = null;
+	promise = update(['after']);
+}}>release</button>
+
+<button onclick={() => {
+	deferred.resolve(null);
+}}>resolve</button>
+
+<svelte:boundary>
+	{#each await indirect() as entry}
+		<p>{entry}</p>
+	{/each}
+
+	{#each current as entry}
+		<p>{entry}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js
new file mode 100644
index 0000000000..325cb1dcd6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-child-effect/_config.js
@@ -0,0 +1,55 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>shift</button>
+		<p>loading</p>
+	`,
+
+	async test({ assert, target }) {
+		target.querySelector('button')?.click();
+		await tick();
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>A</p>
+				<p>a</p>
+			`
+		);
+
+		flushSync(() => button2.click());
+		flushSync(() => button2.click());
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>AA</p>
+				<p>aa</p>
+			`
+		);
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>+</button>
+				<p>AAA</p>
+				<p>aaa</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte
new file mode 100644
index 0000000000..edb0eaea44
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-child-effect/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let input = $state('a');
+
+	let queue = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		queue.push(() => deferred.resolve(value));
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => queue.shift()()}>shift</button>
+
+<svelte:boundary>
+	<button onclick={() => input += 'a'}>+</button>
+	<p>{await push(input.toUpperCase())}</p>
+
+	{#if true}
+		<p>{input}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js b/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js
new file mode 100644
index 0000000000..3186ed2069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-class-directive/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `loading`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div class="one">one</div>
+				<div class="two">two</div>
+				<div style="color: red;">red</div>
+				<div style="color: blue;">blue</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte
new file mode 100644
index 0000000000..f0f27e4830
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-class-directive/main.svelte
@@ -0,0 +1,11 @@
+<svelte:boundary>
+	<div class:one={await true} {...{}}>one</div>
+	<div class:two={await true}>two</div>
+
+	<div style:color={await 'red'} {...{}}>red</div>
+	<div style:color={await 'blue'}>blue</div>
+
+	{#snippet pending()}
+		loading
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
new file mode 100644
index 0000000000..39112b12a7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(1);
+
+	let { squared, cubed } = $derived(await {
+		squared: count ** 2,
+		cubed: count ** 3
+	});
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+<p>{count} ** 2 = {squared}</p>
+<p>{count} ** 3 = {cubed}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
new file mode 100644
index 0000000000..d444e8e1d9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>1 ** 2 = 1</p>
+				<p>1 ** 3 = 1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2 ** 2 = 4</p>
+				<p>2 ** 3 = 8</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte
new file mode 100644
index 0000000000..c5d8a12a78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte
new file mode 100644
index 0000000000..fb47377513
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let n = $derived(await 1);
+</script>
+
+<p>{n}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js
new file mode 100644
index 0000000000..914b311c97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte
new file mode 100644
index 0000000000..a53381c2d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-if/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>show</button>
+
+<svelte:boundary>
+	{#if show}
+		<Child />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte
new file mode 100644
index 0000000000..ffcd8b46b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { promise } = $props();
+
+	let d = $derived({
+		value: await promise
+	});
+</script>
+
+<p>{(await d).value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js
new file mode 100644
index 0000000000..fee8e2e6bf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>switch to d2</button>
+		<button>resolve d1</button>
+		<button>resolve d2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, errors }) {
+		const [toggle, resolve1, resolve2] = target.querySelectorAll('button');
+
+		toggle.click();
+		resolve1.click();
+		resolve2.click();
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>switch to d2</button>
+				<button>resolve d1</button>
+				<button>resolve d2</button>
+				<p>two</p>
+			`
+		);
+
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte
new file mode 100644
index 0000000000..9babdb2fe2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-invalidation-during-init/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+
+	let d1 = $state(Promise.withResolvers());
+	let d2 = $state(Promise.withResolvers());
+
+	let deferred = $state.raw(d1);
+</script>
+
+<button onclick={() => deferred = d2}>switch to d2</button>
+<button onclick={() => d1.resolve('one')}>resolve d1</button>
+<button onclick={() => d2.resolve('two')}>resolve d2</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte
new file mode 100644
index 0000000000..f803a30c37
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/Child.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { create_derived } from './state.svelte.js';
+
+	let { promise, num } = $props();
+
+	let derived = await create_derived(
+		() => promise,
+		() => num
+	);
+
+	$effect(() => {
+		console.log(`$effect ${derived.value} ${num}`);
+	});
+
+	$effect.pre(() => {
+		console.log(`$effect.pre ${derived.value} ${num}`);
+	});
+</script>
+
+<p>{derived.value}{console.log(`template ${derived.value} ${num}`)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
new file mode 100644
index 0000000000..f7d1d28fde
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
@@ -0,0 +1,93 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>a</button>
+		<button>b</button>
+		<button>increment</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, logs }) {
+		const [reset, a, b, increment] = target.querySelectorAll('button');
+
+		a.click();
+
+		// TODO why is this necessary? why isn't `await tick()` enough?
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>42</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>84</p>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>84</p>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>a</button>
+				<button>b</button>
+				<button>increment</button>
+				<p>86</p>
+			`
+		);
+
+		assert.deepEqual(logs, [
+			'outside boundary 1',
+			'$effect.pre 42 1',
+			'template 42 1',
+			'$effect 42 1',
+			'$effect.pre 84 2',
+			'template 84 2',
+			'outside boundary 2',
+			'$effect 84 2',
+			'$effect.pre 86 2',
+			'template 86 2',
+			'$effect 86 2'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte
new file mode 100644
index 0000000000..2c83e1d23d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './Child.svelte';
+
+	let num = $state(1);
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(42)}>a</button>
+<button onclick={() => deferred.resolve(43)}>b</button>
+<button onclick={() => num += 1}>increment</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} {num} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+{console.log(`outside boundary ${num}`)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js
new file mode 100644
index 0000000000..a53fbb8c6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/state.svelte.js
@@ -0,0 +1,9 @@
+export async function create_derived(get_promise, get_num) {
+	let value = $derived((await get_promise()) * get_num());
+
+	return {
+		get value() {
+			return value;
+		}
+	};
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte
new file mode 100644
index 0000000000..a90a9dedf7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/Component.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	let queue: Array<{ deferred: PromiseWithResolvers<number>; value: number }> = [];
+	let inited = false;
+
+	function push(value: number) {
+		const deferred = Promise.withResolvers<number>();
+		queue.push({ deferred, value });
+
+		if (!inited) {
+			inited = true;
+			shift();
+		}
+
+		return deferred.promise;
+	}
+
+	function shift() {
+		const next = queue.shift();
+		next?.deferred.resolve(next.value);
+	}
+
+	let n = $state(0);
+	let current = $derived(await push(n));
+</script>
+
+<button onclick={shift}>shift</button>
+<button onclick={() => n += 1}>increment</button>
+
+<p>{n}: {Math.min(current, 3)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js
new file mode 100644
index 0000000000..016c311f98
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/_config.js
@@ -0,0 +1,33 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>pending...</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<p>0: 0</p>
+			`
+		);
+
+		const [shift, increment] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		for (let i = 1; i < 5; i += 1) {
+			flushSync(() => increment.click());
+		}
+
+		for (let i = 1; i < 5; i += 1) {
+			shift.click();
+			await tick();
+
+			assert.equal(p.innerHTML, `${i}: ${Math.min(i, 3)}`);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte
new file mode 100644
index 0000000000..2d5ddca4db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unchanging/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<svelte:boundary>
+	<Component />
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte
new file mode 100644
index 0000000000..b59fd7c08f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { promise, num } = $props();
+
+	let value = $derived(num + (await promise));
+
+	$effect(() => {
+		console.log(`$effect ${value} ${num}`);
+	});
+
+	$effect.pre(() => {
+		console.log(`$effect.pre ${value} ${num}`);
+	});
+</script>
+
+<p>{value}{console.log(`template ${value} ${num}`)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js
new file mode 100644
index 0000000000..7239643464
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/_config.js
@@ -0,0 +1,48 @@
+import { flushSync, settled, tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<button>resolve a</button>
+		<button>resolve b</button>
+		<button>reset</button>
+		<button>increment</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, logs }) {
+		const [resolve_a, resolve_b, reset, increment] = target.querySelectorAll('button');
+
+		flushSync(() => resolve_a.click());
+		await tick();
+
+		const p = target.querySelector('p');
+		ok(p);
+		assert.htmlEqual(p.innerHTML, '1a');
+
+		flushSync(() => increment.click());
+		await tick();
+		assert.htmlEqual(p.innerHTML, '2a');
+
+		reset.click();
+		assert.htmlEqual(p.innerHTML, '2a');
+
+		resolve_b.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, '2b');
+
+		assert.deepEqual(logs, [
+			'outside boundary 1',
+			'$effect.pre 1a 1',
+			'template 1a 1',
+			'$effect 1a 1',
+			'$effect.pre 2a 2',
+			'template 2a 2',
+			'outside boundary 2',
+			'$effect 2a 2',
+			'$effect.pre 2b 2',
+			'template 2b 2',
+			'$effect 2b 2'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte
new file mode 100644
index 0000000000..1404ae0299
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+	let num = $state(1);
+</script>
+
+<button onclick={() => deferred.resolve('a')}>resolve a</button>
+<button onclick={() => deferred.resolve('b')}>resolve b</button>
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => num += 1}>increment</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} {num} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+{console.log(`outside boundary ${num}`)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js
new file mode 100644
index 0000000000..54aa68eeb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [button1, button2, button3] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
+
+		button2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
+
+		button3.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>b</p><p>c</p><p>d</p><p>e</p>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte
new file mode 100644
index 0000000000..eddcf2b749
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte
@@ -0,0 +1,39 @@
+<script>
+	let items = $state([
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]);
+</script>
+
+<button onclick={() => {
+	items[0].resolve('a');
+	items[1].resolve('b');
+	items[2].resolve('c');
+}}>step 1</button>
+
+<button onclick={() => {
+	items = [
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]
+}}>step 2</button>
+
+<button onclick={() => {
+	items[0].resolve('b');
+	items[1].resolve('c');
+	items[2].resolve('d');
+	items[3].resolve('e');
+}}>step 3</button>
+
+<svelte:boundary>
+	{#each items as deferred}
+		<p>{await deferred.promise}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js
new file mode 100644
index 0000000000..43d3a0f876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/_config.js
@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<button>reset</button>
+		<button>one</button>
+		<button>two</button>
+		<button>three</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, one, two, three] = target.querySelectorAll('button');
+
+		one.click();
+		await tick();
+
+		const [div] = target.querySelectorAll('div');
+		assert.htmlEqual(div.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+
+		two.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '<p>d</p><p>e</p><p>f</p><p>g</p>');
+
+		reset.click();
+		await tick();
+		three.click();
+		await tick();
+
+		assert.include(target.innerHTML, '<p>each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte
new file mode 100644
index 0000000000..e2f8263780
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-keyed/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(['a', 'b', 'c'])}>one</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'g'])}>two</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'd'])}>three</button>
+
+<svelte:boundary>
+	<div>
+		{#each await deferred.promise as item (item)}
+			<p>{item}</p>
+		{/each}
+	</div>
+
+	{#snippet failed(e)}
+		<p>{e.message}</p>
+	{/snippet}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each/_config.js
new file mode 100644
index 0000000000..50aa055130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each/_config.js
@@ -0,0 +1,48 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>abc</button>
+		<button>defg</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, abc, defg] = target.querySelectorAll('button');
+
+		abc.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>a</p><p>b</p><p>c</p>`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>a</p><p>b</p><p>c</p>`
+		);
+
+		defg.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>abc</button>
+				<button>defg</button>
+				<p>d</p><p>e</p><p>f</p><p>g</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte
new file mode 100644
index 0000000000..8e4412811a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(['a', 'b', 'c'])}>abc</button>
+<button onclick={() => deferred.resolve(['d', 'e', 'f', 'g'])}>defg</button>
+
+<svelte:boundary>
+	{#each await deferred.promise as item}
+		<p>{item}</p>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js
new file mode 100644
index 0000000000..9df3620798
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/_config.js
@@ -0,0 +1,81 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		shift.click();
+		shift.click();
+		shift.click();
+
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 3</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 2</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+				<p>0</p>
+				<p>0</p>
+				<p>pending: 1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+				<p>pending: 0</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte
new file mode 100644
index 0000000000..89cead2cc6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	let value = $state(0);
+	let deferreds = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ value, deferred });
+		return deferred.promise;
+	}
+
+	function shift() {
+		const d = deferreds.shift();
+		d?.deferred.resolve(d.value);
+	}
+</script>
+
+<button onclick={() => value++}>increment</button>
+<button onclick={() => shift()}>shift</button>
+
+<svelte:boundary>
+	<p>{await push(value)}</p>
+	<p>{await push(value)}</p>
+	<p>{await push(value)}</p>
+
+	<p>pending: {$effect.pending()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js
new file mode 100644
index 0000000000..2679785cff
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `loading`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'oops');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte
new file mode 100644
index 0000000000..a49a5c9540
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-block-expression/main.svelte
@@ -0,0 +1,8 @@
+<svelte:boundary>
+	{#each (await Promise.reject(new Error('oops'))) as x}
+		hi
+	{/each}
+
+	{#snippet pending()}loading{/snippet}
+	{#snippet failed()}oops{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js
new file mode 100644
index 0000000000..1613bf9c61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/_config.js
@@ -0,0 +1,87 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>clicks: 0</button>
+		<p>pending...</p>
+	`,
+
+	compileOptions: {
+		// this tests some behaviour that was broken in dev
+		dev: true
+	},
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		let [button] = target.querySelectorAll('button');
+		let [p] = target.querySelectorAll('p');
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 1</button>
+				<p>1</p>
+			`
+		);
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 2</button>
+				<p>2</p>
+			`
+		);
+
+		button.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 3</button>
+				<button>retry</button>
+			`
+		);
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		button2.click();
+		await tick();
+
+		[p] = target.querySelectorAll('p');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 4</button>
+				<p>4</p>
+			`
+		);
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clicks: 5</button>
+				<p>5</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte
new file mode 100644
index 0000000000..d5246d330e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-recovery/main.svelte
@@ -0,0 +1,24 @@
+<script lang=ts>
+	let count = $state(0);
+
+	function process(count) {
+		if (count === 3) throw new Error('kaboom');
+		return count;
+	}
+</script>
+
+<button onclick={() => count++}>
+	clicks: {count}
+</button>
+
+<svelte:boundary>
+	<p>{await process(count)}</p>
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
new file mode 100644
index 0000000000..dfbd238eeb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		let [button1, button2, button3] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>oops!</p><button data-id="reset">reset</button>'
+		);
+
+		button2.click();
+
+		const reset = /** @type {HTMLButtonElement} */ (target.querySelector('[data-id="reset"]'));
+		reset.click();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>'
+		);
+
+		button3.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><h1>wheee</h1>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
new file mode 100644
index 0000000000..9af5bbaa16
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.reject(new Error('oops!'))}>step 1</button>
+<button onclick={() => deferred = Promise.withResolvers()}>step 2</button>
+<button onclick={() => deferred.resolve('wheee')}>step 3</button>
+
+<svelte:boundary>
+	<h1>{await deferred.promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<p>{error.message}</p>
+		<button data-id="reset" onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js
new file mode 100644
index 0000000000..3a66ea709f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-expression/_config.js
@@ -0,0 +1,56 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>goodbye</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target, raf }) {
+		const [reset, hello, goodbye] = target.querySelectorAll('button');
+
+		hello.click();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+				<p>updating...</p>
+			`
+		);
+
+		goodbye.click();
+		await Promise.resolve();
+		raf.tick(0);
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>goodbye</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte
new file mode 100644
index 0000000000..42536ab02a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-expression/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('goodbye')}>goodbye</button>
+
+<svelte:boundary>
+	<h1>{await deferred.promise}</h1>
+
+	{#if $effect.pending()}
+		<p>updating...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js
new file mode 100644
index 0000000000..f5b1f3d2c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-html-tag/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>goodbye</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, goodbye] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>hello</h1>
+			`
+		);
+
+		goodbye.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>goodbye</button>
+				<h1>goodbye</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte
new file mode 100644
index 0000000000..980bb16d5c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-html-tag/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('goodbye')}>goodbye</button>
+
+<svelte:boundary>
+	<h1>{@html await deferred.promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if/_config.js
new file mode 100644
index 0000000000..3cd67952c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>reset</button><button>true</button><button>false</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [reset, t, f] = target.querySelectorAll('button');
+
+		t.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		f.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>true</button><button>false</button><h1>no</h1>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
new file mode 100644
index 0000000000..21a4cbef97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(true)}>true</button>
+<button onclick={() => deferred.resolve(false)}>false</button>
+
+<svelte:boundary>
+	{#if await deferred.promise}
+		<h1>yes</h1>
+	{:else}
+		<h1>no</h1>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/_config.js b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
new file mode 100644
index 0000000000..e7e5db3dd8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/_config.js
@@ -0,0 +1,46 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>1</button>
+		<button>2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, one, two] = target.querySelectorAll('button');
+
+		const html = `
+			<button>reset</button>
+			<button>1</button>
+			<button>2</button>
+			<h1>hello</h1>
+		`;
+
+		one.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		const h1 = target.querySelector('h1');
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		one.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+		assert.equal(target.querySelector('h1'), h1);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+
+		two.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, html);
+		assert.notEqual(target.querySelector('h1'), h1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
new file mode 100644
index 0000000000..5fbdbd47d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-key/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve(1)}>1</button>
+<button onclick={() => deferred.resolve(2)}>2</button>
+
+<svelte:boundary>
+	{#key await deferred.promise}
+		<h1>hello</h1>
+	{/key}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js
new file mode 100644
index 0000000000..cb8e0cfca9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/_config.js
@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>both</button><button>a</button><button>b</button><p>loading...</p>`,
+
+	async test({ assert, target }) {
+		const [both, a, b] = target.querySelectorAll('button');
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>both</button><button>a</button><button>b</button>
+				<p>1 * 2 = 2</p>
+				<p>2 * 2 = 4</p>
+			`
+		);
+
+		both.click();
+		b.click();
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>both</button><button>a</button><button>b</button>
+				<p>2 * 2 = 4</p>
+				<p>4 * 2 = 8</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte
new file mode 100644
index 0000000000..432eed976c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-different-deriveds/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let a = $state(1);
+	let b = $state(2);
+</script>
+
+<button onclick={() => {a += 1; b += 1;}}>both</button>
+<button onclick={() => {a += 1;}}>a</button>
+<button onclick={() => {b += 1;}}>b</button>
+
+<svelte:boundary>
+	<p>{a} * 2 = {await (a * 2)}</p>
+	<p>{b} * 2 = {b * 2}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
new file mode 100644
index 0000000000..5e522ebdb5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
@@ -0,0 +1,30 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, reset1, reset2, resolve1, resolve2] = target.querySelectorAll('button');
+
+		resolve1.click();
+		await tick();
+
+		const p = /** @type {HTMLElement} */ (target.querySelector('#test'));
+
+		assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
+
+		flushSync(() => reset1.click());
+		flushSync(() => a.click());
+		flushSync(() => reset2.click());
+		flushSync(() => b.click());
+
+		resolve2.click();
+		await tick();
+
+		assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
+
+		resolve1.click();
+		await tick();
+
+		assert.htmlEqual(p.innerHTML, '2 + 3 = 5');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
new file mode 100644
index 0000000000..cc82db0d75
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let delay = 1000;
+	let a = $state(1);
+	let b = $state(2);
+
+	let d1 = Promise.withResolvers();
+	let d2 = Promise.withResolvers();
+	let deferred = d1;
+
+	async function add(a, b) {
+		await deferred.promise;
+		return a + b;
+	}
+</script>
+
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<button onclick={() => deferred = d1 = Promise.withResolvers()}>reset 1</button>
+<button onclick={() => deferred = d2 = Promise.withResolvers()}>reset 2</button>
+
+<button onclick={() => d1.resolve()}>resolve 1</button>
+<button onclick={() => d2.resolve()}>resolve 2</button>
+
+<svelte:boundary>
+	<p id="test">{a} + {b} = {await add(a, b)}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte
new file mode 100644
index 0000000000..546494f4c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { count } = $props();
+
+	async function x() {
+		let d = $derived(await new Promise((f) => {}));
+	}
+
+	let indirect = $derived(x() && count);
+</script>
+
+<p>{indirect}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js
new file mode 100644
index 0000000000..172b44e6e3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/_config.js
@@ -0,0 +1,14 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>0</button><p>0</p>');
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<button>1</button><p>1</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte
new file mode 100644
index 0000000000..f6b0afe98c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-derived/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>{count}</button>
+
+<svelte:boundary>
+	<Child {count} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte
new file mode 100644
index 0000000000..d4d5cf7554
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { object } = $props();
+
+	await 1;
+</script>
+
+<button onclick={() => object.count++}>clicks: {object.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js
new file mode 100644
index 0000000000..167eee8488
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		const [button] = target.querySelectorAll('button');
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 1</button>');
+		assert.deepEqual(warnings, [
+			'Mutating unbound props (`object`, at Child.svelte:7:23) is strongly discouraged. Consider using `bind:object={...}` in main.svelte (or using a callback) instead'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte
new file mode 100644
index 0000000000..ae6b43cbb1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ownership-validation/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state({ count: 0 });
+</script>
+
+<svelte:boundary>
+	<Child {object} />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte
new file mode 100644
index 0000000000..85d212b1a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value } = $props();
+</script>
+
+<h1>{value}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js b/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js
new file mode 100644
index 0000000000..66690c120c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>again</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, again] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
+
+		again.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello again</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte
new file mode 100644
index 0000000000..38388607ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('hello again')}>again</button>
+
+<svelte:boundary>
+	<Child value={await deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
new file mode 100644
index 0000000000..16318a3b44
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `<button>a</button><button>b</button><button>c</button><p>pending</p>`,
+
+	async test({ assert, target, warnings }) {
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>a</button><button>b</button><button>c</button><h1>6</h1><p>6</p>'
+		);
+
+		assert.equal(
+			warnings[0],
+			'Detected reactivity loss when reading `b`. This happens when state is read in an async function after an earlier `await`'
+		);
+
+		assert.equal(warnings[1].name, 'TracedAtError');
+
+		assert.equal(warnings.length, 2);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
new file mode 100644
index 0000000000..03596ce051
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { untrack } from 'svelte';
+	let a = $state(1);
+	let b = $state(2);
+	let c = $state(3);
+
+	async function a_plus_b_plus_c() {
+		return await a + await b + await untrack(() => c);
+	}
+</script>
+
+<button onclick={() => a++}>a</button>
+<button onclick={() => b++}>b</button>
+<button onclick={() => c++}>c</button>
+
+<svelte:boundary>
+	<h1>{await a_plus_b_plus_c()}</h1>
+	<p>{await a + await b + await c}</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js
new file mode 100644
index 0000000000..17bb79af08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, c, ok] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>pending...</p>
+			`
+		);
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>c</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>c</p>
+			`
+		);
+
+		ok.click();
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>b</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte
new file mode 100644
index 0000000000..b1bb291e2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect-initial/main.svelte
@@ -0,0 +1,43 @@
+<script lang=ts>
+	let route = $state('b');
+	let ok = $state(false);
+
+	function goto(r) {
+		return Promise.resolve().then(() => {
+			route = r;
+			throw new Error('nope');
+		});
+	}
+</script>
+
+<h1>{route}</h1>
+<button onclick={() => route = 'a'}>a</button>
+<button onclick={() => route = 'b'}>b</button>
+<button onclick={() => route = 'c'}>c</button>
+<button onclick={() => ok = true}>ok</button>
+
+<svelte:boundary>
+	{#if route === 'a'}
+		<p>a</p>
+	{/if}
+
+	{#if route === 'b'}
+		{#if ok}
+			<p>b</p>
+		{:else}
+			{await goto('c')}
+		{/if}
+	{/if}
+
+	{#if route === 'c'}
+		<p>c</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
new file mode 100644
index 0000000000..ebbe642860
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
@@ -0,0 +1,52 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>a</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>a</p>
+			`
+		);
+
+		const [a, b, c, ok] = target.querySelectorAll('button');
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>c</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>c</p>
+			`
+		);
+
+		ok.click();
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>b</h1>
+				<button>a</button>
+				<button>b</button>
+				<button>c</button>
+				<button>ok</button>
+				<p>b</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
new file mode 100644
index 0000000000..bf5fdf9ed3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
@@ -0,0 +1,43 @@
+<script lang=ts>
+	let route = $state('a');
+	let ok = $state(false);
+
+	function goto(r) {
+		return Promise.resolve().then(() => {
+			route = r;
+			throw new Error('nope');
+		});
+	}
+</script>
+
+<h1>{route}</h1>
+<button onclick={() => route = 'a'}>a</button>
+<button onclick={() => route = 'b'}>b</button>
+<button onclick={() => route = 'c'}>c</button>
+<button onclick={() => ok = true}>ok</button>
+
+<svelte:boundary>
+	{#if route === 'a'}
+		<p>a</p>
+	{/if}
+
+	{#if route === 'b'}
+		{#if ok}
+			<p>b</p>
+		{:else}
+			{await goto('c')}
+		{/if}
+	{/if}
+
+	{#if route === 'c'}
+		<p>c</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending...</p>
+	{/snippet}
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>retry</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js
new file mode 100644
index 0000000000..6f3473f592
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>hello</button>
+		<button>wheee</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, hello, wheee] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
+
+		wheee.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>wheee</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte
new file mode 100644
index 0000000000..b59bc319d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('wheee')}>wheee</button>
+
+{#snippet hello(message)}
+	<h1>{message}</h1>
+{/snippet}
+
+<svelte:boundary>
+	{@render hello(await deferred.promise)}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte
new file mode 100644
index 0000000000..c32f869f63
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/Child.svelte
@@ -0,0 +1 @@
+<slot message={await 'hello'}></slot>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js b/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js
new file mode 100644
index 0000000000..3d54d24259
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<p>loading...</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte
new file mode 100644
index 0000000000..badd60746d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-slot/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child let:message>
+		<p>{message}</p>
+	</Child>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js
new file mode 100644
index 0000000000..8276c5be41
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/_config.js
@@ -0,0 +1,58 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO this one is tricky
+
+	async test({ assert, target }) {
+		const [increment, a, b] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>a: 0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		a.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>a: 0</p>
+			`
+		);
+
+		b.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift a</button>
+				<button>shift b</button>
+				<p>b: 0</p
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte
new file mode 100644
index 0000000000..c9d4f2b096
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-2/main.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let a = [];
+	let b = [];
+
+	function push(deferreds, value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ deferred, value });
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => {
+	const d = a.shift();
+	d?.deferred.resolve(d.value);
+}}>shift a</button>
+<button onclick={() => {
+	const d = b.shift();
+	d?.deferred.resolve(d.value);
+}}>shift b</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		<p>a: {await push(a, count)}</p>
+	{:else}
+		<p>b: {await push(b, count)}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js
new file mode 100644
index 0000000000..884b27d865
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/_config.js
@@ -0,0 +1,52 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>2</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>delayed: 3</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte
new file mode 100644
index 0000000000..eeefffbee6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived/main.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve(count)}>shift</button>
+
+<svelte:boundary>
+	{#if count % 2}
+		<p>delayed: {await push()}</p>
+	{:else}
+		<p>{await count}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js
new file mode 100644
index 0000000000..dc25be10c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>reset</button>
+		<button>h1</button>
+		<button>h2</button>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [reset, h1, h2] = target.querySelectorAll('button');
+
+		h1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
+
+		h2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h2>hello</h2>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte
new file mode 100644
index 0000000000..f8165784dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('h1')}>h1</button>
+<button onclick={() => deferred.resolve('h2')}>h2</button>
+
+<svelte:boundary>
+	<svelte:element this={await deferred.promise}>hello</svelte:element>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js
new file mode 100644
index 0000000000..06437d2e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/_config.js
@@ -0,0 +1,56 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [a, b, update] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>0</button>
+				<h1>a</h1>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>0</button>
+				<h1>b</h1>
+			`
+		);
+
+		update.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>1</button>
+				<h1>b</h1>
+			`
+		);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>1</button>
+				<h1>a</h1>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte
new file mode 100644
index 0000000000..5fca286a78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-time-travelling-derived/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let object = $state(null);
+	let count = $state(0);
+
+	const condition = $derived(object === null);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => (object = null)}>a</button>
+	<button onclick={() => (object = {})}>b</button>
+
+	<button onclick={async () => {
+		count++;
+		await Promise.resolve();
+		object = {};
+	}}>{await count}</button>
+
+	{#if condition}
+		<h1>a</h1>
+	{:else}
+		<h1>b</h1>
+	{/if}
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
new file mode 100644
index 0000000000..73c9b50a69
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
@@ -0,0 +1,40 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, hello] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		hello.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+			<p>condition is true</p>
+			<p>hello</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
new file mode 100644
index 0000000000..d111ce6fe3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+
+	let condition = $state(false);
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => condition = !condition}>toggle</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	{#if condition}
+		<p>condition is {condition}</p>
+		<Child promise={deferred.promise} />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
new file mode 100644
index 0000000000..b2200201c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>hello</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [hello] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>hello</button><p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
new file mode 100644
index 0000000000..78ad3ba04a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
new file mode 100644
index 0000000000..e9ccbba2b6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte
new file mode 100644
index 0000000000..e0619a1fe4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>
+	increment
+</button>
+
+<svelte:boundary>
+	{#if count % 2}
+		<p>{await new Promise(() => {})}</p>
+	{:else}
+		<p>{await count}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js
new file mode 100644
index 0000000000..e2c8b851c1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/_config.js
@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>resolve 1</button>
+		<button>resolve 2</button>
+		<hr>
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve 1</button>
+				<button>resolve 2</button>
+				<hr>
+				<p>pending</p>
+			`
+		);
+
+		button2.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve 1</button>
+				<button>resolve 2</button>
+				<hr>
+				<button>0</button>
+				<p>true</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte
new file mode 100644
index 0000000000..86af9bb07e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-waterfall-on-init/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let d1 = Promise.withResolvers();
+	let d2 = Promise.withResolvers();
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => d1.resolve(true)}>resolve 1</button>
+<button onclick={() => d2.resolve(true)}>resolve 2</button>
+
+<hr>
+
+<svelte:boundary>
+	{#if await d1.promise}
+		<button onclick={() => count += 1}>{count}</button>
+		<p>{await d2.promise}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js
new file mode 100644
index 0000000000..837dd976e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/_config.js
@@ -0,0 +1,53 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>loading...</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 1</button>
+				<button>other 1</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		const [log, x, other] = target.querySelectorAll('button');
+
+		flushSync(() => x.click());
+		flushSync(() => other.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 1</button>
+				<button>other 2</button>
+				<p>1</p>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>log</button>
+				<button>x 2</button>
+				<button>other 2</button>
+				<p>2</p>
+				<p>2</p>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte
new file mode 100644
index 0000000000..764007e082
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-with-sync-derived/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let x = $state(1);
+	let y = $derived(x);
+	let other = $state(1);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => console.log({ x, y })}>log</button>
+	<button onclick={() => x += 1}>x {x}</button>
+	<button onclick={() => other += 1}>other {other}</button>
+
+	<p>{x}</p>
+	<p>{await x}</p>
+	<p>{y}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js
new file mode 100644
index 0000000000..1d2e6dd470
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		flushSync(() => {
+			input.focus();
+			input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+		});
+		assert.equal(input.value, '2');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<label>
+					<input /> arrow up/down
+				</label>
+				<p>value = 2</p>
+			`
+		);
+
+		flushSync(() => {
+			input.focus();
+			input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+		});
+		assert.equal(input.value, '1');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<label>
+					<input /> arrow up/down
+				</label>
+				<p>value = 1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte
new file mode 100644
index 0000000000..4cc174e404
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let value = $state('1');
+
+	function onkeydown (e) {
+		let _v = parseFloat(value);
+		if (e.key === 'ArrowUp') _v += 1;
+		else if (e.key === 'ArrowDown') _v -= 1;
+		value = _v.toString();
+	}
+</script>
+
+<label>
+	<input bind:value {onkeydown} /> arrow up/down
+</label>
+
+<p>value = {value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
new file mode 100644
index 0000000000..b184e0e9b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	$effect(() => {
+		const signal = getAbortSignal()
+		signal.addEventListener('abort', () => console.log('abort'))
+	})
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
new file mode 100644
index 0000000000..6eb4b06712
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, ['abort']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte
new file mode 100644
index 0000000000..99ea3fabb4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+
+	let show = $state(true)
+</script>
+
+<button onclick={() => (show = !show)}>click</button>
+{#if show}
+	<Component />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
index e55733c148..416f61d23a 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
@@ -1,3 +1,4 @@
+import { async_mode } from '../../../helpers';
 import { test } from '../../test';
 import { flushSync } from 'svelte';
 
@@ -10,6 +11,12 @@ export default test({
 		flushSync(() => {
 			b1.click();
 		});
-		assert.deepEqual(logs, ['init 0']);
+
+		// With async mode (which is on by default for runtime-runes) this works as expected, without it
+		// it works differently: https://github.com/sveltejs/svelte/pull/15564
+		assert.deepEqual(
+			logs,
+			async_mode ? ['init 0', 'cleanup 0', null, 'init 2', 'cleanup 2', null, 'init 4'] : ['init 0']
+		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
index 2cdcfdfb58..da38374f82 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
@@ -14,4 +14,4 @@
 	})
 </script>
 
-<button on:click={() => count++ }>Click</button>
+<button onclick={() => count++ }>Click</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
new file mode 100644
index 0000000000..400495050c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, errors }) {
+		const [button] = document.querySelectorAll('button');
+
+		try {
+			flushSync(() => button.click());
+		} catch (e) {
+			assert.equal(errors.length, 1); // for whatever reason we can't get the name which should be UpdatedAtError
+			assert.ok(/** @type {Error} */ (e).message.startsWith('effect_update_depth_exceeded'));
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte
new file mode 100644
index 0000000000..ddb91a90ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let condition = $state(false);
+	let count = $state(0);
+
+	$effect(() => {
+		if (condition) {
+			count++;
+		}
+	});
+</script>
+
+<button onclick={() => condition = !condition}>toggle</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
index e092d0e7c7..f34668ec45 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
@@ -2,6 +2,8 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	skip: true, // TODO unskip once tagged values are in and we can fix this properly
+
 	test({ assert, target }) {
 		let btn = target.querySelector('button');
 
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
index ccff614ade..e3a3b0c7d7 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
@@ -2,12 +2,14 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target }) {
+	test({ assert, target, errors }) {
 		let btn = target.querySelector('button');
 
 		btn?.click();
 		flushSync();
 
+		assert.equal(errors.length, 1);
+
 		assert.htmlEqual(target.innerHTML, `<div class="error">An error occurred!</div>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
index 040e13676e..06da8f667c 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
@@ -9,6 +9,6 @@ export default test({
 		flushSync();
 
 		assert.deepEqual(logs, ['error caught']);
-		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+		assert.htmlEqual(target.innerHTML, `<div>oh no!</div><button>+</button>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
index bad84666c0..bc7fe072c4 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	function throw_error() {
-		throw new Error('test')
+		throw new Error('oh no!')
 	}
 
 	let count = $state(0);
@@ -9,8 +9,8 @@
 <svelte:boundary onerror={(e) => console.log('error caught')}>
 	{count > 0 ? throw_error() : null}
 
-	{#snippet failed()}
-		<div>Fallback!</div>
+	{#snippet failed(e)}
+		<div>{e.message}</div>
 	{/snippet}
 </svelte:boundary>
 
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js
new file mode 100644
index 0000000000..092d7ad37d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+
+		assert.throws(flushSync, 'svelte_boundary_reset_onerror');
+
+		// boundary content empty; only button remains
+		assert.htmlEqual(target.innerHTML, `<button>trigger throw</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte
new file mode 100644
index 0000000000..f91048a9e7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-onerror/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let must_throw = $state(false);
+
+	function throw_error() {
+		throw new Error("error on template render");
+	}
+</script>
+
+<svelte:boundary onerror={(_, reset) => reset()}>
+	{must_throw ? throw_error() : 'normal content'}
+
+	{#snippet failed()}
+		<div>err</div>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={() => must_throw = true}>trigger throw</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js
new file mode 100644
index 0000000000..687961e721
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/_config.js
@@ -0,0 +1,28 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		normal content
+		<button>toggle</button>
+	`,
+
+	async test({ assert, target, warnings }) {
+		const [btn] = target.querySelectorAll('button');
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `<div>err</div><button>toggle</button>`);
+		assert.deepEqual(warnings, []);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `normal content <button>toggle</button>`);
+		assert.deepEqual(warnings, []);
+
+		flushSync(() => btn.click());
+		assert.htmlEqual(target.innerHTML, `<div>err</div><button>toggle</button>`);
+
+		assert.deepEqual(warnings, [
+			'A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte
new file mode 100644
index 0000000000..c1462eaf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-premature/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let must_throw = $state(false);
+	let reset = $state(null);
+
+	function throw_error() {
+		throw new Error("error on template render");
+	}
+</script>
+
+<svelte:boundary onerror={console.error}>
+	<svelte:boundary onerror={(_, fn) => (reset = fn)}>
+		{must_throw ? throw_error() : 'normal content'}
+
+		{#snippet failed()}
+			<div>err</div>
+		{/snippet}
+	</svelte:boundary>
+</svelte:boundary>
+
+<button
+	onclick={() => {
+		must_throw = !must_throw;
+		if (reset) reset();
+	}}>
+	toggle
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js
new file mode 100644
index 0000000000..844e6981bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, warnings }) {
+		const [toggle] = target.querySelectorAll('button');
+
+		flushSync(() => toggle.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>toggle</button><p>yikes!</p><button>reset</button>`
+		);
+
+		const [, reset] = target.querySelectorAll('button');
+		flushSync(() => reset.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>toggle</button><p>yikes!</p><button>reset</button>`
+		);
+
+		flushSync(() => toggle.click());
+
+		const [, reset2] = target.querySelectorAll('button');
+		flushSync(() => reset2.click());
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><p>hello!</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte
new file mode 100644
index 0000000000..91479a631a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-reset-with-error/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let must_throw = $state(false);
+
+	function throw_error() {
+		throw new Error('yikes!');
+	}
+</script>
+
+<button onclick={() => must_throw = !must_throw}>toggle</button>
+
+<svelte:boundary>
+	<p>{must_throw ? throw_error() : 'hello!'}</p>
+
+	{#snippet failed(error, reset)}
+		<p>{error.message}</p>
+		<button onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
index 0e6b12508b..49f1b5de41 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-deep-array/_config.js
@@ -13,17 +13,6 @@ export default test({
 			button?.click();
 		});
 
-		assert.deepEqual(logs, [
-			'init',
-			[1, 2, 3, 7],
-			'update',
-			[2, 2, 3, 7],
-			'update',
-			[2, 3, 3, 7],
-			'update',
-			[2, 3, 7, 7],
-			'update',
-			[2, 3, 7]
-		]);
+		assert.deepEqual(logs, ['init', [1, 2, 3, 7], 'update', [2, 3, 7]]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
index e155ff236a..83e0eb9443 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
@@ -11,7 +11,7 @@ export default test({
 		b1?.click();
 		flushSync();
 
-		assert.ok(errors.length > 0);
+		assert.equal(errors.length, 0);
 		assert.deepEqual(logs, ['init', 'a', 'init', 'b']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js
new file mode 100644
index 0000000000..4e16c0cf2a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: 'store', highlighted: true },
+			{ log: '$count', highlighted: false },
+			{ log: 0 }
+		]);
+
+		logs.length = 0;
+
+		const [button] = target.querySelectorAll('button');
+		flushSync(() => button.click());
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: 'store', highlighted: true },
+			{ log: '$count', highlighted: false },
+			{ log: 1 }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte
new file mode 100644
index 0000000000..af57513365
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+
+	$effect(() => {
+		$inspect.trace('effect');
+		$count;
+	});
+</script>
+
+<button onclick={() => $count += 1}>
+	clicks: {$count}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte
new file mode 100644
index 0000000000..f71890d31e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/Teardown.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte'
+	
+	const { callback } = $props()
+	
+	onDestroy(() => {
+		callback()
+	})
+</script>
+
+<div>teardown</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js
new file mode 100644
index 0000000000..c4e7d1307b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>click</button>
+				<div>teardown</div>
+				<div>1</div>
+				<div>2</div>
+				<div>3</div>
+			`
+		);
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>click</button>
+				<div>1</div>
+				<div>3</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte
new file mode 100644
index 0000000000..ff9e19b2c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived-teardown/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity'
+	import Teardown from './Teardown.svelte'
+
+	class Test {
+		originalIds = $state.raw([1, 2, 3])
+		ids = $derived(new SvelteSet(this.originalIds))
+	}
+
+	let show = $state(true)
+	const test = new Test()
+
+	function callback() {
+		test.ids.delete(2)
+	}
+</script>
+
+
+<button onclick={() => (show = !show)}>click</button>
+{#if show}
+	<Teardown {callback} />
+{/if}
+{#each test.ids as id}
+	<div>{id}</div>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte
new file mode 100644
index 0000000000..122a316726
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { setContext } from 'svelte';
+
+	await Promise.resolve();
+
+	try {
+		setContext('potato', {});
+	} catch (e) {
+		console.log(e.message);
+	}
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js
new file mode 100644
index 0000000000..1bf7e71176
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, logs }) {
+		await Promise.resolve();
+		await Promise.resolve();
+		await Promise.resolve();
+
+		assert.ok(logs[0].startsWith('set_context_after_init'));
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte
new file mode 100644
index 0000000000..65d0e623cf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-await/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		...
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js
new file mode 100644
index 0000000000..4569f42a73
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { async_mode } from '../../../helpers';
+
+export default test({
+	async test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.ok(
+			async_mode
+				? logs[0].startsWith('set_context_after_init')
+				: logs[0] === 'works without experimental async but really shouldnt'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte
new file mode 100644
index 0000000000..0c3b6c3a0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-context-after-mount/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { setContext } from 'svelte';
+
+	let condition = $state(false);
+
+	$effect(() => {
+		if (condition) {
+			try {
+				setContext('potato', {});
+				console.log('works without experimental async but really shouldnt')
+			} catch (e) {
+				console.log(e.message);
+			}
+		}
+	});
+</script>
+
+<button onclick={() => condition = !condition}>
+	{condition}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js
new file mode 100644
index 0000000000..de078b1e75
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test: ({ assert, target }) => {
+		const [loading, increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: 0</div>
+				<div>valueFromStore.current: 0</div>
+				<div>valueDerivedCurrent: 0</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+
+		loading.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: Loading...</div>
+				<div>valueFromStore.current: Loading...</div>
+				<div>valueDerivedCurrent: Loading...</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+
+		increment.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>$value: 1</div>
+				<div>valueFromStore.current: 1</div>
+				<div>valueDerivedCurrent: 1</div>
+				<button>Loading</button>
+				<button>Increment</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte
new file mode 100644
index 0000000000..06d0a0d4b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-inside-derived/main.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { fromStore, writable } from 'svelte/store';
+	
+  let isLoading = $state(false);
+
+  const value = writable(0);
+  const valueFromStore = fromStore(value);
+  const valueDerivedCurrent = $derived(valueFromStore.current);
+</script>
+
+<div>
+	$value: {isLoading ? 'Loading...' : $value}
+</div>
+
+<div>
+	valueFromStore.current: {isLoading ? 'Loading...' : valueFromStore.current}
+</div>
+
+<div>
+	valueDerivedCurrent: {isLoading ? 'Loading...' : valueDerivedCurrent}
+</div>
+
+<button
+	onclick={() => {
+		isLoading = true;
+	}}>
+	Loading
+</button>
+
+<button
+	onclick={() => {
+		$value++;
+		isLoading = false;
+	}}>
+	Increment
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
index 339cec55c5..25414d4b47 100644
--- a/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
@@ -3,6 +3,8 @@ import { test, ok } from '../../test';
 
 // Tests that tick only resolves after all pending effects have been cleared
 export default test({
+	skip: true, // weirdly, this works if you run it by itself
+
 	async test({ assert, target }) {
 		const btn = target.querySelector('button');
 		ok(btn);
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
index 18062b86fb..b728c3c0be 100644
--- a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
@@ -2,6 +2,8 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	// In async mode we _do_ want to run effects that react to their own state changing
+	skip_async: true,
 	test({ assert, target, logs }) {
 		const button = target.querySelector('button');
 
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 719c936df0..937324727b 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -6,16 +6,18 @@ import {
 	effect,
 	effect_root,
 	render_effect,
-	user_effect
+	user_effect,
+	user_pre_effect
 } from '../../src/internal/client/reactivity/effects';
 import { state, set, update, update_pre } from '../../src/internal/client/reactivity/sources';
-import type { Derived, Effect, Value } from '../../src/internal/client/types';
+import type { Derived, Effect, Source, Value } from '../../src/internal/client/types';
 import { proxy } from '../../src/internal/client/proxy';
 import { derived } from '../../src/internal/client/reactivity/deriveds';
 import { snapshot } from '../../src/internal/shared/clone.js';
 import { SvelteSet } from '../../src/reactivity/set';
 import { DESTROYED } from '../../src/internal/client/constants';
 import { noop } from 'svelte/internal/client';
+import { disable_async_mode_flag, enable_async_mode_flag } from '../../src/internal/flags';
 
 /**
  * @param runes runes mode
@@ -557,7 +559,7 @@ describe('signals', () => {
 		};
 	});
 
-	test('schedules rerun when writing to signal before reading it', (runes) => {
+	test.skip('schedules rerun when writing to signal before reading it', (runes) => {
 		if (!runes) return () => {};
 
 		const error = console.error;
@@ -1049,31 +1051,85 @@ describe('signals', () => {
 		};
 	});
 
-	test('effects do not depend on state they own', () => {
+	test('effects do depend on state they own', (runes) => {
+		// This behavior is important for use cases like a Resource class
+		// which shares its instance between multiple effects and triggers
+		// rerenders by self-invalidating its state.
+		const log: number[] = [];
+
+		let count: any;
+
+		if (runes) {
+			// We will make this the new default behavior once it's stable but until then
+			// we need to keep the old behavior to not break existing code.
+			enable_async_mode_flag();
+		}
+
+		effect(() => {
+			if (!count || $.get<number>(count) < 2) {
+				count ||= state(0);
+				log.push($.get(count));
+				set(count, $.get<number>(count) + 1);
+			}
+		});
+
+		return () => {
+			try {
+				flushSync();
+				if (runes) {
+					assert.deepEqual(log, [0, 1]);
+				} else {
+					assert.deepEqual(log, [0]);
+				}
+			} finally {
+				disable_async_mode_flag();
+			}
+		};
+	});
+
+	test('nested effects depend on state of upper effects', () => {
+		const logs: number[] = [];
+		let raw: Source<number>;
+		let proxied: { current: number };
+
 		user_effect(() => {
-			const value = state(0);
-			set(value, $.get(value) + 1);
+			raw = state(0);
+			proxied = proxy({ current: 0 });
+
+			// We need those separate, else one working and rerunning the effect
+			// could mask the other one not rerunning
+			user_effect(() => {
+				logs.push($.get(raw));
+			});
+
+			user_effect(() => {
+				logs.push(proxied.current);
+			});
 		});
 
 		return () => {
 			flushSync();
+			set(raw, $.get(raw) + 1);
+			proxied.current += 1;
+			flushSync();
+			assert.deepEqual(logs, [0, 0, 1, 1]);
 		};
 	});
 
 	test('nested effects depend on state of upper effects', () => {
 		const logs: number[] = [];
 
-		user_effect(() => {
+		user_pre_effect(() => {
 			const raw = state(0);
 			const proxied = proxy({ current: 0 });
 
 			// We need those separate, else one working and rerunning the effect
 			// could mask the other one not rerunning
-			user_effect(() => {
+			user_pre_effect(() => {
 				logs.push($.get(raw));
 			});
 
-			user_effect(() => {
+			user_pre_effect(() => {
 				logs.push(proxied.current);
 			});
 
@@ -1081,7 +1137,7 @@ describe('signals', () => {
 			// together with the reading effects
 			flushSync();
 
-			user_effect(() => {
+			user_pre_effect(() => {
 				$.untrack(() => {
 					set(raw, $.get(raw) + 1);
 					proxied.current += 1;
diff --git a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
index 4b6e32d58e..cc2628c852 100644
--- a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
@@ -8,7 +8,7 @@ export default function Await_block_scope($$payload) {
 		counter.count += 1;
 	}
 
-	$$payload.out += `<button>clicks: ${$.escape(counter.count)}</button> `;
+	$$payload.out.push(`<button>clicks: ${$.escape(counter.count)}</button> `);
 	$.await($$payload, promise, () => {}, (counter) => {});
-	$$payload.out += `<!--]--> ${$.escape(counter.count)}`;
+	$$payload.out.push(`<!--]--> ${$.escape(counter.count)}`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
index e2c0ee29a5..c0db7d2fd5 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
@@ -2,7 +2,7 @@ import * as $ from 'svelte/internal/server';
 import TextInput from './Child.svelte';
 
 function snippet($$payload) {
-	$$payload.out += `<!---->Something`;
+	$$payload.out.push(`<!---->Something`);
 }
 
 export default function Bind_component_snippet($$payload) {
@@ -23,7 +23,7 @@ export default function Bind_component_snippet($$payload) {
 			}
 		});
 
-		$$payload.out += `<!----> value: ${$.escape(value)}`;
+		$$payload.out.push(`<!----> value: ${$.escape(value)}`);
 	}
 
 	do {
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..0d95d8d335
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
@@ -0,0 +1,28 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var on_click = (e) => {
+	const index = Number(e.currentTarget.dataset.index);
+
+	console.log(index);
+};
+
+var root_1 = $.from_html(`<button type="button">B</button>`);
+
+export default function Delegated_locally_declared_shadowed($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.each(node, 0, () => ({ length: 1 }), $.index, ($$anchor, $$item, index) => {
+		var button = root_1();
+
+		$.set_attribute(button, 'data-index', index);
+		button.__click = [on_click];
+		$.append($$anchor, button);
+	});
+
+	$.append($$anchor, fragment);
+}
+
+$.delegate(['click']);
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..ac3dfcd2cb
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/server/index.svelte.js
@@ -0,0 +1,13 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Delegated_locally_declared_shadowed($$payload) {
+	const each_array = $.ensure_array_like({ length: 1 });
+
+	$$payload.out.push(`<!--[-->`);
+
+	for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+		$$payload.out.push(`<button type="button"${$.attr('data-index', index)}>B</button>`);
+	}
+
+	$$payload.out.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte
new file mode 100644
index 0000000000..d870a6b270
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/index.svelte
@@ -0,0 +1,12 @@
+<script lang="ts"></script>
+
+{#each { length: 1 }, index}
+	<button
+		type="button"
+		data-index={index}
+		onclick={(e) => {
+			const index = Number(e.currentTarget.dataset.index)!;
+			console.log(index);
+		}}>B</button
+	>
+{/each}
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
index cf731d8187..9c837d4e1d 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
@@ -6,5 +6,5 @@ export default function Main($$payload) {
 
 	let y = () => 'test';
 
-	$$payload.out += `<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`;
+	$$payload.out.push(`<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
index 3431e36833..8fa0c5f28c 100644
--- a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
@@ -3,11 +3,11 @@ import * as $ from 'svelte/internal/server';
 export default function Each_index_non_null($$payload) {
 	const each_array = $.ensure_array_like(Array(10));
 
-	$$payload.out += `<!--[-->`;
+	$$payload.out.push(`<!--[-->`);
 
 	for (let i = 0, $$length = each_array.length; i < $$length; i++) {
-		$$payload.out += `<p>index: ${$.escape(i)}</p>`;
+		$$payload.out.push(`<p>index: ${$.escape(i)}</p>`);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$payload.out.push(`<!--]-->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
index 4386c22ebe..6dbe8130da 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js
@@ -3,13 +3,13 @@ import * as $ from 'svelte/internal/server';
 export default function Each_string_template($$payload) {
 	const each_array = $.ensure_array_like(['foo', 'bar', 'baz']);
 
-	$$payload.out += `<!--[-->`;
+	$$payload.out.push(`<!--[-->`);
 
 	for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 		let thing = each_array[$$index];
 
-		$$payload.out += `<!---->${$.escape(thing)}, `;
+		$$payload.out.push(`<!---->${$.escape(thing)}, `);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$payload.out.push(`<!--]-->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
index 7d37abd97b..ce4f09ed1d 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
@@ -15,7 +15,7 @@ export default function Function_prop_no_getter($$payload) {
 		onmouseenter: () => count = plusOne(count),
 
 		children: ($$payload) => {
-			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
+			$$payload.out.push(`<!---->clicks: ${$.escape(count)}`);
 		},
 
 		$$slots: { default: true }
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
index dc49c0c213..b1a0a5f9e6 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Functional_templating($$payload) {
-	$$payload.out += `<h1>hello</h1> <div class="potato"><p>child element</p> <p>another child element</p></div>`;
+	$$payload.out.push(`<h1>hello</h1> <div class="potato"><p>child element</p> <p>another child element</p></div>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
index 8766fb1300..30f6d6b74a 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Hello_world($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+	$$payload.out.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
index 959e0a403e..ea1d12c83b 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Hmr($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+	$$payload.out.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
index 3b23befcd4..18e01b4f72 100644
--- a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
@@ -4,5 +4,5 @@ export default function Nullish_coallescence_omittance($$payload) {
 	let name = 'world';
 	let count = 0;
 
-	$$payload.out += `<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`;
+	$$payload.out.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
index 9457378c0d..29b0d0d594 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
@@ -1,7 +1,7 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Purity($$payload) {
-	$$payload.out += `<p>0</p> <p>${$.escape(location.href)}</p> `;
+	$$payload.out.push(`<p>0</p> <p>${$.escape(location.href)}</p> `);
 	Child($$payload, { prop: encodeURIComponent('hello') });
-	$$payload.out += `<!---->`;
+	$$payload.out.push(`<!---->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 0532ec5aa9..bad475ec86 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from 'svelte/internal/server';
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select><option value="a"${$.maybe_selected($$payload, 'a')}>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`;
+	$$payload.out.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select><option value="a"${$.maybe_selected($$payload, 'a')}>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
index f814dd4f84..c2736b0f43 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
@@ -11,5 +11,5 @@ export default function State_proxy_literal($$payload) {
 		tpl = ``;
 	}
 
-	$$payload.out += `<input${$.attr('value', str)}/> <input${$.attr('value', tpl)}/> <button>reset</button>`;
+	$$payload.out.push(`<input${$.attr('value', str)}/> <input${$.attr('value', tpl)}/> <button>reset</button>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
index 6f019647f5..f7dc586026 100644
--- a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
@@ -12,5 +12,5 @@ export default function Text_nodes_deriveds($$payload) {
 		return count2;
 	}
 
-	$$payload.out += `<p>${$.escape(text1())}${$.escape(text2())}</p>`;
+	$$payload.out.push(`<p>${$.escape(text1())}${$.escape(text2())}</p>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/store/test.ts b/packages/svelte/tests/store/test.ts
index 77cecca7e5..ecb22c1be6 100644
--- a/packages/svelte/tests/store/test.ts
+++ b/packages/svelte/tests/store/test.ts
@@ -11,6 +11,7 @@ import {
 } from 'svelte/store';
 import { source, set } from '../../src/internal/client/reactivity/sources';
 import * as $ from '../../src/internal/client/runtime';
+import { flushSync } from '../../src/internal/client/reactivity/batch';
 import { effect_root, render_effect } from 'svelte/internal/client';
 
 describe('writable', () => {
@@ -602,7 +603,7 @@ describe('toStore', () => {
 		assert.deepEqual(log, [0]);
 
 		set(count, 1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		unsubscribe();
@@ -625,7 +626,7 @@ describe('toStore', () => {
 		assert.deepEqual(log, [0]);
 
 		set(count, 1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		store.set(2);
@@ -654,11 +655,11 @@ describe('fromStore', () => {
 		assert.deepEqual(log, [0]);
 
 		store.set(1);
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		count.current = 2;
-		$.flushSync();
+		flushSync();
 		assert.deepEqual(log, [0, 1, 2]);
 
 		assert.equal(get(store), 2);
diff --git a/packages/svelte/tests/suite.ts b/packages/svelte/tests/suite.ts
index 0ae06e727f..bbd252b8e1 100644
--- a/packages/svelte/tests/suite.ts
+++ b/packages/svelte/tests/suite.ts
@@ -20,6 +20,9 @@ const filter = process.env.FILTER
 		)
 	: /./;
 
+// this defaults to 10, which is too low for some of our tests
+Error.stackTraceLimit = 100;
+
 export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string) => void) {
 	return {
 		test: (config: Test) => config,
@@ -35,7 +38,7 @@ export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string
 
 export function suite_with_variants<Test extends BaseTest, Variants extends string, Common>(
 	variants: Variants[],
-	should_skip_variant: (variant: Variants, config: Test) => boolean | 'no-test',
+	should_skip_variant: (variant: Variants, config: Test, test_name: string) => boolean | 'no-test',
 	common_setup: (config: Test, test_dir: string) => Promise<Common> | Common,
 	fn: (config: Test, test_dir: string, variant: Variants, common: Common) => void
 ) {
@@ -46,11 +49,11 @@ export function suite_with_variants<Test extends BaseTest, Variants extends stri
 				let called_common = false;
 				let common: any = undefined;
 				for (const variant of variants) {
-					if (should_skip_variant(variant, config) === 'no-test') {
+					if (should_skip_variant(variant, config, dir) === 'no-test') {
 						continue;
 					}
 					// TODO unify test interfaces
-					const skip = config.skip || should_skip_variant(variant, config);
+					const skip = config.skip || should_skip_variant(variant, config, dir);
 					const solo = config.solo;
 					let it_fn = skip ? it.skip : solo ? it.only : it;
 
diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
index 11dc007352..e97951065d 100644
--- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
@@ -5,6 +5,7 @@
 <a href="/#" aria-label="Valid empty link"></a>
 
 <button aria-hidden='true'></button>
+<button inert></button>
 <a href="/#" aria-hidden='true'><b></b></a>
 
 <button>Click me</button>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
index 769dbe8c5b..7b1dccd1e8 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-autofocus/input.svelte
@@ -1 +1,6 @@
-<div autofocus></div>
\ No newline at end of file
+<div autofocus></div>
+<dialog autofocus>
+</dialog>
+<dialog>
+	<input autofocus>
+</dialog>
diff --git a/packages/svelte/tests/validator/samples/default-export-indirect/errors.json b/packages/svelte/tests/validator/samples/default-export-indirect/errors.json
new file mode 100644
index 0000000000..6a8b2b3c13
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-indirect/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "module_illegal_default_export",
+		"message": "A component cannot have a default export",
+		"start": {
+			"line": 3,
+			"column": 4
+		},
+		"end": {
+			"line": 3,
+			"column": 32
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte b/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte
new file mode 100644
index 0000000000..72150edab1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-indirect/input.svelte
@@ -0,0 +1,4 @@
+<script module>
+    let answer = 42;
+    export { answer as default};
+</script>
\ No newline at end of file
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 432171ae0d..9ea45af7e6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -434,6 +434,11 @@ declare module 'svelte' {
 	 * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
 	 * */
 	export function afterUpdate(fn: () => void): void;
+	/**
+	 * Synchronously flush any pending updates.
+	 * Returns void if no callback is provided, otherwise returns the result of calling the callback.
+	 * */
+	export function flushSync<T = void>(fn?: (() => T) | undefined): T;
 	/**
 	 * Create a snippet programmatically
 	 * */
@@ -443,29 +448,6 @@ declare module 'svelte' {
 	}): Snippet<Params>;
 	/** Anything except a function */
 	type NotFunction<T> = T extends Function ? never : T;
-	/**
-	 * Synchronously flush any pending updates.
-	 * Returns void if no callback is provided, otherwise returns the result of calling the callback.
-	 * */
-	export function flushSync<T = void>(fn?: (() => T) | undefined): T;
-	/**
-	 * Returns a promise that resolves once any pending state changes have been applied.
-	 * */
-	export function tick(): Promise<void>;
-	/**
-	 * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
-	 * any state read inside `fn` will not be treated as a dependency.
-	 *
-	 * ```ts
-	 * $effect(() => {
-	 *   // this will run when `data` changes, but not when `time` changes
-	 *   save(data, {
-	 *     timestamp: untrack(() => time)
-	 *   });
-	 * });
-	 * ```
-	 * */
-	export function untrack<T>(fn: () => T): T;
 	/**
 	 * Retrieves the context that belongs to the closest parent component with the specified `key`.
 	 * Must be called during component initialisation.
@@ -539,6 +521,30 @@ declare module 'svelte' {
 	export function unmount(component: Record<string, any>, options?: {
 		outro?: boolean;
 	} | undefined): Promise<void>;
+	/**
+	 * Returns a promise that resolves once any pending state changes have been applied.
+	 * */
+	export function tick(): Promise<void>;
+	/**
+	 * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
+	 * have resolved and the DOM has been updated
+	 * @since 5.36
+	 */
+	export function settled(): Promise<void>;
+	/**
+	 * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
+	 * any state read inside `fn` will not be treated as a dependency.
+	 *
+	 * ```ts
+	 * $effect(() => {
+	 *   // this will run when `data` changes, but not when `time` changes
+	 *   save(data, {
+	 *     timestamp: untrack(() => time)
+	 *   });
+	 * });
+	 * ```
+	 * */
+	export function untrack<T>(fn: () => T): T;
 	type Getters<T> = {
 		[K in keyof T]: () => T[K];
 	};
@@ -1111,6 +1117,17 @@ declare module 'svelte/compiler' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning) => boolean;
+		/**
+		 * Experimental options
+		 * @since 5.36
+		 */
+		experimental?: {
+			/**
+			 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+			 * @since 5.36
+			 */
+			async?: boolean;
+		};
 	}
 	/**
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
@@ -2318,10 +2335,13 @@ declare module 'svelte/reactivity' {
 		constructor(query: string, fallback?: boolean | undefined);
 	}
 	/**
-	 * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
-	 * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+	 * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+	 * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
+	 *
+	 * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+	 * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
 	 *
-	 * If `start` returns a function, it will be called when the effect is destroyed.
+	 * If `start` returns a cleanup function, it will be called when the effect is destroyed.
 	 *
 	 * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
 	 * are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -2349,6 +2369,7 @@ declare module 'svelte/reactivity' {
 	 * 	}
 	 *
 	 * 	get current() {
+	 * 		// This makes the getter reactive, if read in an effect
 	 * 		this.#subscribe();
 	 *
 	 * 		// Return the current state of the query, whether or not we're in an effect
@@ -3021,6 +3042,17 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
 		 */
 		warningFilter?: (warning: Warning_1) => boolean;
+		/**
+		 * Experimental options
+		 * @since 5.36
+		 */
+		experimental?: {
+			/**
+			 * Allow `await` keyword in deriveds, template expressions, and the top level of components
+			 * @since 5.36
+			 */
+			async?: boolean;
+		};
 	}
 	/**
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
@@ -3297,6 +3329,13 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * https://svelte.dev/docs/svelte/$effect#$effect.pending
+	 */
+	export function pending(): number;
+
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.
 	 *
@@ -3330,13 +3369,13 @@ declare namespace $effect {
 	 *   let count = $state(0);
 	 *
 	 *   const cleanup = $effect.root(() => {
-	 *	    $effect(() => {
-	 *				console.log(count);
-	 *			})
+	 *     $effect(() => {
+	 *       console.log(count);
+	 *     })
 	 *
-	 *      return () => {
-	 *        console.log('effect root cleanup');
-	 * 			}
+	 *     return () => {
+	 *       console.log('effect root cleanup');
+	 *     }
 	 *   });
 	 * </script>
 	 *
diff --git a/playgrounds/sandbox/Wrapper.svelte b/playgrounds/sandbox/Wrapper.svelte
new file mode 100644
index 0000000000..1fe82c1716
--- /dev/null
+++ b/playgrounds/sandbox/Wrapper.svelte
@@ -0,0 +1,9 @@
+<script>
+	import App from './src/App.svelte';
+</script>
+
+<svelte:boundary>
+	<App />
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/playgrounds/sandbox/index.html b/playgrounds/sandbox/index.html
index 845538abf0..639409b877 100644
--- a/playgrounds/sandbox/index.html
+++ b/playgrounds/sandbox/index.html
@@ -12,7 +12,13 @@
 
 		<script type="module">
 			import { mount, hydrate, unmount } from 'svelte';
-			import App from '/src/App.svelte';
+			import App from '/Wrapper.svelte';
+
+			globalThis.delayed = (v, ms = 1000) => {
+				return new Promise((f) => {
+					setTimeout(() => f(v), ms);
+				});
+			};
 
 			const root = document.getElementById('root');
 			const render = root.firstChild?.nextSibling ? hydrate : mount;
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 2029937f52..639b755020 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -76,7 +76,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 			dev: false,
 			filename: input,
 			generate,
-			runes: argv.values.runes
+			runes: argv.values.runes,
+			experimental: {
+				async: true
+			}
 		});
 
 		for (const warning of compiled.warnings) {
@@ -94,7 +97,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 				filename: input,
 				generate,
 				runes: argv.values.runes,
-				fragments: 'tree'
+				fragments: 'tree',
+				experimental: {
+					async: true
+				}
 			});
 
 			const output_js = `${cwd}/output/${generate}/${file}.tree.js`;
@@ -116,7 +122,10 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		const compiled = compileModule(source, {
 			dev: false,
 			filename: input,
-			generate
+			generate,
+			experimental: {
+				async: true
+			}
 		});
 
 		const output_js = `${cwd}/output/${generate}/${file}`;
diff --git a/playgrounds/sandbox/ssr-common.js b/playgrounds/sandbox/ssr-common.js
new file mode 100644
index 0000000000..db3e085508
--- /dev/null
+++ b/playgrounds/sandbox/ssr-common.js
@@ -0,0 +1,17 @@
+Promise.withResolvers ??= () => {
+	let resolve;
+	let reject;
+
+	const promise = new Promise((f, r) => {
+		resolve = f;
+		reject = r;
+	});
+
+	return { promise, resolve, reject };
+};
+
+globalThis.delayed = (v, ms = 1000) => {
+	return new Promise((f) => {
+		setTimeout(() => f(v), ms);
+	});
+};
diff --git a/playgrounds/sandbox/ssr-dev.js b/playgrounds/sandbox/ssr-dev.js
index 01ce14e266..e019b234a6 100644
--- a/playgrounds/sandbox/ssr-dev.js
+++ b/playgrounds/sandbox/ssr-dev.js
@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import polka from 'polka';
 import { createServer as createViteServer } from 'vite';
 import { render } from 'svelte/server';
+import './ssr-common.js';
 
 const PORT = process.env.PORT || '5173';
 
diff --git a/playgrounds/sandbox/ssr-prod.js b/playgrounds/sandbox/ssr-prod.js
index 1ed9435249..e8f74ee93a 100644
--- a/playgrounds/sandbox/ssr-prod.js
+++ b/playgrounds/sandbox/ssr-prod.js
@@ -3,6 +3,7 @@ import path from 'node:path';
 import polka from 'polka';
 import { render } from 'svelte/server';
 import App from './src/App.svelte';
+import './ssr-common.js';
 
 const { head, body } = render(App);
 
diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js
index 65f739bdb6..68ac605385 100644
--- a/playgrounds/sandbox/svelte.config.js
+++ b/playgrounds/sandbox/svelte.config.js
@@ -1,5 +1,9 @@
 export default {
 	compilerOptions: {
-		hmr: true
+		hmr: false,
+
+		experimental: {
+			async: true
+		}
 	}
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87fb2b2667..315d699e25 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.27.8
         version: 2.27.8
       '@sveltejs/eslint-config':
-        specifier: ^8.1.0
-        version: 8.1.0(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
+        specifier: ^8.3.3
+        version: 8.3.3(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
@@ -21,14 +21,17 @@ importers:
         specifier: ^20.11.5
         version: 20.12.7
       '@vitest/coverage-v8':
-        specifier: ^2.0.5
-        version: 2.0.5(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^2.1.9
+        version: 2.1.9(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       eslint:
         specifier: ^9.9.1
         version: 9.9.1
       eslint-plugin-lube:
         specifier: ^0.4.3
         version: 0.4.3
+      eslint-plugin-svelte:
+        specifier: ^3.11.0
+        version: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
       jsdom:
         specifier: 25.0.1
         version: 25.0.1
@@ -39,8 +42,8 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4
       prettier-plugin-svelte:
-        specifier: ^3.1.2
-        version: 3.1.2(prettier@3.2.4)(svelte@packages+svelte)
+        specifier: ^3.4.0
+        version: 3.4.0(prettier@3.2.4)(svelte@packages+svelte)
       svelte:
         specifier: workspace:^
         version: link:packages/svelte
@@ -737,16 +740,16 @@ packages:
     peerDependencies:
       acorn: ^8.9.0
 
-  '@sveltejs/eslint-config@8.1.0':
-    resolution: {integrity: sha512-cfgp4lPREYBjNd4ZzaP/jA85ufm7vfXiaV7h9vILXNogne80IbZRNhRCQ8XoOqTAOY/pChIzWTBuR8aDNMbAEA==}
+  '@sveltejs/eslint-config@8.3.3':
+    resolution: {integrity: sha512-vkrQgEmhokFEOpuTo7NlVXJJMJJGNzxjmkQCTkHSwIOdzQSUukDIJ4038IjdcnIERSIlo4OpLAydWLx52BVyQA==}
     peerDependencies:
       '@stylistic/eslint-plugin-js': '>= 1'
       eslint: '>= 9'
       eslint-config-prettier: '>= 9'
       eslint-plugin-n: '>= 17'
-      eslint-plugin-svelte: '>= 2.36'
+      eslint-plugin-svelte: '>= 3'
       typescript: '>= 5'
-      typescript-eslint: '>= 7.5'
+      typescript-eslint: '>= 8'
 
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2':
     resolution: {integrity: sha512-Yl9BWvEj+1j+8mICIAA04/Sx0wEHNL0n9pSIZFM8n4NWgLFmR3v41qX2k54J/r4LWE2YHTeNNH2WJqEUb3geEA==}
@@ -869,10 +872,14 @@ packages:
     resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitest/coverage-v8@2.0.5':
-    resolution: {integrity: sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==}
+  '@vitest/coverage-v8@2.1.9':
+    resolution: {integrity: sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ==}
     peerDependencies:
-      vitest: 2.0.5
+      '@vitest/browser': 2.1.9
+      vitest: 2.1.9
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -1205,24 +1212,24 @@ packages:
     peerDependencies:
       eslint: '>=8.23.0'
 
-  eslint-plugin-svelte@2.38.0:
-    resolution: {integrity: sha512-IwwxhHzitx3dr0/xo0z4jjDlb2AAHBPKt+juMyKKGTLlKi1rZfA4qixMwnveU20/JTHyipM6keX4Vr7LZFYc9g==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-svelte@3.11.0:
+    resolution: {integrity: sha512-KliWlkieHyEa65aQIkRwUFfHzT5Cn4u3BQQsu3KlkJOs7c1u7ryn84EWaOjEzilbKgttT4OfBURA8Uc4JBSQIw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.112
+      eslint: ^8.57.1 || ^9.0.0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
   eslint-scope@8.0.2:
     resolution: {integrity: sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1396,14 +1403,14 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.14.0:
-    resolution: {integrity: sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==}
-    engines: {node: '>=18'}
-
   globals@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
+  globals@16.3.0:
+    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
+    engines: {node: '>=18'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1585,8 +1592,8 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  known-css-properties@0.30.0:
-    resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==}
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -1683,8 +1690,8 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  magicast@0.3.4:
-    resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
@@ -1882,11 +1889,11 @@ packages:
       ts-node:
         optional: true
 
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.31
 
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
@@ -1894,8 +1901,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
   postcss@8.5.3:
@@ -1906,8 +1913,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-svelte@3.1.2:
-    resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==}
+  prettier-plugin-svelte@3.4.0:
+    resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
@@ -2117,9 +2124,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.3.0:
+    resolution: {integrity: sha512-VCgMHKV7UtOGcGLGNFSbmdm6kEKjtzo5nnpGU/mnx4OsFY6bZ7QwRF5DUx+Hokw5Lvdyo8dpk8B1m8mliomrNg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
@@ -2994,14 +3001,14 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  '@sveltejs/eslint-config@8.1.0(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)':
+  '@sveltejs/eslint-config@8.3.3(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.9.1)
       eslint: 9.9.1
       eslint-config-prettier: 9.1.0(eslint@9.9.1)
       eslint-plugin-n: 17.16.1(eslint@9.9.1)(typescript@5.5.4)
-      eslint-plugin-svelte: 2.38.0(eslint@9.9.1)(svelte@packages+svelte)
-      globals: 15.14.0
+      eslint-plugin-svelte: 3.11.0(eslint@9.9.1)(svelte@packages+svelte)
+      globals: 15.15.0
       typescript: 5.5.4
       typescript-eslint: 8.26.0(eslint@9.9.1)(typescript@5.5.4)
 
@@ -3121,7 +3128,7 @@ snapshots:
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-api-utils: 2.0.1(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
@@ -3173,7 +3180,7 @@ snapshots:
       '@typescript-eslint/types': 8.32.1
       eslint-visitor-keys: 4.2.0
 
-  '@vitest/coverage-v8@2.0.5(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -3183,7 +3190,7 @@ snapshots:
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.1.7
       magic-string: 0.30.17
-      magicast: 0.3.4
+      magicast: 0.3.5
       std-env: 3.8.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
@@ -3528,33 +3535,30 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte):
+  eslint-plugin-svelte@3.11.0(eslint@9.9.1)(svelte@packages+svelte):
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.9.1)
       '@jridgewell/sourcemap-codec': 1.5.0
-      debug: 4.4.0
       eslint: 9.9.1
-      eslint-compat-utils: 0.5.1(eslint@9.9.1)
       esutils: 2.0.3
-      known-css-properties: 0.30.0
+      globals: 16.3.0
+      known-css-properties: 0.37.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
-      postcss-safe-parser: 6.0.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
+      postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.2
-      svelte-eslint-parser: 0.43.0(svelte@packages+svelte)
+      svelte-eslint-parser: 1.3.0(svelte@packages+svelte)
     optionalDependencies:
       svelte: link:packages/svelte
     transitivePeerDependencies:
-      - supports-color
       - ts-node
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.0.2:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.0.2:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -3765,10 +3769,10 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.14.0: {}
-
   globals@15.15.0: {}
 
+  globals@16.3.0: {}
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -3967,7 +3971,7 @@ snapshots:
 
   kleur@4.1.5: {}
 
-  known-css-properties@0.30.0: {}
+  known-css-properties@0.37.0: {}
 
   levn@0.4.1:
     dependencies:
@@ -4045,7 +4049,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  magicast@0.3.4:
+  magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.25.4
       '@babel/types': 7.25.4
@@ -4053,7 +4057,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   merge2@1.4.1: {}
 
@@ -4205,7 +4209,7 @@ snapshots:
     optionalDependencies:
       postcss: 8.5.3
 
-  postcss-safe-parser@6.0.0(postcss@8.5.3):
+  postcss-safe-parser@7.0.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
@@ -4213,7 +4217,7 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -4226,7 +4230,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@packages+svelte):
+  prettier-plugin-svelte@3.4.0(prettier@3.2.4)(svelte@packages+svelte):
     dependencies:
       prettier: 3.2.4
       svelte: link:packages/svelte
@@ -4438,13 +4442,14 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-eslint-parser@0.43.0(svelte@packages+svelte):
+  svelte-eslint-parser@1.3.0(svelte@packages+svelte):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.1.0
       postcss: 8.5.3
       postcss-scss: 4.0.9(postcss@8.5.3)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
       svelte: link:packages/svelte
 
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000000..442cd7892c
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,8 @@
+// we need this so the VS Code extension doesn't yell at us
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
diff --git a/vitest.config.js b/vitest.config.js
index caeda27e30..ba1edb355b 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -39,7 +39,7 @@ export default defineConfig({
 			provider: 'v8',
 			reporter: ['lcov', 'html'],
 			include: ['packages/svelte/src/**'],
-			reportsDirectory: 'sites/svelte-5-preview/static/coverage',
+			reportsDirectory: 'coverage',
 			reportOnFailure: true
 		}
 	}